feat: Use global variables as style source (#64)

* feat: Allow global variables in style source

* docs: Assemble accpets global variables as style source

Author: znck

README.md

@@ -106,3 +106,5 @@ The `assemble` method is an example implementation for how to combine various pa
 * Directly in-lined (default)
 * Using a global function (normalizer: 'myComponentNormalizer')
 * Using an import ({ normalizer: '~my-component-normalizer' })
+
+The `assemble` method also accepts global variable name in `source`, `map` and `module` of styles. 

package.json

@@ -23,7 +23,7 @@
     "prepare": "yarn build",
     "test": "jest",
     "pretest": "yarn build",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
+    "changelog": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",
     "version": "npm run changelog && git add CHANGELOG.md"
   },
   "homepage": "https://github.com/vuejs/vue-component-compiler#readme",

src/assembler.ts

@@ -71,6 +71,7 @@ export function assembleFromSource(
     ? `import ${name} from '${value.substr(1)}'`
     : `const ${name} = ${value}`
   const o = e
+  const IDENTIFIER = /^[a-z0-9]+$/i
 
   // language=JavaScript
   const inlineCreateInjector = `function __vue_create_injector__() {
@@ -293,18 +294,19 @@ const __vue_template__ = typeof __vue_render__ !== 'undefined'
 const __vue_inject_styles__ = ${hasStyle} ? function (inject) {
   if (!inject) return
   ${styles.map(
-    (style, index) =>
-      `inject("${scopeId + '_' + index}", ${o({
-        source: style.source,
-        media: style.media,
-        map: compiler.template.isProduction ? undefined : style.map
-      })})` +
+    (style, index) => {
+      const source = IDENTIFIER.test(style.source) ? style.source : e(style.source)
+      const map = !compiler.template.isProduction 
+        ? (typeof style.map === 'string' && IDENTIFIER.test(style.map) ? style.map : o(style.map)) 
+        : undefined
+      const tokens = typeof style.module === 'string' && IDENTIFIER.test(style.module) ? style.module : o(style.module)
+      
+      return `inject("${scopeId + '_' + index}", { source: ${source}, map: ${map}, media: ${e(style.media)} })` +
       '\n' +
       (style.moduleName
-        ? `Object.defineProperty(this, "${style.moduleName}", { value: ${o(
-            style.module || {}
-          )} })` + '\n'
+        ? `Object.defineProperty(this, "${style.moduleName}", { value: ${tokens} })` + '\n'
         : '')
+    }
   )}
 } : undefined
 /* scoped */

src/postcss-clean.ts

@@ -1,4 +1,4 @@
-import postcss = require('postcss')
+import * as postcss from 'postcss'
 import CleanCSS = require('clean-css')
 
 export default postcss.plugin('clean', options => {

test/assemble.spec.ts

@@ -0,0 +1,24 @@
+import {assembleFromSource, createDefaultCompiler} from "../src"
+
+const compiler = createDefaultCompiler()
+it('should inline style source', () => {
+  const result = assembleFromSource(compiler, {}, {
+    filename: 'foo.vue', script: {source: ''}, template: {source: ''}, scopeId: 'foo',
+    styles: [{source: '.foo_0{ color: red }', module: { foo: 'foo_0' }, moduleName: '$style', map: {} }]
+  })
+
+  expect(result.code).toEqual(expect.stringContaining('source: ".foo_0{ color: red }"'))
+  expect(result.code).toEqual(expect.stringContaining('map: {}'))
+  expect(result.code).toEqual(expect.stringContaining('value: {"foo":"foo_0"}'))
+})
+
+it('should use global in style source', () => {
+  const result = assembleFromSource(compiler, {}, {
+    filename: 'foo.vue', script: {source: ''}, template: {source: ''}, scopeId: 'foo',
+    styles: [{source: 'fooStyle', module: 'fooModule', moduleName: '$style', map: 'fooMap'}]
+  })
+
+  expect(result.code).toEqual(expect.stringContaining('source: fooStyle'))
+  expect(result.code).toEqual(expect.stringContaining('map: fooMap'))
+  expect(result.code).toEqual(expect.stringContaining('value: fooModule'))
+})

test/setup/jest-helper.js

@@ -5,7 +5,7 @@ const path = require('path')
 const { createDefaultCompiler, assemble } = require('../..')
 
 const compiler = createDefaultCompiler()
-function compile (filename, source) {
+function compile(filename, source) {
   return assemble(
     compiler,
     filename,
@@ -16,12 +16,14 @@ function compile (filename, source) {
 const isSourceChanged =
   fs.readFileSync(path.resolve(__dirname, '../../dist/compiler.js')) +
   ':' +
-  fs.readFileSync(path.resolve(__dirname, '../../dist/assembler.js'))
-':' +
+  fs.readFileSync(path.resolve(__dirname, '../../dist/assembler.js')) +
+  ':' +
+  fs.readFileSync(path.resolve(__dirname, '../../dist/postcss-clean.js')) +
+  ':' +
   fs.readFileSync(path.resolve(__dirname, '../../package.json'))
 
 module.exports = {
-  process (code, path) {
+  process(code, path) {
     if (path.endsWith('.vue')) {
       code = compile(path, code)
     } else if (path.endsWith('.png')) {
@@ -31,10 +33,10 @@ module.exports = {
       )}"`
     }
     return babel.transform(code, {
-      presets: [['env', { targets: { node: 'current' }}]]
+      presets: [['env', { targets: { node: 'current' } }]]
     }).code
   },
-  getCacheKey (fileData, filename, configString) {
+  getCacheKey(fileData, filename, configString) {
     return crypto
       .createHash('md5')
       .update(