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

package/README.md

@@ -34,24 +34,20 @@ 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.
 
-## Technicality
-since this plugin uses the engine of vue to scope the css to the components, the following sections come straight from the [vue documentation](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors).
-
 ### Deep selector
-If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
+If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the ::deep combinator:
 ```css
-.a >>> .b { /* ... */ }
+.a:deep .b { /* ... */ }
 ```
 The above will be compiled into:
 ```css
 .a[data-v-f3f3eg9] .b { /* ... */ }
 ```
-Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same. Based on the example above these two expressions will be compiled to the same output:
+Another exepted format, which will generate the same resutl, is:
 ```scss
 .a::v-deep .b { /* ... */ }
-/* or */
-.a /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.
 
@@ -148,4 +144,4 @@ export default {
 ```
 
 ## Contributing
-Anyone is free to open a PR and contribute to this project... just be civilized!
+Anyone is free to open a PR and contribute to this project... just be civilized!

package/dist/css/scope-css.d.ts

@@ -0,0 +1 @@
+export declare function scopeCss(css: string, filename: string, hash: string): string;

package/dist/css/scope-css.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scopeCss = void 0;
+const css_tree_1 = require("css-tree");
+function scopeCss(css, filename, hash) {
+    try {
+        const ast = (0, css_tree_1.parse)(css);
+        const attributeSelector = {
+            type: "AttributeSelector",
+            name: { type: "Identifier", name: hash },
+            matcher: null,
+            value: null,
+            flags: null,
+        };
+        const selectorLists = ast.children.reduce((acc, node) => {
+            if (node.type === "Rule") {
+                if (node?.prelude?.type === "SelectorList") {
+                    acc.push(node.prelude);
+                }
+            }
+            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);
+                    }
+                });
+            }
+            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;
+                        }
+                        selector.children.insertData(attributeSelector, item.next);
+                    }
+                });
+            }
+        });
+        return (0, css_tree_1.generate)(ast);
+    }
+    catch (e) {
+        console.log(`Failed scoping css of file: ${filename}\n\nError:\n`, e);
+        return css;
+    }
+}
+exports.scopeCss = scopeCss;

package/dist/index.js

@@ -5,9 +5,9 @@ exports.reactScopedCssPlugin = void 0;
 const path_1 = require("path");
 const js_xxhash_1 = require("js-xxhash");
 const pluginutils_1 = require("@rollup/pluginutils");
-const component_compiler_utils_1 = require("@vue/component-compiler-utils");
 const escodegen_1 = require("escodegen");
 const ast_program_1 = require("./ast-program");
+const scope_css_1 = require("./css/scope-css");
 const getFilenameFromPath = (filePath) => {
     const parts = filePath.split("/");
     return parts[parts.length - 1].split("?")[0];
@@ -21,16 +21,6 @@ const generateHash = (input, seed = 0) => {
     const hashNum = (0, js_xxhash_1.xxHash32)(Buffer.from(input, "utf8"), seed);
     return hashNum.toString(16);
 };
-const addAttributesToCss = (src, fileName, hash) => {
-    const { code } = (0, component_compiler_utils_1.compileStyle)({
-        source: src,
-        filename: fileName,
-        id: hash,
-        scoped: true,
-        trim: true,
-    });
-    return code;
-};
 function reactScopedCssPlugin(optionsIn = {}) {
     const options = {
         hashPrefix: "v",
@@ -82,7 +72,7 @@ function reactScopedCssPlugin(optionsIn = {}) {
                 }
                 if (scopedCssRegex.test(getFilenameFromPath(id))) {
                     const importerHash = getHashFromPath(id);
-                    return addAttributesToCss(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`);
+                    return (0, scope_css_1.scopeCss)(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`);
                 }
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "0.8.4",
+  "version": "1.0.0-alpha.0",
   "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,7 +34,7 @@
   "homepage": "https://github.com/cmseguin/rollup-plugin-react-scoped-css#readme",
   "dependencies": {
     "@rollup/pluginutils": "5.0.2",
-    "@vue/component-compiler-utils": "3.3.0",
+    "css-tree": "2.3.1",
     "escodegen": "2.0.0",
     "js-xxhash": "2.0.0",
     "rollup": "3.10.0"
@@ -49,6 +49,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/escodegen": "0.0.7",
     "@types/estree": "1.0.0",
     "@types/jest": "29.2.5",