michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix body scoping (#1130)

Browse source 
Fixes #1074
This commit is contained in:
Drew Powers 2021-08-16 18:47:09 -05:00 committed by GitHub
parent 5e0e276609
commit 1f13e40316
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/calm-walls-unite.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix CSS scoping issue

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

@ -1,4 +1,4 @@
import { Declaration, Plugin } from 'postcss'; import { Plugin } from 'postcss';
interface AstroScopedOptions { interface AstroScopedOptions {
className: string; className: string;
@ -13,6 +13,11 @@ interface Selector {
const CSS_SEPARATORS = new Set([' ', ',', '+', '>', '~']); const CSS_SEPARATORS = new Set([' ', ',', '+', '>', '~']);
const KEYFRAME_PERCENT = /\d+\.?\d*%/; const KEYFRAME_PERCENT = /\d+\.?\d*%/;
/** minify selector CSS */
function minifySelector(selector: string): string {
return selector.replace(/(\r?\n|\s)+/g, ' ').replace(/\s*(,|\+|>|~|\(|\))\s*/g, '$1');
}
/** HTML tags that should never get scoped classes */ /** HTML tags that should never get scoped classes */
export const NEVER_SCOPED_TAGS = new Set<string>(['base', 'body', 'font', 'frame', 'frameset', 'head', 'html', 'link', 'meta', 'noframes', 'noscript', 'script', 'style', 'title']); export const NEVER_SCOPED_TAGS = new Set<string>(['base', 'body', 'font', 'frame', 'frameset', 'head', 'html', 'link', 'meta', 'noframes', 'noscript', 'script', 'style', 'title']);
/** /**
@ -101,7 +106,7 @@ export default function astroScopedStyles(options: AstroScopedOptions): Plugin {
postcssPlugin: '@astrojs/postcss-scoped-styles', postcssPlugin: '@astrojs/postcss-scoped-styles',
Rule(rule) { Rule(rule) {
if (!rulesScopedCache.has(rule)) { if (!rulesScopedCache.has(rule)) {
rule.selector = scopeRule(rule.selector, options.className); rule.selector = scopeRule(minifySelector(rule.selector), options.className);
rulesScopedCache.add(rule); rulesScopedCache.add(rule);
} }
}, },

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

@ -24,6 +24,7 @@ ScopedStyles('Scopes rules correctly', () => {
'.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors '.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors
'.class:not(.is-active)': `.class.${className}:not(.is-active)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion '.class:not(.is-active)': `.class.${className}:not(.is-active)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion
'body h1': `body h1.${className}`, // body shouldn‘t be scoped; it‘s not a component 'body h1': `body h1.${className}`, // body shouldn‘t be scoped; it‘s not a component
'html,body': `html,body`,
from: 'from', // ignore keyframe keywords (below) from: 'from', // ignore keyframe keywords (below)
to: 'to', to: 'to',
'55%': '55%', '55%': '55%',