Fix #91, Process scoped styles and css modules when auto styles is turned off (#94)

* Add failing tests for #91

* Process scoped css & css modules when auto styles set to false

Author: znck

src/vueTransform.js

@@ -54,9 +54,9 @@ async function processTemplate (source, id, content, options, nodes, modules) {
     const extras = { modules, id, lang: source.attrs.lang }
     const code = deIndent(source.code)
     const template = await (
-        options.disableCssModuleStaticReplacement !== true
-            ? templateProcessor(code, extras, options)
-            : code
+          options.disableCssModuleStaticReplacement !== true
+                ? templateProcessor(code, extras, options)
+                : code
     )
 
     if (!options.compileTemplate) {
@@ -134,10 +134,10 @@ async function processStyle (styles, id, content, options) {
             map: map,
             lang: style.attrs.lang || 'css',
             module: 'module' in style.attrs ? style.attrs.module || true : false,
-            scoped: 'scoped' in style.attrs ? style.attrs.scoped || true : false
+            scoped: 'scoped' in style.attrs
         }
 
-        outputs.push(options.autoStyles ? await compile(output, options) : output)
+        outputs.push(options.autoStyles || output.scoped || output.module ? await compile(output, options) : output)
     }
 
     return outputs

test/expects/scoped-css-with-no-auto-style.css

@@ -0,0 +1,16 @@
+.scoped-css-with-no-auto-style__test2 {
+    color: red;
+}
+
+
+
+
+
+
+
+
+
+
+.test[data-v-0cd69708] {
+    color: red;
+}

test/expects/scoped-css-with-no-auto-style.js

@@ -0,0 +1,3 @@
+var scopedCssWithNoAutoStyle = { template: "<div class=\"test scoped-css-with-no-auto-style__test2\">Foo</div>",_scopeId: 'data-v-0cd69708',cssModules: {"test2":"scoped-css-with-no-auto-style__test2"},};
+
+export default scopedCssWithNoAutoStyle;

test/fixtures/scoped-css-with-no-auto-style.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="test test2">Foo</div>
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+<style lang="css" scoped>
+.test {
+    color: red;
+}
+</style>
+
+<style lang="css" module>
+.test2 {
+    color: red;
+}
+</style>

test/test.js

@@ -33,21 +33,32 @@ function test(name) {
                 modules: {
                     generateScopedName: '[name]__[local]'
                 },
-              compileTemplate: [
-                  'compileTemplate',
-                  'compileTemplateLocalComponent',
-                  'slot',
-                  'table',
-                  'table-n-slot'
-              ].indexOf(name) > -1
+                compileTemplate: [
+                    'compileTemplate',
+                    'compileTemplateLocalComponent',
+                    'slot',
+                    'table',
+                    'table-n-slot'
+                ].indexOf(name) > -1,
+                autoStyles: ['scoped-css-with-no-auto-style'].indexOf(name) < 0
             })]
         }).then(function (bundle) {
             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', 'scoped-css', 'scss', 'pug', 'less', 'stylus'].indexOf(name) > -1) {
+            if ([
+                      'style',
+                      'css-modules',
+                      'css-modules-static',
+                      'scoped-css',
+                      'scoped-css-with-no-auto-style',
+                      'scss',
+                      'pug',
+                      'less',
+                      'stylus'
+                  ].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
             } else if (['no-css-extract'].indexOf(name) > -1) {
@@ -96,3 +107,4 @@ describe('styleToImports', function () {
         })
     })
 })
+