feat(stylus): 添加stylus支持

packages/af-webpack/src/getUserConfig/configs/stylus.js

@@ -0,0 +1,11 @@
+import assert from 'assert';
+import { isPlainObject } from 'lodash';
+
+export default function() {
+  return {
+    name: 'stylus',
+    validate(val) {
+      assert(isPlainObject(val), `The stylus config must be Plain Object, but got ${val}`);
+    },
+  };
+}

packages/af-webpack/src/getWebpackConfig/css.js

@@ -9,6 +9,9 @@ const DEFAULT_BROWSERS = [
   'not ie < 9', // React doesn't support IE8 anyway
 ];
 
+const DEFAULT_STYLUS_LOADER = 'stylus-loader';
+const DEFAULT_STYLUS_OPTIONS = { preferPathResolver: 'webpack' };
+
 export default function(webpackConfig, opts) {
   const isDev = process.env.NODE_ENV === 'development';
   const cssOpts = {
@@ -68,7 +71,7 @@ export default function(webpackConfig, opts) {
     hasSassLoader = false;
   }
 
-  function applyCSSRules(rule, { cssModules, less, sass }) {
+  function applyCSSRules(rule, { cssModules, less, sass, stylus }) {
     if (!opts.ssr) {
       if (opts.styleLoader) {
         rule
@@ -130,6 +133,35 @@ export default function(webpackConfig, opts) {
         .loader(require.resolve('sass-loader'))
         .options(opts.sass);
     }
+
+    // 开始添加 stylus 支持
+    if (stylus) {
+      const {
+        loader: stylusLoader = DEFAULT_STYLUS_LOADER,
+        options: stylusOptions = DEFAULT_STYLUS_OPTIONS,
+        poststylus,
+      } = opts.stylus || {};
+
+      // 避免项目启动时出现异常 Error: Cannot find module 'stylus-loader'
+      let stylusLoaderPath;
+      try {
+        stylusLoaderPath = require.resolve(stylusLoader);
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+
+      // 如果安装了 stylus-loader 模块
+      if (stylusLoaderPath) {
+        rule
+          .use('stylus-loader')
+          .loader(stylusLoaderPath)
+          .options(stylusOptions);
+
+        // 如果使用了 poststylus, 需要移除 postcss-loader
+        if (poststylus) {
+          rule.delete('postcss-loader');
+        }
+      }
+    }
   }
 
   if (opts.cssModulesExcludes) {
@@ -146,6 +178,7 @@ export default function(webpackConfig, opts) {
       applyCSSRules(config, {
         less: ext === '.less',
         sass: ext === '.sass' || ext === '.scss',
+        stylus: ext === '.styl' || ext === '.stylus',
       });
     });
   }
@@ -162,14 +195,18 @@ export default function(webpackConfig, opts) {
       cssModules: true,
       sass: true,
     });
+    applyCSSRules(webpackConfig.module.rule('.module.stylus').test(/\.module\.styl(us)?$/), {
+      cssModules: true,
+      stylus: true,
+    });
   }
 
   function cssExclude(filePath) {
     if (/node_modules/.test(filePath)) {
       return true;
     }
     if (opts.cssModulesWithAffix) {
-      if (/\.module\.(css|less|sass|scss)$/.test(filePath)) return true;
+      if (/\.module\.(css|less|sass|scss|styl(us)?)$/.test(filePath)) return true;
     }
     if (opts.cssModulesExcludes) {
       for (const exclude of opts.cssModulesExcludes) {
@@ -239,6 +276,27 @@ export default function(webpackConfig, opts) {
       sass: true,
     },
   );
+  applyCSSRules(
+    webpackConfig.module
+      .rule('stylus')
+      .test(/\.styl(us)?$/)
+      .exclude.add(cssExclude)
+      .end(),
+    {
+      cssModules: !opts.disableCSSModules,
+      stylus: true,
+    },
+  );
+  applyCSSRules(
+    webpackConfig.module
+      .rule('stylus-in-node_modules')
+      .test(/\.styl(us)?$/)
+      .include.add(/node_modules/)
+      .end(),
+    {
+      stylus: true,
+    },
+  );
 
   const hash = !isDev && opts.hash ? '.[contenthash:8]' : '';
   if (!opts.ssr && !opts.styleLoader) {

packages/af-webpack/src/getWebpackConfig/index.js

@@ -6,7 +6,7 @@ import { EOL } from 'os';
 import assert from 'assert';
 import { getPkgPath, shouldTransform } from './es5ImcompatibleVersions';
 import resolveDefine from './resolveDefine';
-import send, { STARTING } from '../send';
+// import send, { STARTING } from '../send';
 
 function makeArray(item) {
   if (Array.isArray(item)) return item;
@@ -96,7 +96,7 @@ export default function(opts) {
     .exclude.add(/\.json$/)
     .add(/\.(js|jsx|ts|tsx|mjs|wasm)$/)
     .add(/\.(graphql|gql)$/)
-    .add(/\.(css|less|scss|sass)$/);
+    .add(/\.(css|less|scss|sass|styl(us)?)$/);
   if (opts.urlLoaderExcludes) {
     opts.urlLoaderExcludes.forEach(exclude => {
       rule.add(exclude);

packages/umi-build-dev/src/plugins/global-css.js

@@ -4,6 +4,8 @@ import { existsSync } from 'fs';
 export default function(api) {
   const { paths, winPath } = api;
   const cssFiles = [
+    join(paths.absSrcPath, 'global.styl'),
+    join(paths.absSrcPath, 'global.stylus'),
     join(paths.absSrcPath, 'global.sass'),
     join(paths.absSrcPath, 'global.scss'),
     join(paths.absSrcPath, 'global.less'),