archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Split :has rules when using experimental.optimizeUniversalDefaults (#12736)

Browse Source 
* Split `:has` rules when using optimizeUniversalDefaults

* Update changelog
This commit is contained in:
Jordan Pittman 2024-01-09 15:10:19 -05:00
parent 50fa6dd13e
commit 9e62bf2043
3 changed files with 61 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Ensure max specificity of `0,0,1` for button and input Preflight rules ([#12735](https://github.com/tailwindlabs/tailwindcss/pull/12735))
- Split `:has` rules when using `experimental.optimizeUniversalDefaults` ([#12736](https://github.com/tailwindlabs/tailwindcss/pull/12736))
## [3.4.1] - 2014-01-05

6
src/lib/resolveDefaultsAtRules.js
View File

@ -104,8 +104,12 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
// 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
// Additionally if a selector contains `:has` we also consider
// it separately because FF only recently gained support for it
let selectorGroupName =
selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
selector.includes(':-') || selector.includes('::-') || selector.includes(':has')
? selector
: '__DEFAULT__'
let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
selectorGroups.set(selectorGroupName, selectors)

55
tests/resolve-defaults-at-rules.test.js
View File

@ -772,3 +772,58 @@ crosscheck(() => {
})
})
})
test('optimize universal defaults groups :has separately', () => {
let config = {
experimental: { optimizeUniversalDefaults: true },
content: [
{ raw: html`<div class="ring-1"></div>` },
{ raw: html`<div class="has-[:checked]:ring-1"></div>` },
],
corePlugins: { preflight: false },
}
let input = css`
@tailwind base;
@tailwind utilities;
`
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.ring-1 {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.has-\[\:checked\]\:ring-1:has(:checked) {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.has-\[\:checked\]\:ring-1:has(:checked) {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
`)
})
})