Skip to content

Commit

Permalink
Split ::backdrop into separate defaults group (#8567)
Browse files Browse the repository at this point in the history 
* Split `::backdrop` into separate defaults group

* Update tests

* Update changelog
  • Loading branch information
@thecrypticace
thecrypticace authored Jun 9, 2022
1 parent 7aa2d4d commit 6b1eb19
Show file tree
Hide file tree
Showing 16 changed files with 650 additions and 352 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

- Fix candidate extractor regression ([#8558](https://github.com/tailwindlabs/tailwindcss/pull/8558))
- Split `::backdrop`` into separate defaults group ([#8567](https://github.com/tailwindlabs/tailwindcss/pull/8567))

## [3.1.0] - 2022-06-08

Expand Down
89 changes: 53 additions & 36 deletions src/lib/resolveDefaultsAtRules.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,56 +91,73 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
rule.remove()
})

for (let universal of universals) {
/** @type {Map<string, Set<string>>} */
let selectorGroups = new Map()
if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
for (let universal of universals) {
/** @type {Map<string, Set<string>>} */
let selectorGroups = new Map()

let rules = variableNodeMap.get(universal.params) ?? []

for (let rule of rules) {
for (let selector of extractElementSelector(rule.selector)) {
// If selector contains a vendor prefix after a pseudo element or class,
// we consider them separately because merging the declarations into
// a single rule will cause browsers that do not understand the
// vendor prefix to throw out the whole rule
let selectorGroupName =
selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'

let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
selectorGroups.set(selectorGroupName, selectors)

selectors.add(selector)
}
}

let rules = variableNodeMap.get(universal.params) ?? []
if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
if (selectorGroups.size === 0) {
universal.remove()
continue
}

for (let rule of rules) {
for (let selector of extractElementSelector(rule.selector)) {
// If selector contains a vendor prefix after a pseudo element or class,
// we consider them separately because merging the declarations into
// a single rule will cause browsers that do not understand the
// vendor prefix to throw out the whole rule
let selectorGroupName =
selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
for (let [, selectors] of selectorGroups) {
let universalRule = postcss.rule({
source: universal.source,
})

let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
selectorGroups.set(selectorGroupName, selectors)
universalRule.selectors = [...selectors]

selectors.add(selector)
universalRule.append(universal.nodes.map((node) => node.clone()))
universal.before(universalRule)
}
}
}

if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
if (selectorGroups.size === 0) {
universal.remove()
continue
}

for (let [, selectors] of selectorGroups) {
let universalRule = postcss.rule({
source: universal.source,
})
universal.remove()
}
} else if (universals.size) {
let universalRule = postcss.rule({
selectors: ['*', '::before', '::after'],
})

universalRule.selectors = [...selectors]
for (let universal of universals) {
universalRule.append(universal.nodes)

universalRule.append(universal.nodes.map((node) => node.clone()))
if (!universalRule.parent) {
universal.before(universalRule)
}
} else {
let universalRule = postcss.rule({
source: universal.source,
})

universalRule.selectors = ['*', '::before', '::after', '::backdrop']
if (!universalRule.source) {
universalRule.source = universal.source
}

universalRule.append(universal.nodes)
universal.before(universalRule)
universal.remove()
}

universal.remove()
let backdropRule = universalRule.clone({
selectors: ['::backdrop'],
})

universalRule.after(backdropRule)
}
}
}
46 changes: 46 additions & 0 deletions tests/__snapshots__/source-maps.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,5 +309,51 @@ Array [
"2:4-18 -> 407:2-27",
"2:4 -> 408:2",
"2:18 -> 409:0",
"2:4 -> 411:0",
"2:4-18 -> 412:2-26",
"2:4-18 -> 413:2-26",
"2:4-18 -> 414:2-21",
"2:4-18 -> 415:2-21",
"2:4-18 -> 416:2-16",
"2:4-18 -> 417:2-16",
"2:4-18 -> 418:2-16",
"2:4-18 -> 419:2-17",
"2:4-18 -> 420:2-17",
"2:4-18 -> 421:2-15",
"2:4-18 -> 422:2-15",
"2:4-18 -> 423:2-20",
"2:4-18 -> 424:2-40",
"2:4-18 -> 425:2-17",
"2:4-18 -> 426:2-22",
"2:4-18 -> 427:2-24",
"2:4-18 -> 428:2-25",
"2:4-18 -> 429:2-26",
"2:4-18 -> 430:2-20",
"2:4-18 -> 431:2-29",
"2:4-18 -> 432:2-30",
"2:4-18 -> 433:2-40",
"2:4-18 -> 434:2-36",
"2:4-18 -> 435:2-29",
"2:4-18 -> 436:2-24",
"2:4-18 -> 437:2-32",
"2:4-18 -> 438:2-14",
"2:4-18 -> 439:2-20",
"2:4-18 -> 440:2-18",
"2:4-18 -> 441:2-19",
"2:4-18 -> 442:2-20",
"2:4-18 -> 443:2-16",
"2:4-18 -> 444:2-18",
"2:4-18 -> 445:2-15",
"2:4-18 -> 446:2-21",
"2:4-18 -> 447:2-23",
"2:4-18 -> 448:2-29",
"2:4-18 -> 449:2-27",
"2:4-18 -> 450:2-28",
"2:4-18 -> 451:2-29",
"2:4-18 -> 452:2-25",
"2:4-18 -> 453:2-26",
"2:4-18 -> 454:2-27",
"2:4 -> 455:2",
"2:18 -> 456:0",
]
`;
47 changes: 46 additions & 1 deletion tests/basic-usage.test.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,51 @@
*,
::before,
::after,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
Expand Down
53 changes: 2 additions & 51 deletions tests/basic-usage.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,56 +149,7 @@ test('default ring color can be a function', () => {

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(var(--red), 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
${defaults({ defaultRingColor: 'rgba(var(--red), 0.5)' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
Expand All @@ -210,7 +161,7 @@ test('default ring color can be a function', () => {
})
})

it('fasly config values still work', () => {
it('falsy config values still work', () => {
let config = {
content: [{ raw: html`<div class="inset-0"></div>` }],
theme: {
Expand Down
47 changes: 46 additions & 1 deletion tests/collapse-adjacent-rules.test.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,52 @@
}
*,
::before,
::after,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
Expand Down
47 changes: 46 additions & 1 deletion tests/import-syntax.test.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,52 @@ h1 {
}
*,
::before,
::after,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
Expand Down
Loading

0 comments on commit 6b1eb19

Please sign in to comment.