rollup-plugin-react-scoped-css 1.2.4 → 1.2.5

package/dist/css/scope-css.d.ts

@@ -1 +1,5 @@
-export declare function scopeCss(css: string, filename: string, hash: string): string;
+export interface ScopedCssResult {
+    code: string;
+    map: string | null;
+}
+export declare function scopeCss(css: string, filename: string, hash: string, source?: string): ScopedCssResult;

package/dist/css/scope-css.js

@@ -30,9 +30,9 @@ const isPseudoSelector = (item) => {
 const isCombinator = (item) => {
     return item?.data?.type === "Combinator";
 };
-export function scopeCss(css, filename, hash) {
+export function scopeCss(css, filename, hash, source = filename) {
     try {
-        const ast = parse(css);
+        const ast = parse(css, { positions: true, filename: source });
         const selectorLists = getSelectors(ast.children);
         const attributeSelector = {
             type: "AttributeSelector",
@@ -75,10 +75,13 @@ export function scopeCss(css, filename, hash) {
                 });
             });
         });
-        return generate(ast);
+        const { css: scopedCss, map } = generate(ast, {
+            sourceMap: true,
+        });
+        return { code: scopedCss, map: map.toString() };
     }
     catch (e) {
         console.log(`Failed scoping css of file: ${filename}\n\nError:\n`, e);
-        return css;
+        return { code: css, map: null };
     }
 }

package/dist/index.js

@@ -5,6 +5,7 @@ import { generate } from "escodegen";
 import { addHashAttributesToJsxTagsAst } from "./ast-program.js";
 import { scopeCss } from "./css/scope-css.js";
 import { getImportDeclarationsValue } from "./utils/getImportDeclarationsValue.js";
+import { addLocationsToAst } from "./utils/addLocationsToAst.js";
 const getFilenameFromPath = (filePath) => {
     const parts = filePath.split("/");
     return parts[parts.length - 1].split("?")[0];
@@ -81,8 +82,13 @@ export function reactScopedCssPlugin(optionsIn = {}) {
                             ? `data-${hashPrefix}-${importerHash}`
                             : `data-${importerHash}`;
                         const newAst = addHashAttributesToJsxTagsAst(rootNode, scopedAttr);
-                        const newCode = generate(newAst);
-                        return newCode;
+                        addLocationsToAst(newAst, code, id);
+                        const { code: newCode, map } = generate(newAst, {
+                            sourceMap: id,
+                            sourceContent: code,
+                            sourceMapWithCode: true,
+                        });
+                        return { code: newCode, map: map.toString() };
                     }
                 }
                 else {
@@ -94,7 +100,7 @@ export function reactScopedCssPlugin(optionsIn = {}) {
                         const scopedAttr = options.hashPrefix
                             ? `data-${options.hashPrefix}-${importerHash}`
                             : `data-${importerHash}`;
-                        return scopeCss(code, getFilenameFromPath(id), scopedAttr);
+                        return scopeCss(code, getFilenameFromPath(id), scopedAttr, id);
                     }
                 }
             },

package/dist/utils/addLocationsToAst.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Escodegen generates source maps from the AST nodes' `loc` property, but
+ * Rollup's `this.parse()` only exposes `start`/`end` offsets. This walks the
+ * AST and adds equivalent `loc` information so a source map can be generated.
+ */
+export declare const addLocationsToAst: (ast: any, code: string, source: string) => any;

package/dist/utils/addLocationsToAst.js

@@ -0,0 +1,62 @@
+const getLineStarts = (code) => {
+    const lineStarts = [0];
+    for (let index = 0; index < code.length; index++) {
+        if (code.charCodeAt(index) === 10) {
+            lineStarts.push(index + 1);
+        }
+    }
+    return lineStarts;
+};
+const getPosition = (offset, lineStarts) => {
+    // Binary search for the last line start that is <= offset
+    let low = 0;
+    let high = lineStarts.length - 1;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        if (lineStarts[middle] <= offset) {
+            low = middle;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    return { line: low + 1, column: offset - lineStarts[low] };
+};
+/**
+ * Escodegen generates source maps from the AST nodes' `loc` property, but
+ * Rollup's `this.parse()` only exposes `start`/`end` offsets. This walks the
+ * AST and adds equivalent `loc` information so a source map can be generated.
+ */
+export const addLocationsToAst = (ast, code, source) => {
+    const lineStarts = getLineStarts(code);
+    const visit = (node) => {
+        if (!node || typeof node !== "object") {
+            return;
+        }
+        if (Array.isArray(node)) {
+            node.forEach(visit);
+            return;
+        }
+        if (typeof node.type === "string" &&
+            typeof node.start === "number" &&
+            typeof node.end === "number") {
+            const loc = {
+                start: getPosition(node.start, lineStarts),
+                end: getPosition(node.end, lineStarts),
+                source,
+            };
+            node.loc = loc;
+        }
+        for (const key of Object.keys(node)) {
+            if (key === "loc") {
+                continue;
+            }
+            const value = node[key];
+            if (value && typeof value === "object") {
+                visit(value);
+            }
+        }
+    };
+    visit(ast);
+    return ast;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "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",
@@ -77,6 +77,7 @@
     "jest": "30.2.0",
     "rollup": "^4.59.0",
     "semantic-release": "25.0.3",
+    "source-map-js": "1.2.1",
     "typescript": "5.9.3"
   }
 }