rollup-plugin-react-scoped-css 1.0.0-alpha.13 → 1.0.0-alpha.15

package/README.md

@@ -4,8 +4,8 @@
 While using react in a professional context, I realized that it was lacking the scopped css feature that I learned to love from Vue and Angular. After some reasearch I came across good plugins, but sadly were not compatible with vite and/or rollup. Thus, I decided to create this plugin which was greatly inspired by the amazing work of [gaoxiaoliangz](https://github.com/gaoxiaoliangz) with his [react-scoped-css plugin](https://github.com/gaoxiaoliangz/react-scoped-css).
 
 ## Requirements
-+ **node** >= 16
-+ **vite** >= 4
++ **node** >= 18
++ **vite** >= 5
 
 ## How to install
 
@@ -50,38 +50,51 @@ There are a few options available to customize how the plugin works
    * 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
+   * If you want regular files to be scoped & global files to be .global.css
+   * Default: false
+   */
+  scopeStyleByDefault?: boolean;
+
+  /**
+   * If you want to customize the pattern for scoped styles.
+   * This will only work if scopeStyleByDefault is false
    * Default: 'scoped'
    */
-  styleFileSuffix?: string
+  scopedStyleSuffix?: string;
 
   /**
-   * If you want to customize the attribute prefix that is added to the jsx elements
-   * Default: 'v'
+   * If you want to customize the pattern for global styles.
+   * This will only work if scopeStyleByDefault is true
+   * Default: 'global'
    */
-  hashPrefix?: string
+  globalStyleSuffix?: string;
 
   /**
-   * If you want to customize the preprocessors
-   * Default: ['scss', 'css', 'sass', 'less']
+   * If you want to customize the pattern for style files.
+   * Default: ['css', 'scss', 'sass', 'less']
    */
-  styleFileExtensions?: string[]
+  styleFileExtensions?: string[];
 
   /**
-   * If you have jsx in other file extensions
+   * If you want to customize the pattern for jsx files.
    * Default: ['jsx', 'tsx']
    */
-  jsxFileExtensions?: string[]
+  jsxFileExtensions?: string[];
+
+  /**
+   * If you want to customize the attribute prefix that is added to the jsx elements
+   * Default: 'v'
+   */
+  hashPrefix?: string;
 }
 ```
 

package/dist/index.d.ts

@@ -12,26 +12,37 @@ export interface ReactScopedCssPluginOptions {
      */
     exclude?: FilterPattern;
     /**
-     * If you want to customize the stylesheet file pattern
-     * if undefined or '' is passed, all files will be evaluated
+     * If you want regular files to be scoped & global files to be .global.css
+     * Default: false
+     */
+    scopeStyleByDefault?: boolean;
+    /**
+     * If you want to customize the pattern for scoped styles.
+     * This will only work if scopeStyleByDefault is false
      * Default: 'scoped'
      */
-    styleFileSuffix?: string;
+    scopedStyleSuffix?: string;
     /**
-     * If you want to customize the attribute prefix that is added to the jsx elements
-     * Default: 'v'
+     * If you want to customize the pattern for global styles.
+     * This will only work if scopeStyleByDefault is true
+     * Default: 'global'
      */
-    hashPrefix?: string;
+    globalStyleSuffix?: string;
     /**
-     * If you want to customize the stylesheet extensions
-     * Default: ['scss', 'css', 'sass', 'less']
+     * If you want to customize the pattern for style files.
+     * Default: ['css', 'scss', 'sass', 'less']
      */
     styleFileExtensions?: string[];
     /**
-     * If you have jsx in other file extensions
+     * If you want to customize the pattern for jsx files.
      * Default: ['jsx', 'tsx']
      */
     jsxFileExtensions?: string[];
+    /**
+     * If you want to customize the attribute prefix that is added to the jsx elements
+     * Default: undefined
+     */
+    hashPrefix?: string;
 }
 export interface VitePartialPlugin extends Plugin {
     enforce?: "pre" | "post";

package/dist/index.js

@@ -23,25 +23,29 @@ const generateHash = (input, seed = 0) => {
 };
 function reactScopedCssPlugin(optionsIn = {}) {
     const options = {
-        styleFileSuffix: "scoped",
-        styleFileExtensions: ["scss", "css", "sass", "less"],
+        scopeStyleByDefault: false,
+        scopedStyleSuffix: "scoped",
+        globalStyleSuffix: "global",
+        styleFileExtensions: ["css", "scss", "sass", "less"],
         jsxFileExtensions: ["jsx", "tsx"],
         ...optionsIn,
     };
-    if (!options.styleFileExtensions || !options.styleFileExtensions.length) {
+    const { exclude, globalStyleSuffix, hashPrefix, jsxFileExtensions, include, scopeStyleByDefault, scopedStyleSuffix, styleFileExtensions, } = options;
+    if (!styleFileExtensions || !styleFileExtensions.length) {
         throw new Error("You need to provide at least one style file extension");
     }
-    if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
+    if (!jsxFileExtensions || !jsxFileExtensions.length) {
         throw new Error("You need to provide at least one jsx file extension");
     }
-    const filter = (0, pluginutils_1.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("|")})$`);
+    const filter = (0, pluginutils_1.createFilter)(include, exclude);
+    const scopedCssRegex = new RegExp(!scopeStyleByDefault
+        ? `([^\.]+\.${scopedStyleSuffix}\.(${styleFileExtensions.join("|")}))$`
+        : `([^\.]+\.(${styleFileExtensions.join("|")}))$`);
+    const scopedCssInFileRegex = new RegExp(!scopeStyleByDefault
+        ? `([^\.]+\.${scopedStyleSuffix}\.(${styleFileExtensions.join("|")}))(\"|\')`
+        : `([^\.]+\.(${styleFileExtensions.join("|")}))(\"|\')`);
+    const globalCssRegex = new RegExp(`\.${globalStyleSuffix}\.(${styleFileExtensions.join("|")})$`);
+    const jsxRegex = new RegExp(`\.(${jsxFileExtensions.join("|")})$`);
     return [
         {
             name: "rollup-plugin-react-scoped-css:pre",
@@ -50,6 +54,9 @@ function reactScopedCssPlugin(optionsIn = {}) {
                     return;
                 }
                 if (scopedCssRegex.test(source) && jsxRegex.test(importer)) {
+                    if (scopeStyleByDefault && globalCssRegex.test(source)) {
+                        return;
+                    }
                     const importerHash = generateHash(importer);
                     const url = (0, path_1.resolve)((0, path_1.dirname)(importer), `${source}?scope=${importerHash}`);
                     return url;
@@ -63,16 +70,24 @@ function reactScopedCssPlugin(optionsIn = {}) {
                 if (!filter(id)) {
                     return;
                 }
-                if (scopedCssInFileRegex.test(code)) {
+                const matches = code.match(scopedCssInFileRegex);
+                const shouldScope = matches?.some((match) => {
+                    return !(scopeStyleByDefault && globalCssRegex.test(match));
+                });
+                if (shouldScope) {
                     const importerHash = generateHash(id);
                     const program = this.parse(code);
-                    const scopedAttr = options.hashPrefix
-                        ? `data-${options.hashPrefix}-${importerHash}`
+                    const scopedAttr = hashPrefix
+                        ? `data-${hashPrefix}-${importerHash}`
                         : `data-${importerHash}`;
                     const newAst = (0, ast_program_1.addHashAttributesToJsxTagsAst)(program, scopedAttr);
-                    return (0, escodegen_1.generate)(newAst);
+                    const newCode = (0, escodegen_1.generate)(newAst);
+                    return newCode;
                 }
                 if (scopedCssRegex.test(getFilenameFromPath(id))) {
+                    if (scopeStyleByDefault && globalCssRegex.test(id)) {
+                        return;
+                    }
                     const importerHash = getHashFromPath(id);
                     const scopedAttr = options.hashPrefix
                         ? `data-${options.hashPrefix}-${importerHash}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "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",
@@ -34,11 +34,11 @@
   },
   "homepage": "https://github.com/cmseguin/rollup-plugin-react-scoped-css#readme",
   "dependencies": {
-    "@rollup/pluginutils": "5.0.2",
+    "@rollup/pluginutils": "5.1.0",
     "css-tree": "2.3.1",
     "escodegen": "2.0.0",
     "js-xxhash": "2.0.0",
-    "rollup": "3.10.0"
+    "rollup": "4.6.0"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",