rollup-plugin-react-scoped-css 0.4.0 → 0.5.2

package/dist/parsers/new-parser.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewJsxParser = void 0;
+var NewJsxParser = /** @class */ (function () {
+    function NewJsxParser() {
+    }
+    NewJsxParser.prototype.isNodeReactFragment = function (node) {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type) === "Identifier" &&
+            ['_Fragment', 'Fragment'].includes((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name);
+    };
+    NewJsxParser.prototype.isNodeReactElement = function (node) {
+        var _a;
+        return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
+            ['_jsxDEV', '_jsx', '_jsxs', 'jsxDev', 'jsx', 'jsxs'].includes((_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.name);
+    };
+    NewJsxParser.prototype.extendNodeWithAttributes = function (node, attr) {
+        var _this = this;
+        var _a;
+        var arg = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[1];
+        return __assign(__assign({}, node), { arguments: node === null || node === void 0 ? void 0 : node.arguments.map(function (v, i) {
+                if (i === 1) {
+                    if (v.type === 'ObjectExpression') {
+                        return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], __read(arg.properties), false), [
+                                _this.createAttributeNode(attr)
+                            ], false) });
+                    }
+                    else {
+                        return {
+                            type: 'ObjectExpression',
+                            properties: [_this.createAttributeNode(attr)]
+                        };
+                    }
+                }
+                return v;
+            }) });
+    };
+    NewJsxParser.prototype.createAttributeNode = function (attr) {
+        return {
+            type: 'Property',
+            method: false,
+            shorthand: false,
+            computed: false,
+            key: {
+                type: 'Identifier',
+                name: "\"".concat(attr, "\"")
+            },
+            value: {
+                type: 'Literal',
+                value: true,
+                raw: "true"
+            },
+            kind: 'init'
+        };
+    };
+    return NewJsxParser;
+}());
+exports.NewJsxParser = NewJsxParser;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
-    "prepare": "npm run build && npm test",
     "test": "jest"
   },
   "repository": {
@@ -42,9 +41,16 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.15.0",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.2",
+    "@semantic-release/npm": "^8.0.3",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/escodegen": "0.0.7",
     "@types/estree": "0.0.50",
     "@types/jest": "^27.0.1",
-    "jest": "^27.0.6"
+    "acorn": "^8.6.0",
+    "jest": "^27.0.6",
+    "semantic-release": "^18.0.1"
   }
 }

package/src/__mocks__/new-compiled-jsx-with-attr.js

@@ -0,0 +1,101 @@
+import {
+  j as jsxRuntime,
+  r as react,
+  R as ReactDOM,
+  a as React
+} from "./vendor.1137a3d7.js";
+var index = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n";
+var App$1 = ".sub {\n  color: green;\n}";
+var App_scoped = ".App {\n  text-align: center;\n}\n\n.sub {\n  color: blue !important;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\nbutton {\n  font-size: calc(10px + 2vmin);\n}\n";
+var logo = "/assets/logo.ecc203fb.svg";
+var Sub_scoped = ".sub {\n  color: red;\n}\n.sub__test {\n  margin: 0;\n}\n.sub h2 {\n  font-weight: 300;\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 10rem;\n}\n\n.drawer {\n  width: 400px;\n}\n.drawer__list-item {\n  padding: 0;\n}\n.drawer__list-item-icon {\n  margin-right: 1rem;\n}\n.drawer__link {\n  display: flex;\n  width: 300px;\n  padding: 1rem;\n  align-items: center;\n  text-decoration: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font-family: \"Quicksand\", \"Roboto\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n}\n.drawer__link:hover {\n  background-color: #fafafa;\n}";
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function Sub() {
+  return jsx("div", {
+    className: "sub",
+    children: jsx("h2", {
+      children: "Sub",
+      "data-v-123456": true
+    }),
+    "data-v-123456": true
+  });
+}
+function App() {
+  const [count, setCount] = react.exports.useState(0);
+  return jsx(Fragment, {
+    children: jsxs("div", {
+      className: "App",
+      children: [
+        jsxs("header", {
+          className: "App-header",
+          children: [
+            jsx("img", {
+              src: logo,
+              className: "App-logo",
+              alt: "logo",
+              "data-v-123456": true
+            }),
+            jsx("p", {
+              children: "Hello Vite + React!",
+              "data-v-123456": true
+            }),
+            jsx("p", {
+              children: jsxs("button", {
+                type: "button",
+                onClick: () => setCount(count2 => count2 + 1),
+                children: [
+                  "count is: ",
+                  count
+                ],
+                "data-v-123456": true
+              }),
+              "data-v-123456": true
+            }),
+            jsxs("p", {
+              children: [
+                "Edit ",
+                jsx("code", {
+                  children: "App.jsx",
+                  "data-v-123456": true
+                }),
+                " and save to test HMR updates."
+              ],
+              "data-v-123456": true
+            }),
+            jsxs("p", {
+              children: [
+                jsx("a", {
+                  className: "App-link",
+                  href: "https://reactjs.org",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Learn React",
+                  "data-v-123456": true
+                }),
+                " | ",
+                jsx("a", {
+                  className: "App-link",
+                  href: "https://vitejs.dev/guide/features.html",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Vite Docs",
+                  "data-v-123456": true
+                })
+              ],
+              "data-v-123456": true
+            })
+          ],
+          "data-v-123456": true
+        }),
+        jsx(Fragment, { children: jsx(Sub, { "data-v-123456": true }) })
+      ],
+      "data-v-123456": true
+    })
+  });
+}
+ReactDOM.render(jsx(React.StrictMode, {
+  children: jsx(App, { "data-v-123456": true }),
+  "data-v-123456": true
+}), document.getElementById("root"));

