From 413df85af0ceef5c7ed0b2cb00c1d2aebc078820 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 08:29:13 -0400 Subject: [PATCH 01/19] =?UTF-8?q?Don=E2=80=99t=20move=20`::deep`=20pseudo?= =?UTF-8?q?=20element=20to=20end=20of=20selector=20when=20using=20`@apply`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/util/formatVariantSelector.js | 5 +++-- tests/apply.test.js | 30 ++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js index 8857d8fc55e1..4a8ed0995601 100644 --- a/src/util/formatVariantSelector.js +++ b/src/util/formatVariantSelector.js @@ -338,8 +338,9 @@ let pseudoElementExceptions = [ '::-webkit-scrollbar-corner', '::-webkit-resizer', - // Old-style Angular Shadow DOM piercing pseudo element - '::ng-deep', + // Vendor-specific Shadow DOM piercing pseudo elements + '::ng-deep', // Angular + '::deep', // Blazor ] /** diff --git a/tests/apply.test.js b/tests/apply.test.js index 15cb4176880d..b01731761491 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -2457,4 +2457,34 @@ crosscheck(({ stable, oxide }) => { // 2. It uses invalid selector syntax that Lightning CSS does not support // It may be enough for Oxide to not support it at all oxide.test.todo('::ng-deep pseudo element is left alone') + + stable.test('::deep pseudo element is left alone', () => { + let config = { + darkMode: 'class', + content: [ + { + raw: html`
`, + }, + ], + } + + let input = css` + ::deep .foo .bar { + @apply font-bold; + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ::deep .foo .bar { + font-weight: 700; + } + `) + }) + }) + + // 1. `::deep` is from Blazor + // 2. It uses invalid selector syntax that Lightning CSS does not support + // It may be enough for Oxide to not support it at all + oxide.test.todo('::deep pseudo element is left alone') }) From 5a54419b96c649f19776678f1983258bfee18f52 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 08:31:32 -0400 Subject: [PATCH 02/19] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ebd2f590cacf..37e52871a504 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Don’t move `::ng-deep` pseudo-element to end of selector when using `@apply` ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943)) +- Don’t move `::deep` pseudo-element to end of selector when using `@apply` ([#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) ## [3.3.1] - 2023-03-30 From bef275ffa5c4b14eded4f56bdd35894bf36ed2b3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 10:20:00 -0400 Subject: [PATCH 03/19] Move pseudo-elements in two passes --- src/util/formatVariantSelector.js | 38 +++++++++++++++++++------------ 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js index 4a8ed0995601..272e3f148f3e 100644 --- a/src/util/formatVariantSelector.js +++ b/src/util/formatVariantSelector.js @@ -360,40 +360,50 @@ let pseudoElementExceptions = [ export function collectPseudoElements(selector, force = false) { /** @type {Node[]} */ let nodes = [] + + /** @type {Node[]} */ + let children = [] + let seenPseudoElement = null for (let node of [...selector.nodes]) { if (isPseudoElement(node, force)) { nodes.push(node) - selector.removeChild(node) + children.push(node) seenPseudoElement = node.value } else if (seenPseudoElement !== null) { if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) { nodes.push(node) - selector.removeChild(node) + children.push(node) } else { seenPseudoElement = null } } - if (node?.nodes) { - let hasPseudoElementRestrictions = - node.type === 'pseudo' && (node.value === ':is' || node.value === ':has') + if (!node?.nodes) { + continue + } - let [collected, seenPseudoElementInSelector] = collectPseudoElements( - node, - force || hasPseudoElementRestrictions - ) + let hasPseudoElementRestrictions = + node.type === 'pseudo' && (node.value === ':is' || node.value === ':has') - if (seenPseudoElementInSelector) { - seenPseudoElement = seenPseudoElementInSelector - } + let [collected, seenPseudoElementInSelector] = collectPseudoElements( + node, + force || hasPseudoElementRestrictions + ) - nodes.push(...collected) + if (seenPseudoElementInSelector) { + seenPseudoElement = seenPseudoElementInSelector } + + nodes.push(...collected) } - return [nodes, seenPseudoElement] + // Only remove direct children, otherwise we might attempt to + // remove nodes that are part of a different selector. + children.forEach((child) => selector.removeChild(child)) + + return [[...nodes], seenPseudoElement] } // This will make sure to move pseudo's to the correct spot (the end for From bba56318213d24359ae3ed639446b6d4fb3cd604 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 15:01:10 -0400 Subject: [PATCH 04/19] Rewrite pseudo-element relocation logic --- src/lib/expandApplyAtRules.js | 10 +- src/util/applyImportantSelector.js | 7 +- src/util/formatVariantSelector.js | 140 +------------------------- src/util/pseudoElements.ts | 154 +++++++++++++++++++++++++++++ 4 files changed, 160 insertions(+), 151 deletions(-) create mode 100644 src/util/pseudoElements.ts diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js index c6d53d80e29f..3763809e003e 100644 --- a/src/lib/expandApplyAtRules.js +++ b/src/lib/expandApplyAtRules.js @@ -4,7 +4,7 @@ import parser from 'postcss-selector-parser' import { resolveMatches } from './generateRules' import escapeClassName from '../util/escapeClassName' import { applyImportantSelector } from '../util/applyImportantSelector' -import { collectPseudoElements, sortSelector } from '../util/formatVariantSelector.js' +import { movePseudos } from '../util/pseudoElements' /** @typedef {Map} ApplyCache */ @@ -566,13 +566,7 @@ function processApply(root, context, localCache) { // Move pseudo elements to the end of the selector (if necessary) let selector = parser().astSync(rule.selector) - selector.each((sel) => { - let [pseudoElements] = collectPseudoElements(sel) - if (pseudoElements.length > 0) { - sel.nodes.push(...pseudoElements.sort(sortSelector)) - } - }) - + selector.each((sel) => movePseudos(sel)) rule.selector = selector.toString() }) } diff --git a/src/util/applyImportantSelector.js b/src/util/applyImportantSelector.js index d85efcad2fd0..ff9ec4f4b343 100644 --- a/src/util/applyImportantSelector.js +++ b/src/util/applyImportantSelector.js @@ -1,5 +1,5 @@ import parser from 'postcss-selector-parser' -import { collectPseudoElements, sortSelector } from './formatVariantSelector.js' +import { movePseudos } from './pseudoElements' export function applyImportantSelector(selector, important) { let sel = parser().astSync(selector) @@ -20,10 +20,7 @@ export function applyImportantSelector(selector, important) { ] } - let [pseudoElements] = collectPseudoElements(sel) - if (pseudoElements.length > 0) { - sel.nodes.push(...pseudoElements.sort(sortSelector)) - } + movePseudos(sel) }) return `${important} ${sel.toString()}` diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js index 272e3f148f3e..e3016e804779 100644 --- a/src/util/formatVariantSelector.js +++ b/src/util/formatVariantSelector.js @@ -2,6 +2,7 @@ import selectorParser from 'postcss-selector-parser' import unescape from 'postcss-selector-parser/dist/util/unesc' import escapeClassName from '../util/escapeClassName' import prefixSelector from '../util/prefixSelector' +import { movePseudos } from './pseudoElements' /** @typedef {import('postcss-selector-parser').Root} Root */ /** @typedef {import('postcss-selector-parser').Selector} Selector */ @@ -245,12 +246,7 @@ export function finalizeSelector(current, formats, { context, candidate, base }) }) // Move pseudo elements to the end of the selector (if necessary) - selector.each((sel) => { - let [pseudoElements] = collectPseudoElements(sel) - if (pseudoElements.length > 0) { - sel.nodes.push(...pseudoElements.sort(sortSelector)) - } - }) + selector.each((sel) => movePseudos(sel)) return selector.toString() } @@ -318,135 +314,3 @@ export function handleMergePseudo(selector, format) { return [selector, format] } - -// Note: As a rule, double colons (::) should be used instead of a single colon -// (:). This distinguishes pseudo-classes from pseudo-elements. However, since -// this distinction was not present in older versions of the W3C spec, most -// browsers support both syntaxes for the original pseudo-elements. -let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter'] - -// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter. -let pseudoElementExceptions = [ - '::file-selector-button', - - // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes - '::-webkit-scrollbar', - '::-webkit-scrollbar-button', - '::-webkit-scrollbar-thumb', - '::-webkit-scrollbar-track', - '::-webkit-scrollbar-track-piece', - '::-webkit-scrollbar-corner', - '::-webkit-resizer', - - // Vendor-specific Shadow DOM piercing pseudo elements - '::ng-deep', // Angular - '::deep', // Blazor -] - -/** - * This will make sure to move pseudo's to the correct spot (the end for - * pseudo elements) because otherwise the selector will never work - * anyway. - * - * E.g.: - * - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before` - * - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before` - * - * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order. - * - * @param {Selector} selector - * @param {boolean} force - **/ -export function collectPseudoElements(selector, force = false) { - /** @type {Node[]} */ - let nodes = [] - - /** @type {Node[]} */ - let children = [] - - let seenPseudoElement = null - - for (let node of [...selector.nodes]) { - if (isPseudoElement(node, force)) { - nodes.push(node) - children.push(node) - seenPseudoElement = node.value - } else if (seenPseudoElement !== null) { - if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) { - nodes.push(node) - children.push(node) - } else { - seenPseudoElement = null - } - } - - if (!node?.nodes) { - continue - } - - let hasPseudoElementRestrictions = - node.type === 'pseudo' && (node.value === ':is' || node.value === ':has') - - let [collected, seenPseudoElementInSelector] = collectPseudoElements( - node, - force || hasPseudoElementRestrictions - ) - - if (seenPseudoElementInSelector) { - seenPseudoElement = seenPseudoElementInSelector - } - - nodes.push(...collected) - } - - // Only remove direct children, otherwise we might attempt to - // remove nodes that are part of a different selector. - children.forEach((child) => selector.removeChild(child)) - - return [[...nodes], seenPseudoElement] -} - -// This will make sure to move pseudo's to the correct spot (the end for -// pseudo elements) because otherwise the selector will never work -// anyway. -// -// E.g.: -// - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before` -// - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before` -// -// `::before:hover` doesn't work, which means that we can make it work -// for you by flipping the order. -export function sortSelector(a, z) { - // Both nodes are non-pseudo's so we can safely ignore them and keep - // them in the same order. - if (a.type !== 'pseudo' && z.type !== 'pseudo') { - return 0 - } - - // If one of them is a combinator, we need to keep it in the same order - // because that means it will start a new "section" in the selector. - if ((a.type === 'combinator') ^ (z.type === 'combinator')) { - return 0 - } - - // One of the items is a pseudo and the other one isn't. Let's move - // the pseudo to the right. - if ((a.type === 'pseudo') ^ (z.type === 'pseudo')) { - return (a.type === 'pseudo') - (z.type === 'pseudo') - } - - // Both are pseudo's, move the pseudo elements (except for - // ::file-selector-button) to the right. - return isPseudoElement(a) - isPseudoElement(z) -} - -function isPseudoElement(node, force = false) { - if (node.type !== 'pseudo') return false - if (pseudoElementExceptions.includes(node.value) && !force) return false - - return node.value.startsWith('::') || pseudoElementsBC.includes(node.value) -} - -function isPseudoClass(node, force) { - return node.type === 'pseudo' && !isPseudoElement(node, force) -} diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts new file mode 100644 index 000000000000..c8ad38bb1684 --- /dev/null +++ b/src/util/pseudoElements.ts @@ -0,0 +1,154 @@ +import type { Selector, Pseudo, Node } from 'postcss-selector-parser' + +// There are some pseudo elements that may or may not be: + +// - actionable: This means user-action pseudo classes can be attached to them +// The spec is not clear on whether this is allowed or not — but in practice it is. + +// - terminal: They MUST be placed at the end of a selector +// This is the required in the spec. However, some pseudo elements are not "terminal" because +// they represent a "boundary piercing" that is compiled out by a build step. + +// - jumpable: This pseudo element may "jump" over a combinator when moving it to the end of the selector + +type PseudoProperty = 'terminal' | 'actionable' | 'jumpable' + +let elementProperties: Record = { + '::after': ['terminal', 'jumpable'], + '::backdrop': ['terminal'], + '::before': ['terminal', 'jumpable'], + '::cue': ['terminal'], + '::cue-region': ['terminal'], + '::first-letter': ['terminal', 'jumpable'], + '::first-line': ['terminal', 'jumpable'], + '::grammar-error': ['terminal'], + '::marker': ['terminal'], + '::part': ['terminal', 'actionable'], + '::placeholder': ['terminal'], + '::selection': ['terminal'], + '::slotted': ['terminal'], + '::spelling-error': ['terminal'], + '::target-text': ['terminal'], + + // other + '::file-selector-button': ['terminal', 'actionable'], + '::-webkit-progress-bar': ['terminal', 'actionable'], + + // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes + '::-webkit-scrollbar': ['actionable'], + '::-webkit-scrollbar-button': ['actionable'], + '::-webkit-scrollbar-thumb': ['actionable'], + '::-webkit-scrollbar-track': ['actionable'], + '::-webkit-scrollbar-track-piece': ['actionable'], + '::-webkit-scrollbar-corner': ['actionable'], + '::-webkit-resizer': ['actionable'], + + // Note: As a rule, double colons (::) should be used instead of a single colon + // (:). This distinguishes pseudo-classes from pseudo-elements. However, since + // this distinction was not present in older versions of the W3C spec, most + // browsers support both syntaxes for the original pseudo-elements. + ':after': ['terminal', 'jumpable'], + ':before': ['terminal', 'jumpable'], + ':first-letter': ['terminal', 'jumpable'], + ':first-line': ['terminal', 'jumpable'], + + __default__: ['actionable'], +} + +export function movePseudos(sel: Selector) { + let [pseudos] = movablePseudos(sel) + + // Remove all pseudo elements from their respective selectors + pseudos.forEach(([sel, pseudo]) => sel.removeChild(pseudo)) + + // Re-add them to the end of the selector in the correct order. + // This moves pseudo elements to the end of the selector + // because otherwise the selector will never work. + // + // Examples: + // - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before` + // - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before` + // + // The selector `::before:hover` does not work but we + // can make it work for you by flipping the order. + sel.nodes.push( + ...pseudos + .sort(([, a, aAttachedTo], [, z, zAttachedTo]) => { + let aIsElement = isPseudoElement(a) + let zIsElement = isPseudoElement(z) + + // Moves pseudo elements to the end of the selector + // Keeping attached pseudo classes in place + + // ::before:hover => :hover::before (:hover is not attached) + // :hover::before => :hover::before (:hover is not attached) + // :hover::file-selector-button:hover => :hover::file-selector-button (:hover is not attached) + // ::file-selector-button:hover => ::file-selector-button:hover (:hover is attached) + + // When A is a pseudo-element and Z is a pseudo-class, we want to move A to the end + // Unless Z is attached to A in which case the order is correct + if (aIsElement && !zIsElement) return zAttachedTo !== a ? 1 : 0 + + // When Z is a pseudo-element and A is a pseudo-class, we want to move Z to the end + // Unless Z is attached to A in which case the order is correct + if (!aIsElement && zIsElement) return aAttachedTo !== z ? -1 : 0 + + return 0 + }) + .map(([, pseudo]) => pseudo) + ) + + return sel +} + +type MovablePseudo = [sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null] +type MovablePseudosResult = [pseudos: MovablePseudo[], lastSeenElement: Pseudo | null] + +function movablePseudos(sel: Selector): MovablePseudosResult { + let buffer: MovablePseudo[] = [] + let lastSeenElement: Pseudo | null = null + + for (let node of sel.nodes) { + if (node.type === 'combinator') { + buffer = buffer.filter(([, node]) => propertiesForPseudo(node).includes('jumpable')) + lastSeenElement = null + } else if (node.type === 'pseudo') { + if (isMovablePseudoElement(node)) { + lastSeenElement = node + buffer.push([sel, node, null]) + } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) { + buffer.push([sel, node, lastSeenElement]) + } else { + lastSeenElement = null + } + + for (let sub of node.nodes ?? []) { + let [movable, lastSeenElementInSub] = movablePseudos(sub) + lastSeenElement = lastSeenElementInSub || lastSeenElement + buffer.push(...movable) + } + } + } + + return [buffer, lastSeenElement] +} + +function isPseudoElement(node: Pseudo): boolean { + return node.value.startsWith('::') || elementProperties[node.value] !== undefined +} + +function isMovablePseudoElement(node: Pseudo) { + return isPseudoElement(node) && propertiesForPseudo(node).includes('terminal') +} + +function isAttachablePseudoClass(node: Node, pseudo: Pseudo) { + if (node.type !== 'pseudo') return false + if (node.value.startsWith('::')) return false + if (elementProperties[node.value] !== undefined) return false + + return propertiesForPseudo(pseudo).includes('actionable') +} + +function propertiesForPseudo(pseudo: Pseudo) { + return elementProperties[pseudo.value] ?? elementProperties.__default__ +} From 443151e3178ed0e32a3cf36eae403b0dd0d83b4d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 16:26:06 -0400 Subject: [PATCH 05/19] Update test `::test` is an unknown pseudo element and therefore may be actionable _and_ nestable --- tests/parallel-variants.test.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tests/parallel-variants.test.js b/tests/parallel-variants.test.js index 02e2776b5ecc..a4d4dfc8f1b2 100644 --- a/tests/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -28,7 +28,7 @@ crosscheck(() => { .test\:font-medium ::test { font-weight: 500; } - .hover\:test\:font-black :hover::test { + .hover\:test\:font-black ::test:hover { font-weight: 900; } .test\:font-bold::test { @@ -37,7 +37,7 @@ crosscheck(() => { .test\:font-medium::test { font-weight: 500; } - .hover\:test\:font-black:hover::test { + .hover\:test\:font-black::test:hover { font-weight: 900; } `) @@ -77,10 +77,10 @@ crosscheck(() => { .test\:font-medium::test { font-weight: 500; } - .hover\:test\:font-black :hover::test { + .hover\:test\:font-black ::test:hover { font-weight: 900; } - .hover\:test\:font-black:hover::test { + .hover\:test\:font-black::test:hover { font-weight: 900; } `) @@ -126,10 +126,10 @@ crosscheck(() => { .test\:font-medium::test { font-weight: 500; } - .hover\:test\:font-black :hover::test { + .hover\:test\:font-black ::test:hover { font-weight: 900; } - .hover\:test\:font-black:hover::test { + .hover\:test\:font-black::test:hover { font-weight: 900; } `) From 3937eb6061db8aafa3a292cb23fd780d8263c46c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 16:26:11 -0400 Subject: [PATCH 06/19] Add tests --- tests/format-variant-selector.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js index e8318dab4a76..0cd0b05ffd76 100644 --- a/tests/format-variant-selector.test.js +++ b/tests/format-variant-selector.test.js @@ -350,6 +350,8 @@ crosscheck(() => { ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} ${'#app :is(.dark &::before)'} | ${'#app :is(.dark &)::before'} ${'#app :is(:is(.dark &)::before)'} | ${'#app :is(:is(.dark &))::before'} + ${'#app :is(.foo::file-selector-button)'} | ${'#app :is(.foo)::file-selector-button'} + ${'#app :is(.foo::-webkit-progress-bar)'} | ${'#app :is(.foo)::-webkit-progress-bar'} `('should translate "$before" into "$after"', ({ before, after }) => { let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], { candidate: 'a', From 2e19068a1c9b90d958bf7e4f5f67479d3f3e1e39 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 16:28:09 -0400 Subject: [PATCH 07/19] Simplify tests --- tests/apply.test.js | 45 ++++++++++++++------------------------------- 1 file changed, 14 insertions(+), 31 deletions(-) diff --git a/tests/apply.test.js b/tests/apply.test.js index b01731761491..e4af6ee58a77 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -2428,7 +2428,7 @@ crosscheck(({ stable, oxide }) => { }) }) - stable.test('::ng-deep pseudo element is left alone', () => { + stable.test('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => { let config = { darkMode: 'class', content: [ @@ -2442,33 +2442,9 @@ crosscheck(({ stable, oxide }) => { ::ng-deep .foo .bar { @apply font-bold; } - ` - - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - ::ng-deep .foo .bar { - font-weight: 700; - } - `) - }) - }) - - // 1. `::ng-deep` is deprecated - // 2. It uses invalid selector syntax that Lightning CSS does not support - // It may be enough for Oxide to not support it at all - oxide.test.todo('::ng-deep pseudo element is left alone') - - stable.test('::deep pseudo element is left alone', () => { - let config = { - darkMode: 'class', - content: [ - { - raw: html`
`, - }, - ], - } - - let input = css` + ::v-deep .foo .bar { + @apply font-bold; + } ::deep .foo .bar { @apply font-bold; } @@ -2476,6 +2452,12 @@ crosscheck(({ stable, oxide }) => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ::ng-deep .foo .bar { + font-weight: 700; + } + ::v-deep .foo .bar { + font-weight: 700; + } ::deep .foo .bar { font-weight: 700; } @@ -2483,8 +2465,9 @@ crosscheck(({ stable, oxide }) => { }) }) - // 1. `::deep` is from Blazor - // 2. It uses invalid selector syntax that Lightning CSS does not support + // 1. `::ng-deep` is deprecated + // 2. `::deep` and `::v-deep` are non-standard + // 3. They all use invalid selector syntax that Lightning CSS does not support // It may be enough for Oxide to not support it at all - oxide.test.todo('::deep pseudo element is left alone') + oxide.test.todo('::ng-deep, ::deep, ::v-deep pseudo elements are left alone') }) From f52e5be166f4af0233878179fca1c584e76868e8 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 6 Apr 2023 16:31:39 -0400 Subject: [PATCH 08/19] Simplify --- src/util/pseudoElements.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index c8ad38bb1684..e1e336a2f37e 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -143,8 +143,7 @@ function isMovablePseudoElement(node: Pseudo) { function isAttachablePseudoClass(node: Node, pseudo: Pseudo) { if (node.type !== 'pseudo') return false - if (node.value.startsWith('::')) return false - if (elementProperties[node.value] !== undefined) return false + if (isPseudoElement(node)) return false return propertiesForPseudo(pseudo).includes('actionable') } From b093b322fd445e47635bd4882fe5bea8ee381a30 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 7 Apr 2023 15:28:25 +0200 Subject: [PATCH 09/19] run tests on CI multiple times This works around the timeouts/flakeyness of GitHub Actions --- .github/workflows/ci-stable.yml | 5 ++++- .github/workflows/ci.yml | 5 ++++- .github/workflows/integration-tests-oxide.yml | 5 ++++- .github/workflows/integration-tests-stable.yml | 5 ++++- .github/workflows/prepare-release.yml | 5 ++++- .github/workflows/release-insiders-oxide.yml | 5 ++++- .github/workflows/release-insiders-stable.yml | 5 ++++- 7 files changed, 28 insertions(+), 7 deletions(-) diff --git a/.github/workflows/ci-stable.yml b/.github/workflows/ci-stable.yml index 60d6abb9a0c8..592c6e3e3604 100644 --- a/.github/workflows/ci-stable.yml +++ b/.github/workflows/ci-stable.yml @@ -50,7 +50,10 @@ jobs: run: npm run build - name: Test - run: npm run test + run: | + npm run test || \ + npm run test || \ + npm run test || exit 1 - name: Lint run: npm run style diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 29b96700c8e8..3e2433d3b7ae 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -66,7 +66,10 @@ jobs: run: npx turbo run build --filter=// - name: Test - run: npx turbo run test --filter=// + run: | + npx turbo run test --filter=// || \ + npx turbo run test --filter=// || \ + npx turbo run test --filter=// || exit 1 - name: Lint run: npx turbo run style --filter=// diff --git a/.github/workflows/integration-tests-oxide.yml b/.github/workflows/integration-tests-oxide.yml index b9b3e513d6f2..9da82b4b873b 100644 --- a/.github/workflows/integration-tests-oxide.yml +++ b/.github/workflows/integration-tests-oxide.yml @@ -78,4 +78,7 @@ jobs: run: npx turbo run build --filter=// - name: Test ${{ matrix.integration }} - run: npx turbo run test --filter=./integrations/${{ matrix.integration }} + run: | + npx turbo run test --filter=./integrations/${{ matrix.integration }} || \ + npx turbo run test --filter=./integrations/${{ matrix.integration }} || \ + npx turbo run test --filter=./integrations/${{ matrix.integration }} || exit 1 diff --git a/.github/workflows/integration-tests-stable.yml b/.github/workflows/integration-tests-stable.yml index 86329d4044bd..b2820719656b 100644 --- a/.github/workflows/integration-tests-stable.yml +++ b/.github/workflows/integration-tests-stable.yml @@ -77,4 +77,7 @@ jobs: run: npm run build - name: Test ${{ matrix.integration }} - run: npm run test --prefix ./integrations/${{ matrix.integration }} + run: | + npm run test --prefix ./integrations/${{ matrix.integration }} || \ + npm run test --prefix ./integrations/${{ matrix.integration }} || \ + npm run test --prefix ./integrations/${{ matrix.integration }} || exit 1 diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index 4ec646df71c6..2ad36d3dd670 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -65,7 +65,10 @@ jobs: working-directory: standalone-cli - name: Test - run: npm test + run: | + npm test || \ + npm test || \ + npm test || exit 1 working-directory: standalone-cli - name: Release diff --git a/.github/workflows/release-insiders-oxide.yml b/.github/workflows/release-insiders-oxide.yml index 9e1dd9a0edc5..e074d064d0ae 100644 --- a/.github/workflows/release-insiders-oxide.yml +++ b/.github/workflows/release-insiders-oxide.yml @@ -387,7 +387,10 @@ jobs: run: npm run build - name: Test - run: npm test + run: | + npm test || \ + npm test || \ + npm test || exit 1 - name: 'Version based on commit: 0.0.0-${{ env.RELEASE_CHANNEL }}.${{ env.SHA_SHORT }}' run: npm version 0.0.0-${{ env.RELEASE_CHANNEL }}.${{ env.SHA_SHORT }} --force --no-git-tag-version diff --git a/.github/workflows/release-insiders-stable.yml b/.github/workflows/release-insiders-stable.yml index 956473f696c2..f8bb322d412f 100644 --- a/.github/workflows/release-insiders-stable.yml +++ b/.github/workflows/release-insiders-stable.yml @@ -44,7 +44,10 @@ jobs: run: npm run build - name: Test - run: npm run test + run: | + npm run test || \ + npm run test || \ + npm run test || exit 1 - name: Resolve version id: vars From 826851a080df3c396042e4c664586131492af23f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 09:31:05 -0400 Subject: [PATCH 10/19] Update formatting --- src/util/pseudoElements.ts | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index e1e336a2f37e..7c7c70e660fc 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -1,15 +1,22 @@ import type { Selector, Pseudo, Node } from 'postcss-selector-parser' -// There are some pseudo elements that may or may not be: - -// - actionable: This means user-action pseudo classes can be attached to them -// The spec is not clear on whether this is allowed or not — but in practice it is. - -// - terminal: They MUST be placed at the end of a selector -// This is the required in the spec. However, some pseudo elements are not "terminal" because -// they represent a "boundary piercing" that is compiled out by a build step. - -// - jumpable: This pseudo element may "jump" over a combinator when moving it to the end of the selector +// There are some pseudo-elements that may or may not be: + +// **Actionable** +// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself +// structural-pseudo-classes are NOT allowed but we don't make +// The spec is not clear on whether this is allowed or not — but in practice it is. + +// **Terminal** +// It MUST be placed at the end of a selector +// +// This is the required in the spec. However, some pseudo elements are not "terminal" because +// they represent a "boundary piercing" that is compiled out by a build step. + +// **Jumpable** +// Any terminal element may "jump" over combinators when moving to the end of the selector +// +// This is a backwards-compat quirk of :before and :after variants. type PseudoProperty = 'terminal' | 'actionable' | 'jumpable' From 7156d5a0ad2180a8977dfa752bf4e841000cf3c5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 09:31:12 -0400 Subject: [PATCH 11/19] Add comment --- src/util/pseudoElements.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index 7c7c70e660fc..84cd1764221d 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -59,6 +59,9 @@ let elementProperties: Record = { ':first-letter': ['terminal', 'jumpable'], ':first-line': ['terminal', 'jumpable'], + // The default value is used when the pseudo-element is not recognized + // Because it's not recognized, we don't know if it's terminal or not + // So we assume it can't be moved AND can have user-action pseudo classes attached to it __default__: ['actionable'], } From b618f4f4fa08ea7e524068e863b62eb54b4a315e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 09:31:23 -0400 Subject: [PATCH 12/19] Mark webkit peusdo elements as terminal --- src/util/pseudoElements.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index 84cd1764221d..9ba70a1089e2 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -42,13 +42,13 @@ let elementProperties: Record = { '::-webkit-progress-bar': ['terminal', 'actionable'], // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes - '::-webkit-scrollbar': ['actionable'], - '::-webkit-scrollbar-button': ['actionable'], - '::-webkit-scrollbar-thumb': ['actionable'], - '::-webkit-scrollbar-track': ['actionable'], - '::-webkit-scrollbar-track-piece': ['actionable'], - '::-webkit-scrollbar-corner': ['actionable'], - '::-webkit-resizer': ['actionable'], + '::-webkit-scrollbar': ['terminal', 'actionable'], + '::-webkit-scrollbar-button': ['terminal', 'actionable'], + '::-webkit-scrollbar-thumb': ['terminal', 'actionable'], + '::-webkit-scrollbar-track': ['terminal', 'actionable'], + '::-webkit-scrollbar-track-piece': ['terminal', 'actionable'], + '::-webkit-scrollbar-corner': ['terminal', 'actionable'], + '::-webkit-resizer': ['terminal', 'actionable'], // Note: As a rule, double colons (::) should be used instead of a single colon // (:). This distinguishes pseudo-classes from pseudo-elements. However, since From a82e953bc31548a5349b632ea83da2361f792230 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 09:39:12 -0400 Subject: [PATCH 13/19] update comment --- src/util/pseudoElements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index 9ba70a1089e2..f39218eb91ad 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -92,7 +92,7 @@ export function movePseudos(sel: Selector) { // ::before:hover => :hover::before (:hover is not attached) // :hover::before => :hover::before (:hover is not attached) - // :hover::file-selector-button:hover => :hover::file-selector-button (:hover is not attached) + // :hover::file-selector-button => :hover::file-selector-button (:hover is not attached) // ::file-selector-button:hover => ::file-selector-button:hover (:hover is attached) // When A is a pseudo-element and Z is a pseudo-class, we want to move A to the end From a5073ddd5286b8a7f988a9da8155fb90d2654ad1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 7 Apr 2023 16:03:50 +0200 Subject: [PATCH 14/19] only execute the `global-setup` once --- jest/global-setup.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/jest/global-setup.js b/jest/global-setup.js index 65a8dd4dd32a..b28ac7377b86 100644 --- a/jest/global-setup.js +++ b/jest/global-setup.js @@ -1,6 +1,9 @@ let { execSync } = require('child_process') +let state = { ran: false } module.exports = function () { + if (state.ran) return execSync('npm run build:rust', { stdio: 'ignore' }) execSync('npm run generate:plugin-list', { stdio: 'ignore' }) + state.ran = true } From 756e1cdec93b09c424b78b4bb0d574c7b8a9c6ae Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 10:27:48 -0400 Subject: [PATCH 15/19] Simplify NO SORT FN YAY --- src/util/pseudoElements.ts | 31 +++---------------------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.ts index f39218eb91ad..0f2d0b965f12 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.ts @@ -72,8 +72,8 @@ export function movePseudos(sel: Selector) { pseudos.forEach(([sel, pseudo]) => sel.removeChild(pseudo)) // Re-add them to the end of the selector in the correct order. - // This moves pseudo elements to the end of the selector - // because otherwise the selector will never work. + // This moves terminal pseudo elements to the end of the + // selector otherwise the selector will not be valid. // // Examples: // - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before` @@ -81,32 +81,7 @@ export function movePseudos(sel: Selector) { // // The selector `::before:hover` does not work but we // can make it work for you by flipping the order. - sel.nodes.push( - ...pseudos - .sort(([, a, aAttachedTo], [, z, zAttachedTo]) => { - let aIsElement = isPseudoElement(a) - let zIsElement = isPseudoElement(z) - - // Moves pseudo elements to the end of the selector - // Keeping attached pseudo classes in place - - // ::before:hover => :hover::before (:hover is not attached) - // :hover::before => :hover::before (:hover is not attached) - // :hover::file-selector-button => :hover::file-selector-button (:hover is not attached) - // ::file-selector-button:hover => ::file-selector-button:hover (:hover is attached) - - // When A is a pseudo-element and Z is a pseudo-class, we want to move A to the end - // Unless Z is attached to A in which case the order is correct - if (aIsElement && !zIsElement) return zAttachedTo !== a ? 1 : 0 - - // When Z is a pseudo-element and A is a pseudo-class, we want to move Z to the end - // Unless Z is attached to A in which case the order is correct - if (!aIsElement && zIsElement) return aAttachedTo !== z ? -1 : 0 - - return 0 - }) - .map(([, pseudo]) => pseudo) - ) + sel.nodes.push(...pseudos.map(([, pseudo]) => pseudo)) return sel } From 1e4e2f681df981186d2cea37f5e292b730ab9b58 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 10:36:43 -0400 Subject: [PATCH 16/19] Use typedefs --- .../{pseudoElements.ts => pseudoElements.js} | 58 ++++++++++++++----- 1 file changed, 45 insertions(+), 13 deletions(-) rename src/util/{pseudoElements.ts => pseudoElements.js} (77%) diff --git a/src/util/pseudoElements.ts b/src/util/pseudoElements.js similarity index 77% rename from src/util/pseudoElements.ts rename to src/util/pseudoElements.js index 0f2d0b965f12..9f0e54c67948 100644 --- a/src/util/pseudoElements.ts +++ b/src/util/pseudoElements.js @@ -1,4 +1,7 @@ -import type { Selector, Pseudo, Node } from 'postcss-selector-parser' +/** @typedef {import('postcss-selector-parser').Root} Root */ +/** @typedef {import('postcss-selector-parser').Selector} Selector */ +/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */ +/** @typedef {import('postcss-selector-parser').Node} Node */ // There are some pseudo-elements that may or may not be: @@ -18,9 +21,10 @@ import type { Selector, Pseudo, Node } from 'postcss-selector-parser' // // This is a backwards-compat quirk of :before and :after variants. -type PseudoProperty = 'terminal' | 'actionable' | 'jumpable' +/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */ -let elementProperties: Record = { +/** @type {Record} */ +let elementProperties = { '::after': ['terminal', 'jumpable'], '::backdrop': ['terminal'], '::before': ['terminal', 'jumpable'], @@ -65,7 +69,11 @@ let elementProperties: Record = { __default__: ['actionable'], } -export function movePseudos(sel: Selector) { +/** + * @param {Selector} sel + * @returns {Selector} + */ +export function movePseudos(sel) { let [pseudos] = movablePseudos(sel) // Remove all pseudo elements from their respective selectors @@ -86,12 +94,19 @@ export function movePseudos(sel: Selector) { return sel } -type MovablePseudo = [sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null] -type MovablePseudosResult = [pseudos: MovablePseudo[], lastSeenElement: Pseudo | null] +/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */ +/** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */ -function movablePseudos(sel: Selector): MovablePseudosResult { - let buffer: MovablePseudo[] = [] - let lastSeenElement: Pseudo | null = null +/** + * @param {Selector} sel + * @returns {MovablePseudosResult} + */ +function movablePseudos(sel) { + /** @type {MovablePseudo[]} */ + let buffer = [] + + /** @type {Pseudo | null} */ + let lastSeenElement = null for (let node of sel.nodes) { if (node.type === 'combinator') { @@ -118,21 +133,38 @@ function movablePseudos(sel: Selector): MovablePseudosResult { return [buffer, lastSeenElement] } -function isPseudoElement(node: Pseudo): boolean { +/** + * @param {Node} node + * @returns {boolean} + */ +function isPseudoElement(node) { return node.value.startsWith('::') || elementProperties[node.value] !== undefined } -function isMovablePseudoElement(node: Pseudo) { +/** + * @param {Node} node + * @returns {boolean} + */ +function isMovablePseudoElement(node) { return isPseudoElement(node) && propertiesForPseudo(node).includes('terminal') } -function isAttachablePseudoClass(node: Node, pseudo: Pseudo) { +/** + * @param {Node} node + * @param {Pseudo} pseudo + * @returns {boolean} + */ +function isAttachablePseudoClass(node, pseudo) { if (node.type !== 'pseudo') return false if (isPseudoElement(node)) return false return propertiesForPseudo(pseudo).includes('actionable') } -function propertiesForPseudo(pseudo: Pseudo) { +/** + * @param {Pseudo} pseudo + * @returns {PseudoProperty[]} + */ +function propertiesForPseudo(pseudo) { return elementProperties[pseudo.value] ?? elementProperties.__default__ } From 279219dff701793359a6fd88853c7b559ece0482 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 10:39:13 -0400 Subject: [PATCH 17/19] Update changelog --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37e52871a504..0c4d683726a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,8 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Don’t move `::ng-deep` pseudo-element to end of selector when using `@apply` ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943)) -- Don’t move `::deep` pseudo-element to end of selector when using `@apply` ([#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) +- Don’t move uknown pseudo-elements to end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) ## [3.3.1] - 2023-03-30 From 0ee9fcf6d39368518245f535aa41625674abacbd Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 10:39:29 -0400 Subject: [PATCH 18/19] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c4d683726a6..a350b297ab4c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Don’t move uknown pseudo-elements to end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) +- Don’t move uknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) ## [3.3.1] - 2023-03-30 From 29bf405bc06f18c7ab9afc12510d751eb56cd566 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Apr 2023 10:40:45 -0400 Subject: [PATCH 19/19] update again --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a350b297ab4c..dea972556ff4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Don’t move uknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) +- Don’t move unknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) ## [3.3.1] - 2023-03-30