CSS Modules 配置不支持 camelCase 配置

[tomgao365]

问题描述
CSS Modules 配置不支持 camelCase 配置

复现步骤

module: {
      postcss: {
        cssModules: {
          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            camelCase: true,
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
 }

期望行为
支持 cssModules 完整的配置

报错信息

{ SyntaxError: unknown: Unexpected token, expected , (5:4)
  3 | const styles = {
  4 |   page: "index-module__page___1eOrK",
> 5 |   bt-group: "index-module__bt-group___13IGL"
    |     ^
  6 | };
  7 | const {} = {
  8 |   page: "index-module__page___1eOrK",
    at Parser.pp$5.raise (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp.expect (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:1749:33)
    at Parser.pp$3.parseObj (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3978:12)
    at Parser.pp$3.parseExprAtom (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3719:19)
    at Parser.parseExprAtom (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:7238:22)
    at Parser.pp$3.parseExprSubscripts (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (D:\Code\my-boilerplate\taro\node_modules\babylon\lib\index.js:3381:19)
  pos: 292,
  loc: Position { line: 5, column: 4 },
  _babel: true,
  codeFrame:
   '\u001b[0m \u001b[90m 3 | \u001b[39m\u001b[36mconst\u001b[39m styles \u001b[33m=\u001b[39m {\n \u001b[90m 4 | \u001b[39m  page\u001b[33m:\u001b[39m \u001b[32m"index-module__page___1eOrK"\u001b[39m\u001b[33m,\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 5 | \u001b[39m  bt\u001b[33m-\u001b[39mgroup\u001b[33m:\u001b[39m \u001b[32m"index-module__bt-group___13IGL"\u001b[39m\n \u001b[90m   | \u001b[39m    \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 6 | \u001b[39m}\u001b[33m;\u001b[39m\n \u001b[90m 7 | \u001b[39m\u001b[36mconst\u001b[39m {} \u001b[33m=\u001b[39m {\n \u001b[90m 8 | \u001b[39m  page\u001b[33m:\u001b[39m \u001b[32m"index-module__page___1eOrK"\u001b[39m\u001b[33m,\u001b[39m\u001b[0m' }

系统信息

• 操作系统: [Windows 10]
• Taro 版本 [e.g. v.1.2.4]
• Node.js 版本 [v.10.15.0]
• 报错平台 [weapp]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @luckyadam

[luckyadam]

默认支持中划线了，就不转成 camelCase 了

[youngluo]

默认支持中划线了，就不转成 camelCase 了

能支持一下吗

[Jokcy]

默认支持中划线了，就不转成 camelCase 了

中滑线在js中怎么引用，总不能className都写成 styles['xxx-yyy'] 这样吧

[JustinWang23]

cssLoaderOption: {
  localsConvention: 'camelCase',
  modules: {
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

看起来可以通过自定义css-loader来解决

[toFrankie]

仅供参考：

1. 若有，移除 postcss.cssModules 配置项
2. 添加 cssLoaderOption 配置项

cssLoaderOption: {
  localsConvention: 'camelCase',
  modules: {
    mode: 'local',
    localIdentName: '[name]__[local]___[hash:base64:5]',
    getLocalIdent: (context, localIndentName, localName, options) => {
      if (
        context.resourcePath.includes('node_modules/') ||
        context.resourcePath.endsWith('.global.scss')
      ) {
        return localName
      }
    }
  }
}

其中，项目中我将全局 CSS 设为 .global.scss，除了 node_modules 之外的（因为类似 node_modules/@tarojs/components/ 组件的样式是不能修改的，否则就乱套了），其余所有选择器均修改为 [name]__[local]___[hash:base64:5] 以实现 CSS Modules 等。

有特殊需求，按需调整 getLocalIdent 函数即可。

[KaivOU]

cssLoaderOption: {
  localsConvention: 'camelCase',
  modules: {
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

看起来可以通过自定义css-loader来解决
你那个写法还是无效，需要修改一下，cssLoaderOption.modules.exportLocalsConvention: 'camelCase',参考cssloader官方API，https://github.com/webpack-contrib/css-loader, 改完后就有效果了,即可去掉postcss里的cssModules
注意：要加上getLocalIdent过滤，否则taro-ui样式会失效

mini: {
            cssLoaderOption: {
                modules: {
                    exportLocalsConvention: 'camelCase',
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                   // 注意：过滤，匹配路径是taro-ui的样式文件，均返回原class名称localName
                    getLocalIdent: (context, localIdentName, localName, options) => {
                        if (context.resourcePath.includes('taro-ui')) {
                            return localName;
                        }
                    }
                }
            },
            postcss: {
                pxtransform: {
                    enable: true,
                    config: {}
                },
                url: {
                    enable: true,
                    config: {
                        limit: 1024 // 设定转换尺寸上限
                    }
                }
                // cssModules: {
                //     enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
                //     config: {
                //         namingPattern: 'module', // 转换模式，取值为 global/module
                //         generateScopedName: '[name]__[local]___[hash:base64:5]'
                //     }
                // }
            },