diff options
| author |  Drew Powers <1369770+drwpow@users.noreply.github.com>
| 2021-05-06 15:39:34 -0600 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-05-06 15:39:34 -0600 |
| commit | 87ab4c6927abb9adaeb846687092e5dab78e2d7f (patch) | |
| tree | 923708b1cf37d5e6d99d8861d0cb96dc9670c2ff | |
| parent | 7b55d3d43edbe491ed7162075f034ffdb1adbd45 (diff) | |
| download | astro-87ab4c6927abb9adaeb846687092e5dab78e2d7f.tar.gz astro-87ab4c6927abb9adaeb846687092e5dab78e2d7f.tar.zst astro-87ab4c6927abb9adaeb846687092e5dab78e2d7f.zip | |
Bugfix: scoped styles (#178)
| -rw-r--r-- | .changeset/wicked-sloths-hide.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts | 10 | ||||
| -rw-r--r-- | packages/astro/test/astro-scoped-styles.test.js | 3 |
3 files changed, 13 insertions, 5 deletions
diff --git a/.changeset/wicked-sloths-hide.md b/.changeset/wicked-sloths-hide.md new file mode 100644 index 000000000..887336138 --- /dev/null +++ b/.changeset/wicked-sloths-hide.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Bugfix: Scoped CSS with pseudoclasses and direct children selectors diff --git a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts index 23350869c..116302c0f 100644 --- a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts +++ b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts @@ -75,18 +75,18 @@ export function scopeRule(selector: string, className: string) { continue; } - // don‘t scope body, title, etc. - if (NEVER_SCOPED_TAGS.has(value)) { + // don’t scope body, title, etc. + if (CSS_SEPARATORS.has(value) || NEVER_SCOPED_TAGS.has(value)) { ss = head + value + tail; continue; } // scope everything else - let newSelector = ss.substring(start, end); + let newSelector = value; const pseudoIndex = newSelector.indexOf(':'); if (pseudoIndex > 0) { - // if there‘s a pseudoclass (:focus) - ss = head + newSelector.substring(start, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail; + // if there’s a pseudoclass (:focus or ::before) + ss = head + newSelector.substring(0, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail; } else { ss = head + newSelector + c + tail; } diff --git a/packages/astro/test/astro-scoped-styles.test.js b/packages/astro/test/astro-scoped-styles.test.js index 1fc11490b..90ea5b785 100644 --- a/packages/astro/test/astro-scoped-styles.test.js +++ b/packages/astro/test/astro-scoped-styles.test.js @@ -16,6 +16,9 @@ ScopedStyles('Scopes rules correctly', () => { '.class~:global(a)': `.class.${className}~a`, '.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(.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 |