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

package/src/ast-transformer.spec.ts

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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', () => {
-  beforeEach(() => {
-    global.implementation = null
-  })
-
-  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,48 +0,0 @@
-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
-}
-
-global.implementation = null
-
-const classicParser = new ClassicJsxParser()
-const newParser = new NewJsxParser()
-
-let parser: JsxParser = classicParser;
-
-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
-}
-
-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)
-
-    if (global.implementation === ParserImplementations.new) {
-      parser = newParser
-    }
-  }
-
-  return astTransformer(program, (node: any) => {
-    if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
-      return parser.extendNodeWithAttributes(node, attr)
-    }
-  })
-}

package/src/index.ts

@@ -1,144 +0,0 @@
-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';
-
-const getFilenameFromPath = (filePath: string) => {
-  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 generateHash = (input: string, seed: number = 0) => {
-  let hashNum = xxHash32(Buffer.from(input, 'utf8'), seed);
-  return hashNum.toString(16);
-}
-
-const addAttributesToCss = (src: string, fileName: string, hash: string) => {
-  const { code } = compileStyle({
-    source: src,
-    filename: fileName,
-    id: hash,
-    scoped: true,
-    trim: true,
-  })
-
-  return code
-}
-
-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: 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 = 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 [
-    {
-      name: 'rollup-plugin-react-scoped-css:pre',
-      resolveId(source, importer) {
-        if (!importer) {
-          return;
-        }
-
-        if (scopedCssRegex.test(source) && jsxRegex.test(importer)) {
-          const importerHash = generateHash(importer);
-          const url = path.resolve(path.dirname(importer), `${source}?scope=${importerHash}`)
-          return url
-        }
-      },
-      enforce: 'pre'
-    },
-    {
-      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)
-        }
-
-        if (scopedCssRegex.test(getFilenameFromPath(id))) {
-          const importerHash = getHashFromPath(id);
-          return addAttributesToCss(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`)
-        }
-      }
-    }
-  ]
-}

package/src/parsers/classic-parser.ts

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

@@ -1,10 +0,0 @@
-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

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