Inject CSS dynamically

Fixes #69

Author: znck

src/style/index.js

@@ -10,7 +10,7 @@ const compilers = {
     less: compileLESS
 }
 
-export async function compile(style, options) {
+export async function compile (style, options) {
     let output
 
     if (style.lang === 'css') {
@@ -22,7 +22,7 @@ export async function compile(style, options) {
     return output
 }
 
-function ensureDirectory(directory) {
+function ensureDirectory (directory) {
     if (!exists(directory)) {
         ensureDirectory(dirname(directory))
 
@@ -31,7 +31,7 @@ function ensureDirectory(directory) {
 }
 
 export default function (files, options) {
-    if (options.css === false) {
+    if (typeof (options.css) === 'boolean') {
         return
     }
 
@@ -66,7 +66,6 @@ export default function (files, options) {
     }
 
     dest = isAbsolute(dest) ? dest : resolvePath(process.cwd(), dest)
-    console.log('OUTPUT:', dest)
     // Emit styles to file
     ensureDirectory(dirname(dest))
     writeFile(dest, css, (err) => {

src/vueTransform.js

@@ -190,6 +190,26 @@ export default async function vueTransform (code, id, options) {
         const style = css.map((s, i) => 'import ' + JSON.stringify(`${id}.${i}.vue.component.${s.lang}`) + ';').join(' ')
 
         return { css, code: style + js.code, map: js.map }
+    } else if (options.css === true) {
+        const style = css.map(s => '$compiled' in s ? s.$compiled.code : s.code).join('\n').replace(/(\r?\n|[\s])+/g, ' ')
+        const styleCode = `
+        (function(){
+            if(document){
+                var head=document.head||document.getElementsByTagName('head')[0],
+                    style=document.create('style'),
+                    css=${JSON.stringify(style)};
+                 style.type='text/css';
+                 if (style.styleSheet){
+                   style.styleSheet.cssText = css;
+                 } else {
+                   style.appendChild(document.createTextNode(css));
+                 }
+                 head.appendChild(style);
+             }
+         })();
+         `.replace(/(\r?\n|[\s])+/g, ' ').trim()
+
+        return { css, code: styleCode + js.code, map: js.map }
     }
 
     return { css, code: js.code, map: js.map }

test/expects/no-css-extract.js

@@ -0,0 +1,8 @@
+(function(){ if(document){ var head=document.head||document.getElementsByTagName('head')[0], style=document.create('style'), css=" .bar { color: blue } .foo { color: red; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+var noCssExtract = { template: "<div class=\"foo bar\">test</div>",};
+
+export default noCssExtract;

test/fixtures/no-css-extract.vue

@@ -0,0 +1,21 @@
+<template lang="html">
+<div class="foo bar">test</div>
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+
+<style lang="scss">
+$red: red;
+.foo {
+    color: $red
+}
+</style>
+
+<style lang="css">
+.bar {
+    color: blue
+}
+</style>

test/test.js

@@ -29,21 +29,23 @@ function test(name) {
         return rollup.rollup({
             entry: entry,
             plugins: [vuePlugin({
-                css: cssHandler,
+                css: ['no-css-extract'].includes(name) ? true : cssHandler,
                 modules: {
                     generateScopedName: '[name]__[local]'
                 },
                 compileTemplate: ['compileTemplate', 'slot', 'table', 'table-n-slot'].indexOf(name) > -1
             })]
         }).then(function (bundle) {
-            var result = bundle.generate({format: 'es'})
+            var result = bundle.generate({ format: 'es' })
             var code = result.code
             assert.equal(code.trim(), expected.trim(), 'should compile code correctly')
 
             // Check css output
-            if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].indexOf(name) > -1) {
+            if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].includes(name)) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
+            } else if (['no-css-extract'].includes(name)) {
+                assert.equal(undefined, actualCss, 'should ignore css()')
             } else {
                 assert.equal('', actualCss.trim(), 'should always call css()')
             }
@@ -61,30 +63,30 @@ describe('rollup-plugin-vue', function () {
 })
 
 describe('styleToImports', function () {
- it('should convert style to import', function () {
-   var entry = './fixtures/style.vue'
-   var expectedCss = read('expects/style.css')
-   var actualCss
+    it('should convert style to import', function () {
+        var entry = './fixtures/style.vue'
+        var expectedCss = read('expects/style.css')
+        var actualCss
 
-   return rollup.rollup({
-       format: 'cjs',
-       entry: entry,
-       plugins: [
-         vuePlugin({
-           styleToImports: true,
-         }),
-         cssPlugin({
-           output: function (css) {
-             actualCss = css
-           },
-         }),
-       ],
-   }).then(function (bundle) {
-     bundle.generate({ format: 'es' })
+        return rollup.rollup({
+            format: 'cjs',
+            entry: entry,
+            plugins: [
+                vuePlugin({
+                    styleToImports: true,
+                }),
+                cssPlugin({
+                    output: function (css) {
+                        actualCss = css
+                    },
+                }),
+            ],
+        }).then(function (bundle) {
+            bundle.generate({ format: 'es' })
 
-     assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style')
-   }).catch(function (error) {
-       throw error
-   })
- })
+            assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style')
+        }).catch(function (error) {
+            throw error
+        })
+    })
 })