add support for esm tailwind config

Author: heidkaemper

src/Breakpoints/Breakpoints.php

@@ -47,6 +47,7 @@ private function getFromTailwind(): self
 
         $files = [
             'tailwind.config.js',
+            'tailwind.config.ts',
             'tailwind.config.theme.js',
             'tailwind.config.site.js',
         ];

src/Breakpoints/Parser/TailwindParser.php

@@ -64,7 +64,9 @@ private function parseConfigFile($filename): void
 
         $source = file_get_contents(base_path($filename));
 
-        $ast = Peast::latest($source)->parse();
+        $ast = Peast::latest($source, [
+            'sourceType' => Peast::SOURCE_TYPE_MODULE,
+        ])->parse();
 
         // search for 'screens' config
         $query = $ast->query("Property[key.name='screens']");

tests/Feature/TailwindBreakpointsTest.php

@@ -66,3 +66,12 @@
         '2xl' => 'min-width: 1536px',
     ]);
 });
+
+it('returns user values when using an esm config', function () {
+    copy(__DIR__ . '/../stubs/tailwindcss/esmConfig.stub.js', $this->config);
+
+    expect($this->parser->parse())->toBe([
+        'test' => 'min-width: 123px',
+        'test-max' => 'max-width: 456px',
+    ]);
+});

tests/stubs/tailwindcss/esmConfig.stub.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [],
+    theme: {
+        extend: {
+            colors: {
+                hotPink: '#FF269E',
+            },
+        },
+        screens: {
+            test: '123px',
+            'test-max': { 'max': '456px' },
+        },
+    },
+    plugins: [],
+}