rollup-plugin-react-scoped-css 0.2.3 → 0.5.0

package/src/ast.utils.ts

@@ -1,83 +1,48 @@
-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'
+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"
+
+declare global {
+  var implementation: null | ParserImplementations
 }
 
-function isReactCreateElementCallExpression(node: any) {
-  return node?.type === 'CallExpression' && 
-    node?.callee?.object?.name === 'React' &&
-    node?.callee?.property?.name === 'createElement'
-}
+global.implementation = null
 
-function isFragmentCallExpression(node: any) {
-  return node?.arguments?.[0]?.object?.name === "React" && node?.arguments?.[0]?.property?.name === "Fragment"
-}
+const classicParser = new ClassicJsxParser()
+const newParser = new NewJsxParser()
 
-function traverse(ast: any, callback: Function) {
-  for (let key of Object.keys(ast)) {
-    if (['end', 'start', 'type'].includes(key)) { continue; }
+let parser: JsxParser = classicParser;
 
-    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 findImplementation = (program: any) => {
+  let implementation: ParserImplementations = ParserImplementations.classic;
+  for (let node of astIterator(program)) {
+    if (node.type !== 'ImportDeclaration') {
+      continue;
+    }
+
+    if (node.specifiers.some((n: any) => n.local.name === 'jsxRuntime') || node.source.value === 'react/jsx-runtime') {
+      return ParserImplementations.new
     }
   }
+  return implementation
+}
 
-  const result = callback(ast);
+export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
 
-  return typeof result !== 'undefined' ? result : ast
-}
+  // 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 (isReactCreateElementCallExpression(node) && !isFragmentCallExpression(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

@@ -36,27 +36,73 @@ const addAttributesToCss = (src: string, fileName: string, hash: string) => {
 }
 
 export interface ReactScopedCssPluginOptions {
+  /**
+   * Which files should be included and parsed by the plugin
+   * Default: undefined
+   */
   include?: FilterPattern
+
+  /**
+   * Which files should be exluded and that should not be parsed by the plugin
+   * Default: undefined
+   */
   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
+
+  /**
+   * If you want to customize the attribute prefix that is added to the jsx elements
+   * Default: 'v'
+   */
   hashPrefix?: string
+
+  /**
+   * If you want to customize the stylesheet extensions
+   * Default: ['scss', 'css', 'sass', 'less']
+   */
+   styleFileExtensions?: string[]
+
+  /**
+   * If you have jsx in other file extensions
+   * Default: ['jsx', 'tsx']
+   */
+  jsxFileExtensions?: string[]
 }
 
 export interface VitePartialPlugin extends Plugin {
   enforce?: "pre" | "post"
 }
 
-export default function reactScopedCssPlugin(optionsIn:ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
-  const options = {
-    styleFileSuffix: 'scoped',
+export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
+  const options: Partial<ReactScopedCssPluginOptions> = {
     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')
+  }
+
+  if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
+    throw new Error('You need to provide at least one jsx file extension')
+  }
+
   const filter = createFilter( options.include, options.exclude );
-  const scopedCssRegex = new RegExp(`\.${options.styleFileSuffix}\.(scss|css|sass)$`)
-  const scopedCssInFileRegex = new RegExp(`\.${options.styleFileSuffix}\.(scss|css|sass)(\"|\')`)
-  const jsxRegex = /\.(tsx|jsx)$/
+  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('|')})$`)
 
   return [
     {

package/src/parsers/classic-parser.ts

@@ -0,0 +1,58 @@
+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 {
+              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'
+}

package/src/parsers/new-parser.ts

@@ -0,0 +1,58 @@
+import { JsxParser } from "./jsx-parser.model";
+
+export class NewJsxParser implements JsxParser {
+  isNodeReactFragment(node: any) {
+    return node.arguments?.[0]?.type === "Identifier" &&
+    ['_Fragment', 'Fragment'].includes(node.arguments?.[0]?.name)
+  }
+  
+  isNodeReactElement(node: any) {
+    return node?.type === 'CallExpression' &&
+      ['_jsxDEV', '_jsx', '_jsxs', 'jsxDev', 'jsx', 'jsxs'].includes(node?.callee?.name)
+  }
+
+  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 {
+              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/tsconfig.json

@@ -6,7 +6,8 @@
     "declaration": true,
     "outDir": "dist",
     "strict": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "downlevelIteration": true
   },
   "exclude": [
     "node_modules",