rollup-plugin-react-scoped-css 1.0.0-alpha.0 → 1.0.0-alpha.10

package/README.md

@@ -4,57 +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** >= 20.0.0  
-+ **vite** >= 4.0.0
-
-## Usage
-
-```jsx
-// Component.jsx
-import './Component.scoped.scss'
-
-export default function Sub() {
-  return (
-    <div className="wrap">
-      <h1>My Component</h1>
-    </div>
-  )
-}
-```
-
-```scss
-// Component.scoped.scss
-.wrap {
-  width: 500px;
-  h1 { color: red; }
-}
-```
-And just like that the styles will be scoped to the component.
-
-## Limitations
-Due to the way this plugin is working, it will apply the scope to the file and not the component individually... This may differ from other frameworks since they don't really let you define multiple components in the same file. This then means that if you have 2 components in the same file, the styles might conflict.
-
-### Deep selector
-If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the ::deep combinator:
-```css
-.a:deep .b { /* ... */ }
-```
-The above will be compiled into:
-```css
-.a[data-v-f3f3eg9] .b { /* ... */ }
-```
-Another exepted format, which will generate the same resutl, is:
-```scss
-.a::v-deep .b { /* ... */ }
-```
-This is primarly for backwards compatibility, we recommend the `:deep` selector.
-### Dynamically Generated Content
-DOM content created with dangerouslySetInnerHTML are not affected by scoped styles, but you can still style them using deep selectors.
-
-### Also Keep in Mind
-Scoped styles do not eliminate the need for classes. Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit.
-
-Be careful with descendant selectors in recursive components! For a CSS rule with the selector .a .b, if the element that matches .a contains a recursive child component, then all .b in that child component will be matched by the rule.
++ **node** >= 16
++ **vite** >= 4
 
 ## How to install
 
@@ -89,6 +40,8 @@ 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.*
+
 ### Customizing the plugin
 There are a few options available to customize how the plugin works
 ```ts
@@ -132,7 +85,7 @@ There are a few options available to customize how the plugin works
 }
 ```
 
-### With other rollup plugins
+### 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
@@ -143,5 +96,55 @@ export default {
 };
 ```
 
+## Usage
+
+```jsx
+// Component.jsx
+import './Component.scoped.scss'
+
+export default function Sub() {
+  return (
+    <div className="wrap">
+      <h1>My Component</h1>
+    </div>
+  )
+}
+```
+
+```scss
+// Component.scoped.scss
+.wrap {
+  width: 500px;
+  h1 { color: red; }
+}
+```
+And just like that the styles will be scoped to the component.
+
+## Limitations
+Due to the way this plugin is working, it will apply the scope to the file and not the component individually... This may differ from other frameworks since they don't really let you define multiple components in the same file. This then means that if you have 2 components in the same file, the styles might conflict.
+
+### Deep selector
+If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the ::deep combinator:
+```css
+.a::deep .b { /* ... */ }
+```
+The above will be compiled into:
+```css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+Another exepted format, which will generate the same resutl, is:
+```scss
+.a::v-deep .b { /* ... */ }
+```
+This is primarly for backwards compatibility, we recommend the `::deep` selector.
+### Dynamically Generated Content
+DOM content created with dangerouslySetInnerHTML are not affected by scoped styles, but you can still style them using deep selectors.
+
+### Also Keep in Mind
+Scoped styles do not eliminate the need for classes. Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit.
+
+Be careful with descendant selectors in recursive components! For a CSS rule with the selector .a .b, if the element that matches .a contains a recursive child component, then all .b in that child component will be matched by the rule.
+
 ## Contributing
 Anyone is free to open a PR and contribute to this project... just be civilized!
+

package/dist/css/scope-css.js

@@ -2,9 +2,51 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scopeCss = void 0;
 const css_tree_1 = require("css-tree");
