feat(css): add plugin

packages/css/README.md

@@ -0,0 +1,33 @@
+# CSS Plugin
+
+Enhanced inject CSS into the razzle bundle
+
+## Install
+
+```
+npm install -D @rambler-tech/razzle-css
+```
+
+or
+
+```
+yarn add -D @rambler-tech/razzle-css
+```
+
+## Usage
+
+Add the plugin to `razzle.config.js`
+
+```js
+const CssPlugin = require('@rambler-tech/razzle-css')
+
+module.exports = {
+  plugins: [
+    CssPlugin()
+  ],
+  modifyWebpackConfig({webpackConfig}) {
+    // ...
+    return webpackConfig
+  }
+}
+```

packages/css/index.js

@@ -0,0 +1,83 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder')
+
+module.exports = () => ({
+  modifyWebpackConfig({env: {target, dev: isDev}, webpackConfig}) {
+    const isServer = target === 'node'
+
+    const localIdentName = isDev ? '[path][local]' : '[contenthash:base64:8]'
+
+    let loaders
+    let vendorCSSLoaders
+
+    if (isServer) {
+      loaders = [
+        {
+          loader: 'css-loader',
+          options: {
+            esModule: true,
+            modules: {
+              localIdentName,
+              exportOnlyLocals: true
+            }
+          }
+        },
+        'postcss-loader'
+      ]
+
+      vendorCSSLoaders = ['css-loader']
+    } else if (isDev) {
+      loaders = [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            modules: {localIdentName}
+          }
+        },
+        'postcss-loader'
+      ]
+
+      vendorCSSLoaders = ['style-loader', 'css-loader', 'postcss-loader']
+    } else {
+      loaders = [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: {
+            modules: {localIdentName}
+          }
+        },
+        'postcss-loader'
+      ]
+
+      vendorCSSLoaders = [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        'postcss-loader'
+      ]
+    }
+
+    const cssLoader = webpackConfig.module.rules.find(
+      makeLoaderFinder('css-loader')
+    )
+
+    cssLoader.test = /\.css$/
+    cssLoader.exclude = [/node_modules/]
+    cssLoader.use = loaders
+
+    webpackConfig.module.rules.push({
+      test: /\.css$/,
+      include: [/node_modules/],
+      use: vendorCSSLoaders
+    })
+
+    if (!isServer) {
+      webpackConfig.plugins.push(new CssMinimizerPlugin())
+    }
+
+    return webpackConfig
+  }
+})

packages/css/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@rambler-tech/razzle-css",
+  "version": "0.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "^7.3.3",
+    "razzle-dev-utils": "^4.2.18",
+    "style-loader": "^3.3.3"
+  },
+  "peerDependencies": {
+    "razzle": ">=4",
+    "webpack": ">=5"
+  }
+}