From 5835691d210b1c530160c844a562c36fa5fcbdb3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 7 Jul 2026 18:28:41 +0200 Subject: [PATCH] Handle CSS nesting natively (#20124) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR introduces a new feature where we will be handling the CSS nesting ourselves. We currently still rely on Lightning CSS in most places. But there are situations where we don't use Lightning CSS out of the box: 1. During development, typically optimization/minification isn't setup 2. In places where it isn't as easy to run Lightning CSS such as in `@tailwindcss/browser` or in Tailwind Play. We handle CSS nesting in a single pass over the AST by tracking some information as we go. It's not the most complex code, but there are some tricky parts to make this happen in an efficient way, especially for the few additional optimizations we handle. While going over the AST, we will only emit CSS the moment we see declarations or comments. This also means that this has a fun side effect of removing CSS that ends up with empty nodes automatically. (Caveat: there are exceptions for body-less rules such as `@layer foo;` or `@charset "UTF-8";) This also allowed us to do some cleanup in `optimizeAst` that tried to do this as well, but now this will be handled by the code that handles nesting automatically. Which is preferred because the version in `optimizeAst` mutated the AST. This also contains some optimizations where we merge adjacent at-rules (with the same name / params), and adjacent rules with the same selector, and get rid of declarations that are duplicated in a node. (Caveat: there are exceptions, in case of `@font-family { … }` where we don't want to merge them) ~~To ensure that this implementation is correct, I also added an oracle implementation in the tests. This implementation does multiple passes over the AST, because it does each step one by one, with minimal code. Each step contains comments with examples to see what's happening in that step. We then test the optimized version against this.~~ Once the implementation was in place, and all the tests were passing, then I deleted the oracle implementation. That way we don't have to keep it in sync all the time. While handling the nesting, we have to make sure that `&` exists and if we replace it with a parent selector that we do use `:is(…)` semantics. This means that: ```css .foo { &:hover { color: red; } } ``` Becomes: ```css :is(.foo):hover { color: red; } ``` We then also make sure that we optimize the selector by removing the unnecessary `:is(…)` wrappers, but only if they were introduced by the nesting logic. If _you_ wrote `:is(…)` in your CSS, we won't touch it. If you look at the commits, the first thing we did is remove the optimization step from Lightning CSS in the tests. Then we enabled our CSS nesting handling code. This allows us to see the effect of the changes we are making. At the end, we re-enabled Lightning CSS. For now, this PR will be a step that happens before Lightning CSS is executed, while still using Lightning CSS. But now this step will also always happen in places where we don't use Lightning CSS at all. This should not result in any breaking changes. It could result in changed CSS output in environments where Lightning CSS isn't used. In environments where it is being used, then there could be some differences related to some selectors but they should result in the same behavior with the same specificity. While testing things, I noticed that there are some missed opportunities for performance related to how we extract variables from declaration values. I want to tackle `optimizeAst` in future PRs to make it simpler, more performant, and maybe even merge it with the CSS nesting handling. As part of testing this, I tested it against the tailwindcss.com codebase which contains a lot of CSS (807.67 KB, 18 174 AST nodes) because almost every utility is being used in examples. The oracle implementation is rather slow: ``` [131.59ms] ↳ oracle (step by step) [129.23ms] ↳ handleNesting(…) [ 2.32ms] ↳ toCss(…) ``` But the final code is much faster (`<15ms`): ``` [ 10.11ms] ↳ hand written (single pass) [ 8.40ms] ↳ handleNesting(…) [ 1.67ms] ↳ toCss(…) ``` In contrast, Lightning CSS takes: `[ 37.48ms] Optimized by Lightning CSS` One interesting thing to notice is that in big projects, this could add `10ms` to the build, but Lightning CSS would then take less time to process, which results in a no-op with better output. One thing to keep in mind here is that Lightning CSS does more things, such as normalizing values, handling vendor prefixes, CSS nesting, etc.
Some notes on how the algorithm works: ### The basic idea When you have CSS that looks this: ```css .foo { .bar { color: red; } } ``` Then the AST looks like this: ``` [ { kind: 'rule', selector: '.foo', nodes: [ { kind: 'rule', selector: '.bar', nodes: [ { kind: 'declaration', property: 'color', value: 'red', important: false } ] } ] } ] ``` When we walk this tree, and we encounter a `rule`, then we will track the selector on a stack. When we are done walking over the rule, then we will pop the selector from the stack. This means that the top-most selector on the stack will always be the parent selector. ```ts let selectorStack = [] walk(ast, { enter(node) { selectorStack.push(node.selector) }, exit(node) { selectorStack.pop() }, }) ``` The moment we encounter a `rule`, and if a previous rule was seen, then we push the `selector` of the rule onto the stack, but in a way that the `&` is already replaced by the selector. This way, a sibling rule will also get the already-prepared parent selector. The simple version looks like this: ```ts walk(ast, { enter(node) { // In the real code we properly handle `&` replacement, and make sure that // parent selector is prepended if there is no `&` used in the selector of the // node. let selector = selectorStack.length > 0 // At this point, we don't optimize anything related to the selector yet ? node.selector.replaceAll('&', `:is(${selectorStack.at(-1)})`) : node.selector selectorStack.push(selector) }, exit(node) { selectorStack.pop() }, }) ``` So far we aren't doing much yet, but the interesting part is when we encounter a `declaration` (or a `comment`). The moment we see any of those, then will we emit a node with the information from the `selectorStack`. We then also track the last node's `nodes` we created such that we can push more declarations into it as a shortcut. ```ts let result: AstNode[] = [] let nodes: AstNode[] | null = null walk(ast, { enter(node) { if (node.kind === 'declaration') { // `nodes` is available, nothing special to do if (nodes) { nodes.push(node) return } // Track new nodes let nodes = [node] // Create a new node with a reference to `nodes` for future declarations let newNode = rule(selectorStack.at(-1), nodes) result.push(newNode) } }, }) ``` The last important part is that whenever we see a new `rule`, then we have to reset that `nodes` tracking variable such that we can create a fresh node the next time we see a declaration. For the `at-rules`, something similar happens but they are tracked in a similar but separate stack. The idea there is that we can then wrap those `at-rules` around the `newNode` we create. That way the at-rules naturally float to the top. I can keep going here, but I think if you're interested in this, then you could go over the commits in this PR, or you can look at the `ast.ts` implementation directly to see what's going on.
## Test plan 1. Existing tests should pass 2. New tests have been added to test the flattening of nested CSS --- CHANGELOG.md | 1 + integrations/cli/plugins.test.ts | 12 +- integrations/vite/index.test.ts | 42 +- integrations/vite/resolvers.test.ts | 4 +- packages/tailwindcss/src/ast.test.ts | 1315 ++++++++++++----- packages/tailwindcss/src/ast.ts | 714 ++++++++- .../src/attribute-selector-parser.test.ts | 5 + .../src/attribute-selector-parser.ts | 3 + .../tailwindcss/src/compat/config.test.ts | 52 +- .../tailwindcss/src/compat/plugin-api.test.ts | 37 +- packages/tailwindcss/src/compat/plugin-api.ts | 9 +- packages/tailwindcss/src/intellisense.test.ts | 88 +- .../tailwindcss/src/selector-parser.test.ts | 33 +- packages/tailwindcss/src/selector-parser.ts | 122 +- .../src/source-maps/source-map.test.ts | 32 +- packages/tailwindcss/src/utilities.test.ts | 96 +- packages/tailwindcss/src/utils/variables.ts | 7 +- packages/tailwindcss/src/variants.test.ts | 9 + packages/tailwindcss/src/variants.ts | 27 +- 19 files changed, 2037 insertions(+), 571 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f20f7cd14..baad68046 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure fractional opacity modifiers work with named shadow sizes like `shadow-sm/12.5`, `text-shadow-sm/12.5`, `drop-shadow-sm/12.5`, and `inset-shadow-sm/12.5` ([#20302](https://github.com/tailwindlabs/tailwindcss/pull/20302)) - Fix parsing selectors like `[data-foo]div` as one selector instead of two ([#20303](https://github.com/tailwindlabs/tailwindcss/pull/20303)) - Fix stale `@tailwindcss/postcss` output when changed input CSS is passed from a preprocessor like Sass without updating the input file on disk ([#20310](https://github.com/tailwindlabs/tailwindcss/pull/20310)) +- Ensure CSS nesting is handled even when Lightning CSS isn't run, like in `@tailwindcss/browser` and Tailwind Play ([#20124](https://github.com/tailwindlabs/tailwindcss/pull/20124)) ## [4.3.2] - 2026-06-26 diff --git a/integrations/cli/plugins.test.ts b/integrations/cli/plugins.test.ts index 4cda7955a..0b810c538 100644 --- a/integrations/cli/plugins.test.ts +++ b/integrations/cli/plugins.test.ts @@ -109,13 +109,11 @@ test( expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(` " --- dist/out.css --- - .prose-custom { - :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - --x: 1; - @media (width >= 640px) { - &.custom { - --x: 2; - } + .prose-custom :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + --x: 1; + @media (width >= 640px) { + &.custom { + --x: 2; } } } diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts index bb237e6cd..34940c74e 100644 --- a/integrations/vite/index.test.ts +++ b/integrations/vite/index.test.ts @@ -1145,7 +1145,7 @@ test( -
Hello, world!
+
Hello, world!
`, 'src/index.css': css` @@ -1157,16 +1157,16 @@ test( async ({ exec, expect, fs }) => { await exec('pnpm vite build') - let files = await fs.glob('dist/**/*.css') - expect(files).toHaveLength(1) - let [filename] = files[0] - // Should not be minified when optimize is disabled - let content = await fs.read(filename) - expect(content).toContain('.hover\\:flex {') - expect(content).toContain('&:hover {') - expect(content).toContain('@media (hover: hover) {') - expect(content).toContain('display: flex;') + expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-.css')) + .toMatchInlineSnapshot(` + " + --- dist/assets/index-.css --- + .focus\\:text-\\[black\\]:focus { + color: black; + } + " + `) }, ) @@ -1200,7 +1200,7 @@ test( -
Hello, world!
+
Hello, world!
`, 'src/index.css': css` @@ -1212,15 +1212,17 @@ test( async ({ exec, expect, fs }) => { await exec('pnpm vite build') - let files = await fs.glob('dist/**/*.css') - expect(files).toHaveLength(1) - let [filename] = files[0] - - // Should be optimized but not minified - let content = await fs.read(filename) - expect(content).toContain('@media (hover: hover) {') - expect(content).toContain('.hover\\:flex:hover {') - expect(content).toContain('display: flex;') + expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-.css')) + .toMatchInlineSnapshot(` + " + --- dist/assets/index-.css --- + @media (hover: hover) { + .hover\\:text-\\[black\\]:hover { + color: #000; + } + } + " + `) }, ) diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts index a96b26ed1..fc9aca5c7 100644 --- a/integrations/vite/resolvers.test.ts +++ b/integrations/vite/resolvers.test.ts @@ -572,7 +572,7 @@ test( await exec('pnpm vite build') expect( - (await fs.dumpFiles('./dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css'), + (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-.css'), ).toMatchInlineSnapshot(` " --- ./dist/assets/index-.css --- @@ -643,7 +643,7 @@ test( await exec('pnpm vite build') expect( - (await fs.dumpFiles('./dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css'), + (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-.css'), ).toMatchInlineSnapshot(` " --- ./dist/assets/index-.css --- diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 24f31f7bb..f3499b350 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -1,26 +1,28 @@ -import { expect, it } from 'vitest' +import { describe, expect, it, test } from 'vitest' import { - atRule, context, cssContext, decl, + handleNesting, optimizeAst, + rule, styleRule, toCss, type AstNode, } from './ast' import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' +import { pretty } from './test-utils/run' import { Theme } from './theme' -import { walk, WalkAction } from './walk' +import { walk } from './walk' const css = String.raw const defaultDesignSystem = buildDesignSystem(new Theme()) it('should pretty print an AST', () => { - expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem))) - .toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))).toMatchInlineSnapshot(` + " + .foo { color: red; &:hover { color: blue; @@ -68,8 +70,9 @@ it('allows the placement of context nodes', () => { expect(blueContext).toEqual({ context: 'a' }) expect(greenContext).toEqual({ context: 'b' }) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + .foo { color: red; } .bar { @@ -82,36 +85,6 @@ it('allows the placement of context nodes', () => { `) }) -it('should stop walking when returning `WalkAction.Stop`', () => { - let ast = [ - styleRule('.foo', [styleRule('.nested', [styleRule('.bail', [decl('color', 'red')])])]), - styleRule('.bar'), - styleRule('.baz'), - styleRule('.qux'), - ] - - let seen = new Set() - - walk(ast, (node) => { - if (node.kind === 'rule') { - seen.add(node.selector) - } - - if (node.kind === 'rule' && node.selector === '.bail') { - return WalkAction.Stop - } - }) - - // We do not want to see `.bar`, `.baz`, or `.qux` because we bailed early - expect(seen).toMatchInlineSnapshot(` - Set { - ".foo", - ".nested", - ".bail", - } - `) -}) - it('should not emit empty rules once optimized', () => { let ast = CSS.parse(css` /* Empty rule */ @@ -154,13 +127,15 @@ it('should not emit empty rules once optimized', () => { /* Exceptions: */ @charset "UTF-8"; @layer foo, bar, baz; + @layer foo, bar, baz; /* Will be deduped */ @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); `) - expect(toCss(ast)).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(ast))).toMatchInlineSnapshot(` + " + .foo { } .foo { .bar { @@ -187,14 +162,16 @@ it('should not emit empty rules once optimized', () => { } @charset "UTF-8"; @layer foo, bar, baz; + @layer foo, bar, baz; @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); " `) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - "@charset "UTF-8"; + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + @charset "UTF-8"; @layer foo, bar, baz; @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @@ -235,8 +212,9 @@ it('should not emit exact duplicate declarations in the same rule', () => { } `) - expect(toCss(ast)).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(ast))).toMatchInlineSnapshot(` + " + .foo { color: red; .bar { color: green; @@ -267,20 +245,27 @@ it('should not emit exact duplicate declarations in the same rule', () => { " `) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + .foo { .bar { + color: green; color: blue; color: green; } color: red; - } - .foo { - color: green; - color: blue; - color: red; + & { + color: green; + & { + color: red; + color: green; + color: blue; + } + color: red; + } background: blue; .bar { + color: green; color: blue; color: green; } @@ -307,8 +292,9 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => { let design = buildDesignSystem(theme) - expect(toCss(optimizeAst(ast, design))).toMatchInlineSnapshot(` - "@keyframes my-animation { + expect(pretty(toCss(optimizeAst(ast, design)))).toMatchInlineSnapshot(` + " + @keyframes my-animation { 0% { color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent); } @@ -320,303 +306,936 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => { `) }) -it('should only visit children once when calling `replaceWith` with single element array', () => { - let visited = new Set() +describe('optimization', () => { + function optimize(input: string) { + return pretty(toCss(handleNesting(CSS.parse(input)))) + } - let ast: AstNode[] = [ - atRule('@media', '', [styleRule('.foo', [decl('color', 'blue')])]), - styleRule('.bar', [decl('color', 'blue')]), - ] + // See: https://drafts.csswg.org/css-nesting-1/ + describe('CSS Nesting Module Level 1', () => { + it('uses the descendant combinator by default', async () => { + expect( + optimize(css` + .a { + element { + --x: 1; + } + .class { + --x: 2; + } + #id { + --x: 3; + } + :pseudo-class { + --x: 4; + } + ::pseudo-element { + --x: 5; + } + [attribute] { + --x: 6; + } + * { + --x: 7; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a element { + --x: 1; + } + .a .class { + --x: 2; + } + .a #id { + --x: 3; + } + .a :pseudo-class { + --x: 4; + } + .a ::pseudo-element { + --x: 5; + } + .a [attribute] { + --x: 6; + } + .a * { + --x: 7; + } + " + `) + }) - walk(ast, (node) => { - if (visited.has(node)) { - throw new Error('Visited node twice') - } - visited.add(node) + it('should be possible to change the combinator', async () => { + expect( + optimize(css` + .a { + + .b { + --x: 1; + } + > .c { + --x: 2; + } + ~ .d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a + .b { + --x: 1; + } + .a > .c { + --x: 2; + } + .a ~ .d { + --x: 3; + } + " + `) + }) - if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes) + it('should replace the first rule, that contains `&` with `:scope`', async () => { + expect( + optimize(css` + /* Standalone */ + & { + --x: 1; + } + + /* In an at-rule */ + @supports (--y: 1) { + & { + --x: 2; + } + } + + /* With :is(…) */ + :is(&) { + --x: 3; + } + + /* In an at-rule, with :is(…) */ + @supports (--y: 2) { + :is(&) { + --x: 4; + } + } + + /* With multiple selectors */ + &, + .a { + --x: 5; + } + + /* With multiple selectors + :is(…) */ + :is(&), + .b { + --x: 6; + } + + /* With multiple selectors in an at-rule */ + @supports (--y: 3) { + &, + .c { + --x: 7; + } + } + + /* With multiple selectors in an at-rule + :is(…) */ + @supports (--y: 4) { + :is(&), + .d { + --x: 8; + } + } + `), + ).toMatchInlineSnapshot(` + " + :scope { + --x: 1; + } + @supports (--y: 1) { + :scope { + --x: 2; + } + } + :is(:scope) { + --x: 3; + } + @supports (--y: 2) { + :is(:scope) { + --x: 4; + } + } + :scope, .a { + --x: 5; + } + :is(:scope), .b { + --x: 6; + } + @supports (--y: 3) { + :scope, .c { + --x: 7; + } + } + @supports (--y: 4) { + :is(:scope), .d { + --x: 8; + } + } + " + `) + }) + + it('should be possible to use `&` to explicitly match the parent', async () => { + expect( + optimize(css` + .a { + & + .b { + --x: 1; + } + & > .c { + --x: 2; + } + & ~ .d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a + .b { + --x: 1; + } + .a > .c { + --x: 2; + } + .a ~ .d { + --x: 3; + } + " + `) + }) + + it('should be possible to use `&` in a different location', async () => { + expect( + optimize(css` + .a { + .b & { + --x: 1; + } + .c + & { + --x: 2; + } + .d > & { + --x: 3; + } + .e ~ & { + --x: 4; + } + } + `), + ).toMatchInlineSnapshot(` + " + .b .a { + --x: 1; + } + .c + .a { + --x: 2; + } + .d > .a { + --x: 3; + } + .e ~ .a { + --x: 4; + } + " + `) + }) + + it('should be possible to use `&` on its own', async () => { + expect( + optimize(css` + .a { + & { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` nested in `:is(…)`', async () => { + expect( + optimize(css` + .a { + :is(&) { + --x: 1; + } + :is(:is(:is(&))) { + --x: 2; + } + } + `), + ).toMatchInlineSnapshot(` + " + :is(.a) { + --x: 1; + } + :is(:is(:is(.a))) { + --x: 2; + } + " + `) + }) + + it('should be possible to handle nesting with a parent selector list', async () => { + expect( + optimize(css` + .a, + .b { + .c, + .d & { + --x: 1; + &:hover { + --x: 2; + } + } + } + `), + ).toMatchInlineSnapshot(` + " + :is(.a, .b) .c, .d :is(.a, .b) { + --x: 1; + &:hover { + --x: 2; + } + } + " + `) + }) + + it('should not replace `\&`', () => { + expect( + optimize(css` + .a { + .b-\& { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a .b-\\& { + --x: 1; + } + " + `) + }) + + it('should not replace `&` as part of a string', () => { + expect( + optimize(css` + .a { + [data-b='c&d'] { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a [data-b='c&d'] { + --x: 1; + } + " + `) + }) + + it.each([ + ['element', '&element', ':is(element)element'], // Invalid CSS + ['element', 'element&', 'element:is(element)'], + ['element', '&.class', 'element.class'], + ['element', '.class&', '.class:is(element)'], // Optimization: element.class + ['element', '&#id', 'element#id'], + ['element', '#id&', '#id:is(element)'], // Optimization: element#id + ['element', '&:hover', 'element:hover'], + ['element', ':hover&', ':hover:is(element)'], + ['element', '&::before', 'element::before'], + ['element', '::before&', '::before:is(element)'], // Invalid CSS + ['element', '&:not(.x)', 'element:not(.x)'], + ['element', ':not(.x)&', ':not(.x):is(element)'], // Optimization: element:not(.x) + ['element', '&[attribute]', 'element[attribute]'], + ['element', '[attribute]&', '[attribute]:is(element)'], // Optimization: element[attribute] + ['element', '&*', ':is(element)*'], // Invalid CSS + ['element', '*&', 'element'], + + ['.class', '&element', ':is(.class)element'], // Invalid CSS + ['.class', 'element&', 'element.class'], + ['.class', '&.class', '.class.class'], + ['.class', '.class&', '.class.class'], + ['.class', '&#id', '.class#id'], + ['.class', '#id&', '#id.class'], + ['.class', '&:hover', '.class:hover'], + ['.class', ':hover&', ':hover.class'], + ['.class', '&::before', '.class::before'], + ['.class', '::before&', '::before.class'], // Invalid CSS + ['.class', '&:not(.x)', '.class:not(.x)'], + ['.class', ':not(.x)&', ':not(.x).class'], + ['.class', '&[attribute]', '.class[attribute]'], + ['.class', '[attribute]&', '[attribute].class'], + ['.class', '&*', ':is(.class)*'], // Invalid CSS + ['.class', '*&', '.class'], + + ['#id', '&element', ':is(#id)element'], // Invalid CSS + ['#id', 'element&', 'element#id'], + ['#id', '&.class', '#id.class'], + ['#id', '.class&', '.class#id'], + ['#id', '&#id', '#id#id'], + ['#id', '#id&', '#id#id'], + ['#id', '&:hover', '#id:hover'], + ['#id', ':hover&', ':hover#id'], + ['#id', '&::before', '#id::before'], + ['#id', '::before&', '::before#id'], // Invalid CSS + ['#id', '&:not(.x)', '#id:not(.x)'], + ['#id', ':not(.x)&', ':not(.x)#id'], + ['#id', '&[attribute]', '#id[attribute]'], + ['#id', '[attribute]&', '[attribute]#id'], + ['#id', '&*', ':is(#id)*'], // Invalid CSS + ['#id', '*&', '#id'], + + [':hover', '&element', ':is(:hover)element'], // Invalid CSS + [':hover', 'element&', 'element:hover'], + [':hover', '&.class', ':hover.class'], + [':hover', '.class&', '.class:hover'], + [':hover', '&#id', ':hover#id'], + [':hover', '#id&', '#id:hover'], + [':hover', '&:hover', ':hover:hover'], + [':hover', ':hover&', ':hover:hover'], + [':hover', '&::before', ':hover::before'], + [':hover', '::before&', '::before:hover'], + [':hover', '&:not(.x)', ':hover:not(.x)'], + [':hover', ':not(.x)&', ':not(.x):hover'], + [':hover', '&[attribute]', ':hover[attribute]'], + [':hover', '[attribute]&', '[attribute]:hover'], + [':hover', '&*', ':is(:hover)*'], // Invalid CSS + [':hover', '*&', ':hover'], + + ['::before', '&element', ':is(::before)element'], // Invalid CSS + ['::before', 'element&', 'element::before'], + ['::before', '&.class', '::before.class'], + ['::before', '.class&', '.class::before'], + ['::before', '&#id', '::before#id'], + ['::before', '#id&', '#id::before'], + ['::before', '&:hover', '::before:hover'], + ['::before', ':hover&', ':hover::before'], + ['::before', '&::before', '::before::before'], + ['::before', '::before&', '::before::before'], + ['::before', '&:not(.x)', '::before:not(.x)'], + ['::before', ':not(.x)&', ':not(.x)::before'], + ['::before', '&[attribute]', '::before[attribute]'], + ['::before', '[attribute]&', '[attribute]::before'], + ['::before', '&*', ':is(::before)*'], // Invalid CSS + ['::before', '*&', '::before'], + + [':not(.x)', '&element', ':is(:not(.x))element'], // Invalid CSS + [':not(.x)', 'element&', 'element:not(.x)'], + [':not(.x)', '&.class', ':not(.x).class'], + [':not(.x)', '.class&', '.class:not(.x)'], + [':not(.x)', '&#id', ':not(.x)#id'], + [':not(.x)', '#id&', '#id:not(.x)'], + [':not(.x)', '&:hover', ':not(.x):hover'], + [':not(.x)', ':hover&', ':hover:not(.x)'], + [':not(.x)', '&::before', ':not(.x)::before'], + [':not(.x)', '::before&', '::before:not(.x)'], + [':not(.x)', '&:not(.x)', ':not(.x):not(.x)'], + [':not(.x)', ':not(.x)&', ':not(.x):not(.x)'], + [':not(.x)', '&[attribute]', ':not(.x)[attribute]'], + [':not(.x)', '[attribute]&', '[attribute]:not(.x)'], + [':not(.x)', '&*', ':is(:not(.x))*'], // Invalid CSS + [':not(.x)', '*&', ':not(.x)'], + + ['[attribute]', '&element', ':is([attribute])element'], // Invalid CSS + ['[attribute]', 'element&', 'element[attribute]'], + ['[attribute]', '&.class', '[attribute].class'], + ['[attribute]', '.class&', '.class[attribute]'], + ['[attribute]', '&#id', '[attribute]#id'], + ['[attribute]', '#id&', '#id[attribute]'], + ['[attribute]', '&:hover', '[attribute]:hover'], + ['[attribute]', ':hover&', ':hover[attribute]'], + ['[attribute]', '&::before', '[attribute]::before'], + ['[attribute]', '::before&', '::before[attribute]'], + ['[attribute]', '&:not(.x)', '[attribute]:not(.x)'], + ['[attribute]', ':not(.x)&', ':not(.x)[attribute]'], + ['[attribute]', '&[attribute]', '[attribute][attribute]'], + ['[attribute]', '[attribute]&', '[attribute][attribute]'], + ['[attribute]', '&*', ':is([attribute])*'], // Invalid CSS + ['[attribute]', '*&', '[attribute]'], + + ['*', '&element', ':is(*)element'], // Invalid CSS + ['*', 'element&', 'element:is(*)'], + ['*', '&.class', '.class'], + ['*', '.class&', '.class:is(*)'], // Optimization: *.class → .class + ['*', '&#id', '#id'], + ['*', '#id&', '#id:is(*)'], // Optimization: *#id → #id + ['*', '&:hover', ':hover'], + ['*', ':hover&', ':hover:is(*)'], + ['*', '&::before', '::before'], + ['*', '::before&', '::before:is(*)'], // Invalid CSS + ['*', '&:not(.x)', ':not(.x)'], + ['*', ':not(.x)&', ':not(.x):is(*)'], // Optimization: *:not(.x) → :not(.x) + ['*', '&[attribute]', '[attribute]'], + ['*', '[attribute]&', '[attribute]:is(*)'], // Optimization: *[attribute] → [attribute] + ['*', '&*', ':is(*)*'], // Invalid CSS + ['*', '*&', '*'], + + ['&', '&element', ':is(:scope)element'], // Invalid CSS + ['&', 'element&', 'element:scope'], + ['&', '&.class', ':scope.class'], + ['&', '.class&', '.class:scope'], + ['&', '&#id', ':scope#id'], + ['&', '#id&', '#id:scope'], + ['&', '&:hover', ':scope:hover'], + ['&', ':hover&', ':hover:scope'], + ['&', '&::before', ':scope::before'], + ['&', '::before&', '::before:scope'], + ['&', '&:not(.x)', ':scope:not(.x)'], + ['&', ':not(.x)&', ':not(.x):scope'], + ['&', '&[attribute]', ':scope[attribute]'], + ['&', '[attribute]&', '[attribute]:scope'], + ['&', '&*', ':is(:scope)*'], // Invalid CSS + ['&', '*&', ':scope'], + ])(`'%s { %s }' → '%s' (%#)`, async (root, nested, expected) => { + let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])])) + let ast = CSS.parse(optimized) + + let count = 0 + walk(ast, () => void count++) + + // 1 rule, 1 declaration + expect(count).toBe(2) + + if (ast[0].kind !== 'rule') throw new Error('expected a rule') + expect(ast[0].selector).toEqual(expected) + }) + + it('should not remove the `*` namespace from namespaced selectors', () => { + expect( + optimize(css` + .a { + & *|div { + color: red; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a *|div { + color: red; + } + " + `) + }) + + test('multiple selectors in the list are relative to the parent', async () => { + expect( + optimize(css` + .a, + .b { + --x: 1; + + .c { + --x: 2; + } + &.d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a, .b { + --x: 1; + + .c { + --x: 2; + } + &.d { + --x: 3; + } + } + " + `) + }) + + it('should be possible to use `&` multiple times', async () => { + expect( + optimize(css` + .a { + & .b & .c & .d { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a .b .a .c .a .d { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` multiple times in a row', async () => { + expect( + optimize(css` + .a { + &&& { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a.a.a { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` inside a selector', async () => { + expect( + optimize(css` + .a { + :not(&) { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + :not(.a) { + --x: 1; + } + " + `) + }) + + it('should be possible to use deeply nested CSS', async () => { + expect( + optimize(css` + .a, + .b { + --x: 1; + + .c & { + --x: 2; + + &:hover, + &:focus { + --x: 3; + .d { + --x: 4; + } + } + } + } + `), + ).toMatchInlineSnapshot(` + " + .a, .b { + --x: 1; + .c & { + --x: 2; + &:hover, &:focus { + --x: 3; + .d { + --x: 4; + } + } + } + } + " + `) + }) + + it('should properly split rules to guarantee specificity', async () => { + expect( + optimize(css` + .a { + --before: 1; + &:hover { + --inside: 1; + } + --after: 1; + } + `), + ).toMatchInlineSnapshot(` + " + .a { + --before: 1; + &:hover { + --inside: 1; + } + --after: 1; + } + " + `) + }) + + it.each([ + ['div', '&', 'div'], + ['div', '[before]&', '[before]:is(div)'], + ['div', '&[after]', 'div[after]'], + ['div', '[before]&[after]', '[before]:is(div)[after]'], + ['div', '[before] &', '[before] div'], + ['div', '& [after]', 'div [after]'], + ['div', '[before] & [after]', '[before] div [after]'], + + ['.parent', '&', '.parent'], + ['.parent', '[before]&', '[before].parent'], + ['.parent', '&[after]', '.parent[after]'], + ['.parent', '[before]&[after]', '[before].parent[after]'], + ['.parent', '[before] &', '[before] .parent'], + ['.parent', '& [after]', '.parent [after]'], + ['.parent', '[before] & [after]', '[before] .parent [after]'], + + ['.a > .b', '&', '.a > .b'], + ['.a > .b', '[before]&', '[before]:is(.a > .b)'], + ['.a > .b', '&[after]', '.a > .b[after]'], + ['.a > .b', '[before]&[after]', '[before]:is(.a > .b)[after]'], + ['.a > .b', '[before] &', '[before] :is(.a > .b)'], + ['.a > .b', '& [after]', '.a > .b [after]'], + ['.a > .b', '[before] & [after]', '[before] :is(.a > .b) [after]'], + ])(`should optimize '%s { %s }' → '%s' (%#)`, async (root, nested, expected) => { + let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])])) + let ast = CSS.parse(optimized) + + let count = 0 + walk(ast, () => void count++) + + // 1 rule, 1 declaration + expect(count).toBe(2) + + if (ast[0].kind !== 'rule') throw new Error('expected a rule') + expect(ast[0].selector).toEqual(expected) + }) + + it('should hoist at-rules', async () => { + expect( + optimize(css` + @layer utilities { + .a, + .b { + @media (print) { + --x: 1; + .c { + @media (min-width: 123px) { + --x: 2; + } + } + } + } + .d { + @media (print) { + @media (min-width: 123px) { + --x: 3; + } + } + } + } + @property --foo { + syntax: '*'; + } + @layer utilities { + .e { + @media (print) { + --x: 4; + } + } + } + `), + ).toMatchInlineSnapshot(` + " + @layer utilities { + @media (print) { + .a, .b { + --x: 1; + } + @media (min-width: 123px) { + :is(.a, .b) .c { + --x: 2; + } + .d { + --x: 3; + } + } + } + } + @property --foo { + syntax: '*'; + } + @layer utilities { + @media (print) { + .e { + --x: 4; + } + } + } + " + `) + }) + + it('should leave `@property` and `@apply` alone', async () => { + expect( + optimize(css` + .foo { + .bar { + @apply text-red-500 hover:text-red-600; + } + } + + .baz { + @property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; + } + + @property --tw-border-spacing-x { + syntax: ''; + inherits: false; + initial-value: 0; + } + } + `), + ).toMatchInlineSnapshot(` + " + .foo .bar { + @apply text-red-500 hover:text-red-600; + } + .baz { + @property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; + } + @property --tw-border-spacing-x { + syntax: ''; + inherits: false; + initial-value: 0; + } + } + " + `) + }) + + it('should merge a body-less @layer with an @layer with the same name that has a body', async () => { + expect( + optimize(css` + @layer a; + + @layer a { + @layer b { + .x { + color: red; + } + } + } + `), + ).toMatchInlineSnapshot(` + " + @layer a { + @layer b { + .x { + color: red; + } + } + } + " + `) + }) + + it('should not get rid of `:is(…)` when the compound selector is part of a complex selector', async () => { + expect( + optimize(css` + .foo .bar { + .system &:focus { + --x: 1; + } + } + .foo:hover { + .system &:focus { + --x: 2; + } + } + `), + ).toMatchInlineSnapshot(` + " + .system :is(.foo .bar):focus { + --x: 1; + } + .system .foo:hover:focus { + --x: 2; + } + " + `) + }) + + it('should not dedupe adjacent at-rules with the same prelude but different bodies', async () => { + expect( + optimize(css` + @font-face { + font-family: 'A'; + src: url('/fonts/a.woff2'); + } + + @font-face { + font-family: 'B'; + src: url('/fonts/b.woff2'); + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + + @keyframes spin { + to { + transform: rotate(-360deg); + } + } + `), + ).toMatchInlineSnapshot(` + " + @font-face { + font-family: 'A'; + src: url('/fonts/a.woff2'); + } + @font-face { + font-family: 'B'; + src: url('/fonts/b.woff2'); + } + @keyframes spin { + to { + transform: rotate(360deg); + } + } + @keyframes spin { + to { + transform: rotate(-360deg); + } + } + " + `) + }) }) }) - -it('should only visit children once when calling `replaceWith` with multi-element array', () => { - let visited = new Set() - - let ast: AstNode[] = [ - atRule('@media', '', [ - context({}, [ - styleRule('.foo', [decl('color', 'red')]), - styleRule('.baz', [decl('color', 'blue')]), - ]), - ]), - styleRule('.bar', [decl('color', 'green')]), - ] - - walk(ast, (node) => { - let key = id(node) - if (visited.has(key)) { - throw new Error('Visited node twice') - } - visited.add(key) - - if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes) - }) - - expect(visited).toMatchInlineSnapshot(` - Set { - "@media ", - "", - ".foo", - "color: red", - ".baz", - "color: blue", - ".bar", - "color: green", - } - `) -}) - -it('should never visit children when calling `replaceWith` with `WalkAction.Skip`', () => { - let visited = new Set() - - let inner = styleRule('.foo', [decl('color', 'blue')]) - - let ast: AstNode[] = [atRule('@media', '', [inner]), styleRule('.bar', [decl('color', 'blue')])] - - walk(ast, (node) => { - visited.add(node) - - if (node.kind === 'at-rule') { - return WalkAction.ReplaceSkip(node.nodes) - } - }) - - expect(visited).not.toContain(inner) - expect(visited).toMatchInlineSnapshot(` - Set { - { - "kind": "at-rule", - "name": "@media", - "nodes": [ - { - "kind": "rule", - "nodes": [ - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - ], - "selector": ".foo", - }, - ], - "params": "", - }, - { - "kind": "rule", - "nodes": [ - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - ], - "selector": ".bar", - }, - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - } - `) -}) - -it('should skip the correct number of children based on the replaced children nodes', () => { - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([decl('--index', '2.1')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([decl('--index', '2.1')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 2.1", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([decl('--index', '2.1'), decl('--index', '2.2')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([decl('--index', '2.1'), decl('--index', '2.2')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 2.1", - "--index: 2.2", - "--index: 3", - "--index: 4", - ] - `) - } -}) - -function id(node: AstNode) { - switch (node.kind) { - case 'at-rule': - return `${node.name} ${node.params}` - case 'rule': - return node.selector - case 'context': - return '' - case 'at-root': - return '' - case 'declaration': - return `${node.property}: ${node.value}` - case 'comment': - return `// ${node.value}` - default: - node satisfies never - throw new Error('Unknown node kind') - } -} diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index ce841f377..e22c13e83 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -1,14 +1,17 @@ import { Polyfills } from '.' +import * as SelectorParser from '../src/selector-parser' import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' import type { Source, SourceLocation } from './source-maps/source' import { Theme, ThemeOptions } from './theme' import { DefaultMap } from './utils/default-map' +import { segment } from './utils/segment' import { extractUsedVariables } from './utils/variables' import * as ValueParser from './value-parser' import { walk, WalkAction, type VisitContext } from './walk' const AT_SIGN = 0x40 +const PIPE = 0x7c export type StyleRule = { kind: 'rule' @@ -286,9 +289,9 @@ export function optimizeAst( // found in the theme config. if ( polyfills & Polyfills.ColorMix && - node.value.includes('color-mix(') && !context.supportsColorMix && - !context.keyframes + !context.keyframes && + node.value.includes('color-mix(') ) { colorMixDeclarations.get(parent).add(node) } @@ -304,37 +307,7 @@ export function optimizeAst( transform(child, nodes, context, depth + 1) } - // Keep the last decl when there are exact duplicates. Keeping the *first* one might - // not be correct when given nested rules where a rule sits between declarations. - let seen: Record = {} - let toRemove = new Set() - - // Keep track of all nodes that produce a given declaration - for (let child of nodes) { - if (child.kind !== 'declaration') continue - - let key = `${child.property}:${child.value}:${child.important}` - seen[key] ??= [] - seen[key].push(child) - } - - // And remove all but the last of each - for (let key in seen) { - for (let i = 0; i < seen[key].length - 1; ++i) { - toRemove.add(seen[key][i]) - } - } - - if (toRemove.size > 0) { - nodes = nodes.filter((node) => !toRemove.has(node)) - } - - if (nodes.length === 0) return - - // Rules with `&` as the selector should be flattened - if (node.selector === '&') { - parent.push(...nodes) - } else { + if (nodes.length > 0) { parent.push({ ...node, nodes }) } } @@ -679,9 +652,682 @@ export function optimizeAst( } } - return newAst + return handleNesting(newAst) } +export function handleNesting(ast: AstNode[]): AstNode[] { + let parseSelectorCache = new DefaultMap(SelectorParser.parse) + + // Track `rule` selectors as we go + let selectorStack: [ + selector: string, + src: SourceLocation | undefined, + dst: SourceLocation | undefined, + ][] = [] + + // Track `at-rule` information as we go. Tracking this separately from the + // selector stack for rules such that we can hoist this above all the rules. + let atRuleStack: [ + name: string, + params: string, + src: SourceLocation | undefined, + dst: SourceLocation | undefined, + ][] = [] + + // The current "nodes" we can push to + let nodes = null as AstNode[] | null + + // Optimization: Track the declaration properties we've seen in the current + // nodes. + let seenDeclarationProperties = new Set() + + // Track nodes lists where we want to dedupe declarations + let dedupeDeclarationsInNodes = new Set() + + // The final, new AST + let result: AstNode[] = [] + + // Track whether we should skip a node in the `exit` phase + let skipExit = new Set() + + walk(ast, { + enter(node) { + switch (node.kind) { + case 'rule': { + nodes = null // Start a new level + + // First time we see a rule + if (selectorStack.length === 0) { + // A rule with a selector containing `&` should replace the `&` with + // `:scope` if there is no parent rule. + // + // Note: there could be false positives when the `&` is escaped or + // part of a string inside an attribute selector. But the + // SelectorParser will take care of that. + if (node.selector.includes('&')) { + let ast = SelectorParser.parse(node.selector) + let changed = false + + walk(ast, (node) => { + if (node.kind === 'selector' && node.value === '&') { + changed = true + node.value = ':scope' + } + }) + + if (changed) { + selectorStack.push([SelectorParser.toCss(ast), node.src, node.dst]) + } else { + selectorStack.push([node.selector, node.src, node.dst]) + } + } + + // No nesting markers, track as-is + else { + selectorStack.push([node.selector, node.src, node.dst]) + } + } + + // Nested rule, ensure `&` is present in each selector. Then track the + // selector. + else { + // A rule with just `&` can be replaced by its children. Let's + // ignore this node and keep walking its children. + if (node.selector === '&') { + skipExit.add(node) + return + } + + let lastSelector = selectorStack[selectorStack.length - 1][0] + let selector = segment(node.selector, ',') + .map((selector) => { + // Fast path: we know there isn't an `&` so we can prepend the + // parent selector immediately. + if (!selector.includes('&')) { + let lastAst = parseSelectorCache.get(lastSelector) + return `${lastAst.length === 1 && lastAst[0].kind === 'list' ? `:is(${lastSelector})` : lastSelector} ${selector}` + } + + // Slow path: we need to replace the `&` with the parent + // selector. A simple `replaceAll(…)` won't work because a `&` + // could be escaped, or could be part of an attribute selector. + // + // Much safer to parse the selector and replace the `&` that way + { + let ast = SelectorParser.parse(selector) + let changed = false + walk(ast, { + enter(node, ctx) { + if (node.kind !== 'selector' || node.value !== '&') return + + changed = true + + // Safest option: use `is(…)` semantics when + // substituting `&` for the parent selector. + node.value = `:is(${lastSelector})` + + // We should always have a parent, so this shouldn't happen + if (ctx.parent === null) return + + // Optimizations: + let parentAst = parseSelectorCache.get(lastSelector) + + // 1. If we're dealing with multiple selectors, then we + // know that the `:is(…)` needs to stay. Nothing to optimize. + if (parentAst.length === 1 && parentAst[0].kind === 'list') { + return // Keep `:is(…)` semantics + } + + // 2. We know that `&` is standalone when it's inside of + // a complex selector. E.g. `[before] & [after]` + if (ctx.parent.kind === 'complex') { + // `& [after]` + // + // `:is(…)` semantics are not required, because these + // are equivalent: + // + // - `:is(div) [after]` → `div [after]` + // - `:is(.x) [after]` → `.x [after]` + // - `:is([before]) [after]` → `[before] [after]` + // - `:is(.a > .b) [after]` → `.a > .b [after]` + if (ctx.index === 0) { + node.value = lastSelector + return + } + + // `[before] &` + // + // `:is(…)` semantics are required if we're dealing + // with a complex parent selector. Otherwise the + // meaning of the selector could change: + // + // - `[before] :is(div)` → `[before] div` + // - `[before] :is(.x)` → `[before] .x` + // - `[before] :is([after])` → `[before] [after]` + // - `[before] :is(.a > .b)` → `[before] :is(.a > .b)` (!) + else if (ctx.index === ctx.siblings.length - 1) { + if (parentAst[0].kind === 'complex') { + return // Keep `:is(…)` semantics + } + + node.value = lastSelector + return + } + + // `[before] & [after]` + // + // `:is(…)` semantics are required if we're dealing + // with a complex parent selector. Otherwise the + // meaning of the selector could change: + // + // - `[before] :is(div) [after]` → `[before] div [after]` + // - `[before] :is(.x) [after]` → `[before] .x [after]` + // - `[before] :is(.a > .b) [after]` → `[before] :is(.a > .b) [after]` (!) + else { + if (parentAst[0].kind === 'complex') { + return // Keep `:is(…)` semantics + } + + node.value = lastSelector + return + } + } + + // 3. We know that `&` is attached to some other + // selector when it's inside of a compound selector. + // + // E.g. `[before]&[after]` + // + // We have to be careful that our parent, when it's + // part of a complex selector, that the same rules apply + // + // E.g.: `[before] &[after]` + // ^ current node + // ^^^^^^^^ compound selector + // ^^^^^^^^^^^^^^^^^ complex selector + // + else if (ctx.parent.kind === 'compound') { + if (parentAst[0].kind === 'complex') { + let path = ctx.path() + let grandParent = path[path.length - 2] + + // When our compound parent is part of a complex + // selector, and it's not the very first node, then we + // can't safely get rid of the `:is(…)` if the last + // selector is a complex selector as well, unless the + // `&` maps to a single selector or compound selector. + // + // ```css + // .foo .bar { /* Complex selector */ + // .system &:focus { /* Complex selector + compound selecto*/ + // --x: 1; + // } + // } + // .foo:hover { /* Compound selector */ + // .system &:focus { /* Complex selector + compound selector */ + // --x: 2; + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .system :is(.foo .bar):focus { /* Cannot drop the `:is(…)`, otherwise `.system` and `.foo` can be swapped in the DOM */ + // --x: 1; + // } + // .system .foo:hover:focus { + // --x: 2; + // } + // ``` + if ( + grandParent && + grandParent.kind === 'complex' && + grandParent.nodes[0] !== ctx.parent + ) { + return // Keep `:is(…)` semantics + } + } + + // `&*` and `&div` are invalid CSS so these should stay + // invalid. They should be written as `*&` and `div&` instead. + if ( + ctx.siblings + .slice(ctx.index + 1) + .some( + (sibling) => + SelectorParser.isUniversalSelector(sibling) || + SelectorParser.isTypeSelector(sibling), + ) + ) { + return // Keep `:is(…)` semantics + } + + // `&[after]` + // + // `:is(…)` semantics are not required, because these + // are equivalent: + // + // - `:is(div)[after]` → `div[after]` + // - `:is(.x)[after]` → `.x[after]` + // - `:is([before])[after]` → `[before][after]` + // - `:is(.a > .b)[after]` → `.a > .b[after]` + if (ctx.index === 0) { + node.value = lastSelector + return + } + + // `[before]&` + // + // `:is(…)` semantics are required if we're dealing with a + // + // - complex parent selector, to prevent changing the meaning of the selector + // - a universal selector, because `*` needs to be first + // - a type selector, because `div` needs to be first + // + // - `[before]:is(div)` → `[before]:is(div)` (!) + // - `[before]:is(*)` → `[before]:is(*)` (!) + // - `[before]:is(.a > .b)` → `[before]:is(.a > .b)` (!) + // - `[before]:is(.x)` → `[before].x` + else if (ctx.index === ctx.siblings.length - 1) { + if ( + parentAst[0].kind === 'complex' || + SelectorParser.isUniversalSelector(parentAst[0]) || + SelectorParser.isTypeSelector(parentAst[0]) + ) { + return // Keep `:is(…)` semantics + } + + node.value = lastSelector + return + } + + // `[before]&[after]` + // + // `:is(…)` semantics are required if we're dealing with a + // + // - complex parent selector, to prevent changing the meaning of the selector + // - a universal selector, because `*` needs to be first + // - a type selector, because `div` needs to be first + // + // - `[before]:is(div)[after]` → `[before]:is(div)[after]` (!) + // - `[before]:is(*)[after]` → `[before]:is(*)[after]` (!) + // - `[before]:is(.a > .b)[after]` → `[before]:is(.a > .b)[after]` (!) + // - `[before]:is(.x)[after]` → `[before].x[after]` + else { + if ( + parentAst[0].kind === 'complex' || + SelectorParser.isUniversalSelector(parentAst[0]) || + SelectorParser.isTypeSelector(parentAst[0]) + ) { + return // Keep `:is(…)` semantics + } + + node.value = lastSelector + return + } + } + + // 4. When the current node is a function argument (e.g. + // `:not(&))`, then we can drop the `:is(…)` entirely. + // + // The only exception is when the parent has multiple + // selectors because then we would introduce multiple + // arguments. Multiple selectors are already handled. + else if (ctx.parent.kind === 'function') { + node.value = lastSelector + return + } + }, + exit(node, ctx) { + // Optimization: We can remove the universal selector `*` if + // they are part of a compound selector. E.g.: + // + // - `*:hover` → `:hover` + // - `*[attribute]` → `[attribute]` + // + // Except when the `*` is a namespace, e.g.: `*|div`, + // because `*|div` (any namespace) and `|div` (no + // namespace) have different meanings. + if ( + ctx.index === 0 && + ctx.siblings.length > 1 && + ctx.parent?.kind === 'compound' && + SelectorParser.isUniversalSelector(node) + ) { + let next = ctx.siblings[1] + if (next.kind === 'selector' && next.value.charCodeAt(0) === PIPE) { + return + } + return WalkAction.ReplaceSkip([]) + } + }, + }) + + if (changed) { + return SelectorParser.toCss(ast) + } + + // It could be that `&` was not found as an actual selector, + // in that case we still have to prepend the parent selector. + let lastAst = parseSelectorCache.get(lastSelector) + return `${lastAst.length === 1 && lastAst[0].kind === 'list' ? `:is(${lastSelector})` : lastSelector} ${selector}` + } + }) + .join(', ') + selectorStack.push([selector, node.src, node.dst]) + } + + // Once we hit a rule that has at least one declaration, then we can + // stop handling the nested selectors. + // + // This ensures that browser devtools can at least show _something_ + // for a given rule. This also means that we can leverage CSS nesting + // which is better for gzip results due to increased repetition. + // + // E.g.: + // + // ```css + // .a { + // &[b] { + // color: red; + // &:hover { + // color: blue; + // } + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .a[b] { /* ← flattened */ + // color: red; /* ← saw a declaration, therefore */ + // &:hover { /* ← we keep this nested syntax */ + // color: blue; + // } + // } + // ``` + if (node.nodes.some((child) => child.kind === 'declaration')) { + // Emitting each child instead of the node itself because we do want + // to flatten the current node and its selector that is already + // pushed to the stack. + for (let child of node.nodes) emit(child) + return WalkAction.Skip + } + break + } + + case 'at-rule': { + nodes = null // Start a new level + + // `@layer` is hoistable, but when it's empty then we have to make + // sure that we still emit it because this might influence the layer + // order. We can't just get rid of it. + if (node.nodes.length === 0 && !DROPPABLE_IF_EMPTY_AT_RULES.has(node.name)) { + emit(node) + skipExit.add(node) + return WalkAction.Skip + } + + // Hoist at-rules + else if (HOISTABLE_AT_RULES.has(node.name)) { + atRuleStack.push([node.name, node.params, node.src, node.dst]) + } + + // If we can't hoist them, emit them immediately as-is + else { + emit(node) + skipExit.add(node) + return WalkAction.Skip + } + break + } + + case 'declaration': + case 'comment': { + emit(node) + break + } + + case 'context': + case 'at-root': + break + + default: + node satisfies never + break + } + }, + exit(node) { + if (skipExit.delete(node)) return + + switch (node.kind) { + case 'rule': { + nodes = null + selectorStack.pop() + break + } + + case 'at-rule': { + nodes = null + atRuleStack.pop() + break + } + + case 'declaration': + case 'comment': + case 'context': + case 'at-root': + break + + default: + node satisfies never + break + } + }, + }) + + // Dedupe declarations that we've already seen before if they match the + // `property`, `value` and `important` information. + { + for (let nodes of dedupeDeclarationsInNodes) { + let seen = new Set() + for (let i = nodes.length - 1; i >= 0; --i) { + let node = nodes[i] + if (node.kind !== 'declaration') continue + + let id = `${node.property}\0${node.value}\0${node.important}` + + if (seen.has(id)) nodes.splice(i, 1) + else seen.add(id) + } + } + } + + return result + + function emit(node: AstNode) { + // Existing nodes are available, emit into those nodes + if (nodes) { + // Optimization: track used declarations in the current node. + if (node.kind === 'declaration') { + if (seenDeclarationProperties.has(node.property)) { + dedupeDeclarationsInNodes.add(nodes) + } else { + seenDeclarationProperties.add(node.property) + } + } + + nodes.push(node) + return + } + + // Nothing available, setup a fresh node + { + // There are no parent rules or at-rules available, which means that we + // can emit the node as-is. + if (selectorStack.length === 0 && atRuleStack.length === 0) { + let target = result + let lastNode = target[target.length - 1] + + // Optimization: when the current and last node are the same, ignore the + // new node entirely otherwise we will get unnecessary duplicate + // results. + // + // We only care about at-rules with no body because some of them (such + // as `@charset` or `@layer`) need to be emitted. A normal rule that's + // empty doesn't need to be emitted. At-rules _with_ a body (such as + // `@font-face` or `@keyframes`) can share the same prelude while + // containing different bodies, so they must all be emitted. + if ( + lastNode && + lastNode.kind === 'at-rule' && + node.kind === 'at-rule' && + lastNode.nodes.length === 0 && + node.nodes.length === 0 && + lastNode.name === node.name && + lastNode.params === node.params + ) { + return + } + + result.push(node) + return + } + + // Track the new "parent" nodes + { + nodes = [node] + + // Clear out seen declarations from the previous work in progress nodes + seenDeclarationProperties.clear() + + // Track new declaration + if (node.kind === 'declaration') { + seenDeclarationProperties.add(node.property) + } + } + + // Track the new root node that we build up to store in the final AST + let root = null as AstNode | null + + let target = result + let atRuleOffset = 0 + + // Optimization: merge adjacent at-rules + // + // Figure out whether we can push our new node into a previous node that + // was already emitted. + // + // We have to make sure that the order stays the same, so therefore we + // only ever have to look at the last node that was emitted. + { + let lastNode = target[target.length - 1] + if (lastNode && lastNode.kind === 'at-rule') { + for (let i = 0; i < atRuleStack.length; i++) { + let atRule = atRuleStack[i] + if (!lastNode) break + if (lastNode.kind !== 'at-rule') break + if (lastNode.name !== atRule[0]) break + if (lastNode.params !== atRule[1]) break + + atRuleOffset++ + target = lastNode.nodes + lastNode = lastNode.nodes[lastNode.nodes.length - 1] + } + } + } + + // Build up the rule + if (selectorStack.length > 0) { + let [selector, src, dst] = selectorStack[selectorStack.length - 1] + + // Optimization: merge adjacent rules with the same selector + // + // Figure out whether we can push into an existing rule. + // + // If we have some at-rules that we have to keep into account, then we + // definitely can't. + if (atRuleStack.length - atRuleOffset <= 0) { + let lastNode = target[target.length - 1] + if (lastNode && lastNode.kind === 'rule' && lastNode.selector === selector) { + lastNode.nodes.push(...nodes) + + // Ensure that our current nodes points to the nodes of the + // `lastNode`, otherwise we will lose information. + nodes = lastNode.nodes + + // We appended a group that could contain declarations already in the + // existing rule, so let the final dedupe pass handle it once. + // + // Note: we could loop over _all_ previous nodes to figure out if we + // really want to dedupe this. But this could result in a bunch of + // duplicate work if we have `n` nodes that we want to merge + // together. + dedupeDeclarationsInNodes.add(nodes) + + // We know that we don't have to handle any more at-rules, so we can + // bail early since we just merged the nodes with the same selector. + return + } + } + + // Can't push into existing node, create a new node + root = rule(selector, nodes) + if (src || dst) Object.assign(root, { src, dst }) + } + + // Wrap in at-rules, if we can push into an existing node then we can + // ignore `offset` amount of nodes since the `root`/`nodes` will already + // point to a nested node. + for (let i = atRuleStack.length - 1; i >= atRuleOffset; --i) { + let [name, params, src, dst] = atRuleStack[i] + + root = atRule(name, params, root ? [root] : nodes) + if (src || dst) Object.assign(root, { src, dst }) + } + + // Track the root node in the AST + if (root) { + target.push(root) + } + + // We didn't build up any new root, so we can move our node directly into + // the target. This can happen when we emit a node that is not a + // declaration or a comment. + else { + target.push(...nodes) + } + } + } +} + +// A set of at-rules that can be hoisted to the top without any repercussions. +// Typically at-rules that rely on the environment, not parent information and +// contain other rules/declarations. +const HOISTABLE_AT_RULES = new Set([ + '@container', + '@layer', + '@media', + '@page', + '@starting-style', + '@supports', + '@view-transition', +]) + +// A set of at-rules that can be dropped if they don't contain any nodes. We +// don't have the distinction between an at-rule with no body, or an at-rule +// with a body that is empty right now. +const DROPPABLE_IF_EMPTY_AT_RULES = new Set([ + '@container', + '@media', + '@page', + '@starting-style', + '@supports', + '@view-transition', +]) + export function toCss(ast: AstNode[], track?: boolean) { let pos = 0 diff --git a/packages/tailwindcss/src/attribute-selector-parser.test.ts b/packages/tailwindcss/src/attribute-selector-parser.test.ts index 140336ab0..87f5f3013 100644 --- a/packages/tailwindcss/src/attribute-selector-parser.test.ts +++ b/packages/tailwindcss/src/attribute-selector-parser.test.ts @@ -28,6 +28,11 @@ describe('parse', () => { '[ data-foo ]', { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null }, ], + [ + // Non-ASCII code points are valid in a CSS ident + '[data-état]', + { attribute: 'data-état', operator: null, quote: null, value: null, sensitivity: null }, + ], [ '[data-state=expanded]', { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null }, diff --git a/packages/tailwindcss/src/attribute-selector-parser.ts b/packages/tailwindcss/src/attribute-selector-parser.ts index e732b2979..624043d59 100644 --- a/packages/tailwindcss/src/attribute-selector-parser.ts +++ b/packages/tailwindcss/src/attribute-selector-parser.ts @@ -23,6 +23,7 @@ const ZERO = 48 const NINE = 57 const DASH = 45 const UNDERSCORE = 95 +const NON_ASCII = 128 interface AttributeSelector { attribute: string @@ -61,6 +62,8 @@ export function parse(input: string): AttributeSelector | null { if (currentChar >= LOWER_A && currentChar <= LOWER_Z) continue if (currentChar >= ZERO && currentChar <= NINE) continue if (currentChar === DASH || currentChar === UNDERSCORE) continue + // Non-ASCII code points are valid in a CSS ident, e.g.: `[data-état]` + if (currentChar >= NON_ASCII) continue break } diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index aaba93c4e..296848010 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1297,22 +1297,22 @@ test('utilities must be prefixed', async () => { // Prefixed utilities are generated expect(await run(['tw:underline', 'tw:hover:line-through', 'tw:custom'], input, options)) .toMatchInlineSnapshot(` - " - .tw\\:custom { - color: red; - } - - .tw\\:underline { - text-decoration-line: underline; - } - - @media (hover: hover) { - .tw\\:hover\\:line-through:hover { - text-decoration-line: line-through; + " + .tw\\:custom { + color: red; } - } - " - `) + + .tw\\:underline { + text-decoration-line: underline; + } + + @media (hover: hover) { + .tw\\:hover\\:line-through:hover { + text-decoration-line: line-through; + } + } + " + `) // Non-prefixed utilities are ignored expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('') @@ -1534,18 +1534,18 @@ test('blocklisted candidates are not generated', async () => { // underline will as will md:bg-white expect(await run(['underline', 'bg-white', 'md:bg-white'], input, options)) .toMatchInlineSnapshot(` - " - .underline { - text-decoration-line: underline; - } - - @media (min-width: 48rem) { - .md\\:bg-white { - background-color: var(--color-white, #fff); + " + .underline { + text-decoration-line: underline; } - } - " - `) + + @media (min-width: 48rem) { + .md\\:bg-white { + background-color: var(--color-white, #fff); + } + } + " + `) }) test('blocklisted candidates cannot be used with `@apply`', async () => { diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 2ecdbe9a3..bf2265fa6 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -3328,7 +3328,42 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .j.j, .j.j, .a .b:hover .c, .a .b:hover .c, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .e .bar:not(.f):has(.g), .h ~ .i, .h ~ .i { + .j.j, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .h ~ .i { + color: red; + } + } + " + `) + }) + + test('does not register class names inside `:nth-child(… of …)` as utilities', async () => { + expect( + await run( + ['foo', 'mark'], + css` + @plugin "my-plugin"; + @layer utilities { + @tailwind utilities; + } + `, + { + async loadModule(_id, base) { + return { + path: '', + base, + module: ({ addUtilities }: PluginAPI) => { + addUtilities({ + '.foo:nth-child(2 of .mark)': { color: 'red' }, + }) + }, + } + }, + }, + ), + ).toMatchInlineSnapshot(` + " + @layer utilities { + .foo:nth-child(2 of .mark) { color: red; } } diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index af6e98d77..4ea62f864 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -310,7 +310,14 @@ export function buildPluginApi({ return } - if (node.kind === 'function' && node.value === ':not') { + if ( + node.kind === 'function' && + (node.value === ':not' || + // A class inside `:nth-child(… of )` is part of the + // condition, not a utility being defined. + node.value === ':nth-child' || + node.value === ':nth-last-child') + ) { return WalkAction.Skip } }) diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 17e11f4fe..a31ec5d74 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -213,11 +213,9 @@ test('Utilities do not show wrapping selector in intellisense', async () => { text-decoration-line: underline; } ", - ".hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + "@media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through; } } ", @@ -244,11 +242,9 @@ test('Utilities, when marked as important, show as important in intellisense', a text-decoration-line: underline !important; } ", - ".hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through !important; - } + "@media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through !important; } } ", @@ -361,48 +357,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-1-red { - color: #ff0000; - } - ", - ".custom-1-green { - color: #ff0000; - } - ", - null, - ] - `) + [ + ".custom-1-red { + color: #ff0000; + } + ", + ".custom-1-green { + color: #ff0000; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red { - color: #ff0000 / 0%; - } - ", - ".custom-2-green { - color: #ff0000 / 0%; - } - ", - null, - ] - `) + [ + ".custom-2-red { + color: #ff0000 / 0%; + } + ", + ".custom-2-green { + color: #ff0000 / 0%; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red\\/50 { - color: #ff0000 / 50%; - } - ", - ".custom-2-red\\/75 { - color: #ff0000 / 75%; - } - ", - null, - ] - `) + [ + ".custom-2-red\\/50 { + color: #ff0000 / 50%; + } + ", + ".custom-2-red\\/75 { + color: #ff0000 / 75%; + } + ", + null, + ] + `) let classMap = new Map(design.getClassList()) let classNames = Array.from(classMap.keys()) diff --git a/packages/tailwindcss/src/selector-parser.test.ts b/packages/tailwindcss/src/selector-parser.test.ts index 1cf5838f7..fa38dc578 100644 --- a/packages/tailwindcss/src/selector-parser.test.ts +++ b/packages/tailwindcss/src/selector-parser.test.ts @@ -326,14 +326,39 @@ describe('parse', () => { }) it('parses :nth-child()', () => { + // The `An+B` part is not a selector, it stays an opaque value expect(parse(':nth-child(n+1)')).toEqual([ + { + kind: 'function', + value: ':nth-child', + nodes: [{ kind: 'value', value: 'n+1' }], + }, + ]) + + // The selector list after `of` is parsed as a selector + expect(parse(':nth-child(2 of &)')).toEqual([ { kind: 'function', value: ':nth-child', nodes: [ + { kind: 'value', value: '2 of ' }, + { kind: 'selector', value: '&' }, + ], + }, + ]) + + expect(parse(':nth-child(2n + 1 of .foo, .bar)')).toEqual([ + { + kind: 'function', + value: ':nth-child', + nodes: [ + { kind: 'value', value: '2n + 1 of ' }, { - kind: 'value', - value: 'n+1', + kind: 'list', + nodes: [ + { kind: 'selector', value: '.foo' }, + { kind: 'selector', value: '.bar' }, + ], }, ], }, @@ -565,7 +590,11 @@ describe('toCss', () => { }) it('should print :nth-child()', () => { + // The `An+B` part is printed verbatim, whitespace in the selector list + // after `of` is normalized expect(toCss(parse(':nth-child(n+1)'))).toBe(':nth-child(n+1)') + expect(toCss(parse(':nth-child(+2)'))).toBe(':nth-child(+2)') + expect(toCss(parse(':nth-child(2n + 1 of .foo,.bar)'))).toBe(':nth-child(2n + 1 of .foo, .bar)') }) it('should pretty print a complex selector', () => { diff --git a/packages/tailwindcss/src/selector-parser.ts b/packages/tailwindcss/src/selector-parser.ts index b7632834a..2a435f687 100644 --- a/packages/tailwindcss/src/selector-parser.ts +++ b/packages/tailwindcss/src/selector-parser.ts @@ -70,7 +70,7 @@ function compound(nodes: SelectorAstNode[]): SelectorCompoundNode { } } -function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode { +export function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode { return { kind: 'function', value, @@ -85,7 +85,7 @@ function list(nodes: SelectorAstNode[]): SelectorListNode { } } -function selector(value: string): SelectorNode { +export function selector(value: string): SelectorNode { return { kind: 'selector', value, @@ -99,6 +99,80 @@ function value(value: string): SelectorValueNode { } } +export function isUniversalSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === ASTERISK +} + +export function isNestingSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === AMPERSAND +} + +export function isClassSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === DOT +} + +export function isIdSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === HASH +} + +export function isPseudoSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === COLON +} + +export function isAttributeSelector(node: SelectorAstNode): boolean { + return node.kind === 'selector' && node.value.charCodeAt(0) === OPEN_BRACKET +} + +export function isTypeSelector(node: SelectorAstNode): boolean { + if (node.kind !== 'selector') return false + + switch (node.value.charCodeAt(0)) { + case ASTERISK: // Universal selector + case AMPERSAND: // Nesting selector + case DOT: // Class selector + case HASH: // ID selector + case COLON: // Pseudo selector + case OPEN_BRACKET: // Attribute selector + return false + + // We don't fully verify whether this is actually a proper type selector, + // but we assume it is one if it's not any of the other ones. + default: + return true + } +} + +export function cloneAstNode(node: T): T { + switch (node.kind) { + case 'combinator': + case 'selector': + case 'value': + return { + kind: node.kind, + value: node.value, + } as T + + case 'complex': + case 'compound': + case 'list': + return { + kind: node.kind, + nodes: node.nodes.map(cloneAstNode), + } as T + + case 'function': + return { + kind: node.kind, + value: node.value, + nodes: node.nodes.map(cloneAstNode), + } satisfies SelectorFunctionNode as T + + default: + node satisfies never + throw new Error(`Unknown node kind: ${(node as any).kind}`) + } +} + export function toCss(ast: SelectorAstNode[], minify = false) { let css = '' for (let node of ast) { @@ -141,10 +215,10 @@ const CLOSE_PAREN = 0x29 const COLON = 0x3a const COMMA = 0x2c const DOUBLE_QUOTE = 0x22 -const FULL_STOP = 0x2e +const DOT = 0x2e const GREATER_THAN = 0x3e const NEWLINE = 0x0a -const NUMBER_SIGN = 0x23 +const HASH = 0x23 const OPEN_BRACKET = 0x5b const OPEN_PAREN = 0x28 const PLUS = 0x2b @@ -305,7 +379,7 @@ export function parse(input: string) { let node = fun(buffer, []) buffer = '' - // If the function is not one of the following, we combine all it's + // If the function is not one of the following, we combine all its // contents into a single value node if ( node.value !== ':not' && @@ -334,7 +408,39 @@ export function parse(input: string) { } let end = i - node.nodes.push(value(input.slice(start, end))) + let contents = input.slice(start, end) + + // `:nth-child(…)` and `:nth-last-child(…)` can contain an + // `of ` clause. The selector list must be + // parsed (e.g. to be able to substitute `&`), but the `An+B` part + // is not a selector so it stays an opaque value node. E.g.: + // + // ```css + // :nth-child(2n + 1 of .foo, .bar) + // ^^^^^^^^^^ value + // ^^^^^^^^^^ selector list + // ``` + if (node.value === ':nth-child' || node.value === ':nth-last-child') { + let idx = contents.indexOf('of ') + if (idx !== -1) { + node.nodes.push( + value( + contents.slice(0, idx + 3), // value `2n + 1 of ` + ), + ...parse( + contents.slice(idx + 3), // `.foo, .bar` + ), + ) + buffer = '' + i = end + + append(node) + + break + } + } + + node.nodes.push(value(contents)) buffer = '' i = end @@ -389,9 +495,9 @@ export function parse(input: string) { // .foo.bar // ^ // ``` - case FULL_STOP: + case DOT: case COLON: - case NUMBER_SIGN: { + case HASH: { if (currentChar === COLON && buffer === ':') { buffer += input[i] break diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts index 9238f495f..62edc0f46 100644 --- a/packages/tailwindcss/src/source-maps/source-map.test.ts +++ b/packages/tailwindcss/src/source-maps/source-map.test.ts @@ -865,25 +865,19 @@ test('Source locations for `addBase` point to the `@plugin` that generated them' expect(annotations).toMatchInlineSnapshot(` " - output.css | input.css - | - 1 @layer base { | 1 @plugin "./plugin.js"; - ^^^^^^^^^^^^ A @ 1:0-12 | ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21 - 2 body { | - ^^^^^ A @ 2:2-7 | - 3 color: red; | - ^^^^^^^^^^ A @ 3:4-14 | - 4 } | - 5 } | - 6 @layer base { | 2 @config "./config.js"; - ^^^^^^^^^^^^ B @ 6:0-12 | ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21 - 7 body { | - ^^^^^ B @ 7:2-7 | - 8 color: green; | - ^^^^^^^^^^^^ B @ 8:4-16 | - 9 } | - 10 } | - 11 | + output.css | input.css + | + 1 @layer base { | 1 @plugin "./plugin.js"; + ^^^^^^^^^^^^ A @ 1:0-12 | ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21 + 2 body { | + ^^^^^ A @ 2:2-7 | + 3 color: red; | + ^^^^^^^^^^ A @ 3:4-14 | + 4 color: green; | 2 @config "./config.js"; + ^^^^^^^^^^^^ B @ 4:4-16 | ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21 + 5 } | + 6 } | + 7 | " `) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5201878f2..a9d97d0dd 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -11581,20 +11581,20 @@ test('scrollbar-width', async () => { test('scrollbar-gutter', async () => { expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both'])) .toMatchInlineSnapshot(` - " - .scrollbar-gutter-auto { - scrollbar-gutter: auto; - } + " + .scrollbar-gutter-auto { + scrollbar-gutter: auto; + } - .scrollbar-gutter-both { - scrollbar-gutter: stable both-edges; - } + .scrollbar-gutter-both { + scrollbar-gutter: stable both-edges; + } - .scrollbar-gutter-stable { - scrollbar-gutter: stable; - } - " - `) + .scrollbar-gutter-stable { + scrollbar-gutter: stable; + } + " + `) expect( await run([ 'scrollbar-gutter', @@ -30204,20 +30204,20 @@ describe('custom utilities', () => { ` expect(await run(['border--0', 'border--1', 'border--2'], input)).toMatchInlineSnapshot(` - " - .border--0 { - border-color: var(--color-border-0, #e5e7eb); - } + " + .border--0 { + border-color: var(--color-border-0, #e5e7eb); + } - .border--1 { - border-color: var(--color-border-1, #d1d5db); - } + .border--1 { + border-color: var(--color-border-1, #d1d5db); + } - .border--2 { - border-color: var(--color-border-2, #9ca3af); - } - " - `) + .border--2 { + border-color: var(--color-border-2, #9ca3af); + } + " + `) expect(await run(['border--3'], input)).toEqual('') }) @@ -30313,20 +30313,20 @@ describe('custom utilities', () => { ` expect(await run(['example-1', 'example-76', 'example-971'], input)).toMatchInlineSnapshot(` - " - .example-1 { - --resolved-value: 1; - } + " + .example-1 { + --resolved-value: 1; + } - .example-76 { - --resolved-value: 76; - } + .example-76 { + --resolved-value: 76; + } - .example-971 { - --resolved-value: 971; - } - " - `) + .example-971 { + --resolved-value: 971; + } + " + `) expect(await run(['example-foo'], input)).toEqual('') }) @@ -30650,20 +30650,20 @@ describe('custom utilities', () => { ` expect(await run(['example-a', 'example-76', 'example-[123]'], input)).toMatchInlineSnapshot(` - " - .example-76 { - --resolved-value: 76; - } + " + .example-76 { + --resolved-value: 76; + } - .example-\\[123\\] { - --resolved-value: 123; - } + .example-\\[123\\] { + --resolved-value: 123; + } - .example-a { - --resolved-value: var(--example-a, 8); - } - " - `) + .example-a { + --resolved-value: var(--example-a, 8); + } + " + `) expect(await run(['example-[#0088cc]', 'example-[1px]'], input)).toEqual('') }) diff --git a/packages/tailwindcss/src/utils/variables.ts b/packages/tailwindcss/src/utils/variables.ts index 57ac4c3a5..b72987565 100644 --- a/packages/tailwindcss/src/utils/variables.ts +++ b/packages/tailwindcss/src/utils/variables.ts @@ -1,7 +1,8 @@ import * as ValueParser from '../value-parser' import { walk, WalkAction } from '../walk' +import { DefaultMap } from './default-map' -export function extractUsedVariables(raw: string): string[] { +let extractUsedVariablesCache = new DefaultMap((raw) => { let variables: string[] = [] walk(ValueParser.parse(raw), (node) => { if (node.kind !== 'function' || node.value !== 'var') return @@ -15,4 +16,8 @@ export function extractUsedVariables(raw: string): string[] { return WalkAction.Skip }) return variables +}) + +export function extractUsedVariables(raw: string): string[] { + return extractUsedVariablesCache.get(raw) } diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 305859d5b..56b069b31 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2098,6 +2098,15 @@ test('data', async () => { 'data-[potato=salad]/foo:flex', ]), ).toEqual('') + + // Non-ASCII code points are valid in attribute names + expect(await run(['data-[état]:flex', 'aria-[état]:flex'])).toMatchInlineSnapshot(` + " + .aria-\\[état\\]\\:flex[aria-état], .data-\\[état\\]\\:flex[data-état] { + display: flex; + } + " + `) }) test('portrait', async () => { diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 4d4637d8f..d62f13c8f 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -11,6 +11,7 @@ import { type Rule, type StyleRule, } from './ast' +import * as AttributeSelectorParser from './attribute-selector-parser' import { type Variant } from './candidate' import { applyVariant } from './compile' import type { DesignSystem } from './design-system' @@ -845,11 +846,15 @@ export function createVariants(theme: Theme): Variants { if (!variant.value || variant.modifier) return null if (variant.value.kind === 'arbitrary') { - ruleNode.nodes = [ - styleRule(`&[aria-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes), - ] + let selector = `[aria-${quoteAttributeValue(variant.value.value)}]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] } else { - ruleNode.nodes = [styleRule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)] + let selector = `[aria-${variant.value.value}="true"]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] } }) @@ -868,9 +873,11 @@ export function createVariants(theme: Theme): Variants { variants.functional('data', (ruleNode, variant) => { if (!variant.value || variant.modifier) return null - ruleNode.nodes = [ - styleRule(`&[data-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes), - ] + let selector = `[data-${quoteAttributeValue(variant.value.value)}]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] }) variants.functional('nth', (ruleNode, variant) => { @@ -1295,7 +1302,11 @@ export function substituteAtVariant(ast: AstNode[], designSystem: DesignSystem): } } - nodes.push(node) + if (node.selector === '&') { + nodes.push(...node.nodes) + } else { + nodes.push(node) + } } // Update the variant at-rule node, to be the `&` rule node