rollup-plugin-react-scoped-css 1.2.6 → 1.3.0

package/dist/css/scope-css.js

@@ -1,41 +1,110 @@
-import { parse, generate, } from "css-tree";
+import { parse, generate, List, } from "css-tree";
 /**
  * Keyframe selectors (`from`, `to`, `50%`) are also parsed as `Rule` nodes with
  * a `SelectorList` prelude. They need to be left alone, otherwise animations
  * break by becoming e.g. `0%[data-hash]`.
  */
 const isKeyframesAtRule = (name) => /^(-[a-z0-9]+-)?keyframes$/i.test(name);
-const getSelectors = (items) => {
-    const selectorLists = [];
-    items.forEach((node) => {
-        if (node.type === "Rule" && node.prelude?.type === "SelectorList") {
-            selectorLists.push(node.prelude.children);
-        }
-        else if (node.type === "Atrule" &&
-            node.block &&
-            !isKeyframesAtRule(node.name)) {
-            // Recurse into conditional/group at-rules (`@media`, `@container`,
-            // `@supports`, `@layer`, `@scope`, etc.) so their rules get scoped too.
-            selectorLists.push(...getSelectors(node.block.children));
+const isScopePiercingPseudoSelector = (node) => node.type === "PseudoElementSelector" &&
+    (node.name === "v-deep" || node.name === "deep");
+/**
+ * CSS-tree parses the contents of `:deep(...)` as a `Raw` node, unlike
+ * `:is()`/`:where()` which it parses as selectors.
+ */
+const isDeepFunctionSelector = (node) => node.type === "PseudoClassSelector" &&
+    (node.name === "deep" || node.name === "v-deep") &&
+    !!node.children;
+/**
+ * Pseudo selectors that refer to the document root. They cannot be scoped
+ * because the root element never receives the scope attribute, so adding the
+ * attribute would only turn working rules into dead ones.
+ */
+const isRootLikePseudoSelector = (node) => node.type === "PseudoClassSelector" &&
+    (node.name.toLowerCase() === "root" || node.name.toLowerCase() === "scope");
+/**
+ * The `::view-transition-*` tree is rooted at the document root, which never
+ * receives the scope attribute. A bare occurrence can therefore never match
+ * once scoped, so it is left global just like `:root`.
+ */
+const isViewTransitionPseudoElement = (node) => node.type === "PseudoElementSelector" &&
+    node.name.toLowerCase().startsWith("view-transition");
+const isCombinator = (node) => node.type === "Combinator";
+const isNestingSelector = (node) => node.type === "NestingSelector";
+/**
+ * Simple selectors that can receive the scope attribute. `&` is excluded
+ * because the parent rule is already scoped, so `&[hash]` would be redundant.
+ */
+const isHashableSelector = (node) => node.type === "TypeSelector" ||
+    node.type === "ClassSelector" ||
+    node.type === "IdSelector" ||
+    node.type === "AttributeSelector";
+const getDeepFunctionSelectorText = (node) => {
+    const children = node.children;
+    if (!children || children.isEmpty) {
+        return null;
+    }
+    let text = "";
+    children.forEach((child) => {
+        if (child.type === "Raw") {
+            text += child.value;
         }
     });
-    return selectorLists;
+    return text || null;
 };
-const isScopePiercingPseudoSelector = (item) => {
-    return (item?.data?.type === "PseudoElementSelector" &&
-        (item?.data?.name === "v-deep" || item?.data?.name === "deep"));
-};
-const isPseudoSelector = (item) => {
-    return (item?.data?.type === "PseudoClassSelector" ||
-        item?.data?.type === "PseudoElementSelector");
-};
-const isCombinator = (item) => {
-    return item?.data?.type === "Combinator";
+/**
+ * Splits a raw selector prelude on top-level `||` (column combinator) while
+ * ignoring `||` inside attribute selectors, functional pseudos, or strings.
+ */
+const splitOnColumnCombinator = (value) => {
+    const parts = [];
+    let start = 0;
+    let parenthesisDepth = 0;
+    let bracketDepth = 0;
+    let quote = null;
+    for (let index = 0; index < value.length; index += 1) {
+        const char = value[index];
+        if (quote) {
+            if (char === "\\") {
+                index += 1;
+            }
+            else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === "\\") {
+            index += 1;
+        }
+        else if (char === "(") {
+            parenthesisDepth += 1;
+        }
+        else if (char === ")") {
+            parenthesisDepth -= 1;
+        }
+        else if (char === "[") {
+            bracketDepth += 1;
+        }
+        else if (char === "]") {
+            bracketDepth -= 1;
+        }
+        else if (char === "|" &&
+            value[index + 1] === "|" &&
+            parenthesisDepth === 0 &&
+            bracketDepth === 0) {
+            parts.push(value.slice(start, index));
+            index += 1;
+            start = index + 1;
+        }
+    }
+    parts.push(value.slice(start));
+    return parts;
 };
 export function scopeCss(css, filename, hash, source = filename) {
     try {
         const ast = parse(css, { positions: true, filename: source });
-        const selectorLists = getSelectors(ast.children);
         const attributeSelector = {
             type: "AttributeSelector",
             name: { type: "Identifier", name: hash },
@@ -43,40 +112,220 @@ export function scopeCss(css, filename, hash, source = filename) {
             value: null,
             flags: null,
         };
-        selectorLists.forEach((selectorList) => {
-            selectorList.forEach((selector) => {
-                if (selector.type !== "Selector") {
+        const scopeSelectorList = (selectorLists) => {
+            selectorLists.forEach((selector) => {
+                if (selector.type === "Selector") {
+                    scopeSelector(selector);
+                }
+            });
+        };
+        /**
+         * Inserts the scope attribute after every consecutive run of simple
+         * selectors. Pseudo selectors break a run, which preserves the previous
+         * behaviour of `a:hover.b` becoming `a[hash]:hover.b[hash]`.
+         */
+        const scopeRuns = (items, selectorChildren) => {
+            let run = [];
+            const flushRun = () => {
+                if (run.length === 0) {
                     return;
                 }
-                let item = selector.children.head;
-                const itemsToInsertScopeBefore = [];
-                let currentChunkIndex = 0;
-                while (item !== null) {
-                    if (isScopePiercingPseudoSelector(item)) {
-                        Object.assign(item.data, attributeSelector);
-                        break;
-                    }
-                    else if (isCombinator(item) || isPseudoSelector(item)) {
-                        currentChunkIndex += 1;
-                    }
-                    else if (item.next) {
-                        itemsToInsertScopeBefore[currentChunkIndex] = item.next;
+                const last = run[run.length - 1];
+                if (last.next) {
+                    selectorChildren.insertData(attributeSelector, last.next);
+                }
+                else {
+                    selectorChildren.appendData(attributeSelector);
+                }
+                run = [];
+            };
+            items.forEach((item) => {
+                if (isHashableSelector(item.data)) {
+                    run.push(item);
+                }
+                else {
+                    flushRun();
+                }
+            });
+            flushRun();
+        };
+        const scopeCompound = (items, selectorChildren) => {
+            if (items.length === 0) {
+                return;
+            }
+            if (items.some((item) => isHashableSelector(item.data))) {
+                scopeRuns(items, selectorChildren);
+                return;
+            }
+            // `&` is already scoped through its parent rule.
+            if (items.some((item) => isNestingSelector(item.data))) {
+                return;
+            }
+            // `:root` / `:scope` refer to the document root and can never match the
+            // scope attribute; leave them global.
+            if (items.some((item) => isRootLikePseudoSelector(item.data))) {
+                return;
+            }
+            // Bare view-transition pseudo-elements are also rooted at the document
+            // root, so scoping them would only produce an unmatchable selector.
+            if (items.some((item) => isViewTransitionPseudoElement(item.data))) {
+                return;
+            }
+            if (items.some((item) => item.data.type === "PseudoElementSelector")) {
+                // An attribute cannot follow a pseudo-element, so it has to be
+                // prepended: `::before` -> `[hash]::before`.
+                selectorChildren.insertData(attributeSelector, items[0]);
+                return;
+            }
+            if (!items.some((item) => item.data.type === "PseudoClassSelector")) {
+                return;
+            }
+            // `:hover` -> `:hover[hash]`
+            const last = items[items.length - 1];
+            if (last.next) {
+                selectorChildren.insertData(attributeSelector, last.next);
+            }
+            else {
+                selectorChildren.appendData(attributeSelector);
+            }
+        };
+        const replaceDeepFunction = (selectorChildren, item) => {
+            const node = item.data;
+            const selectorText = getDeepFunctionSelectorText(node);
+            if (!selectorText) {
+                return;
+            }
+            let parsed;
+            try {
+                parsed = parse(selectorText, {
+                    context: "selectorList",
+                });
+            }
+            catch {
+                return;
+            }
+            const selectors = parsed.children;
+            if (selectors.size === 1) {
+                // Splice the argument selector in place of `:deep(...)`.
+                const replacement = new List();
+                selectors.first.children.forEach((child) => {
+                    replacement.appendData(child);
+                });
+                selectorChildren.replace(item, replacement);
+            }
+            else {
+                // A selector list cannot be spliced into a single selector, but
+                // `:is(...)` has the same matching semantics here.
+                node.name = "is";
+                node.children = new List();
+                node.children.appendData(parsed);
+            }
+        };
+        const scopeSelector = (selector) => {
+            const selectorChildren = selector.children;
+            const compounds = [];
+            let compound = [];
+            for (let item = selectorChildren.head; item !== null; item = item.next) {
+                if (isCombinator(item.data)) {
+                    compounds.push(compound);
+                    compound = [];
+                }
+                else {
+                    compound.push(item);
+                }
+            }
+            compounds.push(compound);
+            for (const items of compounds) {
+                const piercingIndex = items.findIndex((item) => isScopePiercingPseudoSelector(item.data) ||
+                    isDeepFunctionSelector(item.data));
+                if (piercingIndex !== -1) {
+                    const piercingItem = items[piercingIndex];
+                    if (isDeepFunctionSelector(piercingItem.data)) {
+                        // Scope everything before `:deep(...)` in the same compound,
+                        // then splice in the (unscoped) argument selector.
+                        scopeRuns(items.slice(0, piercingIndex), selectorChildren);
+                        replaceDeepFunction(selectorChildren, piercingItem);
                     }
                     else {
-                        selector.children.appendData(attributeSelector);
-                        break;
+                        // Replace `::deep` / `::v-deep` with the scope attribute.
+                        Object.assign(piercingItem.data, attributeSelector);
                     }
-                    item = item?.next ?? null;
+                    // Everything after a deep selector stays global.
+                    return;
                 }
-                // This is true if one of the two break statements above was run. Which means we don't want to add to the last one.
-                if (itemsToInsertScopeBefore[currentChunkIndex]) {
-                    itemsToInsertScopeBefore.pop();
+                scopeCompound(items, selectorChildren);
+            }
+        };
+        /**
+         * CSS-tree parses implicit nesting as a `Raw` node inside the parent
+         * rule. Re-parse it as a rule so its selector can be scoped and write the
+         * transformed rule back.
+         */
+        const scopeRawNestedRule = (node) => {
+            if (!node.value.includes("{")) {
+                return;
+            }
+            try {
+                const rule = parse(node.value, { context: "rule" });
+                if (rule.type !== "Rule") {
+                    return;
                 }
-                itemsToInsertScopeBefore.forEach((scopePositionItem) => {
-                    selector.children.insertData(attributeSelector, scopePositionItem);
+                scopeRule(rule);
+                node.value = generate(rule);
+            }
+            catch {
+                // Leave constructs css-tree cannot parse untouched.
+            }
+        };
+        const scopeRawSelectorPrelude = (prelude) => {
+            const parts = splitOnColumnCombinator(prelude.value);
+            if (parts.length === 1) {
+                return;
+            }
+            try {
+                const scopedParts = parts.map((part) => {
+                    const selectorList = parse(part.trim(), {
+                        context: "selectorList",
+                    });
+                    scopeSelectorList(selectorList.children);
+                    return generate(selectorList);
                 });
+                prelude.value = scopedParts.join(" || ");
+            }
+            catch {
+                // Leave constructs css-tree cannot parse untouched.
+            }
+        };
+        const scopeNodes = (children, insideRule) => {
+            children.forEach((node) => {
+                if (node.type === "Rule") {
+                    scopeRule(node);
+                }
+                else if (node.type === "Atrule" &&
+                    node.block &&
+                    !isKeyframesAtRule(node.name)) {
+                    // Recurse into conditional/group at-rules (`@media`, `@container`,
+                    // `@supports`, `@layer`, `@scope`, etc.) so their rules get scoped.
+                    scopeNodes(node.block.children, insideRule);
+                }
+                else if (insideRule && node.type === "Raw") {
+                    scopeRawNestedRule(node);
+                }
             });
-        });
+        };
+        const scopeRule = (rule) => {
+            if (rule.prelude?.type === "SelectorList") {
+                scopeSelectorList(rule.prelude.children);
+            }
+            else if (rule.prelude?.type === "Raw") {
+                scopeRawSelectorPrelude(rule.prelude);
+            }
+            if (rule.block) {
+                // Nested rules (`& ...`) and nested at-rules live in the rule block.
+                scopeNodes(rule.block.children, true);
+            }
+        };
+        scopeNodes(ast.children, false);
         const { css: scopedCss, map } = generate(ast, {
             sourceMap: true,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "Bring scoped CSS to React with Vite & Rollup. Lightweight component-level style isolation similar to Vue and Angular.",
   "type": "module",
   "main": "dist/index.js",