rollup-plugin-react-scoped-css 1.0.0-alpha.9 → 1.0.1

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
 
@@ -40,7 +40,7 @@ export default {
 };
 ```
 
-***Notes:** Because this plugin has been built with a majority of it's usecase with vite, this plugin doesn't handle transpiling LESS, SCSS or other preprocessors. For that reason, you will likely need to add your transpilation plugins before reactScopedCssPlugin.*
+***Notes:** Because this plugin has been built with vite as its primary usecase, it doesn't transpile LESS, SCSS or other preprocessors. For that reason, you will likely need to add your transpilation plugins before reactScopedCssPlugin if you plan on using this without vite.*
 
 ### Customizing the plugin
 There are a few options available to customize how the plugin works
@@ -50,42 +50,55 @@ 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;
 }
 ```
 
-### Advanced rollup usecases
+### Advanced Rollup usecases
 Since this plugin works in two parts, you might need to expose the first part, then add any other plugin, and then expose the second part of the plugin. This part is automatically handled with vite thanks to the enforce attribute.
 
 ```js
@@ -130,7 +143,7 @@ If you want a selector in scoped styles to be "deep", i.e. affecting child compo
 ```
 The above will be compiled into:
 ```css
-.a[data-v-f3f3eg9] .b { /* ... */ }
+.a[data-f3f3eg9] .b { /* ... */ }
 ```
 Another exepted format, which will generate the same resutl, is:
 ```scss
@@ -147,4 +160,3 @@ Be careful with descendant selectors in recursive components! For a CSS rule wit
 
 ## Contributing
 Anyone is free to open a PR and contribute to this project... just be civilized!
-

package/dist/css/scope-css.js

@@ -26,19 +26,9 @@ const isScopePiercingPseudoSelector = (item) => {
     return (item?.data?.type === "PseudoElementSelector" &&
         (item?.data?.name === "v-deep" || item?.data?.name === "deep"));
 };
-const isScopedAttributeSelector = (item, hash) => {
-    return (item?.data?.type === "AttributeSelector" && item?.data?.name?.name === hash);
-};
-const isChainedSelector = (item) => {
-    return ((item?.data?.type === "TypeSelector" ||
-        item?.data?.type === "ClassSelector" ||
-        item?.data?.type === "AttributeSelector" ||
-        item?.data?.type === "IdSelector" ||
-        item?.data?.type === "PseudoClassSelector") &&
-        (item?.next?.data?.type === "ClassSelector" ||
-            item?.next?.data?.type === "AttributeSelector" ||
-            item?.next?.data?.type === "IdSelector" ||
-            item?.next?.data?.type === "PseudoClassSelector"));
+const isPseudoSelector = (item) => {
+    return (item?.data?.type === "PseudoClassSelector" ||
+        item?.data?.type === "PseudoElementSelector");
 };
 const isCombinator = (item) => {
     return item?.data?.type === "Combinator";
@@ -59,34 +49,33 @@ function scopeCss(css, filename, hash) {
                 if (selector.type !== "Selector") {
                     return;
                 }
-                let hasHitDeep = false;
                 let item = selector.children.head;
-                while (item !== null || hasHitDeep) {
-                    // Only to satisfy typescript
-                    if (item === null) {
-                        break;
-                    }
-                    if (isScopedAttributeSelector(item, hash)) {
-                        item = item?.next ?? null;
-                        continue;
-                    }
-                    if (item.next && isScopePiercingPseudoSelector(item.next)) {
-                        hasHitDeep = true;
-                        Object.assign(item.next.data, attributeSelector);
+                const itemsToInsertScopeBefore = [];
+                let currentChunkIndex = 0;
+                while (item !== null) {
+                    if (isScopePiercingPseudoSelector(item)) {
+                        Object.assign(item.data, attributeSelector);
                         break;
                     }
-                    if (isChainedSelector(item) || isCombinator(item)) {
-                        item = item?.next ?? null;
-                        continue;
+                    else if (isCombinator(item) || isPseudoSelector(item)) {
+                        currentChunkIndex += 1;
                     }
-                    if (item?.next === null) {
-                        selector.children.appendData(attributeSelector);
+                    else if (item.next) {
+                        itemsToInsertScopeBefore[currentChunkIndex] = item.next;
                     }
                     else {
-                        selector.children.insertData(attributeSelector, item.next);
+                        selector.children.appendData(attributeSelector);
+                        break;
                     }
                     item = item?.next ?? null;
                 }
+                // This is true if one of the two break statements above was run. Which means we don't want to add to the last one.
+                if (itemsToInsertScopeBefore[currentChunkIndex]) {
+                    itemsToInsertScopeBefore.pop();
+                }
+                itemsToInsertScopeBefore.forEach((scopePositionItem) => {
+                    selector.children.insertData(attributeSelector, scopePositionItem);
+                });
             });
         });
         return (0, css_tree_1.generate)(ast);

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

@@ -8,6 +8,7 @@ const pluginutils_1 = require("@rollup/pluginutils");
 const escodegen_1 = require("escodegen");
 const ast_program_1 = require("./ast-program");
 const scope_css_1 = require("./css/scope-css");
+const getImportDeclarationsValue_1 = require("./utils/getImportDeclarationsValue");
 const getFilenameFromPath = (filePath) => {
     const parts = filePath.split("/");
     return parts[parts.length - 1].split("?")[0];
@@ -23,25 +24,26 @@ 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 globalCssRegex = new RegExp(`\.${globalStyleSuffix}\.(${styleFileExtensions.join("|")})$`);
+    const jsxRegex = new RegExp(`\.(${jsxFileExtensions.join("|")})$`);
     return [
         {
             name: "rollup-plugin-react-scoped-css:pre",
@@ -50,6 +52,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;
@@ -60,24 +65,41 @@ function reactScopedCssPlugin(optionsIn = {}) {
         {
             name: "rollup-plugin-react-scoped-css:post",
             transform(code, id) {
-                if (!filter(id)) {
+                if (!filter(id) || id.includes("node_modules")) {
                     return;
                 }
-                if (scopedCssInFileRegex.test(code)) {
-                    const importerHash = generateHash(id);
-                    const program = this.parse(code);
-                    const scopedAttr = options.hashPrefix
-                        ? `data-${options.hashPrefix}-${importerHash}`
-                        : `data-${importerHash}`;
-                    const newAst = (0, ast_program_1.addHashAttributesToJsxTagsAst)(program, scopedAttr);
-                    return (0, escodegen_1.generate)(newAst);
+                if (jsxRegex.test(id)) {
+                    const rootNode = this.parse(code);
+                    const imports = (0, getImportDeclarationsValue_1.getImportDeclarationsValue)(rootNode);
+                    const shouldScope = !!imports?.some((match) => {
+                        if (scopeStyleByDefault) {
+                            return scopedCssRegex.test(match) && !globalCssRegex.test(match);
+                        }
+                        else {
+                            return scopedCssRegex.test(match);
+                        }
+                    });
+                    if (shouldScope) {
+                        const importerHash = generateHash(id);
+                        const scopedAttr = hashPrefix
+                            ? `data-${hashPrefix}-${importerHash}`
+                            : `data-${importerHash}`;
+                        const newAst = (0, ast_program_1.addHashAttributesToJsxTagsAst)(rootNode, scopedAttr);
+                        const newCode = (0, escodegen_1.generate)(newAst);
+                        return newCode;
+                    }
                 }
-                if (scopedCssRegex.test(getFilenameFromPath(id))) {
-                    const importerHash = getHashFromPath(id);
-                    const scopedAttr = options.hashPrefix
-                        ? `data-${options.hashPrefix}-${importerHash}`
-                        : `data-${importerHash}`;
-                    return (0, scope_css_1.scopeCss)(code, getFilenameFromPath(id), scopedAttr);
+                else {
+                    if (scopedCssRegex.test(getFilenameFromPath(id))) {
+                        if (scopeStyleByDefault && globalCssRegex.test(id)) {
+                            return;
+                        }
+                        const importerHash = getHashFromPath(id);
+                        const scopedAttr = options.hashPrefix
+                            ? `data-${options.hashPrefix}-${importerHash}`
+                            : `data-${importerHash}`;
+                        return (0, scope_css_1.scopeCss)(code, getFilenameFromPath(id), scopedAttr);
+                    }
                 }
             },
         },

package/dist/utils/getImportDeclarationsValue.d.ts

@@ -0,0 +1,2 @@
+import { AstNode } from "rollup";
+export declare const getImportDeclarationsValue: (root: AstNode) => any[];

package/dist/utils/getImportDeclarationsValue.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImportDeclarationsValue = void 0;
+const ast_iterator_1 = require("../ast-iterator");
+const ast_utils_1 = require("../ast.utils");
+const getImportDeclarationsValue = (root) => {
+    const urls = [];
+    for (const node of (0, ast_iterator_1.astIterator)(root)) {
+        if (!(0, ast_utils_1.isNodeImportOrRequire)(node)) {
+            continue;
+        }
+        const src = (0, ast_utils_1.getSrcFromImportOrRequire)(node);
+        urls.push(src);
+    }
+    return urls;
+};
+exports.getImportDeclarationsValue = getImportDeclarationsValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.1",
   "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,36 +34,36 @@
   },
   "homepage": "https://github.com/cmseguin/rollup-plugin-react-scoped-css#readme",
   "dependencies": {
-    "@rollup/pluginutils": "5.0.2",
+    "@rollup/pluginutils": "5.1.2",
     "css-tree": "2.3.1",
-    "escodegen": "2.0.0",
+    "escodegen": "2.1.0",
     "js-xxhash": "2.0.0",
-    "rollup": "3.10.0"
+    "rollup": "4.24.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
+    "@babel/core": "7.25.8",
+    "@babel/preset-env": "7.25.8",
+    "@babel/preset-react": "7.25.7",
+    "@babel/preset-typescript": "7.25.7",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "8.0.7",
     "@semantic-release/npm": "11.0.1",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@types/css-tree": "2.3.3",
-    "@types/escodegen": "0.0.7",
-    "@types/estree": "1.0.0",
-    "@types/jest": "29.2.5",
+    "@types/css-tree": "2.3.8",
+    "@types/escodegen": "0.0.10",
+    "@types/estree": "1.0.6",
+    "@types/jest": "29.5.13",
     "@typescript-eslint/eslint-plugin": "5.48.1",
     "@typescript-eslint/parser": "5.48.1",
-    "acorn": "8.8.1",
+    "acorn": "8.12.1",
     "eslint": "8.32.0",
     "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-import": "2.27.4",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.0",
-    "jest": "29.3.1",
+    "eslint-plugin-react": "7.37.1",
+    "jest": "29.7.0",
     "semantic-release": "22.0.7",
     "typescript": "4.9.4"
   }