支持base64

Author: tangjinzhou

src/getSelectorName.js

@@ -36,7 +36,7 @@ module.exports = function getSelectorName(decl, opt = {}) {
         }
     }
 
-    if (parentParams) {
+    if (parentParams !== 'normal') {
         const atRulesConfigKey = ('@' + parentName + parentParams).replace(/ /g, '')
         const atRuleSuffix = (atRulesConfig[atRulesConfigKey] || {}).suffix
         parentParamsSuffixs[parentParams] = parentParamsSuffixs[parentParams] || atRuleSuffix || parentNum++

src/loader.js

@@ -4,7 +4,9 @@ const CSSFlatError = require('./error')
 const vm = require('vm')
 const path = require('path')
 const loadConfig = require('./getLoaderConfig')
-
+const urlItemRegExpG = /___CSS_FLAT_LOADER_URL___([0-9]+)___/g
+const urlItemRegExp = /___CSS_FLAT_LOADER_URL___([0-9]+)___/
+const urlItems = []
 function getEvaluated(output, modules) {
     const m = { exports: {} }
     try {
@@ -16,7 +18,9 @@ function getEvaluated(output, modules) {
                 module = module.substr(19)
             if (modules && modules[module])
                 return modules[module]
-            return '{' + module + '}'
+            const loaderUrl = '___CSS_FLAT_LOADER_URL___' + urlItems.length + '___'
+            urlItems.push({ url: module })
+            return loaderUrl
         })
     } catch (e) {
         throw e
@@ -35,12 +39,9 @@ module.exports = function (input) {
     params.plugins = params.plugins || this.options['css-flat']
 
     let configPath
-
-    /* params.plugins = []
-     params.sourceMap = true
-     params.atRules = [{
-     '@media screen and (min-width: 480px)': 'm1',
-     }]*/
+/*
+     params.plugins = []
+     params.sourceMap = true */
 
     if (params.config) {
         if (path.isAbsolute(params.config)) {
@@ -74,6 +75,14 @@ module.exports = function (input) {
             if (err) return callback(err)
 
             let cssAsString = JSON.stringify(result.source)
+            cssAsString = cssAsString.replace(urlItemRegExpG, (item) => {
+                const match = urlItemRegExp.exec(item)
+                const idx = +match[1]
+                const urlItem = urlItems[idx]
+                const urlRequest = urlItem.url
+                return '\" + require(' + loaderUtils.stringifyRequest(this, urlRequest) + ') + \"'
+            })
+            console.log(cssAsString)
             let exportJs = JSON.stringify(result.exports)
             if (exportJs) {
                 exportJs = 'exports.locals = ' + exportJs + ';'

src/processCss.js

@@ -9,7 +9,7 @@ const cacheLocalRuleInfo = {}
 const parserPlugin = postcss.plugin('postcss-flat',  (options) => {
     const {
         locals = {},
-        prefix = '',
+        prefix = 'a',
         atRulesConfig,
         htmlClass = 'css-flat',
         pseudoMap,
@@ -20,12 +20,12 @@ const parserPlugin = postcss.plugin('postcss-flat',  (options) => {
     } = options
     const genMap = sourceMap && inputMap
     const localsMap = _.invert(locals)
-    const localRuleMark = { normal: {} }
+    const localRuleMark = {}
     return (css) => {
         const exports = {}
         // const globalRule = []
         css.walkRules((rule) => {
-            let parentParams = ''
+            let parentParams = 'normal'
             let parentName = ''
             if (rule.parent.type === 'atrule') {
                 parentName = rule.parent.name
@@ -47,7 +47,7 @@ const parserPlugin = postcss.plugin('postcss-flat',  (options) => {
                 } else if (isClassSelector) {
                     const className = sel.replace(/\.| /g, '').replace(selectorHalf, '')
                     rule.walkDecls(function (decl) {
-                        const prop = decl.prop
+                        const prop = decl.prop.replace('--sourceMap-', '')
                         const value = decl.value
                         const newClassName = getSelectorName(decl, {
                             parentName,
@@ -74,14 +74,11 @@ const parserPlugin = postcss.plugin('postcss-flat',  (options) => {
                                 newClassName,
                                 selectorHalf, // 伪类后缀
                                 priority: priority + ' ',
+                                parentParams,
                             }
                         }
-                        if (parentParams) {
-                            localRuleMark[parentParams] = localRuleMark[parentParams] || {}
-                            localRuleMark[parentParams][newClassName] = cacheLocalRuleInfo[newClassName]
-                        } else {
-                            localRuleMark.normal[newClassName] = cacheLocalRuleInfo[newClassName]
-                        }
+                        localRuleMark[parentParams] = localRuleMark[parentParams] || {}
+                        localRuleMark[parentParams][newClassName] = cacheLocalRuleInfo[newClassName]
 
                         const localsKey = localsMap[className]
                         exports[localsKey] = (exports[localsKey] || (genMap ? className : '')) + ' ' + newClassName
@@ -109,7 +106,8 @@ const parserPlugin = postcss.plugin('postcss-flat',  (options) => {
 
         for (let newClassName in localRuleMark.normal) {
             const { selectorHalf = '', priority, prop, value } = cacheLocalRuleInfo[newClassName]
-            css.append(priority + '.' + newClassName + selectorHalf + '{' + prop + ':' + value + '}')
+            const newSelector = priority + '.' + newClassName + selectorHalf
+            css.append(newSelector + '{' + prop + ':' + value + '}')
         }
         options.exports = exports
     }