archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2026-01-25 16:44:12 +00:00
Code Issues Projects Releases Wiki Activity

Loosen :is() wrapping rules in applyImportantSelector for more readable output. (#13900)

Browse Source
This commit is contained in:
Josh Wilson 2024-07-16 10:51:45 -04:00 committed by GitHub
parent 9c29e47c5f
commit 0573c0769a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/util/applyImportantSelector.js
View File

@ -5,13 +5,12 @@ export function applyImportantSelector(selector, important) {
let sel = parser().astSync(selector)
sel.each((sel) => {
// Wrap with :is if it's not already wrapped
let isWrapped =
sel.nodes[0].type === 'pseudo' &&
sel.nodes[0].value === ':is' &&
sel.nodes.every((node) => node.type !== 'combinator')
// For nesting, we only need to wrap a selector with :is() if it has a top-level combinator,
// e.g. `.dark .text-white`, to be independent of DOM order. Any other selector, including
// combinators inside of pseudos like `:where()`, are ok to nest.
let shouldWrap = sel.nodes.some((node) => node.type === 'combinator')
if (!isWrapped) {
if (shouldWrap) {
sel.nodes = [
parser.pseudo({
value: ':is',

23
tests/util/apply-important-selector.test.js
View File

@ -2,24 +2,23 @@ import { applyImportantSelector } from '../../src/util/applyImportantSelector'
it.each`
before | after
${'.foo'} | ${'#app :is(.foo)'}
${'.foo'} | ${'#app .foo'}
${'.foo .bar'} | ${'#app :is(.foo .bar)'}
${'.foo:hover'} | ${'#app :is(.foo:hover)'}
${'.foo:hover'} | ${'#app .foo:hover'}
${'.foo .bar:hover'} | ${'#app :is(.foo .bar:hover)'}
${'.foo::before'} | ${'#app :is(.foo)::before'}
${'.foo::before'} | ${'#app :is(.foo)::before'}
${'.foo::file-selector-button'} | ${'#app :is(.foo)::file-selector-button'}
${'.foo::-webkit-progress-bar'} | ${'#app :is(.foo)::-webkit-progress-bar'}
${'.foo:hover::before'} | ${'#app :is(.foo:hover)::before'}
${'.foo::before'} | ${'#app .foo::before'}
${'.foo::file-selector-button'} | ${'#app .foo::file-selector-button'}
${'.foo::-webkit-progress-bar'} | ${'#app .foo::-webkit-progress-bar'}
${'.foo:hover::before'} | ${'#app .foo:hover::before'}
${':is(:where(.dark) :is(:where([dir="rtl"]) .foo::before))'} | ${'#app :is(:where(.dark) :is(:where([dir="rtl"]) .foo))::before'}
${':is(:where(.dark) .foo) .bar'} | ${'#app :is(:is(:where(.dark) .foo) .bar)'}
${':is(.foo) :is(.bar)'} | ${'#app :is(:is(.foo) :is(.bar))'}
${':is(.foo)::before'} | ${'#app :is(.foo)::before'}
${'.foo:before'} | ${'#app :is(.foo):before'}
${'.foo::some-uknown-pseudo'} | ${'#app :is(.foo)::some-uknown-pseudo'}
${'.foo::some-uknown-pseudo:hover'} | ${'#app :is(.foo)::some-uknown-pseudo:hover'}
${'.foo:focus::some-uknown-pseudo:hover'} | ${'#app :is(.foo:focus)::some-uknown-pseudo:hover'}
${'.foo:hover::some-uknown-pseudo:focus'} | ${'#app :is(.foo:hover)::some-uknown-pseudo:focus'}
${'.foo:before'} | ${'#app .foo:before'}
${'.foo::some-uknown-pseudo'} | ${'#app .foo::some-uknown-pseudo'}
${'.foo::some-uknown-pseudo:hover'} | ${'#app .foo::some-uknown-pseudo:hover'}
${'.foo:focus::some-uknown-pseudo:hover'} | ${'#app .foo:focus::some-uknown-pseudo:hover'}
${'.foo:hover::some-uknown-pseudo:focus'} | ${'#app .foo:hover::some-uknown-pseudo:focus'}
`('should generate "$after" from "$before"', ({ before, after }) => {
expect(applyImportantSelector(before, '#app')).toEqual(after)
})