rollup-plugin-react-scoped-css 0.4.1 → 0.6.0

package/src/ast-iterator.ts

@@ -0,0 +1,32 @@
+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 (const 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 (const 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,23 @@
+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,28 @@
+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: (ast: any) => any) => {
+  for (const key of Object.keys(ast)) {
+    if (["end", "start", "type"].includes(key)) {
+      continue;
+    }
+
+    if (Array.isArray(ast[key])) {
+      for (const 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

@@ -1,22 +1,61 @@
-import { resolve } from 'path'
-import { readFile } from 'fs/promises'
-import { parse } from 'acorn'
-import { generate } from 'escodegen'
-import { addHashAttributesToJsxTagsAst } from './ast.utils'
+import { resolve } from "path";
+import { readFile } from "fs/promises";
+import { parse } from "acorn";
+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',
-    } })
+describe("AST Utils", () => {
+  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,53 @@
-/**
- * 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
-}
-
-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'
+declare global {
+  // eslint-disable-next-line
+  var implementation: null | ParserImplementations;
 }
 
-function isElementWithOldJsxTransform(node: any) {
-  return node?.type === 'CallExpression' && 
-    node?.callee?.object?.name === 'React' &&
-    node?.callee?.property?.name === 'createElement'
-}
+global.implementation = null;
 
-function isElementWithNewJsxTransform(node: any) {
-  return node?.type === 'CallExpression' &&
-    ['_jsxDEV', '_jsx', '_jsxs'].includes(node?.callee?.name)
-}
+const classicParser = new ClassicJsxParser();
+const newParser = new NewJsxParser();
 
-function isFragmentWithOldJsxTransform(node: any) {
-  return node?.arguments?.[0]?.object?.name === "React" && 
-    node?.arguments?.[0]?.property?.name === "Fragment"
-}
+let parser: JsxParser = classicParser;
 
-function isFragmentWithNewJsxTransform(node: any) {
-  return node.arguments?.[0]?.type === "Identifier" &&
-    node.arguments?.[0]?.name === "_Fragment"
-}
+const findImplementation = (program: any) => {
+  const implementation: ParserImplementations = ParserImplementations.classic;
+  for (const node of astIterator(program)) {
+    if (node.type !== "ImportDeclaration") {
+      continue;
+    }
 
-function isFragment(node: any) {
-  return isFragmentWithOldJsxTransform(node) ||
-  isFragmentWithNewJsxTransform(node)
-}
+    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 isReactElement(node: any) {
-  return isElementWithOldJsxTransform(node) ||
-  isElementWithNewJsxTransform(node)
-}
+export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
+  // 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

@@ -1,27 +1,28 @@
-import * as path from 'path';
-import { xxHash32 } from 'js-xxhash';
-import { createFilter, FilterPattern } from '@rollup/pluginutils';
-import { compileStyle } from '@vue/component-compiler-utils'
-import { generate } from 'escodegen'
+/* eslint-disable no-useless-escape */
+import * as path from "path";
+import { xxHash32 } from "js-xxhash";
+import { createFilter, FilterPattern } from "@rollup/pluginutils";
+import { compileStyle } from "@vue/component-compiler-utils";
+import { generate } from "escodegen";
 
-import type { Plugin } from 'rollup'
-import { addHashAttributesToJsxTagsAst } from './ast.utils';
+import type { Plugin } from "rollup";
+import { addHashAttributesToJsxTagsAst } from "./ast.utils";
 
 const getFilenameFromPath = (filePath: string) => {
-  const parts = filePath.split('/')
-  return parts[parts.length - 1].split('?')[0]
-}
+  const parts = filePath.split("/");
+  return parts[parts.length - 1].split("?")[0];
+};
 
 const getHashFromPath = (filePath: string) => {
-  const search = '?scope='
-  const hash = filePath.slice(filePath.indexOf(search) + search.length)
-  return hash
-}
+  const search = "?scope=";
+  const hash = filePath.slice(filePath.indexOf(search) + search.length);
+  return hash;
+};
 
-const generateHash = (input: string, seed: number = 0) => {
-  let hashNum = xxHash32(Buffer.from(input, 'utf8'), seed);
+const generateHash = (input: string, seed = 0) => {
+  const hashNum = xxHash32(Buffer.from(input, "utf8"), seed);
   return hashNum.toString(16);
-}
+};
 
 const addAttributesToCss = (src: string, fileName: string, hash: string) => {
   const { code } = compileStyle({
@@ -30,83 +31,93 @@ const addAttributesToCss = (src: string, fileName: string, hash: string) => {
     id: hash,
     scoped: true,
     trim: true,
-  })
+  });
 
-  return code
-}
+  return code;
+};
 
 export interface ReactScopedCssPluginOptions {
   /**
    * Which files should be included and parsed by the plugin
    * Default: undefined
    */
-  include?: FilterPattern
+  include?: FilterPattern;
 
   /**
    * Which files should be exluded and that should not be parsed by the plugin
    * Default: undefined
    */
-  exclude?: FilterPattern
+  exclude?: FilterPattern;
 
   /**
    * If you want to customize the stylesheet file pattern
    * if undefined or '' is passed, all files will be evaluated
    * Default: 'scoped'
    */
-  styleFileSuffix?: string
+  styleFileSuffix?: string;
 
   /**
    * If you want to customize the attribute prefix that is added to the jsx elements
    * Default: 'v'
    */
-  hashPrefix?: string
+  hashPrefix?: string;
 
   /**
    * If you want to customize the stylesheet extensions
    * Default: ['scss', 'css', 'sass', 'less']
    */
-   styleFileExtensions?: string[]
+  styleFileExtensions?: string[];
 
   /**
    * If you have jsx in other file extensions
    * Default: ['jsx', 'tsx']
    */
-  jsxFileExtensions?: string[]
+  jsxFileExtensions?: string[];
 }
 
 export interface VitePartialPlugin extends Plugin {
-  enforce?: "pre" | "post"
+  enforce?: "pre" | "post";
 }
 
