poveste 0.3.0 → 0.3.2

package/dist/node/style-isolation/transforms.js

@@ -6,7 +6,7 @@ export function wrapUserCss(css, opts) {
         return css;
     }
     const { hoisted, remainder } = extractHoistableAtRules(css);
-    const body = remainder.includes(':root')
+    const body = hasRootSelector(remainder)
         ? rewriteRootToScope(remainder)
         : remainder;
     const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : '';
@@ -18,10 +18,10 @@ export function wrapChromeCss(css, opts) {
         return css;
     }
     const { hoisted, remainder } = extractHoistableAtRules(css);
-    // Rewrite `:root` to `:scope` so source-level `@scope (:root) to (...)`
+    // Rewrite root selectors to `:scope` so source-level `@scope (:root) to (...)`
     // rules nest correctly under the outer scope; without this, the inner
     // `:root` resolves to the document root which is outside the outer scope.
-    const body = remainder.includes(':root')
+    const body = hasRootSelector(remainder)
         ? rewriteRootToScope(remainder)
         : remainder;
     const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : '';
@@ -34,21 +34,63 @@ export function isGlobalImport(id) {
     const parts = id.slice(q + 1).split('&');
     return parts.includes('global') || parts.some(p => p.startsWith('global='));
 }
+// `html` and `body` sit above the scoping root once the sheet is wrapped, so a
+// rule targeting either can never match. Inside a story they mean the same
+// thing `:root` does — the one root there is — which is what `:scope`
+// resolves to. Leaving them out made `body { font-size: 14px }` inert with no
+// error (#116); the chrome wrapper learned the same lesson in #102.
+const ROOT_TYPE_SELECTORS = new Set(['html', 'body']);
+// Only a gate on the lightningcss round-trip, so a false positive costs a
+// reparse and nothing else. Word-bounded to skip `.sidebar-body` and friends;
+// `(` is a boundary too, or a sheet whose only root is `:is(html)` would skip
+// the pass that exists to rewrite it.
+const ROOT_SELECTOR_RE = /:root|(?:^|[\s,{}>+~(])(?:html|body)\b/i;
+function hasRootSelector(css) {
+    return ROOT_SELECTOR_RE.test(css);
+}
+// Type selectors are ASCII case-insensitive against HTML and lightningcss
+// reports the name as authored, so `BODY { … }` arrives spelled `BODY`.
+function isRootTypeSelector(name) {
+    return ROOT_TYPE_SELECTORS.has(name.toLowerCase());
+}
+// Matching pseudo-classes we descend into. `:is()` and `:where()` are plain
+// selector lists, so a root inside one still means the root.
+//
+// `:not()` and `:has()` are deliberately absent, and the recursion stops at
+// them entirely rather than skipping one level (#124). Negation inverts the
+// rewrite instead of fixing it: `.card:not(body)` today excludes nothing inside
+// a story, while `.card:not(:scope)` would start excluding the story root — a
+// behaviour change, silent in exactly the way the original bug was. `:has()` is
+// relational and has the same problem. `:nth-child(… of S)` keeps its list
+// under `of` rather than `selectors`, so it is untouched for free.
+const DESCENDABLE_PSEUDO_CLASSES = new Set(['is', 'where']);
+const SCOPE_PART = { type: 'pseudo-class', kind: 'scope' };
+function rewriteSelector(selector) {
+    return selector.map((part, index) => {
+        if (part.type === 'pseudo-class' && part.kind === 'root') {
+            return SCOPE_PART;
+        }
+        // A namespace is its own part, immediately before the type selector it
+        // qualifies. Rewriting past it emits `*|:scope`, which is invalid — a
+        // prefix cannot qualify a pseudo-class — and the browser drops the rule.
+        // `svg|body` also means a body in the SVG namespace, which is not the
+        // document root, so leaving these alone is right on both counts.
+        if (part.type === 'type' && isRootTypeSelector(part.name ?? '')) {
+            return selector[index - 1]?.type === 'namespace' ? part : SCOPE_PART;
+        }
+        if (part.type === 'pseudo-class' && DESCENDABLE_PSEUDO_CLASSES.has(part.kind ?? '') && part.selectors) {
+            return { ...part, selectors: part.selectors.map(rewriteSelector) };
+        }
+        return part;
+    });
+}
 function rewriteRootToScope(css) {
     const processed = lightningcssTransform({
         filename: 'user.css',
         code: Buffer.from(css, 'utf8'),
         minify: false,
         visitor: {
-            Selector(selector) {
-                for (const part of selector) {
-                    if (part.type === 'pseudo-class' && part.kind === 'root') {
-                        ;
-                        part.kind = 'scope';
-                    }
-                }
-                return selector;
-            },
+            Selector: selector => rewriteSelector(selector),
         },
     });
     return Buffer.from(processed.code).toString('utf8');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A fast story book powered by Vite",
   "author": {
     "name": "Sorin Gitlan"
@@ -68,10 +68,10 @@
     "sirv": "^3.0.0",
     "unhead": "^3.1.0",
     "vite-node": "^6.0.0",
-    "@poveste/app": "^0.3.0",
-    "@poveste/controls": "^0.3.0",
-    "@poveste/shared": "^0.3.0",
-    "@poveste/vendors": "^0.3.0"
+    "@poveste/app": "^0.3.2",
+    "@poveste/controls": "^0.3.2",
+    "@poveste/shared": "^0.3.2",
+    "@poveste/vendors": "^0.3.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/src/node/style-isolation/__tests__/transforms.spec.ts

@@ -1,21 +1,81 @@
 import { describe, expect, it } from 'vitest'
 import { isGlobalImport, wrapChromeCss, wrapUserCss } from '../transforms.js'
 
+/** Selectors of every rule inside the wrap, so a test can assert on them whole. */
+function selectorsIn(css: string): string[] {
+  return css.split('{')
+    .slice(0, -1)
+    .map(chunk => chunk.slice(chunk.lastIndexOf('}') + 1).trim())
+    .filter(selector => selector.length > 0 && !selector.startsWith('@'))
+}
+
 describe('wrapUserCss', () => {
   it('wraps a single rule in @scope (.scope-root)', () => {
-    const out = wrapUserCss('body { color: red }', { scopeRoot: '.__poveste-render-story' })
+    const out = wrapUserCss('main { color: red }', { scopeRoot: '.__poveste-render-story' })
     expect(out).toContain('@scope (.__poveste-render-story)')
-    expect(out).toContain('body')
+    expect(out).toContain('main')
     expect(out).toContain('color: red')
   })
 
-  it('rewrites :root → :scope inside the scope', () => {
-    const out = wrapUserCss(':root { --color-primary: blue }', {
+  // Every root spelling has to land on :scope. A rule left as `html`/`body`
+  // targets an ancestor of the scoping root and can never match — silently,
+  // which is what made #116 survive this long. Asserting the whole selector
+  // rather than "contains :scope": the failure mode is a leftover `html`, and
+  // a substring check passes right over it.
+  it.each([
+    [':root', ':root { --brand: rebeccapurple }', ':scope'],
+    ['html', 'html { --brand: rebeccapurple }', ':scope'],
+    ['body', 'body { --brand: rebeccapurple }', ':scope'],
+    ['BODY', 'BODY { --brand: rebeccapurple }', ':scope'],
+    ['body .card', 'body .card { --brand: rebeccapurple }', ':scope .card'],
+    ['body.dark .card', 'body.dark .card { --brand: rebeccapurple }', ':scope.dark .card'],
+    ['.body-copy', '.body-copy { --brand: rebeccapurple }', '.body-copy'],
+    ['.page-html', '.page-html { --brand: rebeccapurple }', '.page-html'],
+  ])('compiles %s to a selector that can still match', (_input, css, expected) => {
+    const out = wrapUserCss(css, { scopeRoot: '.__poveste-render-story' })
+
+    expect(selectorsIn(out)).toEqual([expected])
+  })
+
+  it('rewrites root selectors nested in at-rules', () => {
+    const out = wrapUserCss('@media (min-width: 700px) { body { --brand: rebeccapurple } }', {
       scopeRoot: '.__poveste-render-story',
     })
-    expect(out).toContain(':scope')
-    expect(out).not.toContain(':root')
-    expect(out).toContain('--color-primary: blue')
+
+    expect(selectorsIn(out)).toEqual([':scope'])
+  })
+
+  // `:is()` and `:where()` are plain selector lists, so a root inside one still
+  // means the root (#124).
+  it.each([
+    [':is(html, body)', ':is(html, body) { --brand: rebeccapurple }', ':is(:scope, :scope)'],
+    [':where(:root)', ':where(:root) { --brand: rebeccapurple }', ':where(:scope)'],
+    // lightningcss collapses a single-argument `:is()`; same specificity.
+    [':is(html)', ':is(html) { --brand: rebeccapurple }', ':scope'],
+    [':is(.a, body) .card', ':is(.a, body) .card { --brand: rebeccapurple }', ':is(.a, :scope) .card'],
+    [':is(.a, :where(body))', ':is(.a, :where(body)) { --brand: rebeccapurple }', ':is(.a, :where(:scope))'],
+  ])('rewrites a root inside %s', (_input, css, expected) => {
+    const out = wrapUserCss(css, { scopeRoot: '.__poveste-render-story' })
+
+    expect(selectorsIn(out)).toEqual([expected])
+  })
+
+  // Rewriting inside a negation would change what the rule matches rather than
+  // fix it, so the walk stops at `:not()`/`:has()` — including an `:is()` nested
+  // inside one. A namespaced root is skipped for a different reason: the prefix
+  // is its own part, and `*|:scope` is invalid CSS the browser drops outright.
+  it.each([
+    [':not()', '.card:not(body) { --brand: rebeccapurple }', '.card:not(body)'],
+    [':has()', '.card:has(body) { --brand: rebeccapurple }', '.card:has(body)'],
+    ['an :is() nested in :not()', '.card:not(:is(html)) { --brand: rebeccapurple }', '.card:not(:is(html))'],
+    ['nth-child(… of S)', 'li:nth-child(1 of body) { --brand: rebeccapurple }', 'li:nth-child(1 of body)'],
+    ['any namespace', 'body { color: red }\n*|body { --brand: rebeccapurple }', '*|body'],
+    ['a named namespace', 'body { color: red }\nsvg|body { --brand: rebeccapurple }', 'svg|body'],
+    ['the empty namespace', 'body { color: red }\n|body { --brand: rebeccapurple }', '|body'],
+  ])('leaves a root inside %s alone', (_input, css, expected) => {
+    const out = wrapUserCss(css, { scopeRoot: '.__poveste-render-story' })
+
+    expect(selectorsIn(out)).toContain(expected)
   })
 
   it('leaves :scope alone (idempotent)', () => {
@@ -47,7 +107,18 @@ describe('wrapChromeCss', () => {
       scopeLower: '.__poveste-render-story',
     })
     expect(out).toContain('@scope (.poveste-app-root) to (.__poveste-render-story)')
-    expect(out).toContain('body')
+    expect(out).toContain('color: red')
+  })
+
+  // Same rule as the user side: inside the wrap, `body` means the app's root
+  // container, which is what :scope resolves to (#102).
+  it('rewrites html and body to :scope', () => {
+    const out = wrapChromeCss('body { font-size: .875rem }\nhtml { color-scheme: dark }', {
+      scopeRoot: '.poveste-app-root',
+      scopeLower: '.__poveste-render-story',
+    })
+    expect(out).toContain(':scope')
+    expect(out).not.toMatch(/(?:^|[\s,{])(?:html|body)\b/m)
   })
 
   it('hoists @import to the top, outside @scope', () => {

package/src/node/style-isolation/transforms.ts

@@ -16,7 +16,7 @@ export function wrapUserCss(css: string, opts: WrapOptions): string {
     return css
   }
   const { hoisted, remainder } = extractHoistableAtRules(css)
-  const body = remainder.includes(':root')
+  const body = hasRootSelector(remainder)
     ? rewriteRootToScope(remainder)
     : remainder
   const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : ''
@@ -29,10 +29,10 @@ export function wrapChromeCss(css: string, opts: WrapWithLowerOptions): string {
     return css
   }
   const { hoisted, remainder } = extractHoistableAtRules(css)
-  // Rewrite `:root` to `:scope` so source-level `@scope (:root) to (...)`
+  // Rewrite root selectors to `:scope` so source-level `@scope (:root) to (...)`
   // rules nest correctly under the outer scope; without this, the inner
   // `:root` resolves to the document root which is outside the outer scope.
-  const body = remainder.includes(':root')
+  const body = hasRootSelector(remainder)
     ? rewriteRootToScope(remainder)
     : remainder
   const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : ''
@@ -46,20 +46,79 @@ export function isGlobalImport(id: string): boolean {
   return parts.includes('global') || parts.some(p => p.startsWith('global='))
 }
 
+// `html` and `body` sit above the scoping root once the sheet is wrapped, so a
+// rule targeting either can never match. Inside a story they mean the same
+// thing `:root` does — the one root there is — which is what `:scope`
+// resolves to. Leaving them out made `body { font-size: 14px }` inert with no
+// error (#116); the chrome wrapper learned the same lesson in #102.
+const ROOT_TYPE_SELECTORS = new Set(['html', 'body'])
+
+// Only a gate on the lightningcss round-trip, so a false positive costs a
+// reparse and nothing else. Word-bounded to skip `.sidebar-body` and friends;
+// `(` is a boundary too, or a sheet whose only root is `:is(html)` would skip
+// the pass that exists to rewrite it.
+const ROOT_SELECTOR_RE = /:root|(?:^|[\s,{}>+~(])(?:html|body)\b/i
+
+function hasRootSelector(css: string): boolean {
+  return ROOT_SELECTOR_RE.test(css)
+}
+
+// Type selectors are ASCII case-insensitive against HTML and lightningcss
+// reports the name as authored, so `BODY { … }` arrives spelled `BODY`.
+function isRootTypeSelector(name: string): boolean {
+  return ROOT_TYPE_SELECTORS.has(name.toLowerCase())
+}
+
+// Matching pseudo-classes we descend into. `:is()` and `:where()` are plain
+// selector lists, so a root inside one still means the root.
+//
+// `:not()` and `:has()` are deliberately absent, and the recursion stops at
+// them entirely rather than skipping one level (#124). Negation inverts the
+// rewrite instead of fixing it: `.card:not(body)` today excludes nothing inside
+// a story, while `.card:not(:scope)` would start excluding the story root — a
+// behaviour change, silent in exactly the way the original bug was. `:has()` is
+// relational and has the same problem. `:nth-child(… of S)` keeps its list
+// under `of` rather than `selectors`, so it is untouched for free.
+const DESCENDABLE_PSEUDO_CLASSES = new Set(['is', 'where'])
+
+const SCOPE_PART = { type: 'pseudo-class', kind: 'scope' }
+
+// Structural stand-in for lightningcss's selector component union, which is not
+// exported in a form that survives the nesting below.
+interface SelectorPart {
+  type: string
+  kind?: string
+  name?: string
+  selectors?: SelectorPart[][]
+}
+
+function rewriteSelector(selector: SelectorPart[]): SelectorPart[] {
+  return selector.map((part, index) => {
+    if (part.type === 'pseudo-class' && part.kind === 'root') {
+      return SCOPE_PART
+    }
+    // A namespace is its own part, immediately before the type selector it
+    // qualifies. Rewriting past it emits `*|:scope`, which is invalid — a
+    // prefix cannot qualify a pseudo-class — and the browser drops the rule.
+    // `svg|body` also means a body in the SVG namespace, which is not the
+    // document root, so leaving these alone is right on both counts.
+    if (part.type === 'type' && isRootTypeSelector(part.name ?? '')) {
+      return selector[index - 1]?.type === 'namespace' ? part : SCOPE_PART
+    }
+    if (part.type === 'pseudo-class' && DESCENDABLE_PSEUDO_CLASSES.has(part.kind ?? '') && part.selectors) {
+      return { ...part, selectors: part.selectors.map(rewriteSelector) }
+    }
+    return part
+  })
+}
+
 function rewriteRootToScope(css: string): string {
   const processed = lightningcssTransform({
     filename: 'user.css',
     code: Buffer.from(css, 'utf8'),
     minify: false,
     visitor: {
-      Selector(selector) {
-        for (const part of selector) {
-          if (part.type === 'pseudo-class' && (part as any).kind === 'root') {
-            ;(part as any).kind = 'scope'
-          }
-        }
-        return selector
-      },
+      Selector: selector => rewriteSelector(selector as SelectorPart[]) as typeof selector,
     },
   })
   return Buffer.from(processed.code).toString('utf8')