feat: support extra less options in dev and build mode (umijs#112)

* feat: support extra less options in dev and build mode

* fix: change config name, add e2e test case

* fix: remove docz cache

README.md

@@ -493,6 +493,15 @@ import $inject_window_foo from 'foo';
 console.log($inject_window_foo);
 ```
 
+#### lessInRollupMode
+
+在 rollup 模式下做 less 编译，支持配置 less 在编译过程中的 Options
+
+* Type: `Object`
+* Default: `{}`
+
+可以配置 modifyVars 等， 详见 less 的 [Options 文档](http://lesscss.org/usage/#less-options)。
+
 #### lessInBabelMode
 
 在 babel 模式下做 less 编译，基于 [gulp-less](https://github.com/gulp-community/gulp-less)，默认不开启。

packages/father-build/src/getRollupConfig.ts

@@ -58,6 +58,7 @@ export default function(opts: IGetRollupConfigOpts): RollupOptions[] {
     typescriptOpts,
     nodeResolveOpts = {},
     disableTypeCheck,
+    lessInRollupMode = {},
   } = bundleOpts;
   const entryExt = extname(entry);
   const name = file || basename(entry, entryExt);
@@ -145,6 +146,7 @@ export default function(opts: IGetRollupConfigOpts): RollupOptions[] {
           {
             plugins: [new NpmImport({ prefix: '~' })],
             javascriptEnabled: true,
+            ...lessInRollupMode,
           },
         ],
       ],

packages/father-build/src/schema.test.ts

@@ -12,6 +12,7 @@ const successValidates = {
   extraBabelPlugins: [[]],
   extraBabelPresets: [[]],
   extraPostCSSPlugins: [[]],
+  lessInRollupMode: [{}],
   cssModules: [true, false, {}],
   autoprefixer: [{}],
   include: ['node_modules', /node_modules/],

packages/father-build/src/schema.ts

@@ -122,6 +122,9 @@ export default {
     inject: {
       type: 'object',
     },
+    lessInRollupMode: {
+      type: 'object'
+    },
     lessInBabelMode: {
       oneOf: [
         { type: 'boolean' },

packages/father-build/src/types.d.ts

@@ -80,6 +80,9 @@ export interface IBundleOptions {
   nodeResolveOpts?: {
     [value: string]: any;
   };
+  lessInRollupMode?: {
+    [opt: string]: any
+  }
 }
 
 export interface IOpts {

packages/father/src/doc/doc.e2e.ts

@@ -59,6 +59,7 @@ beforeAll(async () => {
   await doc('css-modules');
   await doc('config-theme');
   await doc('babel-extra-babel-presets-and-plugins');
+  await doc('less-options');
   browser = await puppeteer.launch({ args: ['--no-sandbox'] });
 });
 
@@ -119,6 +120,17 @@ test('babel-extra-babel-presets-and-plugins', async () => {
   expect(title).toEqual('p1|p2|p1|p2|haha');
 });
 
+test('less-options', async () => {
+  await page.goto(`http://localhost:${servers['less-options'].port}/`, {
+    waitUntil: 'networkidle2',
+  });
+  const buttonColor = await page.evaluate(() => {
+    const el = document.querySelectorAll('button')[1]
+    return window.getComputedStyle(el).color
+  });
+  expect(buttonColor).toEqual('rgb(255, 0, 0)');
+});
+
 afterAll(() => {
   Object.keys(servers).forEach(name => {
     servers[name].server.close();

packages/father/src/doc/doczrc.ts

@@ -115,6 +115,7 @@ export default {
             cssmodules: true,
             loaderOpts: {
               javascriptEnabled: true,
+              ...userConfig.lessInRollupMode
             },
           }),
           css({
@@ -125,6 +126,7 @@ export default {
             cssmodules: false,
             loaderOpts: {
               javascriptEnabled: true,
+              ...userConfig.lessInRollupMode
             },
           }),
         ]
@@ -154,6 +156,7 @@ export default {
             cssmodules: false,
             loaderOpts: {
               javascriptEnabled: true,
+              ...userConfig.lessInRollupMode
             },
           }),
           css({
@@ -164,6 +167,7 @@ export default {
             cssmodules: true,
             loaderOpts: {
               javascriptEnabled: true,
+              ...userConfig.lessInRollupMode
             },
           }),
         ]),

packages/father/src/fixtures/doc/less-options/.doc/assets.json

@@ -0,0 +1,7 @@
+{
+  "vendors.js": "/static/js/vendors.9cfde6cc.js",
+  "app.js": "/static/js/app.48e8e6e0d1bea43fcc95.js",
+  "button-index.css": "/static/css/button-index.48e8e6e0d1bea43fcc95.css",
+  "button-index.js": "/static/js/button-index.984dc1e1.js",
+  "index.html": "/index.html"
+}

packages/father/src/fixtures/doc/less-options/.doc/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="My awesome app using docz"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>My Doc</title><link rel="icon" type="image/x-icon" href="https://cdn-std.dprcdn.net/files/acc_649651/LUKiMl"><script src="https://gw.alipayobjects.com/os/lib/react/16.8.6/umd/react.production.min.js"></script><script src="https://gw.alipayobjects.com/os/lib/react-dom/16.8.6/umd/react-dom.production.min.js"></script></head><body><div id="root"></div><script src="/static/js/vendors.9cfde6cc.js"></script><script src="/static/js/app.48e8e6e0d1bea43fcc95.js"></script></body></html>

packages/father/src/fixtures/doc/less-options/.doc/static/css/button-index.48e8e6e0d1bea43fcc95.css

@@ -0,0 +1 @@
+.index_btn__2EqaA{color:red}