-export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
+export default function reactScopedCssPlugin(
+  optionsIn: ReactScopedCssPluginOptions = {}
+): VitePartialPlugin[] {
   const options: Partial<ReactScopedCssPluginOptions> = {
-    hashPrefix: 'v',
-    styleFileSuffix: 'scoped',
-    styleFileExtensions: ['scss', 'css', 'sass', 'less'],
-    jsxFileExtensions: ['jsx', 'tsx'],
-    ...optionsIn
-  }
+    hashPrefix: "v",
+    styleFileSuffix: "scoped",
+    styleFileExtensions: ["scss", "css", "sass", "less"],
+    jsxFileExtensions: ["jsx", "tsx"],
+    ...optionsIn,
+  };
 
   if (!options.styleFileExtensions || !options.styleFileExtensions.length) {
-    throw new Error('You need to provide at least one style file extension')
+    throw new Error("You need to provide at least one style file extension");
   }
 
   if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
-    throw new Error('You need to provide at least one jsx file extension')
+    throw new Error("You need to provide at least one jsx file extension");
   }
 
-  const filter = createFilter( options.include, options.exclude );
-  const scopedCssRegex = options.styleFileSuffix 
-    ? new RegExp(`\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join('|')})$`)
-    : new RegExp(`\.(${options.styleFileExtensions.join('|')})$`)
+  const filter = createFilter(options.include, options.exclude);
+  const scopedCssRegex = options.styleFileSuffix
+    ? new RegExp(
+        `\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join(
+          "|"
+        )})$`
+      )
+    : new RegExp(`\.(${options.styleFileExtensions.join("|")})$`);
   const scopedCssInFileRegex = options.styleFileSuffix
