feat: option to filter style tags from callback

lib/index.d.ts

@@ -17,7 +17,8 @@ declare namespace VueLoader {
     cacheDirectory?: string
     cacheIdentifier?: string
     prettify?: boolean
-    exposeFilename?: boolean
+    exposeFilename?: boolean,
+    filterStyleTag?: (styleTagAttributes: Object) => boolean,
   }
 }
 

lib/loaders/pitcher.js

@@ -50,7 +50,7 @@ module.exports = code => code
 // and transform it into appropriate requests.
 module.exports.pitch = function (remainingRequest) {
   const options = loaderUtils.getOptions(this)
-  const { cacheDirectory, cacheIdentifier } = options
+  const { cacheDirectory, cacheIdentifier, filterStyleTag } = options
   const query = qs.parse(this.resourceQuery.slice(1))
 
   let loaders = this.loaders
@@ -110,6 +110,10 @@ module.exports.pitch = function (remainingRequest) {
 
   // Inject style-post-loader before css-loader for scoped CSS and trimming
   if (query.type === `style`) {
+    // If filterStyleTag function is provided, check that it's truthy for this query or ignore it
+    if (typeof filterStyleTag === 'function' && !filterStyleTag(query)) {
+      return ''
+    }
     const cssLoaderIndex = loaders.findIndex(isCSSLoader)
     if (cssLoaderIndex > -1) {
       const afterLoaders = loaders.slice(0, cssLoaderIndex + 1)

lib/plugin-webpack4.js

@@ -85,7 +85,8 @@ class VueLoaderPlugin {
       },
       options: {
         cacheDirectory: vueLoaderUse.options.cacheDirectory,
-        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier,
+        filterStyleTag: vueLoaderUse.options.filterStyleTag
       }
     }
 

lib/plugin-webpack5.js

@@ -126,7 +126,8 @@ class VueLoaderPlugin {
       },
       options: {
         cacheDirectory: vueLoaderUse.options.cacheDirectory,
-        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier,
+        filterStyleTag: vueLoaderUse.options.filterStyleTag
       }
     }
 

test/core.spec.js

@@ -174,3 +174,38 @@ test('cloned rules should not intefere with each other', done => {
     done()
   })
 })
+
+test('ignore style tags', done => {
+  mockBundleAndRun({
+    entry: 'style-dynamic.vue',
+    modify: config => {
+      config.module.rules = [
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+          options: {
+            filterStyleTag: ({ keep }) => {
+              return keep
+            }
+          }
+        },
+        {
+          oneOf: [
+            {
+              test: /\.css$/,
+              use: ['vue-style-loader', 'css-loader']
+            }
+          ]
+        }
+      ]
+    }
+  }, ({ window, module }) => {
+    mockRender(module)
+
+    let style = window.document.querySelector('style').textContent
+    style = normalizeNewline(style)
+    expect(style).toContain(`h2[${module._scopeId}] {\n  color: orange;\n}`)
+    expect(style).not.toContain(`color: cyan;`)
+    done()
+  })
+})

test/fixtures/style-dynamic.vue

@@ -0,0 +1,25 @@
+<template>
+  <h2>{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello from themed styled Component!'
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  color: cyan;
+}
+</style>
+
+<style scoped keep>
+h2 {
+  color: orange;
+}
+</style>