Merge branch 'main' of github.com:DouyinFE/semi-design

.gitattributes

@@ -1,2 +1,6 @@
-*  linguist-detectable=false；
-packages/* linguist-detectable=true；
+src/*  -linguist-detectable
+*.test.js -linguist-detectable
+*.storie.js -linguist-detectable
+packages/* linguist-detectable
+*.tsx linguist-language=TypeScript
+*.jsx linguist-language=JavaScript

packages/semi-foundation/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
+@import './option.scss';
 @import './variables.scss';
 @import './mixin.scss';
-@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;

packages/semi-scss-compile/README.md

@@ -15,11 +15,11 @@ There are mainly the following two usage scenarios:
 ```shell
 npm i -g @douyinfe/semi-scss-compile
 
-semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --icon="path/to/'@douyinfe/semi-icons'" --output="path/to/output.css" --min=true
+semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --icon="path/to/'@douyinfe/semi-icons'" --output="path/to/output.css" --min
 
 # or for short
 
-semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinfe/semi-icons'" -o "path/to/output.css" -m true
+semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinfe/semi-icons'" -o "path/to/output.css" -m
 
 ```
 

packages/semi-scss-compile/src/bin.ts

@@ -1,27 +1,33 @@
 #!/usr/bin/env node
 
-import arg from "arg";
-import { compile } from "./index";
+import arg from 'arg';
+import { compile } from './index';
 
 const main = () => {
     const userArgs = arg({
-        "--foundation": String,
-        "--theme": String,
-        "--output": String,
-        "--icon":String,
-        "--min": Boolean,
+        '--foundation': String,
+        '--theme': String,
+        '--output': String,
+        '--icon': String,
+        '--min': Boolean,
 
-        "-f": "--foundation",
-        "-t": "--theme",
-        "-i":"--icon",
-        "-o": "--output",
-        "-m": "--min"
-    }, {permissive: true});
-    const {"--foundation": foundationPath, '--theme': themePath, '--output': outputPath,'--icon':iconPath,'--min': isMin} = userArgs;
+        '-f': '--foundation',
+        '-t': '--theme',
+        '-i': '--icon',
+        '-o': '--output',
+        '-m': '--min'
+    }, { permissive: true });
+    const {
+        '--foundation': foundationPath,
+        '--theme': themePath,
+        '--output': outputPath,
+        '--icon': iconPath,
+        '--min': isMin
+    } = userArgs;
     console.log(`foundationPath: ${foundationPath},\nthemePath: ${themePath},\noutputPath: ${outputPath}\n`);
     if (foundationPath && themePath && iconPath && outputPath) {
         compile({
-            foundationPath,themePath,iconPath,outputPath,isMin
+            foundationPath, themePath, iconPath, outputPath, isMin
         });
     } else {
         console.error('Error: lack of args.');

packages/semi-scss-compile/src/index.ts

@@ -1,7 +1,7 @@
-import generateScssMap from "./utils/generateSCSSMap";
-import writeFile from "./utils/writeFile";
-import compilerFromScssMap from "./utils/compiler";
-import path from "path";
+import generateScssMap from './utils/generateSCSSMap';
+import writeFile from './utils/writeFile';
+import compilerFromScssMap from './utils/compiler';
+import path from 'path';
 import fs from 'fs-extra';
 
 
@@ -13,9 +13,9 @@ export interface Options {
     isMin?: boolean,
 }
 
-const compile = ({foundationPath, themePath, iconPath, outputPath, isMin = false}: Options) => {
+const compile = ({ foundationPath, themePath, iconPath, outputPath, isMin = false }: Options) => {
     const scssMap = generateScssMap(foundationPath, themePath, iconPath);
-    const tempDir = writeFile(scssMap)
+    const tempDir = writeFile(scssMap);
     const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
     fs.outputFileSync(outputPath, result.css);
 };

packages/semi-scss-compile/src/utils/compiler.ts

@@ -2,7 +2,11 @@ import sass from 'sass';
 
 
 const compile = (entryScssPath: string, isMin: boolean = false) => {
-    const result = sass.renderSync({ file: entryScssPath, outputStyle: isMin ? 'compressed' : 'expanded' });
+    const result = sass.renderSync({
+        file: entryScssPath,
+        outputStyle: isMin ? 'compressed' : 'expanded',
+        charset: false
+    });
     return result;
 };
 

packages/semi-scss-compile/src/utils/generateSCSSMap.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import fs from "fs-extra";
+import fs from 'fs-extra';
 import { set } from 'lodash';
 
 const lodash = { set };
@@ -44,7 +44,7 @@ const generateThemeScssMap = (themePath: string) => {
         const scssAbsolutePath = path.join(themePath, 'scss', fileName);
         if (fs.existsSync(scssAbsolutePath)) {
             //in theme folder
-            themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, { encoding: "utf8" });
+            themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, { encoding: 'utf8' });
         }
     }
     // console.log(themeScssMap)

packages/semi-scss-compile/src/utils/writeFile.ts

@@ -1,8 +1,8 @@
 import fs from 'fs-extra';
 import path from 'path';
 import os from 'os';
-import generateScssMap from "./generateSCSSMap";
-import { cloneDeep, omit } from "lodash";
+import generateScssMap from './generateSCSSMap';
+import { cloneDeep, omit } from 'lodash';
 
 const lodash = { cloneDeep, omit };
 
@@ -22,7 +22,7 @@ const writeThemeScss = (scssMap: (ReturnType<typeof generateScssMap>)['theme'],
     fs.emptyDirSync(themeDirPath);
 
     for (const scssFileName of Object.keys(scssMap)) {
-        fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, { encoding: "utf8" });
+        fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, { encoding: 'utf8' });
     }
     return;
 };
@@ -52,11 +52,11 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
 
 
     //----- inject component token file local.scss to component's variables.scss -----
-    const themeLocalRaw = scssMap.theme["local.scss"];
+    const themeLocalRaw = scssMap.theme['local.scss'];
     if (themeLocalRaw) {
         for (const componentName of Object.keys(scssMap['components'])) {
-            if (scssMap["components"][componentName]['variables.scss']) {
-                scssMap["components"][componentName]['variables.scss'] += `\n\n\n\n//inject custom theme variables\n${themeLocalRaw}`;
+            if (scssMap['components'][componentName]['variables.scss']) {
+                scssMap['components'][componentName]['variables.scss'] += `\n\n\n\n//inject custom theme variables\n${themeLocalRaw}`;
             }
         }
     }
@@ -64,7 +64,7 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
 
     return {
         ...{
-            components: scssMap["components"],
+            components: scssMap['components'],
             theme: lodash.omit(scssMap['theme'], 'local.scss')
         },
         index: compilerEntryContent
@@ -76,10 +76,10 @@ const writeFile = (scssMap: ReturnType<typeof generateScssMap>, tempDir: string
     fs.emptyDirSync(tempDir);
 
     const finalScssMapWaitForCompiling = preProcessScssMap(scssMap);
-    writeComponentScss(finalScssMapWaitForCompiling["components"], tempDir);
+    writeComponentScss(finalScssMapWaitForCompiling['components'], tempDir);
     writeThemeScss(finalScssMapWaitForCompiling['theme'], tempDir);
     //write compile entry
-    fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], { encoding: "utf8" });
+    fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], { encoding: 'utf8' });
     return tempDir;
 };
 

packages/semi-webpack/README.md

@@ -147,4 +147,17 @@ In the compilation phase, whether to exclude css references.Used to solve the pr
 
 Type: `webpack NormalModule`
 
+##### options.extractCssOptions.loader
+
+Type: `String`
+
+The path of webpack loader that extract css.
+
+##### options.extractCssOptions.loaderOptions
+
+Type: `Object`
+
+The options of webpack loader that extract css.
+
+
 In webpack@5, some hooks need to be obtained through api `NormalModule.getCompilationHooks`. But in some scenarios, webpack will not be installed, such as Next.js. Therefore, the user is required to pass in NormalModule as a parameter.

packages/semi-webpack/src/semi-webpack-plugin.ts

@@ -5,13 +5,19 @@ const _NormalModule_ = require('webpack/lib/NormalModule');
 export interface WebpackContext {
     NormalModule?: any;
 }
+
+export interface ExtractCssOptions {
+    loader: string;
+    loaderOptions?: any;
+}
 export interface SemiWebpackPluginOptions {
     theme?: string | SemiThemeOptions;
     prefixCls?: string;
     variables?: {[key: string]: string | number};
     include?: string;
     omitCss?: boolean;
-    webpackContext?: WebpackContext
+    webpackContext?: WebpackContext;
+    extractCssOptions?: ExtractCssOptions;
 }
 
 export interface SemiThemeOptions {
@@ -39,7 +45,7 @@ export default class SemiWebpackPlugin {
                         if (this.options.prefixCls) {
                             this.customPrefix(module, this.options.prefixCls);
                         }
-                    })
+                    });
                 } else {
                     compilation.hooks.normalModuleLoader.tap('SemiPlugin', (context: any, module: any) => {
                         if (this.options.omitCss) {
@@ -50,7 +56,7 @@ export default class SemiWebpackPlugin {
                         if (this.options.prefixCls) {
                             this.customPrefix(module, this.options.prefixCls);
                         }
-                    })
+                    });
                 }
             }
         });
@@ -82,10 +88,14 @@ export default class SemiWebpackPlugin {
                 name: this.options.theme
             };
             if (!this.hasSemiThemeLoader(module.loaders)) {
+                const lastLoader = this.options.extractCssOptions ? {
+                    loader: this.options.extractCssOptions.loader,
+                    options: this.options.extractCssOptions.loaderOptions || {}
+                } : {
+                    loader: styleLoader
+                };
                 module.loaders = [
-                    {
-                        loader: styleLoader
-                    },
+                    lastLoader,
                     {
                         loader: cssLoader
                     }, {