-    ? new RegExp(`\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join('|')})(\"|\')`)
-    : new RegExp(`\.(${options.styleFileExtensions.join('|')})(\"|\')`)
-  const jsxRegex = new RegExp(`\.(${options.jsxFileExtensions.join('|')})$`)
+    ? new RegExp(
+        `\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join(
+          "|"
+        )})(\"|\')`
+      )
+    : new RegExp(`\.(${options.styleFileExtensions.join("|")})(\"|\')`);
+  const jsxRegex = new RegExp(`\.(${options.jsxFileExtensions.join("|")})$`);
 
   return [
     {
-      name: 'rollup-plugin-react-scoped-css:pre',
+      name: "rollup-plugin-react-scoped-css:pre",
       resolveId(source, importer) {
         if (!importer) {
           return;
@@ -114,31 +125,40 @@ export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOpti
 
         if (scopedCssRegex.test(source) && jsxRegex.test(importer)) {
           const importerHash = generateHash(importer);
-          const url = path.resolve(path.dirname(importer), `${source}?scope=${importerHash}`)
-          return url
+          const url = path.resolve(
+            path.dirname(importer),
+            `${source}?scope=${importerHash}`
+          );
+          return url;
         }
       },
-      enforce: 'pre'
+      enforce: "pre",
     },
     {
-      name: 'rollup-plugin-react-scoped-css:post',
+      name: "rollup-plugin-react-scoped-css:post",
       transform(code, id) {
         if (!filter(id)) {
           return;
         }
-
         if (scopedCssInFileRegex.test(code)) {
           const importerHash = generateHash(id);
-          const program = this.parse(code)
-          const newAst = addHashAttributesToJsxTagsAst(program, `data-${options.hashPrefix}-${importerHash}`)
-          return generate(newAst)
+          const program = this.parse(code);
+          const newAst = addHashAttributesToJsxTagsAst(
+            program,
+            `data-${options.hashPrefix}-${importerHash}`
+          );
+          return generate(newAst);
         }
 
         if (scopedCssRegex.test(getFilenameFromPath(id))) {
           const importerHash = getHashFromPath(id);
-          return addAttributesToCss(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`)
+          return addAttributesToCss(
+            code,
+            getFilenameFromPath(id),
+            `data-${options.hashPrefix}-${importerHash}`
+          );
         }
-      }
-    }
-  ]
-}
+      },
+    },
+  ];
+}

package/src/parsers/classic-parser.ts

@@ -0,0 +1,72 @@
+import { JsxParser } from "./jsx-parser.model";
+
+export class ClassicJsxParser implements JsxParser {
+  isNodeReactFragment(node: any) {
+    return (
+      node?.arguments?.[0]?.object?.name === "React" &&
+      node?.arguments?.[0]?.property?.name === "Fragment"
+    );
+  }
+  isNodeReactElement(node: any) {
+    return (
+      node?.type === "CallExpression" &&
+      node?.callee?.object?.name === "React" &&
+      node?.callee?.property?.name === "createElement"
+    );
+  }
+
+  public extendNodeWithAttributes(node: any, attr: string) {
+    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, this.createAttributeNode(attr)],
+            };
+          } else if (
+            v.type === "CallExpression" &&
+            v.callee.name === "_objectSpread"
+          ) {
+            const args = [...v.arguments];
+            args[0].properties = [
+              ...args[0].properties,
+              this.createAttributeNode(attr),
+            ];
+            return {
+              ...v,
+              arguments: args,
+            };
+          } else {
+            return {
+              type: "ObjectExpression",
+              properties: [this.createAttributeNode(attr)],
+            };
+          }
+        }
+        return v;
+      }),
+    };
+  }
+
+  private 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",
+    };
+  }
+}

package/src/parsers/jsx-parser.model.ts

@@ -0,0 +1,10 @@
+export interface JsxParser {
+  isNodeReactElement: (node: any) => boolean;
+  isNodeReactFragment: (node: any) => boolean;
+  extendNodeWithAttributes: (node: any, attr: string) => any;
+}
+
+export enum ParserImplementations {
+  new = "new",
+  classic = "classic",
+}