+const getSelectors = (items) => {
+    const selectorLists = items.reduce((acc, node) => {
+        if (node.type === "Rule" && node?.prelude?.type === "SelectorList") {
+            acc.push(node.prelude.children);
+        }
+        else if (node.type === "Atrule" && node.name === "media") {
+            node.block?.children.forEach((rule) => {
+                if (rule.type === "Atrule" && rule.name === "media") {
+                    const selectors = getSelectors(rule.block?.children);
+                    acc.push(...selectors);
+                }
+                if (rule.type === "Rule" && rule.prelude.type === "SelectorList") {
+                    acc.push(rule.prelude.children);
+                }
+            });
+        }
+        return acc;
+    }, []);
+    return selectorLists;
+};
+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 isCombinator = (item) => {
+    return item?.data?.type === "Combinator";
+};
 function scopeCss(css, filename, hash) {
     try {
         const ast = (0, css_tree_1.parse)(css);
+        const selectorLists = getSelectors(ast.children);
         const attributeSelector = {
             type: "AttributeSelector",
             name: { type: "Identifier", name: hash },
@@ -12,49 +54,34 @@ function scopeCss(css, filename, hash) {
             value: null,
             flags: null,
         };
-        const selectorLists = ast.children.reduce((acc, node) => {
-            if (node.type === "Rule") {
-                if (node?.prelude?.type === "SelectorList") {
-                    acc.push(node.prelude);
+        selectorLists.forEach((selectorList) => {
+            selectorList.forEach((selector) => {
+                if (selector.type !== "Selector") {
+                    return;
                 }
-            }
-            else if (node.type === "Atrule" && node.name === "media") {
-                node.block?.children.map((rule) => {
-                    if (rule.type === "Rule" && rule.prelude.type === "SelectorList") {
-                        acc.push(rule.prelude);
+                let item = selector.children.head;
+                while (item !== null) {
+                    if (isScopedAttributeSelector(item, hash)) {
+                        item = item?.next ?? null;
+                        continue;
+                    }
+                    if (item.next && isScopePiercingPseudoSelector(item.next)) {
+                        Object.assign(item.next.data, attributeSelector);
+                        break;
                     }
-                });
-            }
-            return acc;
-        }, []);
-        selectorLists.map((selectorList) => {
-            const results = (0, css_tree_1.findAll)(selectorList, (node) => node.type === "PseudoElementSelector" &&
-                (node.name === "v-deep" || node.name === "deep"));
-            if (results.length > 0) {
-                results.map((node) => {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    //@ts-ignore: optimization hack, we need to override the object without changing the reference.
-                    node.children = undefined;
-                    node.loc = undefined;
-                    Object.assign(node, attributeSelector);
-                });
-            }
-            else {
-                selectorList.children.forEach((selector) => {
-                    if (selector.type === "Selector") {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore: Tail is not exposed via @types/css-tree but does exist.
-                        let item = selector.children.tail;
-                        while (item !== null &&
-                            (item?.data?.type === "PseudoClassSelector" ||
-                                item?.data?.type === "PseudoElementSelector" ||
-                                item?.data?.type === "Combinator")) {
-                            item = item.prev;
-                        }
+                    if (isChainedSelector(item) || isCombinator(item)) {
+                        item = item?.next ?? null;
+                        continue;
+                    }
+                    if (item?.next === null) {
+                        selector.children.appendData(attributeSelector);
+                    }
+                    else {
                         selector.children.insertData(attributeSelector, item.next);
                     }
-                });
-            }
+                    item = item?.next ?? null;
+                }
+            });
         });
         return (0, css_tree_1.generate)(ast);
     }

package/dist/index.js

@@ -23,7 +23,6 @@ const generateHash = (input, seed = 0) => {
 };
 function reactScopedCssPlugin(optionsIn = {}) {
     const options = {
-        hashPrefix: "v",
         styleFileSuffix: "scoped",
         styleFileExtensions: ["scss", "css", "sass", "less"],
         jsxFileExtensions: ["jsx", "tsx"],
@@ -67,12 +66,18 @@ function reactScopedCssPlugin(optionsIn = {}) {
                 if (scopedCssInFileRegex.test(code)) {
                     const importerHash = generateHash(id);
                     const program = this.parse(code);
-                    const newAst = (0, ast_program_1.addHashAttributesToJsxTagsAst)(program, `data-${options.hashPrefix}-${importerHash}`);
+                    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 (scopedCssRegex.test(getFilenameFromPath(id))) {
                     const importerHash = getHashFromPath(id);
-                    return (0, scope_css_1.scopeCss)(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`);
+                    const scopedAttr = options.hashPrefix
+                        ? `data-${options.hashPrefix}-${importerHash}`
+                        : `data-${importerHash}`;
+                    return (0, scope_css_1.scopeCss)(code, getFilenameFromPath(id), scopedAttr);
                 }
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.10",
   "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",
@@ -17,7 +17,8 @@
   "author": "cmseguin",
   "contributors": [
     "cmseguin (https://github.com/cmseguin)",
-    "helianthuswhite (https://github.com/helianthuswhite)"
+    "helianthuswhite (https://github.com/helianthuswhite)",
+    "wirdehall (https://github.com/wirdehall)"
   ],
   "keywords": [
     "rollup",
@@ -49,7 +50,7 @@
     "@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/css-tree": "2.3.3",
     "@types/escodegen": "0.0.7",
     "@types/estree": "1.0.0",
     "@types/jest": "29.2.5",