feat: add css-modules-typescript-loader option (umijs#4373)

zhanba · sorrycc · web-flow · commit 831cabd078c8 · 2020-04-07T11:20:46.000+08:00
* feat: add css-modules-typescript-loader option

* docs: update doc

* fix: delete unused

* test: add typecheck test

* docs: update option order

* fix: change option

* Update packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/config.ts

* Update packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/expect.ts

* Update docs/config/README.md

* Update docs/config/README.zh-CN.md

* Update docs/config/README.zh-CN.md

Co-authored-by: chencheng (云谦) &lt;sorrycc@gmail.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@
 .umi-test
 **/fixtures/**/dist
 .now
+**/*.less.d.ts
+**/*.css.d.ts
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -162,6 +162,21 @@ export default {
 
 设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
 
+## cssModulesTypescriptLoader
+
+* type: `{ mode: 'verify' | 'emit' }`
+* Default: `undefined`
+
+Emits TypeScript declaration files matching your CSS Modules in the same location as your source files, e.g. src/Component.css will generate src/Component.css.d.ts.
+
+```js
+export default {
+  cssModulesTypescriptLoader: {},
+}
+  }
+}
+```
+
 ## cssnano
 
 * Type: `{ mergeRules: false, minifyFontValues: { removeQuotes: false } }`
diff --git a/docs/config/README.zh-CN.md b/docs/config/README.zh-CN.md
@@ -160,6 +160,32 @@ export default {
 
 设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
 
+
+## cssModulesTypescriptLoader
+
+* type: `{ mode: 'verify' | 'emit' }`
+* Default: `undefined`
+
+对按照css modules方式引入的css/less等样式文件，自动生成对应的ts类型定义文件。
+
+比如：
+
+```js
+export default {
+  cssModulesTypescriptLoader: {},
+}
+```
+
+等同于，
+
+```js
+export default {
+  cssModulesTypescriptLoader: {
+    mode: 'emit',
+  },
+}
+```
+
 ## cssnano
 
 * Type: `{ mergeRules: false, minifyFontValues: { removeQuotes: false } }`
diff --git a/packages/bundler-webpack/package.json b/packages/bundler-webpack/package.json
@@ -35,6 +35,7 @@
     "babel-loader": "8.1.0",
     "copy-webpack-plugin": "5.1.1",
     "css-loader": "3.4.2",
+    "css-modules-typescript-loader": "4.0.0",
     "file-loader": "6.0.0",
     "friendly-errors-webpack-plugin": "1.7.0",
     "less": "3.11.1",
diff --git a/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/config.ts b/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/config.ts
@@ -0,0 +1,3 @@
+export default {
+  cssModulesTypescriptLoader: {}
+}
diff --git a/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/expect.ts b/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/expect.ts
@@ -0,0 +1,26 @@
+import { IExpectOpts } from '../types';
+import * as ts from 'typescript';
+import {resolve} from 'path';
+import { createDebug } from '@umijs/utils';
+
+const debug = createDebug('umi:dtstest');
+
+const typeCheckFile = (files: string[]): boolean => {
+  let program = ts.createProgram(files, {});
+
+  let diagnostic: readonly ts.Diagnostic[] = [];
+  for (const sourceFile of program.getSourceFiles()) {
+    if (!sourceFile.isDeclarationFile) {
+      diagnostic = [...diagnostic, ...program.getSemanticDiagnostics(sourceFile)];
+    }
+  }
+
+  debug('diagnostic: ', diagnostic);
+  return diagnostic.length === 0;
+}
+
+export default ({ indexCSS, files, cwd }: IExpectOpts) => {
+  expect(indexCSS).toContain(`.a___`);
+  expect(indexCSS).toContain(`.test___`);
+  expect(typeCheckFile([resolve(cwd, 'index.ts')])).toBe(true);
+}
diff --git a/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/index.ts b/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/index.ts
@@ -0,0 +1,6 @@
+import styles from './style.less'
+import styles2 from './style2.css'
+
+const classname = styles.a
+
+const classname2 = styles2.test
diff --git a/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/style.less b/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/style.less
@@ -0,0 +1,3 @@
+.a {
+    color: white;
+}
diff --git a/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/style2.css b/packages/bundler-webpack/src/fixtures/css-modules-typescript-loader/style2.css
@@ -0,0 +1,3 @@
+.test {
+    display: inline;
+}
diff --git a/packages/bundler-webpack/src/getConfig/css.ts b/packages/bundler-webpack/src/getConfig/css.ts
@@ -63,6 +63,13 @@ export function createCSSRule({
         });
     }
 
+    if (isDev && isCSSModules && config.cssModulesTypescriptLoader) {
+      rule
+        .use('css-modules-typescript-loader')
+        .loader(require.resolve('css-modules-typescript-loader'))
+        .options(config.cssModulesTypescriptLoader);
+    }
+
     rule
       .use('css-loader')
       .loader(require.resolve('css-loader'))
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -238,6 +238,7 @@ export interface IConfig extends IConfigCore {
   };
   chunks?: string[];
   cssLoader?: object;
+  cssModulesTypescriptLoader?: { mode: 'verify' | 'emit' };
   cssnano?: object;
   copy?: string[];
   define?: {
diff --git a/yarn.lock b/yarn.lock
@@ -5857,6 +5857,14 @@ css-modules-loader-core@^1.1.0:
     postcss-modules-scope "1.1.0"
     postcss-modules-values "1.3.0"
 
+css-modules-typescript-loader@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/css-modules-typescript-loader/-/css-modules-typescript-loader-4.0.0.tgz#17c0924107f45c7d9998fb59be5c59d6398aac5c"
+  integrity sha512-K6ii0+kt2i3sHN+VKTWdF728x+N4PFitsjE8aldUO+N98XlZhanJYIEZrnh4FMTZzDvOjyBialU0LnkCSeeUig==
+  dependencies:
+    line-diff "^2.0.1"
+    loader-utils "^1.2.3"
+
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@@ -10127,6 +10135,11 @@ less@3.9.0:
     request "^2.83.0"
     source-map "~0.6.0"
 
+levdist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/levdist/-/levdist-1.0.0.tgz#91d7a3044964f2ccc421a0477cac827fe75c5718"
+  integrity sha1-kdejBElk8szEIaBHfKyCf+dcVxg=
+
 leven@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -10152,6 +10165,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+line-diff@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/line-diff/-/line-diff-2.1.0.tgz#4c407100471b4ebe1617bf37e877554a67abaa08"
+  integrity sha512-EciuZHwQfFG5ITBdIjN+zyJtcJXRVgbDSxtv6sz8BBf16rw4iGRO28AwIDVlNSoKlpDzp1UzRti54j3wBlU9Fw==
+  dependencies:
+    levdist "^1.0.0"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ cssModulesTypescriptLoader: {}`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.test {`
	`2`	`+ display: inline;`
	`3`	`+}`