package/src/__mocks__/new-compiled-jsx.js

@@ -0,0 +1,64 @@
+import { j as jsxRuntime, r as react, R as ReactDOM, a as React } from "./vendor.1137a3d7.js";
+var index = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n";
+var App$1 = ".sub {\n  color: green;\n}";
+var App_scoped = ".App {\n  text-align: center;\n}\n\n.sub {\n  color: blue !important;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\nbutton {\n  font-size: calc(10px + 2vmin);\n}\n";
+var logo = "/assets/logo.ecc203fb.svg";
+var Sub_scoped = '.sub {\n  color: red;\n}\n.sub__test {\n  margin: 0;\n}\n.sub h2 {\n  font-weight: 300;\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 10rem;\n}\n\n.drawer {\n  width: 400px;\n}\n.drawer__list-item {\n  padding: 0;\n}\n.drawer__list-item-icon {\n  margin-right: 1rem;\n}\n.drawer__link {\n  display: flex;\n  width: 300px;\n  padding: 1rem;\n  align-items: center;\n  text-decoration: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font-family: "Quicksand", "Roboto", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n}\n.drawer__link:hover {\n  background-color: #fafafa;\n}';
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function Sub() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "sub",
+    children: /* @__PURE__ */ jsx("h2", {
+      children: "Sub"
+    })
+  });
+}
+function App() {
+  const [count, setCount] = react.exports.useState(0);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "App",
+      children: [/* @__PURE__ */ jsxs("header", {
+        className: "App-header",
+        children: [/* @__PURE__ */ jsx("img", {
+          src: logo,
+          className: "App-logo",
+          alt: "logo"
+        }), /* @__PURE__ */ jsx("p", {
+          children: "Hello Vite + React!"
+        }), /* @__PURE__ */ jsx("p", {
+          children: /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            onClick: () => setCount((count2) => count2 + 1),
+            children: ["count is: ", count]
+          })
+        }), /* @__PURE__ */ jsxs("p", {
+          children: ["Edit ", /* @__PURE__ */ jsx("code", {
+            children: "App.jsx"
+          }), " and save to test HMR updates."]
+        }), /* @__PURE__ */ jsxs("p", {
+          children: [/* @__PURE__ */ jsx("a", {
+            className: "App-link",
+            href: "https://reactjs.org",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Learn React"
+          }), " | ", /* @__PURE__ */ jsx("a", {
+            className: "App-link",
+            href: "https://vitejs.dev/guide/features.html",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Vite Docs"
+          })]
+        })]
+      }), /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(Sub, {})
+      })]
+    })
+  });
+}
+ReactDOM.render(/* @__PURE__ */ jsx(React.StrictMode, {
+  children: /* @__PURE__ */ jsx(App, {})
+}), document.getElementById("root"));

package/src/__mocks__/sample-code-file.js

@@ -0,0 +1,4 @@
+let array = [1, 2, 3];
+
+const multiply = (arr) => arr.map(x => x * 2);
+const newArray = multiply(array);

package/src/ast-iterator.spec.ts

@@ -0,0 +1,19 @@
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { parse } from "acorn";
+import { astIterator } from "./ast-iterator";
+
+describe('astIterator', () => {
+  it('should iterate through all nodes', async () => {
+    let iterationCount = 0;
+    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
+    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+
+    for (const node of astIterator(ast)) {
+      iterationCount++;
+      expect(node).toBeTruthy();
+    }
+
+    expect(iterationCount).toBe(28);
+  });
+})

