poveste 0.3.1 → 0.3.2

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

@@ -41,8 +41,10 @@ export function isGlobalImport(id) {
 // 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;
+// 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);
 }
@@ -51,28 +53,44 @@ function hasRootSelector(css) {
 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).
+// 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 scope = { type: 'pseudo-class', kind: 'scope' };
     const processed = lightningcssTransform({
         filename: 'user.css',
         code: Buffer.from(css, 'utf8'),
         minify: false,
         visitor: {
-            Selector(selector) {
-                return selector.map((part) => {
-                    if (part.type === 'pseudo-class' && part.kind === 'root') {
-                        return scope;
-                    }
-                    if (part.type === 'type' && isRootTypeSelector(part.name)) {
-                        return scope;
-                    }
-                    return part;
-                });
-            },
+            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.1",
+  "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.1",
-    "@poveste/controls": "^0.3.1",
-    "@poveste/vendors": "^0.3.1",
-    "@poveste/shared": "^0.3.1"
+    "@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

@@ -45,6 +45,39 @@ describe('wrapUserCss', () => {
     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)', () => {
     const out = wrapUserCss(':scope { color: red }', {
       scopeRoot: '.__poveste-render-story',

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

@@ -54,8 +54,10 @@ export function isGlobalImport(id: string): boolean {
 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
+// 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)
@@ -67,28 +69,56 @@ 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).
+// 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 scope = { type: 'pseudo-class', kind: 'scope' } as const
   const processed = lightningcssTransform({
     filename: 'user.css',
     code: Buffer.from(css, 'utf8'),
     minify: false,
     visitor: {
-      Selector(selector) {
-        return selector.map((part) => {
-          if (part.type === 'pseudo-class' && (part as any).kind === 'root') {
-            return scope as unknown as typeof part
-          }
-          if (part.type === 'type' && isRootTypeSelector(part.name)) {
-            return scope as unknown as typeof part
-          }
-          return part
-        })
-      },
+      Selector: selector => rewriteSelector(selector as SelectorPart[]) as typeof selector,
     },
   })
   return Buffer.from(processed.code).toString('utf8')