omi-mp - add wxss compiler

packages/omi-mp/gulpfile.js

@@ -4,6 +4,7 @@ let tap = require('gulp-tap')
 let compile = require('./scripts/mp/index')
 let fs = require('fs')
 let watch = require('gulp-watch')
+let compileWxss = require('./scripts/mp/wxss')
 
 gulp.task('components', ['copy'], () => {
   return gulp
@@ -180,7 +181,7 @@ gulp.task('appjs', ['copy'], () => {
 
 gulp.task('watch', () => {
   watch('src-mp/**/*', () => {
-    gulp.start(['components', 'pages', 'appjs', 'route'])
+    gulp.start(['components', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route'])
   })
 })
 
@@ -214,8 +215,6 @@ function title(value) {
 
 })
 
-gulp.task('default', ['copy', 'components', 'pages', 'appjs', 'route', 'watch'])
-
 function route(arr) {
   let result = []
   arr.forEach(item => {
@@ -262,3 +261,32 @@ function walk(path) {
 
   return fileList
 }
+
+
+gulp.task('pages-wxss', ['copy'], () => {
+  return gulp
+    .src('src/mp/pages/*/*.wxss')
+    .pipe(
+      tap(file => {
+        console.log(file.contents)
+        file.contents = new Buffer(compileWxss(file.contents.toString()))
+
+      })
+    )
+    .pipe(gulp.dest('src/mp/pages/'))
+})
+
+gulp.task('components-wxss', ['copy'], () => {
+  return gulp
+    .src('src/mp/components/*/*.wxss')
+    .pipe(
+      tap(file => {
+        console.log(file.contents)
+        file.contents = new Buffer(compileWxss(file.contents.toString()))
+
+      })
+    )
+    .pipe(gulp.dest('src/mp/components/'))
+})
+
+gulp.task('default', ['copy', 'components', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch'])

packages/omi-mp/package.json

@@ -8,6 +8,8 @@
     "@babel/core": "^7.1.5",
     "babel-preset-env": "^1.7.0",
     "concurrently": "^4.0.1",
+    "css": "^2.2.4",
+    "css-what": "^2.1.2",
     "gulp": "^3.9.1",
     "gulp-tap": "^1.0.1",
     "gulp-watch": "^5.0.1",

packages/omi-mp/scripts/mp/css-stringify.js

@@ -0,0 +1,58 @@
+
+var actionTypes = {
+	"equals": "",
+	"element": "~",
+	"start": "^",
+	"end": "$",
+	"any": "*",
+	"not": "!",
+	"hyphen": "|"
+};
+
+var simpleSelectors = {
+	__proto__: null,
+	child: " > ",
+	parent: " < ",
+	sibling: " ~ ",
+	adjacent: " + ",
+    descendant: " ",
+    universal: "*"
+};
+
+
+
+function stringify(token){
+  return token.map(stringifySubselector).join(", ");
+}
+
+function stringifySubselector(token){
+  return token.map(stringifyToken).join("");
+}
+
+function stringifyToken(token){
+  if(token.type in simpleSelectors) return simpleSelectors[token.type];
+
+  if(token.type === "tag") return escapeName(token.name);
+
+  if(token.type === "attribute"){
+      if(token.action === "exists") return "[" + escapeName(token.name) + "]";
+      if(token.name === "id" && token.action === "equals" && !token.ignoreCase) return "#" + escapeName(token.value);
+      if(token.name === "class" && token.action === "element" && !token.ignoreCase) return "." + escapeName(token.value);
+      return "[" +
+          escapeName(token.name) + actionTypes[token.action] + "='" +
+          escapeName(token.value) + "'" + (token.ignoreCase ? "i" : "") + "]";
+  }
+
+  if(token.type === "pseudo"){
+      if(token.data === null) return ":" + escapeName(token.name);
+      if(typeof token.data === "string") return ":" + escapeName(token.name) + "(" + token.data + ")";
+      return ":" + escapeName(token.name) + "(" + stringify(token.data) + ")";
+  }
+}
+
+function escapeName(str){
+  //TODO
+  return str;
+}
+
+module.exports = stringify

packages/omi-mp/scripts/mp/wxss.js

@@ -0,0 +1,28 @@
+
+let map = require('./tag-mapping')
+let css = require('css')
+let cssWhat = require('css-what')
+let cssStringify = require('./css-stringify')
+
+function compileWxss(str) {
+  let obj = css.parse(str)
+  obj.stylesheet.rules.forEach(rule => {
+    rule.selectors && rule.selectors.forEach((selector, index) => {
+      let sltObjs = cssWhat(selector)
+      sltObjs.forEach(sltObj => {
+        sltObj.forEach(item => {
+          if (item.type == 'tag') {
+            item.name = map(item.name)
+
+          }
+        })
+
+      })
+
+      rule.selectors[index] = cssStringify(sltObjs)
+    })
+  })
+  return css.stringify(obj)
+}
+
+module.exports = compileWxss

packages/omi-mp/src-mp/pages/index/index.wxss

@@ -18,4 +18,4 @@
 
 .usermotto {
   margin-top: 200px;
-}
+}

packages/omi-mp/src/mp/pages/index/index.wxss

@@ -1,4 +1,5 @@
 /**index.wxss**/
+
 .userinfo {
   display: flex;
   flex-direction: column;

packages/omi-mp/src/mp/pages/logs/logs.wxss

@@ -3,6 +3,7 @@
   flex-direction: column;
   padding: 40rpx;
 }
+
 .log-item {
   margin: 10rpx;
-}
+}