diff --git a/packages/crafty-preset-postcss/src/webpack-utils.js b/packages/crafty-preset-postcss/src/webpack-utils.js
index 73a245e55..5c3f1ae1c 100644
--- a/packages/crafty-preset-postcss/src/webpack-utils.js
+++ b/packages/crafty-preset-postcss/src/webpack-utils.js
@@ -70,22 +70,20 @@ function getCssModuleLocalIdent(context, _, exportName, options) {
   );
 }
 
-function extractCss(bundle, chain, styleRule) {
-  // Add this only once per bundle
-  if (bundle.extractCSSConfigured) {
-    return;
-  }
-  bundle.extractCSSConfigured = true;
-
+function configureMiniCssExtractPlugin(bundle, chain) {
   // Initialize extraction plugin
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-  // Create a list of loaders that also contains the extraction loader
-  styleRule.use("style-loader").loader(MiniCssExtractPlugin.loader);
+  // Add plugin only once per bundle
+  if (!bundle.extractCSSConfigured) {
+    chain
+      .plugin("extractCSS")
+      .use(MiniCssExtractPlugin, [getExtractConfig(bundle)]);
 
-  chain
-    .plugin("extractCSS")
-    .use(MiniCssExtractPlugin, [getExtractConfig(bundle)]);
+    bundle.extractCSSConfigured = true;
+  }
+
+  return MiniCssExtractPlugin.loader;
 }
 
 function createRule(crafty, bundle, chain, styleRule, options) {
@@ -96,14 +94,15 @@ function createRule(crafty, bundle, chain, styleRule, options) {
   // "style" loader turns CSS into JS modules that inject <style> tags.
   // The "style" loader enables hot editing of CSS.
 
+  let styleLoader;
   if (crafty.getEnvironment() === "production" && bundle.extractCSS) {
-    extractCss(bundle, chain, styleRule);
+    styleLoader = configureMiniCssExtractPlugin(bundle, chain);
   } else {
-    styleRule
-      .use("style-loader")
-      .loader(require.resolve("../packages/style-loader.js"));
+    styleLoader = require.resolve("../packages/style-loader.js");
   }
 
+  styleRule.use("style-loader").loader(styleLoader);
+
   styleRule
     .use("css-loader")
     .loader(require.resolve("../packages/css-loader.js"))
diff --git a/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.md b/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.md
index b81e3b462..d73b3ffa4 100644
--- a/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.md
+++ b/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.md
@@ -121,11 +121,6 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 3
 
-    `!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,function(){return function(){"use strict";var e={};e.d=function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};e.r(t),e.d(t,{default:function(){return o}});class o{}return t}()});␊
-    //# sourceMappingURL=myBundle.min.js.map`
-
-> Snapshot 4
-
     `a{color:#00f}.Child{background:#000}.Parent{background:#fff}.Parent--before{color:#333}.Parent--after{color:#eee}.Button{color:orange}:root{--color:red}.Menu{width:800px}.MenuLink{color:var(--color);background:#056ef0;width:200px}␊
     ␊
     /*# sourceMappingURL=myBundle-default.min.css.map*/`
@@ -170,11 +165,6 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 3
 
-    `!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,function(){return function(){"use strict";var e={};e.d=function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};e.r(t),e.d(t,{default:function(){return o}});class o{}return t}()});␊
-    //# sourceMappingURL=myBundle.min.js.map`
-
-> Snapshot 4
-
     `a{color:#00f}.Child{background:#000}.Parent{background:#fff}.Parent--before{color:#333}.Parent--after{color:#eee}.Button{color:orange}:root{--color:red}.Menu{width:800px}.MenuLink{color:var(--color);background:#056ef0;width:200px}␊
     ␊
     /*# sourceMappingURL=myBundle-string.min.css.map*/`
@@ -219,11 +209,109 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 3
 
-    `!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,function(){return function(){"use strict";var e={};e.d=function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};e.r(t),e.d(t,{default:function(){return o}});class o{}return t}()});␊
+    `a{color:#00f}.Child{background:#000}.Parent{background:#fff}.Parent--before{color:#333}.Parent--after{color:#eee}.Button{color:orange}:root{--color:red}.Menu{width:800px}.MenuLink{color:var(--color);background:#056ef0;width:200px}␊
+    ␊
+    /*# sourceMappingURL=myBundle-object.min.css.map*/`
+
+## Compiles CSS within webpack, CSS Modules, inline
+
+> Snapshot 1
+
+    {
+      status: 0,
+      stdall: `␊
+      [__:__:__] Starting Crafty __version__...␊
+      [__:__:__] Files will be stored in:␊
+                  css: __PATH__/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/dist/css␊
+                 js: __PATH__/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/dist/js␊
+      [__:__:__] Starting 'default' ...␊
+      [__:__:__] Starting 'js' ...␊
+      [__:__:__] Starting 'js_myBundle' ...␊
+      asset myBundle.min.js ___ KiB [emitted] [minimized] (name: default)␊
+        sourceMap myBundle.min.js.map ___ KiB [emitted] [dev] (auxiliary name: default)␊
+      asset subapp.myBundle.min.js ___ KiB [emitted] [minimized] (name: subapp)␊
+        sourceMap subapp.myBundle.min.js.map ___ KiB [emitted] [dev] (auxiliary name: subapp)␊
+      Entrypoint default ___ KiB (___ KiB) = myBundle.min.js 1 auxiliary asset␊
+      Chunk Group subapp ___ KiB (___ KiB) = subapp.myBundle.min.js 1 auxiliary asset␊
+      chunk (runtime: default) myBundle.min.js (default) ___ KiB (javascript) ___ KiB (runtime) [entry] [rendered]␊
+        runtime modules ___ KiB 11 modules␊
+        dependent modules ___ KiB [dependent] 10 modules␊
+        ./js/app.js + 2 modules ___ KiB [built] [code generated]␊
+      chunk (runtime: default) subapp.myBundle.min.js (subapp) ___ KiB [rendered]␊
+        dependent modules ___ KiB [dependent] 1 module␊
+        ./js/subapp.js + 1 modules ___ KiB [built] [code generated]␊
+      ␊
+        Compiled successfully!␊
+        Δt ____ms␊
+      ␊
+      [__:__:__] Finished 'js_myBundle' after ____ ms␊
+      [__:__:__] Finished 'js' after ____ ms␊
+      [__:__:__] Finished 'default' after ____ ms␊
+      `,
+    }
+
+> Snapshot 2
+
+    `!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,function(){return function(){"use strict";var e,t,n,r,o,a={458:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var u=this[c][0];null!=u&&(i[u]=!0)}for(var s=0;s<e.length;s++){var f=[].concat(e[s]);r&&i[f[0]]||(void 0!==a&&(void 0===f[5]||(f[1]="@layer".concat(f[5].length>0?" ".concat(f[5]):""," {").concat(f[1],"}")),f[5]=a),n&&(f[2]&&(f[1]="@media ".concat(f[2]," {").concat(f[1],"}")),f[2]=n),o&&(f[4]?(f[1]="@supports (".concat(f[4],") {").concat(f[1],"}"),f[4]=o):f[4]="".concat(o)),t.push(f))}},t}},41:function(e){e.exports=function(e){return e[1]}},843:function(e){var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var o={},a=[],i=0;i<e.length;i++){var c=e[i],u=r.base?c[0]+r.base:c[0],s=o[u]||0,f="".concat(u," ").concat(s);o[u]=s+1;var l=n(f),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==l)t[l].references++,t[l].updater(p);else{var d=function(e,t){var n=t.domAPI(t);return n.update(e),function(t){t?(t.css!==e.css||t.media!==e.media||t.sourceMap!==e.sourceMap||t.supports!==e.supports||t.layer!==e.layer)&&n.update(e=t):n.remove()}}(p,r);r.byIndex=i,t.splice(i,0,{identifier:f,updater:d,references:1})}a.push(f)}return a}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=n(a[i]);t[c].references--}for(var u=r(e,o),s=0;s<a.length;s++){var f=n(a[s]);0===t[f].references&&(t[f].updater(),t.splice(f,1))}a=u}}},268:function(e){var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},31:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},459:function(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},912:function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){var r,o,a;r="",n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {")),(o=void 0!==n.layer)&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}"),(a=n.sourceMap)&&"undefined"!=typeof btoa&&(r+="\\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(r,t,e.options)},remove:function(){var e;null!==(e=t).parentNode&&e.parentNode.removeChild(e)}}}},876:function(e){e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},6:function(e,t,n){var r=n(41),o=n.n(r),a=n(458),i=n.n(a)()(o());i.push([e.id,".Button{color:orange}",""]),t.A=i},853:function(e,t,n){var r=n(41),o=n.n(r),a=n(458),i=n.n(a)()(o());i.push([e.id,".t-global .app_app__5UQ8P{color:red}.t-global .app_app2__18ffB{color:green}",""]),i.locals={app:"app_app__5UQ8P",app2:"app_app2__18ffB"},t.A=i}},i={};function c(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={id:e,exports:{}};return a[e](n,n.exports,c),n.exports}c.m=a,c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,{a:t}),t},c.d=function(e,t){for(var n in t)c.o(t,n)&&!c.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},c.f={},c.e=function(e){return Promise.all(Object.keys(c.f).reduce(function(t,n){return c.f[n](e,t),t},[]))},c.u=function(e){return"subapp.myBundle.min.js"},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e={},t="UNIQID:",c.l=function(n,r,o,a){if(e[n]){e[n].push(r);return}if(void 0!==o)for(var i,u,s=document.getElementsByTagName("script"),f=0;f<s.length;f++){var l=s[f];if(l.getAttribute("src")==n||l.getAttribute("data-webpack")==t+o){i=l;break}}i||(u=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,c.nc&&i.setAttribute("nonce",c.nc),i.setAttribute("data-webpack",t+o),i.src=n),e[n]=[r];var p=function(t,r){i.onerror=i.onload=null,clearTimeout(d);var o=e[n];if(delete e[n],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach(function(e){return e(r)}),t)return t(r)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=p.bind(null,i.onerror),i.onload=p.bind(null,i.onload),u&&document.head.appendChild(i)},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},function(){c.g.importScripts&&(e=c.g.location+"");var e,t=c.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var n=t.getElementsByTagName("script");if(n.length)for(var r=n.length-1;r>-1&&(!e||!/^http(s?):/.test(e));)e=n[r--].src}if(!e)throw Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\\?.*$/,"").replace(/\\/[^\\/]+$/,"/"),c.p=e}(),n={818:0},c.f.j=function(e,t){var r=c.o(n,e)?n[e]:void 0;if(0!==r){if(r)t.push(r[2]);else{var o=new Promise(function(t,o){r=n[e]=[t,o]});t.push(r[2]=o);var a=c.p+c.u(e),i=Error();c.l(a,function(t){if(c.o(n,e)&&(0!==(r=n[e])&&(n[e]=void 0),r)){var o=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;i.message="Loading chunk "+e+" failed.\\n("+o+": "+a+")",i.name="ChunkLoadError",i.type=o,i.request=a,r[1](i)}},"chunk-"+e,e)}}},r=function(e,t){var r,o,a=t[0],i=t[1],u=t[2],s=0;if(a.some(function(e){return 0!==n[e]})){for(r in i)c.o(i,r)&&(c.m[r]=i[r]);u&&u(c)}for(e&&e(t);s<a.length;s++)o=a[s],c.o(n,o)&&n[o]&&n[o][0](),n[o]=0},(o=self.webpackChunkUNIQID=self.webpackChunkUNIQID||[]).forEach(r.bind(null,0)),o.push=r.bind(null,o.push.bind(o)),c.nc=void 0;var u={};return!function(){c.r(u),c.d(u,{default:function(){return g}});var e=c(843),t=c.n(e),n=c(912),r=c.n(n),o=c(268),a=c.n(o),i=c(459),s=c.n(i),f=c(31),l=c.n(f),p=c(876),d=c.n(p),v=c(6),m={};m.styleTagTransform=d(),m.setAttributes=s(),m.insert=a().bind(null,"head"),m.domAPI=r(),m.insertStyleElement=l(),t()(v.A,m),v.A&&v.A.locals&&v.A.locals;var h=c(853),b={};b.styleTagTransform=d(),b.setAttributes=s(),b.insert=a().bind(null,"head"),b.domAPI=r(),b.insertStyleElement=l(),t()(h.A,b);var y=h.A&&h.A.locals?h.A.locals:void 0;function g(){console.log(y.app),c.e(964).then(c.bind(c,999))}}(),u}()});␊
     //# sourceMappingURL=myBundle.min.js.map`
 
-> Snapshot 4
+> Snapshot 3
 
-    `a{color:#00f}.Child{background:#000}.Parent{background:#fff}.Parent--before{color:#333}.Parent--after{color:#eee}.Button{color:orange}:root{--color:red}.Menu{width:800px}.MenuLink{color:var(--color);background:#056ef0;width:200px}␊
+    `"use strict";(self.webpackChunkUNIQID=self.webpackChunkUNIQID||[]).push([[964],{69:function(n,s,l){var a=l(41),u=l.n(a),e=l(458),o=l.n(e)()(u());o.push([n.id,".subapp_subapp__0orll{color:orange}",""]),o.locals={subapp:"subapp_subapp__0orll"},s.A=o},999:function(n,s,l){l.r(s),l.d(s,{default:function(){return I}});var a=l(843),u=l.n(a),e=l(912),o=l.n(e),t=l(268),p=l.n(t),r=l(459),c=l.n(r),i=l(31),b=l.n(i),f=l(876),d=l.n(f),A=l(69),_={};_.styleTagTransform=d(),_.setAttributes=c(),_.insert=p().bind(null,"head"),_.domAPI=o(),_.insertStyleElement=b(),u()(A.A,_);var h=A.A&&A.A.locals?A.A.locals:void 0;function I(){console.log(h.subapp)}}}]);␊
+    //# sourceMappingURL=subapp.myBundle.min.js.map`
+
+## Compiles CSS within webpack, CSS Modules, extracts CSS
+
+> Snapshot 1
+
+    {
+      status: 0,
+      stdall: `␊
+      [__:__:__] Starting Crafty __version__...␊
+      [__:__:__] Files will be stored in:␊
+                  css: __PATH__/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/dist/css␊
+                 js: __PATH__/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/dist/js␊
+      [__:__:__] Starting 'default' ...␊
+      [__:__:__] Starting 'js' ...␊
+      [__:__:__] Starting 'js_myBundle' ...␊
+      assets by path *.js ___ KiB␊
+        asset myBundle.min.js ___ KiB [emitted] [minimized] (name: default)␊
+          sourceMap myBundle.min.js.map ___ KiB [emitted] [dev] (auxiliary name: default)␊
+        asset subapp.myBundle.min.js ___ KiB [emitted] [minimized] (name: subapp)␊
+          sourceMap subapp.myBundle.min.js.map ___ KiB [emitted] [dev] (auxiliary name: subapp)␊
+      assets by path *.css ___ KiB␊
+        asset default.myBundle.min.css ___ KiB [emitted] (name: default)␊
+          sourceMap default.myBundle.min.css.map ___ KiB [emitted] [dev] (auxiliary name: default)␊
+        asset subapp.myBundle.min.css ___ KiB [emitted] (name: subapp)␊
+          sourceMap subapp.myBundle.min.css.map ___ KiB [emitted] [dev] (auxiliary name: subapp)␊
+      Entrypoint default ___ KiB (___ KiB) = default.myBundle.min.css ___ KiB myBundle.min.js ___ KiB 2 auxiliary assets␊
+      Chunk Group subapp ___ KiB (___ KiB) = subapp.myBundle.min.css ___ KiB subapp.myBundle.min.js ___ KiB 2 auxiliary assets␊
+      chunk (runtime: default) default.myBundle.min.css, myBundle.min.js (default) ___ KiB (javascript) ___ KiB (css/mini-extract) ___ KiB (runtime) [entry] [rendered]␊
+        runtime modules ___ KiB 11 modules␊
+        dependent modules ___ KiB [dependent] 2 modules␊
+        ./js/app.js + 2 modules ___ KiB [built] [code generated]␊
+      chunk (runtime: default) subapp.myBundle.min.css, subapp.myBundle.min.js (subapp) ___ KiB (javascript) ___ KiB (css/mini-extract) [rendered]␊
+        dependent modules ___ KiB [dependent] 1 module␊
+        ./js/subapp.js + 1 modules ___ KiB [built] [code generated]␊
+      ␊
+        Compiled successfully!␊
+        Δt ____ms␊
+      ␊
+      [__:__:__] Finished 'js_myBundle' after ____ ms␊
+      [__:__:__] Finished 'js' after ____ ms␊
+      [__:__:__] Finished 'default' after ____ ms␊
+      `,
+    }
+
+> Snapshot 2
+
+    `.Button{color:orange}␊
+    .t-global .app_app__5UQ8P{color:red}.t-global .app_app2__18ffB{color:green}␊
     ␊
-    /*# sourceMappingURL=myBundle-object.min.css.map*/`
+    /*# sourceMappingURL=default.myBundle.min.css.map*/`
+
+> Snapshot 3
+
+    `.subapp_subapp__0orll{color:orange}␊
+    ␊
+    /*# sourceMappingURL=subapp.myBundle.min.css.map*/`
diff --git a/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.snap b/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.snap
index f9c8aa479..4fe1cb3a5 100644
Binary files a/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.snap and b/packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.snap differ
diff --git a/packages/integration/__tests__/crafty-preset-postcss-webpack.js b/packages/integration/__tests__/crafty-preset-postcss-webpack.js
index 22995f838..901d974b3 100644
--- a/packages/integration/__tests__/crafty-preset-postcss-webpack.js
+++ b/packages/integration/__tests__/crafty-preset-postcss-webpack.js
@@ -52,7 +52,6 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-default.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-default.min.css.map"));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-default.min.css")
     );
@@ -76,7 +75,6 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-string.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-string.min.css.map"));
 
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-string.min.css")
@@ -101,10 +99,75 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-object.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-object.min.css.map"));
 
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-object.min.css")
     );
   }
 );
+
+test.serial("Compiles CSS within webpack, CSS Modules, inline", async t => {
+  const cwd = await testUtils.getCleanFixtures(
+    "crafty-preset-postcss-webpack/modules-inline"
+  );
+
+  const result = await testUtils.run(["run", "default"], cwd);
+
+  t.snapshot(result);
+  t.is(result.status, 0);
+
+  t.truthy(testUtils.exists(cwd, BUNDLE));
+  t.truthy(testUtils.exists(cwd, BUNDLE_MAP));
+
+  const content = testUtils.readForSnapshot(cwd, BUNDLE);
+  t.snapshot(content);
+
+  t.truthy(content.indexOf(".Button{color") > -1);
+  t.truthy(content.indexOf(".t-global .app_app__") > -1);
+  t.truthy(content.indexOf(".t-global .app_app2__") > -1);
+
+  const subappContent = testUtils.readForSnapshot(
+    cwd,
+    "dist/js/subapp.myBundle.min.js"
+  );
+  t.snapshot(subappContent);
+
+  t.truthy(subappContent.indexOf("{color:orange}") > -1);
+  t.truthy(subappContent.indexOf(".subapp_") > -1);
+});
+
+test.serial(
+  "Compiles CSS within webpack, CSS Modules, extracts CSS",
+  async t => {
+    const cwd = await testUtils.getCleanFixtures(
+      "crafty-preset-postcss-webpack/modules-extract"
+    );
+
+    const result = await testUtils.run(["run", "default"], cwd);
+
+    t.snapshot(result);
+    t.is(result.status, 0);
+
+    t.truthy(testUtils.exists(cwd, BUNDLE));
+    t.truthy(testUtils.exists(cwd, BUNDLE_MAP));
+    t.truthy(testUtils.exists(cwd, "dist/js/default.myBundle.min.css"));
+    t.truthy(testUtils.exists(cwd, "dist/js/subapp.myBundle.min.css"));
+
+    const content = testUtils.readForSnapshot(
+      cwd,
+      "dist/js/default.myBundle.min.css"
+    );
+    t.snapshot(content);
+    t.truthy(content.indexOf(".Button{color") > -1);
+    t.truthy(content.indexOf(".t-global .app_app__") > -1);
+    t.truthy(content.indexOf(".t-global .app_app2__") > -1);
+
+    const subappContent = testUtils.readForSnapshot(
+      cwd,
+      "dist/js/subapp.myBundle.min.css"
+    );
+    t.snapshot(subappContent);
+    t.truthy(subappContent.indexOf("{color:orange}") > -1);
+    t.truthy(subappContent.indexOf(".subapp_") > -1);
+  }
+);
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/crafty.config.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/crafty.config.js
new file mode 100644
index 000000000..3a36ab5ff
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/crafty.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    "@swissquote/crafty-preset-postcss",
+    "@swissquote/crafty-runner-webpack"
+  ],
+  js: {
+    myBundle: {
+      source: "js/app.js",
+      extractCSS: "[name].[bundle].min.css"
+    }
+  }
+};
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/app.module.css b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/app.module.css
new file mode 100644
index 000000000..bfbe580a2
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/app.module.css
@@ -0,0 +1,9 @@
+:global .t-global {
+    :local .app {
+        color:red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/style.scss b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/style.scss
new file mode 100644
index 000000000..dce0b2181
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/style.scss
@@ -0,0 +1,3 @@
+.Button {
+    color: orange;
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/subapp.module.css b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/subapp.module.css
new file mode 100644
index 000000000..93e20c8fd
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/subapp.module.css
@@ -0,0 +1,3 @@
+.subapp {
+    color:orange;
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/app.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/app.js
new file mode 100644
index 000000000..31f8d9044
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/app.js
@@ -0,0 +1,8 @@
+import "../css/style";
+import style from "../css/app.module.css";
+
+export default function app() {
+    console.log(style.app);
+
+    import(/* webpackChunkName: "subapp" */ "./subapp");
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/subapp.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/subapp.js
new file mode 100644
index 000000000..96c6ee36f
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/subapp.js
@@ -0,0 +1,5 @@
+import style from "../css/subapp.module.css";
+
+export default function subapp() {
+    console.log(style.subapp)
+}
\ No newline at end of file
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/crafty.config.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/crafty.config.js
new file mode 100644
index 000000000..9be16f481
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/crafty.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    "@swissquote/crafty-preset-postcss",
+    "@swissquote/crafty-runner-webpack"
+  ],
+  js: {
+    myBundle: {
+      source: "js/app.js",
+      //extractCSS: "[name].[bundle].min.css"
+    }
+  }
+};
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/app.module.css b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/app.module.css
new file mode 100644
index 000000000..bfbe580a2
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/app.module.css
@@ -0,0 +1,9 @@
+:global .t-global {
+    :local .app {
+        color:red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/style.scss b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/style.scss
new file mode 100644
index 000000000..dce0b2181
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/style.scss
@@ -0,0 +1,3 @@
+.Button {
+    color: orange;
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/subapp.module.css b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/subapp.module.css
new file mode 100644
index 000000000..8585d4470
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/subapp.module.css
@@ -0,0 +1,4 @@
+.subapp {
+    color:orange;
+}
+
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/app.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/app.js
new file mode 100644
index 000000000..31f8d9044
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/app.js
@@ -0,0 +1,8 @@
+import "../css/style";
+import style from "../css/app.module.css";
+
+export default function app() {
+    console.log(style.app);
+
+    import(/* webpackChunkName: "subapp" */ "./subapp");
+}
diff --git a/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/subapp.js b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/subapp.js
new file mode 100644
index 000000000..96c6ee36f
--- /dev/null
+++ b/packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/subapp.js
@@ -0,0 +1,5 @@
+import style from "../css/subapp.module.css";
+
+export default function subapp() {
+    console.log(style.subapp)
+}
\ No newline at end of file
diff --git a/packages/stylelint-config-swissquote/common.js b/packages/stylelint-config-swissquote/common.js
index 548afaa16..85a968dbd 100644
--- a/packages/stylelint-config-swissquote/common.js
+++ b/packages/stylelint-config-swissquote/common.js
@@ -56,7 +56,7 @@ module.exports = {
     "property-no-unknown": true,
     "selector-pseudo-class-no-unknown": [
       true,
-      { ignorePseudoClasses: ["global"] }
+      { ignorePseudoClasses: ["global", "local"] }
     ],
     "selector-pseudo-element-no-unknown": true,
     "selector-pseudo-element-colon-notation": "single",
diff --git a/packages/stylelint-config-swissquote/recommended.js b/packages/stylelint-config-swissquote/recommended.js
index b137d3a89..1b5f7e48c 100644
--- a/packages/stylelint-config-swissquote/recommended.js
+++ b/packages/stylelint-config-swissquote/recommended.js
@@ -67,8 +67,9 @@ module.exports = {
       rules: {
         // In css-modules, naming isn't as important,
         // but as it's going to be used in JS, camelCase is best
+        // But in some cases, you might want to wrap a part in ":global" and this needs to support non-module patterns as well
         "selector-class-pattern": [
-          /^[a-z][a-zA-Z0-9]+$/,
+          /^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$|^[a-z][a-zA-Z0-9]+$/,
           {
             resolveNestedSelectors: true
           }
diff --git a/packages/stylelint-config-swissquote/src/__tests__/recommended.js b/packages/stylelint-config-swissquote/src/__tests__/recommended.js
index a7442e328..80e18ab48 100644
--- a/packages/stylelint-config-swissquote/src/__tests__/recommended.js
+++ b/packages/stylelint-config-swissquote/src/__tests__/recommended.js
@@ -411,3 +411,27 @@ test("flags warnings when using ids raised one 'selector-max-id' error", t => {
     ]);
   });
 });
+
+test("Works with CSS Modules", t => {
+  const result = stylelint.lint({
+    code: `/** @define App */
+
+:global .t-global {
+    :local .app {
+        color: red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}
+`,
+    codeFilename: "app.module.css",
+    config
+  });
+
+  return result.then(data => {
+    t.falsy(data.errored);
+    t.is(data.results[0].warnings.length, 0);
+  });
+});