refactor: style loading

packages/web/src/server/augment-build.js

@@ -2,7 +2,6 @@ import {regexFromExtensions} from '@flecks/core/server';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const augmentBuild = (target, config, env, argv, flecks) => {
-  const isProduction = 'production' === argv.mode;
   let finalLoader;
   switch (target) {
     case 'fleck': {
@@ -15,13 +14,8 @@ const augmentBuild = (target, config, env, argv, flecks) => {
       break;
     }
     case 'web': {
-      if (isProduction) {
-        finalLoader = {loader: MiniCssExtractPlugin.loader};
-        config.plugins.push(new MiniCssExtractPlugin());
-      }
-      else {
-        finalLoader = {loader: 'style-loader', options: {injectType: 'styleTag'}};
-      }
+      finalLoader = {loader: MiniCssExtractPlugin.loader};
+      config.plugins.push(new MiniCssExtractPlugin({filename: 'assets/[name].css'}));
       break;
     }
     default: break;
@@ -49,7 +43,7 @@ const augmentBuild = (target, config, env, argv, flecks) => {
         loaders,
         {
           modules: {
-            localIdentName: isProduction ? '[hash]' : '[path][name]__[local]',
+            localIdentName: '[hash:4]',
           },
         },
       ),

packages/web/src/server/build/runtime.js

@@ -28,8 +28,11 @@ module.exports = async (config, env, argv, flecks) => {
   const styles = (
     await Promise.all(
       roots
-        .map(([, path]) => {
+        .map(([fleck, path]) => {
           try {
+            if (webFlecks.fleckIsCompiled(fleck)) {
+              return [];
+            }
             const {files} = R(join(path, 'package.json'));
             return (
               files

packages/web/src/server/build/web.webpack.config.js

@@ -83,7 +83,7 @@ module.exports = async (env, argv, flecks) => {
           const styleChunk = Array.from(compilation.chunks).find((chunk) => (
             chunk.chunkReason?.match(/split chunk \(cache group: styles\)/)
           ));
-          if (isProduction && styleChunk) {
+          if (styleChunk) {
             for (let i = 0; i < assets.css.length; ++i) {
               const asset = compilation.assets[assets.css[i].substring(1)];
               if (asset) {
@@ -109,7 +109,9 @@ module.exports = async (env, argv, flecks) => {
       }));
     });
   // @todo dynamic extensions
-  const styleExtensionsRegex = regexFromExtensions(['.css', '.sass', '.scss']);
+  const styleExtensionsRegex = regexFromExtensions(
+    ['.css', '.sass', '.scss'].map((ext) => [ext, `.module${ext}`]).flat(),
+  );
   const config = defaultConfig(flecks, {
     devServer: {
       compress: false,
@@ -151,14 +153,13 @@ module.exports = async (env, argv, flecks) => {
       splitChunks: {
         cacheGroups: {
           styles: {
-            chunks: 'all',
             enforce: true,
-            priority: 100,
+            priority: 1000,
             test: styleExtensionsRegex,
           },
         },
         chunks: 'all',
-        ...(isProduction ? {name: false} : undefined),
+        name: 'flecks_styles',
       },
     },
     output: {