rollup-plugin-react-scoped-css 1.0.0-alpha.3 → 1.0.0-alpha.5

package/README.md

@@ -37,7 +37,7 @@ Due to the way this plugin is working, it will apply the scope to the file and n
 ### 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 { /* ... */ }
+.a::deep .b { /* ... */ }
 ```
 The above will be compiled into:
 ```css
@@ -47,7 +47,7 @@ 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.
+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.
 
@@ -145,3 +145,4 @@ export default {
 
 ## Contributing
 Anyone is free to open a PR and contribute to this project... just be civilized!
+

package/dist/css/scope-css.js

@@ -16,9 +16,11 @@ function scopeCss(css, filename, hash) {
         const isChainedSelector = (item) => {
             return ((item?.data?.type === "TypeSelector" ||
                 item?.data?.type === "ClassSelector" ||
-                item?.data?.type === "AttributeSelector") &&
+                item?.data?.type === "AttributeSelector" ||
+                item?.data?.type === "IdSelector") &&
                 (item?.next?.data?.type === "ClassSelector" ||
-                    item?.next?.data?.type === "AttributeSelector"));
+                    item?.next?.data?.type === "AttributeSelector" ||
+                    item?.next?.data?.type === "IdSelector"));
         };
         const isCombinator = (item) => {
             return item?.data?.type === "Combinator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "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",