diff --git a/packages/omi-mp/scripts/mp/tag-mapping.js b/packages/omi-mp/scripts/mp/tag-mapping.js index b0b90fcdb..1578e68e0 100644 --- a/packages/omi-mp/scripts/mp/tag-mapping.js +++ b/packages/omi-mp/scripts/mp/tag-mapping.js @@ -1,7 +1,9 @@ let tagMapping = { view: 'div', text: 'span', - image: 'img' + image: 'img', + picker: 'select', + navigator: 'a', } function map(key) { diff --git a/packages/omip/my-app/package.json b/packages/omip/my-app/package.json index 8f3a16b43..25eab3f42 100644 --- a/packages/omip/my-app/package.json +++ b/packages/omip/my-app/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", diff --git a/packages/omip/my-app/scripts/taro-cli/src/css/css-stringify.js b/packages/omip/my-app/scripts/taro-cli/src/css/css-stringify.js new file mode 100644 index 000000000..33883f09b --- /dev/null +++ b/packages/omip/my-app/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 diff --git a/packages/omip/my-app/scripts/taro-cli/src/css/index.js b/packages/omip/my-app/scripts/taro-cli/src/css/index.js new file mode 100644 index 000000000..242136d56 --- /dev/null +++ b/packages/omip/my-app/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 diff --git a/packages/omip/my-app/scripts/taro-cli/src/css/tag-mapping.js b/packages/omip/my-app/scripts/taro-cli/src/css/tag-mapping.js new file mode 100644 index 000000000..1578e68e0 --- /dev/null +++ b/packages/omip/my-app/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 diff --git a/packages/omip/my-app/scripts/taro-cli/src/h5.js b/packages/omip/my-app/scripts/taro-cli/src/h5.js index 6746424f7..592210a25 100755 --- a/packages/omip/my-app/scripts/taro-cli/src/h5.js +++ b/packages/omip/my-app/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) @@ -695,7 +695,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)) {