Fix body scoping

Fixes #1074
withastro · Aug 16, 2021 · 71b8156 · 71b8156
1 parent 5e0e276
commit 71b8156
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/calm-walls-unite.md b/.changeset/calm-walls-unite.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS scoping issue
diff --git a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
@@ -1,4 +1,4 @@
-import { Declaration, Plugin } from 'postcss';
+import { Plugin } from 'postcss';
 
 interface AstroScopedOptions {
  className: string;
@@ -13,6 +13,11 @@ interface Selector {
 const CSS_SEPARATORS = new Set([' ', ',', '+', '>', '~']);
 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 */
 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',
  Rule(rule) {
  if (!rulesScopedCache.has(rule)) {
- rule.selector = scopeRule(rule.selector, options.className);
+ rule.selector = scopeRule(minifySelector(rule.selector), options.className);
  rulesScopedCache.add(rule);
  }
  },

diff --git a/packages/astro/test/astro-scoped-styles.test.js b/packages/astro/test/astro-scoped-styles.test.js
@@ -24,6 +24,7 @@ ScopedStyles('Scopes rules correctly', () => {
  '.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
  '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)
  to: 'to',
  '55%': '55%',