omip - fix css

packages/omip/my-app-ts/package.json

@@ -58,7 +58,9 @@
     "chokidar": "^2.0.3",
     "commander": "^2.15.0",
     "cross-spawn": "^6.0.5",
+    "css": "^2.2.4",
     "css-to-react-native-transform": "^1.4.0",
+    "css-what": "^2.1.3",
     "ejs": "^2.6.1",
     "envinfo": "^6.0.1",
     "eslint": "^4.15.0",

packages/omip/my-app-ts/scripts/taro-cli/src/css/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/omip/my-app-ts/scripts/taro-cli/src/css/index.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/omip/my-app-ts/scripts/taro-cli/src/css/tag-mapping.js

@@ -0,0 +1,19 @@
+let tagMapping = {
+  view: 'div',
+  text: 'span',
+  image: 'img',
+  picker: 'select',
+  navigator: 'a',
+}
+
+function map(key) {
+  if (key.indexOf('-') !== -1) {
+    return key
+  }
+  if(tagMapping[key]){
+    return tagMapping[key]
+  }
+  return key
+}
+
+module.exports = map

packages/omip/my-app-ts/scripts/taro-cli/src/h5.js

@@ -16,7 +16,7 @@ const Util = require('./util')
 const npmProcess = require('./util/npm')
 const CONFIG = require('./config')
 const { source: toAst, getObjKey } = require('./util/ast_convert')
-
+const compileWxss = require('./css/index')
 const appPath = process.cwd()
 //@fix
 const projectConfig = require(path.join(appPath, Util.PROJECT_CONFIG_H5))(_.merge)
@@ -697,7 +697,7 @@ function processOthers (code, filePath, fileType) {
           if(filePath.indexOf('/src/pages/')!==-1||filePath.indexOf('\\src\\pages\\')!==-1){
             css = appCSS + css
           }
-          astPath.replaceWith(t.variableDeclaration('const',[t.variableDeclarator(t.identifier(`___css`),t.callExpression(t.identifier('Omi.rpx'),[t.stringLiteral(css)]),)]))
+          astPath.replaceWith(t.variableDeclaration('const',[t.variableDeclarator(t.identifier(`___css`),t.callExpression(t.identifier('Omi.rpx'),[t.stringLiteral(compileWxss(css))]),)]))
           return
         }
         if (Util.isAliasPath(value, pathAlias)) {