补充README.md说明

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+  // 使用 IntelliSense 了解相关属性。 
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}/test/main.js",
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    }
+
+  ]
+}

README.md

@@ -2,6 +2,8 @@
 
 :kissing_heart:一个处理样式资源的webpack插件。
 
+特性：支持`.css` `.less` `.scss` `.sass` `.styl` `stylus` `.sss` 样式文件处理，运行环境按需补丁(css前缀)、自动分包、代码压缩、生成gizp、开发环境缓存构建。
+
 :point_right:
 [![github](https://img.shields.io/github/release-date/imccode/styles-webpack-plugin.svg)](https://github.com/imccode/styles-webpack-plugin/releases)
 [![npm-version](https://img.shields.io/npm/v/styles-webpack-plugin.svg)](https://www.npmjs.com/package/styles-webpack-plugin)
@@ -19,3 +21,53 @@ npm install styles-webpack-plugin -D
 
 pnpm install styles-webpack-plugin -D
 ```
+
+## 使用方式
+
+```javascript
+const StylesWebpackPlugin = require('styles-webpack-plugin')
+
+module.exports = {
+  plugins: [new StylesWebpackPlugin()]
+}
+```
+
+```javascript
+const StylesWebpackPlugin = require('styles-webpack-plugin')
+
+module.exports = {
+  plugins: [
+    new StylesWebpackPlugin({
+      cssLoader: {
+        modules: true
+      },
+      framework: {
+        vue: true
+      }
+    })
+  ]
+}
+```
+
+## 注意
+
+项目默认使用`postcss`进行脚本转码，见[源码](./src/postcssConfig.ts)
+
+默认使用的插件：
+
+- `postcss-import` 处理css模块导入
+- `postcss-preset-env` 构建目标环境，按需自动添加浏览器支持的样式前缀
+- `postcss-url` 处理cssurl转换
+
+## 配置项
+
+具体配置项的数据类型见[types.ts](./src/types.ts)
+
+- `cacheDirectory` 生成缓存目录。 生成环境默认不开启，开发环境默认: `'./node_modules/.cache/style'`
+- `cssLoader` css-loader配置 详见：<https://github.com/webpack-contrib/css-loader>
+- `framework.vue` vue框架特殊处理 false
+- `gzip` 脚本文件的gizp压缩。默认开启，详见：<https://github.com/webpack-contrib/compression-webpack-plugin>
+
+按照[postcssConfig](https://github.com/postcss/postcss#usage)配置要求，例如创建`postcss.config.js`文件，最终会和默认配置合并。
+
+按照[browserslist](https://github.com/browserslist/browserslist#queries)配置要求，例如创建`.browserslistrc`，最终采用browserslist的配置要求生成代码。

src/mergeOptions.ts

@@ -1,15 +1,14 @@
-import { StylesWebpackPluginOptions, PostcssConfigType } from './types'
-import { Compiler } from 'webpack'
 import path from 'path'
+import { Compiler } from 'webpack'
+import { StylesWebpackPluginOptions } from './types'
 
 export default (options: StylesWebpackPluginOptions = {}, compiler: Compiler) => {
   // 默认配置
   const defaultOptions: StylesWebpackPluginOptions = {
     cacheDirectory:
       compiler.options.mode === 'production'
         ? false
-        : path.resolve(compiler.context, 'node_modules/.cache', 'style'),
-    postcssConfigType: PostcssConfigType.add
+        : path.resolve(compiler.context, 'node_modules/.cache', 'style')
   }
 
   const mergeOptions: StylesWebpackPluginOptions = {

src/postcssConfig.ts

@@ -2,15 +2,16 @@ import { cosmiconfigSync } from 'cosmiconfig'
 import postcssImport from 'postcss-import'
 import postcssPresetEnv from 'postcss-preset-env'
 import postcssUrl from 'postcss-url'
+import { Compiler } from 'webpack'
 import { PostcssConfiguration, SmartCosmiconfigResult } from './types'
 
-export default () => {
-  const defaultConfig: PostcssConfiguration = {
+export default (compiler: Compiler) => {
+  const postcssConfig = {
     ident: 'postcss',
     /**
      * 插件
      */
-    plugins: () => [
+    plugins: [
       /**
        * 处理css模块导入
        */
@@ -33,19 +34,37 @@ export default () => {
     'postcss'
   ).search()
 
-  let config = defaultConfig
-
   if (userPostcssConfig) {
-    config = userPostcssConfig.config
-
     const { plugins }: PostcssConfiguration = userPostcssConfig.config
-    if (plugins && Array.isArray(plugins)) {
-      const defaultPlugins = defaultConfig.plugins()
-      if (Array.isArray(defaultPlugins)) {
-        config.plugins = () => [...defaultPlugins, ...plugins]
+    if (plugins) {
+      let errors = []
+      let userPlugins = []
+      if (Array.isArray(plugins)) {
+        userPlugins = plugins
+      } else if (typeof plugins === 'function') {
+        userPlugins = plugins()
+      } else if (typeof plugins === 'object') {
+        userPlugins = Object.keys(plugins)
+          .map(name => {
+            try {
+              const postcssModule = require(name)
+              return postcssModule(plugins[name])
+            } catch (error) {
+              errors.push(error.toString())
+            }
+          })
+          .filter(item => !!item)
+      } else {
+        errors.push('Postcss plugins configuration error, Type should be Array, Function, Object')
       }
+
+      postcssConfig.plugins = [...postcssConfig.plugins, ...userPlugins]
+
+      compiler.hooks.emit.tap('StylesWebpackPlugin', compilation => {
+        errors.length > 0 && Array.prototype.push.apply(compilation.errors, errors)
+      })
     }
   }
 
-  return config
+  return postcssConfig
 }

src/rules.ts

@@ -1,11 +1,9 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { Compiler, RuleSetRule, RuleSetUse, RuleSetUseItem } from 'webpack'
 import postcssConfig from './postcssConfig'
-import { PostcssConfigType, StylesWebpackPluginOptions } from './types'
+import { StylesWebpackPluginOptions } from './types'
 
 export default (options: StylesWebpackPluginOptions, compiler: Compiler) => {
-  const postcssConfigs =
-    options.postcssConfigType === PostcssConfigType.custom ? {} : postcssConfig()
 
   const rules: RuleSetRule[] = []
 
@@ -47,7 +45,7 @@ export default (options: StylesWebpackPluginOptions, compiler: Compiler) => {
      */
     {
       loader: 'postcss-loader',
-      options: postcssConfigs
+      options: postcssConfig(compiler)
     }
   ]
 

src/types.ts

@@ -38,23 +38,20 @@ export interface StylesWebpackPluginOptions {
    * docs: https://github.com/webpack-contrib/compression-webpack-plugin
    */
   gzip?: false | CompressionPlugin.Options<any>
-  /** postcss配置的类型 */
-  postcssConfigType?: PostcssConfigType
 }
 
-export enum PostcssConfigType {
-  /** 完全自定义的配置 */
-  custom = 'custom',
-  /** 追加的方式 */
-  add = 'add'
-}
 
 /**
- * postcss 插件类型
+ * postcss 方法类型
  */
-export type PostcssPlugins = (
+ type PostcssFunctionPlugins = (
   loader?: object
-) => Array<(...args: any) => object> | { [key: string]: any }
+) => Array<any>
+
+/**
+ * postcss 插件类型
+ */
+export type PostcssPlugins =  { [key: string]: any } | PostcssFunctionPlugins
 
 /**
  * postcss配置

tsconfig.json

@@ -20,5 +20,5 @@
       "src/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "test"]
 }

types/mergeOptions.d.ts

@@ -1,4 +1,4 @@
-import { StylesWebpackPluginOptions } from './types';
 import { Compiler } from 'webpack';
+import { StylesWebpackPluginOptions } from './types';
 declare const _default: (options: StylesWebpackPluginOptions, compiler: Compiler) => StylesWebpackPluginOptions;
 export default _default;

types/postcssConfig.d.ts

@@ -1,3 +1,9 @@
-import { PostcssConfiguration } from './types';
-declare const _default: () => PostcssConfiguration;
+import { Compiler } from 'webpack';
+declare const _default: (compiler: Compiler) => {
+    ident: string;
+    /**
+     * 插件
+     */
+    plugins: any[];
+};
 export default _default;

types/types.d.ts

@@ -34,21 +34,17 @@ export interface StylesWebpackPluginOptions {
      * docs: https://github.com/webpack-contrib/compression-webpack-plugin
      */
     gzip?: false | CompressionPlugin.Options<any>;
-    /** postcss配置的类型 */
-    postcssConfigType?: PostcssConfigType;
-}
-export declare enum PostcssConfigType {
-    /** 完全自定义的配置 */
-    custom = "custom",
-    /** 追加的方式 */
-    add = "add"
 }
+/**
+ * postcss 方法类型
+ */
+declare type PostcssFunctionPlugins = (loader?: object) => Array<any>;
 /**
  * postcss 插件类型
  */
-export declare type PostcssPlugins = (loader?: object) => Array<(...args: any) => object> | {
+export declare type PostcssPlugins = {
     [key: string]: any;
-};
+} | PostcssFunctionPlugins;
 /**
  * postcss配置
  *
@@ -85,3 +81,4 @@ export declare type SmartCosmiconfigResult<T> = {
      */
     isEmpty?: boolean;
 } | null;
+export {};