Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Split ::backdrop into separate defaults group #8567

Merged
merged 3 commits into from Jun 9, 2022
Merged

Split ::backdrop into separate defaults group #8567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f406134
Split `::backdrop` into separate defaults group
thecrypticace Jun 9, 2022
94ba3b3
Update tests
thecrypticace Jun 9, 2022
7f4308b
Update changelog
thecrypticace Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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