@viewfly/scoped-css 0.0.1-alpha.7 → 0.0.1-alpha.9

package/bundles/index.esm.js

@@ -2,16 +2,27 @@ import { JSXElement, Props } from '@viewfly/core';
 
 function replaceCSSClass(template, css) {
     if (template instanceof JSXElement) {
-        const cssNames = template.props.attrs.get('css');
-        template.props.attrs.delete('css');
-        const classes = template.props.classes;
+        let { attrs, classes, children } = template.props;
+        const cssNames = attrs.get('css');
+        attrs.delete('css');
+        const scopedClasses = [];
         Props.classToArray(cssNames).forEach(i => {
             const klass = css[i];
             if (klass) {
-                classes.add(klass);
+                scopedClasses.push(klass);
             }
         });
-        template.props.children.forEach(child => {
+        const c = scopedClasses.join(' ');
+        if (c) {
+            if (classes) {
+                classes += ' ' + c;
+            }
+            else {
+                classes = c;
+            }
+        }
+        template.props.classes = classes;
+        children.forEach(child => {
             replaceCSSClass(child, css);
         });
     }

package/bundles/index.js

@@ -4,16 +4,27 @@ var core = require('@viewfly/core');
 
 function replaceCSSClass(template, css) {
     if (template instanceof core.JSXElement) {
-        const cssNames = template.props.attrs.get('css');
-        template.props.attrs.delete('css');
-        const classes = template.props.classes;
+        let { attrs, classes, children } = template.props;
+        const cssNames = attrs.get('css');
+        attrs.delete('css');
+        const scopedClasses = [];
         core.Props.classToArray(cssNames).forEach(i => {
             const klass = css[i];
             if (klass) {
-                classes.add(klass);
+                scopedClasses.push(klass);
             }
         });
-        template.props.children.forEach(child => {
+        const c = scopedClasses.join(' ');
+        if (c) {
+            if (classes) {
+                classes += ' ' + c;
+            }
+            else {
+                classes = c;
+            }
+        }
+        template.props.classes = classes;
+        children.forEach(child => {
             replaceCSSClass(child, css);
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/scoped-css",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.9",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^0.0.1-alpha.7"
+    "@viewfly/core": "^0.0.1-alpha.9"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -35,5 +35,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "b4aa728ce10f6aaca2bb2e242c7b8b8f8befbfec"
+  "gitHead": "c1ea5cf0163aac7b73beee2868f4ea5caa94bb3f"
 }

package/src/css-modules.ts

@@ -2,16 +2,26 @@ import { JSXElement, ComponentSetup, Props } from '@viewfly/core'
 
 function replaceCSSClass(template, css: Record<string, string>) {
   if (template instanceof JSXElement) {
-    const cssNames = template.props.attrs.get('css')
-    template.props.attrs.delete('css')
-    const classes = template.props.classes
+    let { attrs, classes, children } = template.props
+    const cssNames = attrs.get('css')
+    attrs.delete('css')
+    const scopedClasses: string[] = []
     Props.classToArray(cssNames).forEach(i => {
       const klass = css[i]
       if (klass) {
-        classes.add(klass)
+        scopedClasses.push(klass)
       }
     })
-    template.props.children.forEach(child => {
+    const c = scopedClasses.join(' ')
+    if (c) {
+      if (classes) {
+        classes += ' ' + c
+      } else {
+        classes = c
+      }
+    }
+    template.props.classes = classes
+    children.forEach(child => {
       replaceCSSClass(child, css)
     })
   }