@best-shot/preset-style 0.8.8

package/README.md

@@ -0,0 +1,102 @@
+# @best-shot/preset-style <img src="https://cdn.jsdelivr.net/gh/best-shot/best-shot/packages/core/logo.svg" alt="logo" height="80" align="right">
+
+A `best-shot` preset for stylesheet.
+
+[![npm][npm-badge]][npm-url]
+[![github][github-badge]][github-url]
+![node][node-badge]
+
+[npm-url]: https://www.npmjs.com/package/@best-shot/preset-style
+[npm-badge]: https://img.shields.io/npm/v/@best-shot/preset-style.svg?style=flat-square&logo=npm
+[github-url]: https://github.com/best-shot/best-shot/tree/master/packages/preset-style
+[github-badge]: https://img.shields.io/npm/l/@best-shot/preset-style.svg?style=flat-square&colorB=blue&logo=github
+[node-badge]: https://img.shields.io/node/v/@best-shot/preset-style.svg?style=flat-square&colorB=green&logo=node.js
+
+This preset offer the following features:
+
+- [CSS Modules] support
+- [Less] / [Sass] syntax support
+- [PostCSS] support
+- Use [postcss-preset-evergreen] by default
+- Use [cssnano] in production mode
+
+[css modules]: https://github.com/css-modules/css-modules
+[cssnano]: https://cssnano.co/
+[sass]: https://sass-lang.com/
+[less]: http://lesscss.org/
+[postcss]: https://github.com/postcss/postcss
+[postcss-preset-evergreen]: https://github.com/best-shot/postcss-preset-evergreen
+
+## Installation
+
+```bash
+npm install @best-shot/preset-style --save-dev
+```
+
+## Usage
+
+```mjs
+// example: .best-shot/config.mjs
+export default {
+  presets: ['style']
+};
+```
+
+### CSS Modules support
+
+Use `[name].module.[extname]` as filename.
+
+```js
+import { foo } from './foo.module.css';
+import { bar } from './bar.module.scss';
+```
+
+Use CSS Modules in Vue.js. [Learn more](https://vue-loader.vuejs.org/guide/css-modules.html)
+
+<!-- eslint-skip -->
+
+```vue
+<!-- example.vue -->
+<style lang="css" module></style>
+<style lang="scss" module></style>
+<style lang="less" module></style>
+```
+
+## Tips
+
+### Load custom `postcss` config
+
+Disable internal options:
+
+```mjs
+// example: .best-shot/config.mjs
+export default {
+  webpackChain(config) {
+    config.module
+      .rule('style')
+      .rule('postcss')
+      .use('postcss-loader')
+      .tap((options) => ({
+        ...options,
+        postcssOptions: {}
+      }));
+  }
+};
+```
+
+Write your config in any way. See <https://github.com/postcss/postcss-load-config>
+
+```cjs
+// example: postcss.config.cjs
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {}
+  }
+};
+```
+
+## Related
+
+- [@best-shot/preset-asset](../preset-asset)
+- [@best-shot/preset-web](../preset-web)
+- [@best-shot/core](../core)

package/index.cjs

@@ -0,0 +1,34 @@
+'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-scss-less.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+const extToRegexp = require('ext-to-regexp');
+
+function addExtname(rule) {
+  const regexp = rule.get('test');
+  rule.test(regexp.add('scss', 'sass', 'less'));
+}
+
+module.exports = function applyScssLess(less) {
+  return (chain) => {
+    chain.module.rule('style').batch(addExtname);
+
+    chain.module
+      .rule('sass')
+      .test(extToRegexp({ extname: ['scss', 'sass'] }))
+      .use('resolve-url-loader')
+      .loader('resolve-url-loader')
+      .options({
+        sourceMap: !['eval', false].includes(chain.get('devtool')),
+        removeCR: true,
+      })
+      .end()
+      .use('sass-loader')
+      .loader('sass-loader')
+      .options({
+        sourceMap: true,
+      });
+
+    chain.module
+      .rule('less')
+      .test(extToRegexp({ extname: ['less'] }))
+      .use('less-loader')
+      .loader('less-loader')
+      .options({
+        lessOptions: {
+          rewriteUrls: 'local',
+          ...less,
+        },
+      });
+  };
+};

package/lib/apply-stylesheet.cjs

@@ -0,0 +1,113 @@
+'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);
+      },
+    );
+  };
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@best-shot/preset-style",
+  "version": "0.8.8",
+  "description": "A `best-shot` preset for stylesheet",
+  "license": "MIT",
+  "author": {
+    "name": "Eric Chen",
+    "email": "airkro@qq.com"
+  },
+  "keywords": [
+    "autoprefixer",
+    "best-shot",
+    "css",
+    "css-modules",
+    "cssnano",
+    "cssnext",
+    "evergreen",
+    "less",
+    "modules",
+    "postcss",
+    "sass",
+    "scss",
+    "style",
+    "webpack"
+  ],
+  "homepage": "https://github.com/best-shot/best-shot/tree/master/packages/preset-style",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/best-shot/best-shot.git",
+    "directory": "packages/preset-style"
+  },
+  "bugs": {
+    "url": "https://github.com/best-shot/best-shot/issues"
+  },
+  "main": "index.cjs",
+  "dependencies": {
+    "css-loader": "^6.3.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "cssnano": "^5.0.8",
+    "ext-to-regexp": "^0.1.0",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
+    "mini-css-extract-plugin": "^2.3.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-evergreen": "^0.2.1",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.42.0",
+    "sass-loader": "^12.1.0",
+    "slash-to-regexp": "^0.0.4",
+    "style-loader": "^3.3.0"
+  },
+  "peerDependencies": {
+    "@best-shot/core": "^0.5.1"
+  },
+  "engines": {
+    "node": "^12.22.0 || ^14.17.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "x-readme": {
+    "logo": "https://cdn.jsdelivr.net/gh/best-shot/best-shot/packages/core/logo.svg"
+  }
+}