Ensure @import layer(…) source(…) work together

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `@import layer(…) source(…)` work together ([#15084](https://github.com/tailwindlabs/tailwindcss/pull/15084))
 
 ## [4.0.0-beta.1] - 2024-11-21
 

integrations/cli/index.test.ts

@@ -433,7 +433,7 @@ test(
         /* - Only './src' should be auto-scanned, not the current working directory */
         /* - .gitignore'd paths should be ignored (node_modules) */
         /* - Binary extensions should be ignored (jpg, zip) */
-        @import 'tailwindcss/utilities' source('./src');
+        @import 'tailwindcss/utilities' source('./src') layer(utilities);
 
         /* (2) */
         /* - All HTML and JSX files in 'ignored/components' should be scanned */
@@ -497,37 +497,39 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
-      .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"components\\/nested\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/nested/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.html\\"\\] {
-        --tw-content: "ignored/components/my-component.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.jsx\\"\\] {
-        --tw-content: "ignored/components/my-component.jsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/foo\\.html\\"\\] {
-        --tw-content: "pages/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
-        --tw-content: "pages/nested/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/index\\.html\\"\\] {
-        --tw-content: "src/index.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/nested\\/index\\.html\\"\\] {
-        --tw-content: "src/nested/index.html";
-        content: var(--tw-content);
+      @layer utilities {
+        .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
+          --tw-content: "components/my-component.tsx";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"components\\/nested\\/my-component\\.tsx\\"\\] {
+          --tw-content: "components/nested/my-component.tsx";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"ignored\\/components\\/my-component\\.html\\"\\] {
+          --tw-content: "ignored/components/my-component.html";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"ignored\\/components\\/my-component\\.jsx\\"\\] {
+          --tw-content: "ignored/components/my-component.jsx";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"pages\\/foo\\.html\\"\\] {
+          --tw-content: "pages/foo.html";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
+          --tw-content: "pages/nested/foo.html";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"src\\/index\\.html\\"\\] {
+          --tw-content: "src/index.html";
+          content: var(--tw-content);
+        }
+        .content-\\[\\"src\\/nested\\/index\\.html\\"\\] {
+          --tw-content: "src/nested/index.html";
+          content: var(--tw-content);
+        }
       }
       @supports (-moz-orient: inline) {
         @layer base {

packages/tailwindcss/src/index.test.ts

@@ -3045,3 +3045,26 @@ test('addBase', async () => {
     }"
   `)
 })
+
+test('source(…) and layer(…) work together', async () => {
+  let { build } = await compile(
+    css`
+      @import 'tailwindcss/utilities' source('./paths') layer(utilities);
+    `,
+    {
+      async loadStylesheet(_id, _base) {
+        return { base: '', content: '@tailwind utilities;' }
+      },
+    },
+  )
+
+  let compiled = build(['underline'])
+
+  expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+    "@layer utilities {
+      .underline {
+        text-decoration-line: underline;
+      }
+    }"
+  `)
+})

packages/tailwindcss/src/index.ts

@@ -337,6 +337,11 @@ async function parseCss(
           important = true
         }
 
+        // Handle layer(…)
+        else if (param.startsWith('layer(')) {
+          node.nodes = [atRule('@layer', param.slice(6, -1), node.nodes)]
+        }
+
         //
         else {
           unknownParams.push(param)