diff --git a/CHANGELOG.md b/CHANGELOG.md index 9363fa3b4f0e..11119d7f608f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index c6eac6fa782f..1ed00ed53212 100644 --- a/integrations/cli/index.test.ts +++ b/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 { diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index ece3d78f8324..68f12d291fb6 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/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; + } + }" + `) +}) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 04e9bb99d9e4..365334e07bda 100644 --- a/packages/tailwindcss/src/index.ts +++ b/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)