package/src/ast-iterator.ts

@@ -0,0 +1,27 @@
+
+const isNode = (obj: any) => {
+  return typeof obj === 'object' && 
+      typeof (obj as any)?.end === 'number' && 
+      typeof (obj as any)?.start === 'number' && 
+      typeof (obj as any)?.type === 'string'
+}
+
+export const astIterator = function* (ast: any): IterableIterator<any> {
+  if (!ast) { return }
+
+  for (let key of Object.keys(ast)) {
+    // Skip useless keys
+    if (['end', 'start', 'type'].includes(key)) { continue; }
+
+    // If key value is an array, iterate over it
+    if (Array.isArray(ast[key])) {
+      for (let nodeIndex in ast[key]) {
+        yield *astIterator(ast[key][nodeIndex])
+      }
+    } else if(isNode(ast[key])) {
+      yield *astIterator(ast[key])
+    }
+  }
+
+  yield ast
+}

package/src/ast-transformer.spec.ts

@@ -0,0 +1,20 @@
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { parse } from "acorn";
+import { astTransformer } from "./ast-transformer";
+
+describe('astTransformer', () => {
+  it('should iterate through all nodes', async () => {
+    let iterationCount = 0;
+    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
+    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+
+    const newAst = astTransformer(ast, (node) => {
+      iterationCount++;
+      expect(node).toBeTruthy();
+    })
+
+    expect(newAst).toBeDefined();
+    expect(iterationCount).toBe(28);
+  });
+})

package/src/ast-transformer.ts

@@ -0,0 +1,24 @@
+const isNode = (obj: any) => {
+  return typeof obj === 'object' && 
+      typeof (obj as any)?.end === 'number' && 
+      typeof (obj as any)?.start === 'number' && 
+      typeof (obj as any)?.type === 'string'
+}
+
+export const astTransformer = (ast: any, callback: Function) => {
+  for (let key of Object.keys(ast)) {
+    if (['end', 'start', 'type'].includes(key)) { continue; }
+
+    if (Array.isArray(ast[key])) {
+      for (let nodeIndex in ast[key]) {
+        ast[key][nodeIndex] = astTransformer(ast[key][nodeIndex], callback)
+      }
+    } else if(isNode(ast[key])) {
+      ast[key] = astTransformer(ast[key], callback)
+    }
+  }
+
+  const result = callback(ast);
+
+  return typeof result !== 'undefined' ? result : ast
+}

package/src/ast.utils.spec.ts

