feat: support style

shuvijs · Aug 17, 2021 · 3d312c8 · 3d312c8
1 parent 3ad0ace
commit 3d312c8
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/packages/platform-mp/src/lib/bundler/config.ts b/packages/platform-mp/src/lib/bundler/config.ts
@@ -56,7 +56,7 @@ export function config(api: IApi) {
       });
       config.entryPoints.clear();
       config.optimization.clear();
-      modifyStyle(config);
+      modifyStyle(config, 'bxss');
       config.output.chunkFilename(
         `${
           process.env.NODE_ENV === 'development'

diff --git a/packages/platform-mp/src/lib/bundler/modifyStyle.ts b/packages/platform-mp/src/lib/bundler/modifyStyle.ts
@@ -30,24 +30,27 @@ import { WebpackChain } from '@shuvi/toolpack/lib/webpack/config';
 //     postcss-url // inline-source 已实现
 //     postcss-import import from node_modules // 没有实现，感觉没用
 
-const miniCssExtractPluginOptions: [MiniCssExtractPlugin.PluginOptions] = [
-  {
-    filename: function (pathData: any) {
-      return `${pathData.chunk!.name}.wxss`;
+function generateMiniCssExtractPluginOptions(
+  extension: string
+): [MiniCssExtractPlugin.PluginOptions] {
+  return [
+    {
+      filename: function (pathData: any) {
+        return `${pathData.chunk!.name}.${extension}`;
+      }
     }
-  }
-];
+  ];
+}
 
-export default function ensureExtractLoader(config: WebpackChain) {
+export default function ensureExtractLoader(
+  config: WebpackChain,
+  extension: string = 'bxss'
+) {
   const oneOfs = config.module.rule('main').oneOfs;
   const publicPath = config.output.get('publicPath');
   const ruleList = ['css-module', 'css', 'scss-module', 'scss'];
   ruleList.forEach(ruleName => {
     const ruleUses = oneOfs.get(ruleName).uses;
-    // modify test regex
-    if (['css-module', 'css'].includes(ruleName)) {
-      oneOfs.get(ruleName).test(/\.(css|wxss)$/);
-    }
     if (ruleUses.get('style-loader')) {
       // replace style-loader to extract-loader
       ruleUses
@@ -81,10 +84,13 @@ export default function ensureExtractLoader(config: WebpackChain) {
   const plugins = config.plugins.get('mini-css-extract-plugin');
 
   if (plugins) {
-    plugins.tap(args => miniCssExtractPluginOptions);
+    plugins.tap(args => generateMiniCssExtractPluginOptions(extension));
   } else {
     config
       .plugin('mini-css-extract-plugin')
-      .use(MiniCssExtractPlugin, miniCssExtractPluginOptions);
+      .use(
+        MiniCssExtractPlugin,
+        generateMiniCssExtractPluginOptions(extension)
+      );
   }
 }
diff --git a/test/fixtures/basic-miniprogram/src/pages/index/index.jsx b/test/fixtures/basic-miniprogram/src/pages/index/index.jsx
@@ -3,6 +3,7 @@ import { View } from '@binance/mp-components'
 import { navigateTo } from '@binance/mp-service'
 import consoleLogMain from '../../utils/consoleLogMain'
 import './index.scss'
+import style from './test.scss'
 export default class Index extends Component {
   componentDidMount() {
     consoleLogMain()
@@ -11,7 +12,7 @@ export default class Index extends Component {
   render () {
     return (
       <View className='index'>
-        <View onClick={() => navigateTo({ url: '/pages/sub/index' })}>
+        <View className={style.color} onClick={() => navigateTo({ url: '/pages/sub/index' })}>
           Go to sub
         </View>
         <View onClick={() => navigateTo({ url: '/pages/detail/index' })}>

diff --git a/test/fixtures/basic-miniprogram/src/pages/index/index.scss b/test/fixtures/basic-miniprogram/src/pages/index/index.scss
@@ -1,6 +1,7 @@
 @import '../../css/vars';
 
-.background-div {
+.index {
   background-color: $black;
+  color: aquamarine;
 }
 
diff --git a/test/fixtures/basic-miniprogram/src/pages/index/test.scss b/test/fixtures/basic-miniprogram/src/pages/index/test.scss
@@ -0,0 +1,3 @@
+.color{
+  color: white;
+}