@best-shot/preset-style 0.9.0 → 0.9.3

package/README.md

@@ -15,15 +15,18 @@ A `best-shot` preset for stylesheet.
 This preset offer the following features:
 
 - [CSS Modules] support
+- [Interoperable CSS] support
 - [Less] / [Sass] syntax support
 - [PostCSS] support
-- Use [postcss-preset-evergreen] by default
+- Use [postcss-preset-evergreen] by default(including [Autoprefixer])
 - Use [cssnano] in production mode
 
+[interoperable css]: https://github.com/css-modules/icss
 [css modules]: https://github.com/css-modules/css-modules
 [cssnano]: https://cssnano.co/
 [sass]: https://sass-lang.com/
 [less]: http://lesscss.org/
+[autoprefixer]: https://github.com/postcss/autoprefixer
 [postcss]: https://github.com/postcss/postcss
 [postcss-preset-evergreen]: https://github.com/best-shot/postcss-preset-evergreen
 

package/index.mjs

@@ -1,4 +1,4 @@
-import { relative, resolve } from 'path';
+import { relative } from 'path';
 import { fileURLToPath } from 'url';
 
 import { applyScssLess } from './lib/apply-scss-less.mjs';
@@ -15,7 +15,7 @@ export function apply({ config: { less } }) {
     chain.resolveLoader.modules.prepend(
       relative(
         context,
-        resolve(fileURLToPath(import.meta.url), '../node_modules'),
+        fileURLToPath(new URL('node_modules', import.meta.url)),
       ),
     );
   };

package/lib/apply-stylesheet.mjs

@@ -36,14 +36,26 @@ export async function applyStylesheet(chain) {
     ]);
   }
 
-  chain.module.rule('style').test(extToRegexp({ extname: ['css'] }));
+  chain.module
+    .rule('style')
+    .test(extToRegexp({ extname: ['css'] }))
+    .oneOf('not-url')
+    .set('dependency', { not: 'url' });
 
   const mode = chain.get('mode');
   const watch = chain.get('watch');
+  const hot = chain.devServer.get('hot') || false;
 
-  const useHot = chain.devServer.get('hot') || false;
+  chain.module
+    .rule('style')
+    .oneOf('url')
+    .set('dependency', 'url')
+    .set('generator', {
+      filename:
+        mode === 'production' ? '[contenthash:8].css' : '[path][name].css',
+    });
 
-  const parent = chain.module.rule('style').rule('css');
+  const parent = chain.module.rule('style').oneOf('not-url').rule('css');
 
   parent
     .oneOf('css-modules-by-query')
@@ -65,29 +77,12 @@ export async function applyStylesheet(chain) {
       },
     });
 
-  const extract = !useHot;
-
-  if (!watch && chain.module.rules.has('babel')) {
-    chain.module
-      .rule('babel')
-      .exclude.add(slashToRegexp('/node_modules/css-loader/'));
-
-    if (extract) {
-      chain.module
-        .rule('babel')
-        .exclude.add(slashToRegexp('/node_modules/mini-css-extract-plugin/'));
-    }
-  }
-
-  if (extract) {
+  if (!hot) {
     const { default: MiniCssExtractPlugin } = await import(
       'mini-css-extract-plugin'
     );
 
-    chain.module
-      .rule('style')
-      .use('extract-css')
-      .loader(MiniCssExtractPlugin.loader);
+    parent.use('extract-css').loader(MiniCssExtractPlugin.loader);
 
     chain.plugin('extract-css').use(MiniCssExtractPlugin, [
       {
@@ -97,6 +92,18 @@ export async function applyStylesheet(chain) {
       },
     ]);
   } else {
-    chain.module.rule('style').use('style-loader').loader('style-loader');
+    parent.use('style-loader').loader('style-loader');
+  }
+
+  if (!watch && chain.module.rules.has('babel')) {
+    chain.module
+      .rule('babel')
+      .exclude.add(slashToRegexp('/node_modules/css-loader/'));
+
+    if (!hot) {
+      chain.module
+        .rule('babel')
+        .exclude.add(slashToRegexp('/node_modules/mini-css-extract-plugin/'));
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@best-shot/preset-style",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "description": "A `best-shot` preset for stylesheet",
   "license": "MIT",
   "author": {
@@ -34,27 +34,27 @@
   },
   "main": "index.mjs",
   "dependencies": {
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "cssnano": "^5.0.13",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "cssnano": "^5.1.12",
     "ext-to-regexp": "^0.1.0",
-    "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.5",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-evergreen": "^0.4.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass": "^1.45.0",
-    "sass-loader": "^12.4.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
+    "postcss-preset-evergreen": "^0.4.5",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
     "slash-to-regexp": "^0.0.4",
     "style-loader": "^3.3.1"
   },
   "peerDependencies": {
-    "@best-shot/core": "^0.6.0"
+    "@best-shot/core": "^0.6.15"
   },
   "engines": {
-    "node": "^14.17.0 || >=16.13.0"
+    "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
   },
   "publishConfig": {
     "access": "public",