From 29c0462e0854c056e2b112b53157514b341516e1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 22 Nov 2024 10:58:03 +0100 Subject: [PATCH 1/3] add failing test --- integrations/cli/index.test.ts | 66 +++++++++++++------------- packages/tailwindcss/src/index.test.ts | 23 +++++++++ 2 files changed, 57 insertions(+), 32 deletions(-) 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; + } + }" + `) +}) From f8457b98889f430e583a1f4c90c86fd7cc4a250a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 22 Nov 2024 10:59:02 +0100 Subject: [PATCH 2/3] =?UTF-8?q?ensure=20`layer(=E2=80=A6)`=20and=20`source?= =?UTF-8?q?(=E2=80=A6)`=20work=20together?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If it was _just_ `@import "foo" layer(…)`, then the import handling converted the `@media layer(…)` to `@layer …` already. But if there are more properties than that's not the case --- packages/tailwindcss/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) 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) From 9fd7290be13e3aef0413b64d04cd55cb1b01ea0e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 22 Nov 2024 11:05:02 +0100 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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