poveste 0.3.0 → 0.3.1

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,20 +34,44 @@ 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.
+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());
+}
+// Top level of the selector only: lightningcss hands `:is()`/`:where()`/`:not()`
+// over as one part with the inner selectors nested inside, so a root spelled
+// `:is(html, body)` is left alone. Descending needs a decision on `:not()`,
+// where rewriting would change what the rule matches rather than fix it (#124).
 function rewriteRootToScope(css) {
+    const scope = { type: 'pseudo-class', kind: 'scope' };
     const processed = lightningcssTransform({
         filename: 'user.css',
         code: Buffer.from(css, 'utf8'),
         minify: false,
         visitor: {
             Selector(selector) {
-                for (const part of selector) {
+                return selector.map((part) => {
                     if (part.type === 'pseudo-class' && part.kind === 'root') {
-                        ;
-                        part.kind = 'scope';
+                        return scope;
+                    }
+                    if (part.type === 'type' && isRootTypeSelector(part.name)) {
+                        return scope;
                     }
-                }
-                return selector;
+                    return part;
+                });
             },
         },
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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.1",
+    "@poveste/controls": "^0.3.1",
+    "@poveste/vendors": "^0.3.1",
+    "@poveste/shared": "^0.3.1"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

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

@@ -1,21 +1,48 @@
 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'])
   })
 
   it('leaves :scope alone (idempotent)', () => {
@@ -47,7 +74,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,19 +46,48 @@ 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.
+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())
+}
+
+// Top level of the selector only: lightningcss hands `:is()`/`:where()`/`:not()`
+// over as one part with the inner selectors nested inside, so a root spelled
+// `:is(html, body)` is left alone. Descending needs a decision on `:not()`,
+// where rewriting would change what the rule matches rather than fix it (#124).
 function rewriteRootToScope(css: string): string {
+  const scope = { type: 'pseudo-class', kind: 'scope' } as const
   const processed = lightningcssTransform({
     filename: 'user.css',
     code: Buffer.from(css, 'utf8'),
     minify: false,
     visitor: {
       Selector(selector) {
-        for (const part of selector) {
+        return selector.map((part) => {
           if (part.type === 'pseudo-class' && (part as any).kind === 'root') {
-            ;(part as any).kind = 'scope'
+            return scope as unknown as typeof part
+          }
+          if (part.type === 'type' && isRootTypeSelector(part.name)) {
+            return scope as unknown as typeof part
           }
-        }
-        return selector
+          return part
+        })
       },
     },
   })