@@ -5,18 +5,42 @@ import { generate } from 'escodegen'
 import { addHashAttributesToJsxTagsAst } from './ast.utils'
 
 describe('AST Utils', () => {
-  it('Should add the attr to the right elements', async () => {
-    const compiled = await readFile(resolve(__dirname, './__mocks__/compiled-jsx.js'), { encoding: 'utf-8' })
-    const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
-    const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
-    const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
-    const modifiedCompiled = generate(modifiedAst, { format: {
-      indent: {
-        style: '  ',
-      },
-      quotes: 'double',
-    } })
+  beforeEach(() => {
+    global.implementation = null
+  })
 
-    expect(modifiedCompiled).toEqual(compiledWithAttr)
+  describe('classic implementation', () => {
+    it('Should add the attr to the right elements', async () => {
+      const compiled = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx.js'), { encoding: 'utf-8' })
+      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
+      const modifiedCompiled = generate(modifiedAst, { format: {
+        indent: {
+          style: '  ',
+        },
+        quotes: 'double',
+      } })
+  
+      expect(modifiedCompiled).toEqual(compiledWithAttr)
+    })
+  })
+  
+  describe('new implementation', () => {
+    it('Should add the attr to the right elements', async () => {
+      const compiled = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx.js'), { encoding: 'utf-8' })
+      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
+      const modifiedCompiled = generate(modifiedAst, { format: {
+        indent: {
+          style: '  ',
+        },
+        quotes: 'double',
+      } })
+  
+      expect(modifiedCompiled).toEqual(compiledWithAttr)
+    })
   })
+  
 })

package/src/ast.utils.ts

@@ -1,111 +1,52 @@
-/**
- * Traverses the AST tree and calls callback for each node.
- * -
- * @param ast The ast tree
- * @param callback Callback function to be called for each node
- * @returns 
- */
-function traverse(ast: any, callback: Function) {
-  for (let key of Object.keys(ast)) {
-    if (['end', 'start', 'type'].includes(key)) { continue; }
+import { astIterator } from "./ast-iterator"
+import { astTransformer } from "./ast-transformer"
+import { ClassicJsxParser } from "./parsers/classic-parser"
+import { JsxParser, ParserImplementations } from "./parsers/jsx-parser.model"
+import { NewJsxParser } from "./parsers/new-parser"
 
-    if (Array.isArray(ast[key])) {
-      for (let nodeIndex in ast[key]) {
-        ast[key][nodeIndex] = traverse(ast[key][nodeIndex], callback)
-      }
-    } else if(isNode(ast[key])) {
-      ast[key] = traverse(ast[key], callback)
-    }
-  }
-
-  const result = callback(ast);
-
-  return typeof result !== 'undefined' ? result : ast
+declare global {
+  var implementation: null | ParserImplementations
 }
 
-function isNode(obj: unknown) {
-  return typeof obj === 'object' && 
-      typeof (obj as any)?.end === 'number' && 
-      typeof (obj as any)?.start === 'number' && 
-      typeof (obj as any)?.type === 'string'
-}
+global.implementation = null
 
-function isElementWithOldJsxTransform(node: any) {
-  return node?.type === 'CallExpression' && 
-    node?.callee?.object?.name === 'React' &&
-    node?.callee?.property?.name === 'createElement'
-}
+const classicParser = new ClassicJsxParser()
+const newParser = new NewJsxParser()
 
-function isElementWithNewJsxTransform(node: any) {
-  return node?.type === 'CallExpression' &&
-    ['_jsxDEV', '_jsx'].includes(node?.callee?.name)
-}
+let parser: JsxParser = classicParser;
 
-function isFragmentWithOldJsxTransform(node: any) {
-  return node?.arguments?.[0]?.object?.name === "React" && 
-    node?.arguments?.[0]?.property?.name === "Fragment"
-}
+const findImplementation = (program: any) => {
+  let implementation: ParserImplementations = ParserImplementations.classic;
+  for (let node of astIterator(program)) {
+    if (node.type !== 'ImportDeclaration') {
+      continue;
+    }
 
-function isFragmentWithNewJsxTransform(node: any) {
-  return node.arguments?.[0]?.type === "Identifier" &&
-    node.arguments?.[0]?.name === "_Fragment"
+    if (
+      node.specifiers.some((n: any) => 
+        ['_jsxDEV', 'jsxRuntime'].includes(n.local.name))
+      || ['react/jsx-dev-runtime', 'react/jsx-runtime'].includes(node.source.value)
+    ) {
+      return ParserImplementations.new
+    }
+  }
+  return implementation
 }
 
-function isFragment(node: any) {
-  return isFragmentWithOldJsxTransform(node) ||
-  isFragmentWithNewJsxTransform(node)
-}
+export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
 
-function isReactElement(node: any) {
-  return isElementWithOldJsxTransform(node) ||
-  isElementWithNewJsxTransform(node)
-}
+  // Once in the program, we can determine which parser to use
+  if (global.implementation === null) {
+    global.implementation = findImplementation(program)
 
-function createAttributeNode(attr: string) {
-  return {
-    type: 'Property',
-    method: false,
-    shorthand: false,
-    computed: false,
-    key: {
-      type: 'Identifier',
-      name: `"${attr}"`
-    },
-    value: {
-      type: 'Literal',
-      value: true,
-      raw: "true"
-    },
-    kind: 'init'
+    if (global.implementation === ParserImplementations.new) {
+      parser = newParser
+    }
   }
-}
 
-export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
-  return traverse(program, (node: any) => {
-    if (isReactElement(node) && !isFragment(node)) {
-      const arg = node?.arguments?.[1]
-      return {
-        ...node,
-        arguments: node?.arguments.map((v: any, i: number) => {
-          if (i === 1) {
-              if (v.type === 'ObjectExpression') {
-                return {
-                  ...v,
-                  properties: [
-                    ...arg.properties,
-                    createAttributeNode(attr)
-                  ]
-                }
-              } else {
-                return {
-                  type: 'ObjectExpression',
-                  properties: [createAttributeNode(attr)]
-                }
-              }
-            }
-            return v
-          })
-        }
+  return astTransformer(program, (node: any) => {
+    if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
+      return parser.extendNodeWithAttributes(node, attr)
     }
   })
 }

package/src/index.ts

@@ -126,7 +126,6 @@ export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOpti
         if (!filter(id)) {
           return;
         }
-
         if (scopedCssInFileRegex.test(code)) {
           const importerHash = generateHash(id);
           const program = this.parse(code)