feat(css modules): generateScopedName 支持设为函数 (NervJS#2058)

fjc0k · Apr 1, 2019 · 3e27853 · 3e27853
1 parent 242688b
commit 3e27853
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/docs/css-modules.md b/docs/css-modules.md
@@ -50,6 +50,11 @@ h5: {
 - `global`，表示全局转换，所有样式文件都会经过 CSS Modules 转换处理，除了文件名中包含 `.global.` 的样式文件
 - `module`，表示自定义转换，只有文件名中包含 `.module.` 的样式文件会经过 CSS Modules 转换处理
 
+`generateScopedName` 支持传入字符串和函数：
+
+- `字符串`，其格式见：[https://github.com/webpack/loader-utils#interpolatename](https://github.com/webpack/loader-utils#interpolatename)，值得指出的是，可使用 `[local]` 取其原类名
+- `函数`，其类型定义为 `(localName: string, absoluteFilePath: string) => string`，其中 `localName` 为原类名，`absoluteFilePath` 为文件的绝对路径，返回值将作为新的类名
+
 **推荐使用自定义转换模式，这样的话就不会影响到一些第三方库的样式了**
 
 CSS Modules 使用方式如下

diff --git a/packages/taro-cli/src/weapp.js b/packages/taro-cli/src/weapp.js
@@ -987,20 +987,20 @@ async function compileScriptFile (content, sourceFilePath, outputFilePath, adapt
   return res.code
 }
 
-async function checkCliAndFrameworkVersion () {
-  const frameworkName = `@tarojs/taro-${buildAdapter}`
-  const frameworkVersion = Util.getInstalledNpmPkgVersion(frameworkName, nodeModulesPath)
-  if (frameworkVersion) {
-    if (frameworkVersion !== Util.getPkgVersion()) {
-      Util.printLog(Util.pocessTypeEnum.ERROR, '版本问题', `Taro CLI 与本地安装的小程序框架 ${frameworkName} 版本不一致，请确保一致`)
-      console.log(`Taro CLI: ${Util.getPkgVersion()}`)
-      console.log(`${frameworkName}: ${frameworkVersion}`)
-      process.exit(1)
-    }
-  } else {
-    Util.printLog(Util.pocessTypeEnum.WARNING, '依赖安装', chalk.red(`项目依赖 ${frameworkName} 未安装，或安装有误！`))
-  }
-}
+// async function checkCliAndFrameworkVersion () {
+//   const frameworkName = `@tarojs/taro-${buildAdapter}`
+//   const frameworkVersion = Util.getInstalledNpmPkgVersion(frameworkName, nodeModulesPath)
+//   if (frameworkVersion) {
+//     if (frameworkVersion !== Util.getPkgVersion()) {
+//       Util.printLog(Util.pocessTypeEnum.ERROR, '版本问题', `Taro CLI 与本地安装的小程序框架 ${frameworkName} 版本不一致，请确保一致`)
+//       console.log(`Taro CLI: ${Util.getPkgVersion()}`)
+//       console.log(`${frameworkName}: ${frameworkVersion}`)
+//       process.exit(1)
+//     }
+//   } else {
+//     Util.printLog(Util.pocessTypeEnum.WARNING, '依赖安装', chalk.red(`项目依赖 ${frameworkName} 未安装，或安装有误！`))
+//   }
+// }
 
 function buildProjectConfig () {
   let projectConfigFileName = `project.${buildAdapter}.json`
@@ -1485,7 +1485,9 @@ function processStyleUseCssModule (styleObj) {
   const context = process.cwd()
   let scopedName
   if (generateScopedName) {
-    scopedName = genericNames(generateScopedName, { context })
+    scopedName = typeof generateScopedName === 'function'
+      ? (local, filename) => generateScopedName(local, filename)
+      : genericNames(generateScopedName, { context })
   } else {
     scopedName = (local, filename) => Scope.generateScopedName(local, path.relative(context, filename))
   }

diff --git a/packages/taro-webpack-runner/src/util/chain.ts b/packages/taro-webpack-runner/src/util/chain.ts
@@ -198,6 +198,8 @@ const getModule = ({
 
   const cssModuleOptions: PostcssOption.cssModules = recursiveMerge({}, defaultCssModuleOption, postcssOption.cssModules)
 
+  const { namingPattern, generateScopedName } = cssModuleOptions.config!
+
   const cssOptions = [
     {
       importLoaders: 1,
@@ -207,12 +209,16 @@ const getModule = ({
     cssLoaderOption
   ]
   const cssOptionsWithModule = [
-    {
-      importLoaders: 1,
-      sourceMap: enableSourceMap,
-      modules: cssModuleOptions.config!.namingPattern === 'module' ? true : 'global',
-      localIdentName: cssModuleOptions.config!.generateScopedName
-    },
+    Object.assign(
+      {
+        importLoaders: 1,
+        sourceMap: enableSourceMap,
+        modules: namingPattern === 'module' ? true : 'global'
+      },
+      typeof generateScopedName === 'function'
+        ? { getLocalIdent: (context, _, localName) => generateScopedName(localName, context.resourcePath) }
+        : { localIdentName: generateScopedName }
+    ),
     cssLoaderOption
   ]
   const additionalBabelOptions = {

diff --git a/packages/taro-webpack-runner/src/util/types.ts b/packages/taro-webpack-runner/src/util/types.ts
@@ -16,7 +16,7 @@ type TogglableOptions<T = Option> = {
 export namespace PostcssOption {
   export type cssModules = TogglableOptions<{
     namingPattern: 'global' | string;
-    generateScopedName: string;
+    generateScopedName: string | ((localName: string, absoluteFilePath: string) => string);
   }>;
 }