Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

Bugfix: scoped styles (#178)

Browse source
This commit is contained in:
Drew Powers 2021-05-06 15:39:34 -06:00 committed by GitHub
parent 7b55d3d43e
commit 87ab4c6927
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wicked-sloths-hide.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Bugfix: Scoped CSS with pseudoclasses and direct children selectors

10
packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
View file

@ -75,18 +75,18 @@ export function scopeRule(selector: string, className: string) {
continue; continue;
} }
// don‘t scope body, title, etc. // don’t scope body, title, etc.
if (NEVER_SCOPED_TAGS.has(value)) { if (CSS_SEPARATORS.has(value) || NEVER_SCOPED_TAGS.has(value)) {
ss = head + value + tail; ss = head + value + tail;
continue; continue;
} }
// scope everything else // scope everything else
let newSelector = ss.substring(start, end); let newSelector = value;
const pseudoIndex = newSelector.indexOf(':'); const pseudoIndex = newSelector.indexOf(':');
if (pseudoIndex > 0) { if (pseudoIndex > 0) {
// if there‘s a pseudoclass (:focus) // if there’s a pseudoclass (:focus or ::before)
ss = head + newSelector.substring(start, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail; ss = head + newSelector.substring(0, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
} else { } else {
ss = head + newSelector + c + tail; ss = head + newSelector + c + tail;
} }

3
packages/astro/test/astro-scoped-styles.test.js
View file

@ -16,6 +16,9 @@ ScopedStyles('Scopes rules correctly', () => {
'.class~:global(a)': `.class.${className}~a`, '.class~:global(a)': `.class.${className}~a`,
'.class *': `.class.${className} .${className}`, '.class *': `.class.${className} .${className}`,
'.class>*': `.class.${className}>.${className}`, '.class>*': `.class.${className}>.${className}`,
'.class button:focus': `.class.${className} button.${className}:focus`,
'.class h3::before': `.class.${className} h3.${className}::before`,
'button:focus::before': `button.${className}:focus::before`,
'.class :global(*)': `.class.${className} *`, '.class :global(*)': `.class.${className} *`,
'.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens '.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens
'.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors '.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors