fix: 🐛 Reverted back to using mini-css-extract-plugin by defaul

package.json

@@ -13,13 +13,13 @@
     "@types/node": "^17.0.21",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "@typescript-eslint/parser": "^5.13.0",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
     "autocannon": "4.6.0",
     "bulma": "0.8.0",
     "commitizen": "^4.2.4",
     "del": "5.1.0",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest": "^26.1.1",
@@ -38,17 +38,17 @@
     "lint-staged": "10.0.8",
     "lunr": "^2.3.9",
     "map-stream": "0.0.7",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.8",
     "postcss-less": "6.0.0",
     "prettier": "2.5.1",
-    "rollup": "^2.69.0",
+    "rollup": "^2.70.0",
     "stylelint": "^14.5.3",
-    "stylelint-config-css-modules": "^3.0.0",
+    "stylelint-config-css-modules": "^4.0.1",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-block-no-ignored-properties": "2.5.0",
     "stylelint-order": "5.0.0",
     "to-mock": "1.6.2",
-    "ts-loader": "^9.2.7",
+    "ts-loader": "^9.2.8",
     "typescript": "^4.6.2",
     "verdaccio": "4.5.1",
     "webpack": "^5.69.1",

packages/cli/package.json

@@ -39,28 +39,30 @@
     "@babel/preset-react": "^7.16.7",
     "@gatsbyjs/webpack-hot-middleware": "^2.25.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
-    "@swc/core": "^1.2.147",
+    "@swc/core": "^1.2.154",
     "@types/webpack": "^5.28.0",
     "babel-loader": "^8.2.3",
     "better-opn": "^3.0.2",
-    "bundle-stats-webpack-plugin": "^3.2.5",
+    "bundle-stats-webpack-plugin": "^3.2.9",
     "chalk": "^4.1.2",
     "cli-highlight": "^2.1.11",
     "cli-progress": "^3.10.0",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^10.2.4",
     "core-js": "^3.21.1",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "express": "^4.17.3",
     "express-static-gzip": "^2.1.5",
     "globby": "^11.0.4",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "messageformat": "^2.3.0",
-    "mini-svg-data-uri": "^1.4.3",
+    "mini-css-extract-plugin": "^2.6.0",
+    "mini-svg-data-uri": "^1.4.4",
     "nodemon": "^2.0.15",
     "open-editor": "^3.0.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.8",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.4.2",
@@ -80,6 +82,7 @@
     "@ima/server": "^17.12.2",
     "@types/cli-progress": "^3.9.2",
     "@types/express": "^4.17.13",
+    "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/nodemon": "^1.19.1",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-dev-middleware": "^5.3.0",

packages/cli/src/types.ts

@@ -190,6 +190,7 @@ export type ImaConfig = {
   experiments?: {
     swc?: boolean;
     swcMinimizer?: boolean;
+    nativeCss?: boolean;
   };
 };
 

packages/cli/src/webpack/config.ts

@@ -6,6 +6,7 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import miniSVGDataURI from 'mini-svg-data-uri';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack, {
@@ -36,7 +37,7 @@ export default async (
   ctx: ImaConfigurationContext,
   imaConfig: ImaConfig
 ): Promise<Configuration> => {
-  const { rootDir, isServer, isEsVersion, name } = ctx;
+  const { rootDir, isServer, isEsVersion, name, processCss } = ctx;
 
   // Define helper variables derived from context
   const isDevEnv = ctx.environment === 'development';
@@ -72,7 +73,31 @@ export default async (
   const getStyleLoaders = async (
     useLessLoader = false
   ): Promise<RuleSetUseItem[]> => {
+    if (!processCss) {
+      return ['null-loader'];
+    }
+
     return [
+      ...(!imaConfig.experiments?.nativeCss
+        ? [
+            processCss && {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                modules: {
+                  auto: true,
+                  exportOnlyLocals: !processCss,
+                  localIdentName: isDevEnv
+                    ? '[path][name]__[local]--[hash:base64:5]'
+                    : '[hash:base64]',
+                },
+                sourceMap: useSourceMaps,
+              },
+            },
+          ]
+        : []),
       {
         loader: require.resolve('postcss-loader'),
         options: await imaConfig.postcss(
@@ -119,6 +144,7 @@ export default async (
 
   return {
     name,
+    dependencies: [],
     target: isServer
       ? 'node16'
       : isEsVersion
@@ -500,19 +526,19 @@ export default async (
             /**
              * CSS & LESS loaders, both have the exact same capabilities
              */
-            ...(ctx.processCss
+            ...(processCss
               ? [
                   {
                     test: /\.less$/,
-                    type: 'css',
                     sideEffects: true,
                     use: await getStyleLoaders(true),
+                    ...(imaConfig.experiments?.nativeCss && { type: 'css' }),
                   },
                   {
                     test: /\.css$/,
-                    type: 'css',
                     sideEffects: true,
                     use: await getStyleLoaders(),
+                    ...(imaConfig.experiments?.nativeCss && { type: 'css' }),
                   },
                 ]
               : []),
@@ -560,6 +586,16 @@ export default async (
           ]
         : // Client-specific plugins
           [
+            processCss &&
+              new MiniCssExtractPlugin({
+                filename: ({ chunk }) =>
+                  `static/css/${chunk?.name === name ? 'app' : '[name]'}${
+                    !isDevEnv ? '.min' : ''
+                  }.css`,
+                ignoreOrder: true,
+                chunkFilename: `static/css/[id]${!isDevEnv ? '.min' : ''}.css`,
+              }),
+
             // Enables compression for assets in production build
             ...(ctx.command === 'build'
               ? imaConfig.compression.map(
@@ -606,7 +642,7 @@ export default async (
 
     // Enable native css support (this replaces mini-css-extract-plugin and css-loader)
     experiments: {
-      css: true,
+      css: !!imaConfig.experiments?.nativeCss,
     },
   };
 };

packages/cli/src/webpack/utils.ts

@@ -174,6 +174,7 @@ function createCacheKey(
     JSON.stringify({
       experimentsSwc: imaConfig.experiments?.swc,
       experimentsSwcMinimizer: imaConfig.experiments?.swcMinimizer,
+      experimentsNativeCss: imaConfig.experiments?.nativeCss,
       command: ctx.command,
       forceSPA: ctx.forceSPA,
       profile: ctx.profile,

packages/dev-utils/.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/**/*
+!package.json

packages/dev-utils/package.json

@@ -10,9 +10,6 @@
     "build": "../../node_modules/.bin/tsc",
     "dev": "../../node_modules/.bin/tsc --watch"
   },
-  "files": [
-    "./dist"
-  ],
   "author": "Jan Šimeček <jan.simecek@firma.seznam.cz>",
   "contributors": [],
   "repository": {

packages/error-overlay/package.json

@@ -36,12 +36,10 @@
     "clsx": "^1.1.1",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^10.2.0",
-    "css-loader": "^6.7.0",
     "css-minimizer-webpack-plugin": "^3.3.0",
     "easy-uid": "^2.0.2",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.6.0",
     "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.4.2",

packages/error-overlay/src/App.tsx

@@ -16,7 +16,7 @@ const App: FunctionComponent<AppProps> = ({ serverError }) => {
   }
 
   return (
-    <Overlay type={error.type}>
+    <Overlay type={error.type} animate={!serverError}>
       <Header
         name={error.name}
         message={error.message}

packages/error-overlay/src/components/overlay/Overlay.tsx

@@ -5,11 +5,20 @@ import { ParsedError } from '#/types';
 
 export interface OverlayProps {
   type: ParsedError['type'];
+  animate?: boolean;
 }
 
-const Overlay: FunctionComponent<OverlayProps> = ({ children, type }) => {
+const Overlay: FunctionComponent<OverlayProps> = ({
+  children,
+  type,
+  animate = true,
+}) => {
   return (
-    <div className='ima-overlay'>
+    <div
+      className={clsx('ima-overlay', {
+        'ima-overlay--animate': animate,
+      })}
+    >
       <div className='ima-overlay__backdrop' />
       <div className='ima-overlay__foreground'>
         <div

packages/error-overlay/src/components/overlay/overlay.less

@@ -16,6 +16,28 @@
     }
   }
 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  &-- {
+    &animate {
+      .ima-overlay__backdrop {
+        animation: fadeIn 0.15s ease-out;
+      }
+
+      .ima-overlay__foreground {
+        animation: fadeInDown 0.15s ease-out;
+      }
+    }
+  }
+
   &__ {
     &backdrop {
       position: absolute;
@@ -37,8 +59,6 @@
       z-index: 10;
 
       margin: 40px auto;
-
-      animation: fadeInDown 0.15s ease-out;
     }
 
     &content {

packages/hmr-client/.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/**/*
+!package.json

packages/hmr-client/package.json

@@ -14,9 +14,6 @@
     "dev": "../../node_modules/.bin/rollup --config --watch",
     "build": "../../node_modules/.bin/rollup --config"
   },
-  "files": [
-    "./dist"
-  ],
   "author": "Jan Šimeček <jan.simecek@firma.seznam.cz>",
   "contributors": [],
   "repository": {

packages/server/lib/error-view/index.ejs

@@ -28,7 +28,7 @@
         }
 
         const debouncedReload = debounce(() => window.location.reload(), 100);
-        const evtSource = new EventSource('http://<%= devServerPublic %>/__webpack_hmr');
+        const evtSource = new EventSource('<%= devServerPublic %>/__webpack_hmr');
 
         evtSource.addEventListener('message', () => {
           if (event.data && typeof event.data === 'string' && event.data.includes('action')) {