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

Update Important Selector Strategy to apply styles to wrapper component also #14734

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Update Important Selector Strategy to apply styles to wrapper component also #14734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b6f63a
'update important selector to also apply styles to wrapper component
nickfujita Oct 21, 2024
774b063
'fix reapplication of important selector on selectors generated from …
nickfujita Oct 22, 2024
974274d
Merge branch 'main' into important-selector-include-wrapper
nickfujita Nov 21, 2024
16201cf
Merge branch 'main' into important-selector-include-wrapper
nickfujita Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/lib/expandApplyAtRules.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,10 +565,12 @@ function processApply(root, context, localCache) {
// We do *not* want to do this for user CSS that happens to be structured the same
let isGenerated = parent.raws.tailwind !== undefined

let parentSelector =
isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0
? parent.selector.slice(importantSelector.length)
: parent.selector
let parentSelector = parent.selector
if (isGenerated && importantSelector && parent.selector.includes(importantSelector)) {
const parts = parent.selector.split(',')
const filteredParts = parts.filter((_, i) => i % 2 === 0).join(',')
parentSelector = filteredParts.replace(importantSelector, '')
}

// If the selector becomes empty after replacing the important selector
// This means that it's the same as the parent selector and we don't want to replace it
Expand Down
2 changes: 1 addition & 1 deletion src/util/applyImportantSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@ export function applyImportantSelector(selector, important) {
movePseudos(sel)
})

return `${important} ${sel.toString()}`
return `${important}${sel.toString()}, ${important} ${sel.toString()}`
}
2 changes: 2 additions & 0 deletions tests/apply.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1754,9 +1754,11 @@ it('apply + layer utilities + selector variants (like group) + important selecto
let result = await run(input, config)

expect(result.css).toMatchFormattedCss(css`
#myselector:is(.custom-utility),
#myselector :is(.custom-utility) {
font-weight: 400;
}
#myselector:is(.group:hover .custom-utility),
#myselector :is(.group:hover .custom-utility) {
text-decoration-line: underline;
}
Expand Down
3 changes: 3 additions & 0 deletions tests/custom-plugins.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,6 +843,7 @@ test('when important is a selector it is used to scope utilities instead of addi

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
#app.tw-custom-rotate-90,
#app .tw-custom-rotate-90 {
transform: rotate(90deg);
}
Expand All @@ -867,7 +868,9 @@ test('when important is a selector it scopes all selectors in a rule, even thoug

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
#app.custom-rotate-90,
#app .custom-rotate-90,
#app.custom-rotate-1\/4,
#app .custom-rotate-1\/4 {
transform: rotate(90deg);
}
Expand Down
3 changes: 3 additions & 0 deletions tests/experimental.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,17 @@ test('experimental universal selector improvements (#app important)', () => {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
#app:is(.resize),
#app :is(.resize) {
resize: both;
}
#app:is(.divide-y > :not([hidden]) ~ :not([hidden])),
#app :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
#app:is(.shadow),
#app :is(.shadow) {
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
Expand Down
17 changes: 17 additions & 0 deletions tests/important-selector.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ test('important selector', () => {
max-width: 1536px;
}
}
#app.btn,
#app .btn {
button: yes;
}
Expand All @@ -124,41 +125,56 @@ test('important selector', () => {
transform: rotate(360deg);
}
}
#app:is(.animate-spin),
#app :is(.animate-spin) {
animation: 1s linear infinite spin;
}
#app:is(.font-bold),
#app :is(.font-bold) {
font-weight: 700;
}
.custom-util {
button: no;
}
#app.\[color\:red\],
#app .\[color\:red\] {
color: red;
}
#app:is(.group:hover .group-hover\:focus-within\:text-left:focus-within),
#app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) {
text-align: left;
}
@media (prefers-reduced-motion: no-preference) {
#app:is(.motion-safe\:hover\:text-center:hover),
#app :is(.motion-safe\:hover\:text-center:hover) {
text-align: center;
}
}
@media (min-width: 768px) {
#app:is(.md\:hover\:text-right:hover),
#app :is(.md\:hover\:text-right:hover) {
text-align: right;
}
}
#app:is(.rtl\:active\:text-center:active:where([dir='rtl'], [dir='rtl'] *)),
#app :is(.rtl\:active\:text-center:active:where([dir='rtl'], [dir='rtl'] *)) {
text-align: center;
}
#app:is(.dark\:before\:underline:where(.dark, .dark *)):before,
#app :is(.dark\:before\:underline:where(.dark, .dark *)):before {
content: var(--tw-content);
text-decoration-line: underline;
}
#app:is(.dark\:focus\:text-left:focus:where(.dark, .dark *)),
#app :is(.dark\:focus\:text-left:focus:where(.dark, .dark *)) {
text-align: left;
}
#app:is(
.hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100:where(
.dark,
.dark *
):where([dir='rtl'], [dir='rtl'] *)
)::file-selector-button:hover,
#app
:is(
.hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100:where(
Expand Down Expand Up @@ -193,6 +209,7 @@ test('pseudo-elements are appended after the `:is()`', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
#app.dark\:before\:bg-black:where(.dark, .dark *)::before,
#app .dark\:before\:bg-black:where(.dark, .dark *)::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
Expand Down
34 changes: 17 additions & 17 deletions tests/util/apply-important-selector.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ import { applyImportantSelector } from '../../src/util/applyImportantSelector'

it.each`
before | after
${'.foo'} | ${'#app .foo'}
${'.foo .bar'} | ${'#app :is(.foo .bar)'}
${'.foo:hover'} | ${'#app .foo:hover'}
${'.foo .bar:hover'} | ${'#app :is(.foo .bar:hover)'}
${'.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 .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'}
${'.foo'} | ${'#app.foo, #app .foo'}
${'.foo .bar'} | ${'#app:is(.foo .bar), #app :is(.foo .bar)'}
${'.foo:hover'} | ${'#app.foo:hover, #app .foo:hover'}
${'.foo .bar:hover'} | ${'#app:is(.foo .bar:hover), #app :is(.foo .bar:hover)'}
${'.foo::before'} | ${'#app.foo::before, #app .foo::before'}
${'.foo::file-selector-button'} | ${'#app.foo::file-selector-button, #app .foo::file-selector-button'}
${'.foo::-webkit-progress-bar'} | ${'#app.foo::-webkit-progress-bar, #app .foo::-webkit-progress-bar'}
${'.foo:hover::before'} | ${'#app.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, #app :is(:where(.dark) :is(:where([dir="rtl"]) .foo))::before'}
${':is(:where(.dark) .foo) .bar'} | ${'#app:is(:is(:where(.dark) .foo) .bar), #app :is(:is(:where(.dark) .foo) .bar)'}
${':is(.foo) :is(.bar)'} | ${'#app:is(:is(.foo) :is(.bar)), #app :is(:is(.foo) :is(.bar))'}
${':is(.foo)::before'} | ${'#app:is(.foo)::before, #app :is(.foo)::before'}
${'.foo:before'} | ${'#app.foo:before, #app .foo:before'}
${'.foo::some-uknown-pseudo'} | ${'#app.foo::some-uknown-pseudo, #app .foo::some-uknown-pseudo'}
${'.foo::some-uknown-pseudo:hover'} | ${'#app.foo::some-uknown-pseudo:hover, #app .foo::some-uknown-pseudo:hover'}
${'.foo:focus::some-uknown-pseudo:hover'} | ${'#app.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, #app .foo:hover::some-uknown-pseudo:focus'}
`('should generate "$after" from "$before"', ({ before, after }) => {
expect(applyImportantSelector(before, '#app')).toEqual(after)
})