@best-shot/preset-style 0.8.7 → 0.9.1

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
 
@@ -47,8 +50,8 @@ export default {
 Use `[name].module.[extname]` as filename.
 
 ```js
-import { foo } from './foo.module.css';
 import { bar } from './bar.module.scss';
+import { foo } from './foo.module.css';
 ```
 
 Use CSS Modules in Vue.js. [Learn more](https://vue-loader.vuejs.org/guide/css-modules.html)

package/index.mjs

@@ -0,0 +1,30 @@
+import { relative, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+import { applyScssLess } from './lib/apply-scss-less.mjs';
+import { applyStylesheet } from './lib/apply-stylesheet.mjs';
+
+export function apply({ config: { less } }) {
+  return async (chain) => {
+    const context = chain.get('context');
+
+    await applyStylesheet(chain);
+
+    applyScssLess(less)(chain);
+
+    chain.resolveLoader.modules.prepend(
+      relative(
+        context,
+        resolve(fileURLToPath(import.meta.url), '../node_modules'),
+      ),
+    );
+  };
+}
+
+export const schema = {
+  less: {
+    type: 'object',
+  },
+};
+
+export const name = 'preset-style';

package/lib/{apply-scss-less.cjs → apply-scss-less.mjs}

@@ -1,13 +1,11 @@
-'use strict';
-
-const extToRegexp = require('ext-to-regexp');
+import extToRegexp from 'ext-to-regexp';
 
 function addExtname(rule) {
   const regexp = rule.get('test');
   rule.test(regexp.add('scss', 'sass', 'less'));
 }
 
-module.exports = function applyScssLess(less) {
+export function applyScssLess(less) {
   return (chain) => {
     chain.module.rule('style').batch(addExtname);
 
@@ -39,4 +37,4 @@ module.exports = function applyScssLess(less) {
         },
       });
   };
-};
+}

package/lib/apply-stylesheet.mjs

@@ -0,0 +1,102 @@
+import extToRegexp from 'ext-to-regexp';
+import slashToRegexp from 'slash-to-regexp';
+
+function applyOneOf({ auto = false, mode }) {
+  return (rule) => {
+    rule
+      .use('css-loader')
+      .loader('css-loader')
+      .options({
+        importLoaders: 3,
+        modules: {
+          ...(auto ? { auto } : undefined),
+          namedExport: true,
+          localIdentName: {
+            development: '[path][name]__[local]',
+            production: '[local]_[hash:base64:8]',
+          }[mode],
+        },
+      });
+  };
+}
+
+export async function applyStylesheet(chain) {
+  const minimize = chain.optimization.get('minimize');
+
+  if (minimize) {
+    const { default: CssMinimizerPlugin } = await import(
+      'css-minimizer-webpack-plugin'
+    );
+    chain.optimization.minimizer('css-minimizer').use(CssMinimizerPlugin, [
+      {
+        minimizerOptions: {
+          preset: ['default', { discardComments: { removeAll: true } }],
+        },
+      },
+    ]);
+  }
+
+  chain.module.rule('style').test(extToRegexp({ extname: ['css'] }));
+
+  const mode = chain.get('mode');
+  const watch = chain.get('watch');
+
+  const useHot = chain.devServer.get('hot') || false;
+
+  const parent = chain.module.rule('style').rule('css');
+
+  parent
+    .oneOf('css-modules-by-query')
+    .resourceQuery(/module/)
+    .batch(applyOneOf({ mode }));
+
+  parent
+    .oneOf('css-modules-by-filename')
+    .batch(applyOneOf({ mode, auto: true }));
+
+  chain.module
+    .rule('style')
+    .rule('postcss')
+    .use('postcss-loader')
+    .loader('postcss-loader')
+    .options({
+      postcssOptions: {
+        plugins: ['postcss-preset-evergreen'],
+      },
+    });
+
+  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) {
+    const { default: MiniCssExtractPlugin } = await import(
+      'mini-css-extract-plugin'
+    );
+
+    chain.module
+      .rule('style')
+      .use('extract-css')
+      .loader(MiniCssExtractPlugin.loader);
+
+    chain.plugin('extract-css').use(MiniCssExtractPlugin, [
+      {
+        filename: '[name].css',
+        // chunkFilename: '[id].css',
+        ignoreOrder: true,
+      },
+    ]);
+  } else {
+    chain.module.rule('style').use('style-loader').loader('style-loader');
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@best-shot/preset-style",
-  "version": "0.8.7",
+  "version": "0.9.1",
   "description": "A `best-shot` preset for stylesheet",
   "license": "MIT",
   "author": {
@@ -32,29 +32,29 @@
   "bugs": {
     "url": "https://github.com/best-shot/best-shot/issues"
   },
-  "main": "index.cjs",
+  "main": "index.mjs",
   "dependencies": {
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "cssnano": "^5.0.8",
+    "css-loader": "^6.6.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "cssnano": "^5.0.17",
     "ext-to-regexp": "^0.1.0",
-    "less": "^4.1.1",
-    "less-loader": "^10.0.1",
-    "mini-css-extract-plugin": "^2.2.0",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-evergreen": "^0.2.1",
-    "resolve-url-loader": "^4.0.0",
-    "sass": "^1.38.0",
-    "sass-loader": "^12.1.0",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-evergreen": "^0.4.3",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
     "slash-to-regexp": "^0.0.4",
-    "style-loader": "^3.2.1"
+    "style-loader": "^3.3.1"
   },
   "peerDependencies": {
-    "@best-shot/core": "^0.5.0"
+    "@best-shot/core": "^0.6.1"
   },
   "engines": {
-    "node": "^12.22.0 || ^14.17.0"
+    "node": "^14.17.0 || >=16.13.0"
   },
   "publishConfig": {
     "access": "public",

package/index.cjs

@@ -1,34 +0,0 @@
-'use strict';
-
-const { relative } = require('path');
-
-const applyScssLess = require('./lib/apply-scss-less.cjs');
-const applyStylesheet = require('./lib/apply-stylesheet.cjs');
-
-exports.apply = function applyStyle({
-  config: { less, asset: { esModule = true } = {} },
-}) {
-  return (chain) => {
-    const context = chain.get('context');
-
-    chain.batch(applyStylesheet(esModule)).batch(applyScssLess(less));
-
-    chain.resolveLoader.modules.prepend(relative(context, module.paths[0]));
-  };
-};
-
-exports.schema = {
-  less: {
-    type: 'object',
-  },
-  asset: {
-    type: 'object',
-    default: {},
-    properties: {
-      esModule: {
-        type: 'boolean',
-        default: true,
-      },
-    },
-  },
-};

package/lib/apply-stylesheet.cjs

@@ -1,113 +0,0 @@
-'use strict';
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const extToRegexp = require('ext-to-regexp');
-const slashToRegexp = require('slash-to-regexp');
-
-function applyOneOf({ auto = false, esModule = true, mode }) {
-  return (rule) => {
-    rule
-      .use('css-loader')
-      .loader('css-loader')
-      .options({
-        ...(!esModule ? { esModule: false } : undefined),
-        importLoaders: 3,
-        modules: {
-          ...(auto ? { auto } : undefined),
-          ...(esModule
-            ? { namedExport: true }
-            : { exportLocalsConvention: 'camelCaseOnly' }),
-          localIdentName: {
-            development: '[path][name]__[local]',
-            production: '[local]_[hash:base64:8]',
-          }[mode],
-        },
-      });
-  };
-}
-
-module.exports = function applyStylesheet(esModule = true) {
-  return (chain) => {
-    chain.resolve.extensions.add('.css');
-
-    const minimize = chain.optimization.get('minimize');
-
-    if (minimize) {
-      chain.optimization.minimizer('css-minimizer').use(CssMinimizerPlugin, [
-        {
-          minimizerOptions: {
-            preset: ['default', { discardComments: { removeAll: true } }],
-          },
-        },
-      ]);
-    }
-
-    chain.module.rule('style').test(extToRegexp({ extname: ['css'] }));
-
-    const mode = chain.get('mode');
-    const useHot = chain.devServer.get('hot') || false;
-
-    const parent = chain.module.rule('style').rule('css');
-
-    parent
-      .oneOf('css-modules-by-query')
-      .resourceQuery(/module/)
-      .batch(applyOneOf({ mode, esModule }));
-
-    parent
-      .oneOf('css-modules-by-filename')
-      .batch(applyOneOf({ mode, esModule, auto: true }));
-
-    chain.module
-      .rule('style')
-      .rule('postcss')
-      .use('postcss-loader')
-      .loader('postcss-loader')
-      .options({
-        postcssOptions: {
-          plugins: ['postcss-preset-evergreen'],
-        },
-      });
-
-    const extract = !useHot;
-
-    if (chain.module.rules.has('babel')) {
-      chain.module
-        .rule('babel')
-        .exclude.add(slashToRegexp('/node_modules/css-loader/'))
-        .when(extract, (exclude) =>
-          exclude.add(slashToRegexp('/node_modules/mini-css-extract-plugin/')),
-        );
-    }
-
-    if (extract) {
-      chain.plugin('extract-css').use(MiniCssExtractPlugin, [
-        {
-          filename: '[name].css',
-          // chunkFilename: '[id].css',
-          ignoreOrder: true,
-        },
-      ]);
-    }
-
-    function takeOptions(loader) {
-      if (!esModule) {
-        loader.options({ esModule: false });
-      }
-    }
-
-    chain.module.rule('style').when(
-      extract,
-      (rule) => {
-        rule
-          .use('extract-css')
-          .loader(MiniCssExtractPlugin.loader)
-          .batch(takeOptions);
-      },
-      (rule) => {
-        rule.use('style-loader').loader('style-loader').batch(takeOptions);
-      },
-    );
-  };
-};