scoped css

core/assets/asset.js

@@ -1,9 +1,12 @@
+const md5 = require('md5')
 let clock = 0
 
+
 module.exports = class Asset {
   constructor(path, type, name) {
     this.path = path
     this.id = clock++
+    this.hash = md5(this.id)
     this.name = name
     this.type = type.slice(1)
     this.dependencies = new Set()

core/assets/json.js

@@ -33,23 +33,22 @@ module.exports = class JsonAsset extends Asset {
               sibling.dependencies.add({
                 tag,
                 path: path + e,
+                type: e.slice(1)
               })
             })
         }
       }
     }
   }
-  async generate() {}
+  async generate() { }
   refSibling(type, path) {
     for (const dep of this.parent.dependencies) {
       if (Path.dirname(dep.path) === Path.dirname(path)) {
-        if(dep.type === type){
+        if (dep.type === type) {
           return this.parent.depsAssets.get(dep)
         }
       }
-      // if (dep.type === type) {
-      //   return this.parent.depsAssets.get(dep)
-      // }
+
     }
   }
 }

core/assets/wxml.js

@@ -14,7 +14,7 @@ module.exports = class WxmlAsset extends Asset {
   }
   async generate() {
     const { output, imports } = generate(this)
-    imports.forEach((i) => this.dependencies.add({ path: i }))
+    imports.forEach((i) => this.dependencies.add({ path: i, type: 'wxml' }))
     const { code } = await babel.transformAsync(output, {
       presets: [],
       plugins: [

core/assets/wxss.js

@@ -2,6 +2,8 @@ const Asset = require("./asset")
 const postcss = require("postcss")
 const postcssTagReplacer = require("../plugins/postcss-tag-replacer")
 const postcssRpx2rem = require("../plugins/postcss-rpx2rem")
+const postcssSopedCss = require('../plugins/postcss-scoped-css')
+const Path = require('path')
 
 module.exports = class WxssAsset extends Asset {
   constructor(path, type, name) {
@@ -11,6 +13,7 @@ module.exports = class WxssAsset extends Asset {
     this.input = input
   }
   async generate() {
+    const wxml = this.getWxml(this)
     this.code = postcss([
       postcssTagReplacer({
         // css 需要替换的标签
@@ -22,7 +25,31 @@ module.exports = class WxssAsset extends Asset {
           image: "img",
         },
       }),
+      postcssSopedCss({
+        id: `data-w-${wxml.hash.slice(0, 6)}`
+      }),
       postcssRpx2rem(),
     ]).process(this.input).css
   }
+  getWxml(asset) {
+    if (asset.parent.type === 'json') {
+      const dep = Array.from(asset.parent.dependencies).find(d => d.type === 'wxml')
+      return asset.parent.depsAssets.get(dep)
+    } else {
+      let p = asset.parent
+      let i = 0
+      while (p.type !== 'json') {
+        p = p.parent
+        i++
+      }
+      let a = p
+      while (i > 0) {
+        const pw = Array.from(a.dependencies).find(d => d.type === 'wxml')
+        a = a.depsAssets.get(pw)
+        i--
+      }
+      const o = Array.from(a.dependencies).find(d => d.tag === asset.tag)
+      return a.depsAssets.get(o)
+    }
+  }
 }

core/bundle.js

@@ -19,15 +19,14 @@ async function loadAsset(asset) {
     await asset.generate()
   }
   const dependencies = Array.from(asset.dependencies)
-  await Promise.all(
-    dependencies.map(async (dep) => {
-      const depAsset = await resolveAsset(dep.path, asset.path)
-      depAsset.tag = dep.tag || null
-      asset.depsAssets.set(dep, depAsset)
-      depAsset.parent = asset
-      await loadAsset(depAsset)
-    })
-  )
+  const all = dependencies.map(async (dep) => {
+    const depAsset = await resolveAsset(dep.path, asset.path)
+    depAsset.tag = dep.tag || null
+    asset.depsAssets.set(dep, depAsset)
+    depAsset.parent = asset
+    await loadAsset(depAsset)
+  })
+  await Promise.all(all)
 }
 
 async function resolveAsset(path = "", parent = "") {

core/plugins/postcss-scoped-css.js

@@ -0,0 +1,37 @@
+const selectorParser = require('postcss-selector-parser')
+module.exports = ({ id = '' }) => {
+  return {
+    postcssPlugin: 'postcss-scoped-css',
+    Rule(rule) {
+      processRule(id, rule)
+    }
+  }
+}
+
+const processedRules = new WeakSet()
+
+function processRule(id, rule) {
+  if (processedRules.has(rule)) {
+    return
+  }
+  processedRules.add(rule)
+  rule.selector = selectorParser(selectorRoot => {
+    selectorRoot.each(selector => {
+      selector.each(n => {
+        if (n.type === 'class') {
+          selector.insertAfter(
+            n,
+            selectorParser.attribute({
+              attribute: id,
+              value: id,
+              raws: {},
+              quoteMark: `"`
+            })
+          )
+        }
+      })
+    })
+  }).processSync(rule.selector)
+}
+
+module.exports.postcss = true

demo/pages/index/footer.wxml

@@ -1,5 +1,5 @@
 <template name="footer">
-    <view class="list-items footer">
+    <view class="footer">
         <text>{{leftcount}} items left</text>
         <view class="clear" bind:tap="clearCompleted" wx:if='{{list.length-leftcount>0}}'>
             clear completed

demo/pages/index/index.wxss

@@ -13,7 +13,7 @@
   box-shadow: 0 0 10rpx #878787;
 }
 .footer{
-  height:80rpx;
+  padding: 10px;
   position:relative;
   color:#878787;
   font-size: 28rpx;
@@ -40,3 +40,18 @@
   z-index:1000;
 }
 
+.list-items {
+  display: flex;
+  padding: 0 30rpx;
+  justify-content: space-around;
+  align-items: center;
+  height: 100rpx;
+  font-size: 40rpx;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.list-items input {
+  flex: auto;
+  margin-left: 30rpx;
+}
+

dist/index.html

@@ -31,10 +31,10 @@
 <script src="./app.js"></script>
   </head>
   <body>
-      <berial-pajspj></berial-pajspj>
+      <berial-whwhdh></berial-whwhdh>
   <script>
     goober.setup(fre.h);
-    berial.register([{"name":"berial-pajspj","scripts":["/pages/index/index.js","/pages/index/index.jsx"],"styles":["/pages/index/index.css"],"path":"/pages/index/index"}])
+    berial.register([{"name":"berial-whwhdh","scripts":["/pages/index/index.js","/pages/index/index.jsx"],"styles":["/pages/index/index.css"],"path":"/pages/index/index"}])
   </script>
 
   </body>

dist/pages/index/index.css

@@ -1,4 +1,4 @@
-.list-items {
+.list-items[data-w-06eca1] {
   display: flex;
   padding: 0 0.8rem;
   justify-content: space-around;
@@ -7,41 +7,41 @@
   font-size: 1.06667rem;
   border-bottom: 1px solid #e6e6e6;
 }
-.selectAll {
+.selectAll[data-w-06eca1] {
   width: 1.33333rem;
   height: 1.33333rem;
 }
-.list-items input {
+.list-items[data-w-06eca1] input {
   flex: auto;
   margin-left: 0.8rem;
 }
-.completed {
+.completed[data-w-06eca1] {
   text-decoration: line-through;
   color: #d9d9d9;
 }
 
-.container{
+.container[data-w-866668]{
   text-align: center;
   padding:1.06667rem;
 }
-.title{
+.title[data-w-866668]{
   font-size: 2.66667rem;
   color:#EAD7D7;
 }
-.list{
+.list[data-w-866668]{
   margin-top: 0.8rem;
   text-align: left;
   border:1px solid #E6E6E6;
   box-shadow: 0 0 0.26667rem #878787;
 }
-.footer{
+.footer[data-w-866668]{
   height:2.13333rem;
   position:relative;
   color:#878787;
   font-size: 0.74667rem;
   justify-content:space-between;
 }
-.footer:before{
+.footer[data-w-866668]:before{
   content: '';
 	position: absolute;
 	right: 0;
@@ -55,10 +55,25 @@
 	            0 0.85333rem 0 -0.32rem #f6f6f6,
 	            0 0.90667rem 0.10667rem -0.32rem rgba(0, 0, 0, 0.2);
 }
-.clear{
+.clear[data-w-866668]{
   border:1px solid #D9D9D9;
   padding:0.13333rem;
   border-radius:0.26667rem;
   z-index:1000;
 }
 
+.list-items[data-w-866668] {
+  display: flex;
+  padding: 0 0.8rem;
+  justify-content: space-around;
+  align-items: center;
+  height: 2.66667rem;
+  font-size: 1.06667rem;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.list-items[data-w-866668] input {
+  flex: auto;
+  margin-left: 0.8rem;
+}
+

dist/pages/index/index.jsx

@@ -21,13 +21,17 @@
   } = usePage(fre.useState({})[1], props);
   return fre.h(fre.Fragment, null, fre.h(remotes.View, {
     class: "container",
-    style: 'padding-top:' + leftcount
+    style: 'padding-top:' + leftcount,
+    "data-w-866668": true
   }, fre.h(remotes.View, {
-    class: "title"
+    class: "title",
+    "data-w-866668": true
   }, fre.h(remotes.Text, null, "todos")), fre.h(remotes.View, {
-    class: "list"
+    class: "list",
+    "data-w-866668": true
   }, fre.h(remotes.View, {
-    class: "list-items"
+    class: "list-items",
+    "data-w-866668": true
   }, fre.h(remotes.Input, {
     onKeyDown: e => addtodo(e),
     placeholder: "What needs to be done?",
@@ -59,7 +63,8 @@ remotes['UseItem'] = props => {
     onUnload
   } = useComponent(fre.useState({})[1], props, 'use-item');
   return fre.h(fre.Fragment, null, fre.h(remotes.View, null, fre.h(remotes.View, {
-    class: "list-items"
+    class: "list-items",
+    "data-w-06eca1": true
   }, fre.h(remotes.Icon, {
     type: item.completed ? 'success' : 'circle',
     onClick: e => clickIco(e),
@@ -68,7 +73,8 @@ remotes['UseItem'] = props => {
     class: `aaa ${item.completed ? 'completed' : ''}`,
     onKeyDown: e => edittodo(e),
     "data-id": item.id,
-    value: item.name
+    value: item.name,
+    "data-w-06eca1": true
   }), fre.h(remotes.Icon, {
     type: "clear",
     onClick: e => clear(e)
@@ -86,15 +92,17 @@ remotes['$3$template$footer'] = props => {
     clearCompleted
   } = usePage(null, props);
   return fre.h(fre.Fragment, null, directs.$ensure(null), fre.h(remotes.View, {
-    class: "list-items footer"
+    class: "footer",
+    "data-w-866668": true
   }, fre.h(remotes.Text, null, leftcount, " items left"), directs.$if(() => list.length - leftcount > 0, () => fre.h(remotes.View, {
     class: "clear",
-    onClick: e => clearCompleted(e)
+    onClick: e => clearCompleted(e),
+    "data-w-866668": true
   }, "clear completed"), null)));
 };
 
 
-    window['berial-pajspj'] = {
+    window['berial-whwhdh'] = {
       async bootstrap({host}){
         const div = document.createElement('div');
         div.id = "root";