feat: split name module style block

searchfe · Apr 6, 2022 · da0a0aa · da0a0aa
1 parent e6d2307
commit da0a0aa
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "hash-sum": "^2.0.0"
   },
   "peerDependencies": {
-    "san-ssr": ">1.0.0",
-    "san-loader": ">0.3.1"
+    "san-loader": "^0.3.4",
+    "san-ssr": ">1.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint",
@@ -64,7 +64,7 @@
     "less-loader": "^7.0.2",
     "lint-staged": "^10.0.0",
     "memfs": "^3.2.0",
-    "san-loader": "^0.3.1",
+    "san-loader": "^0.3.4",
     "san-ssr": ">1.0.0",
     "semantic-release": "^17.3.4",
     "semantic-release-cli": "^5.4.2",

diff --git a/src/lib/callSanSsr.ts b/src/lib/callSanSsr.ts
@@ -32,10 +32,25 @@ export function callSanSsr(
     }
 
     const stylesRes = styles?.reduce((pre, cur) => {
-        Object.assign(pre.locals, cur.locals);
-        pre.cssCode += ('\n' + cur.cssCode);
+        if (cur.name) {
+            pre.namedStyle.push({
+                name: cur.name,
+                locals: cur.locals,
+                cssCode: cur.cssCode
+            });
+        }
+        else {
+            Object.assign(pre.defaultStyle.locals, cur.locals);
+            pre.defaultStyle.cssCode += ('\n' + cur.cssCode);
+        }
         return pre;
-    }, {locals: {}, cssCode: ''} as {locals: Record<string, string>, cssCode: string});
+    }, {
+        defaultStyle: {
+            locals: {},
+            cssCode: ''
+        } as ExtractedCssResult,
+        namedStyle: [] as ExtractedCssResult[]
+    });
 
     const tsFilePath = changeSanFileExtension(tsFile.path);
     let jsCode = call(
@@ -54,8 +69,15 @@ export function callSanSsr(
     const styleId = JSON.stringify(hash(relPath));
     jsCode += appendRenderFunction(
         styleId,
-        stylesRes?.cssCode,
-        stylesRes?.locals || {}
+        stylesRes?.defaultStyle.cssCode,
+        stylesRes?.defaultStyle.locals || {},
+        stylesRes?.namedStyle.map(item => Object.assign({}, item, {
+            css: item.cssCode
+        })) as Array<{
+            name: string;
+            css?: string;
+            locals?: Record<string, string>;
+        }>
     );
 
     return jsCode;
@@ -76,7 +98,7 @@ function call(
 
     const project = new SanProject(tsConfigPath);
 
-    let ssrOnly = sanSsrOptions.ssrOnly;
+    let ssrOnly = sanSsrOptions.ssrOnly as boolean;
     if (typeof sanSsrOptions.ssrOnly === 'function') {
         ssrOnly = sanSsrOptions.ssrOnly(tsFile.path);
     }
@@ -108,10 +130,23 @@ function call(
 function makeCustomRenderFunction(
     styleId: string,
     css: string = '',
-    locals: Record<string, string>
+    locals: Record<string, string>,
+    namedModuleCss: Array<{
+        name: string;
+        css?: string;
+        locals?: Record<string, string>;
+    }> = []
 ) {
 
     let code = '';
+
+    css = namedModuleCss.reduce((acc, cur) => {
+        if (cur.css) {
+            acc += `\n${cur.css}`;
+        }
+        return acc;
+    }, css);
+
     if (css) {
         code += 'const originSanSSRRenders = module.exports.sanSSRRenders;\n';
         code += 'Object.keys(originSanSSRRenders).forEach(renderName => {\n';
@@ -130,10 +165,21 @@ function makeCustomRenderFunction(
             ).join(',')}\n`;
             code += '        };\n';
         }
+        namedModuleCss.forEach(({name, locals}) => {
+            if (locals) {
+                if (Object.keys(locals).length > 0) {
+                    code += `        data[\'$${name}\'] = {\n`;
+                    code += `            ${Object.keys(locals).map(item =>
+                        `${JSON.stringify(item)}: ${JSON.stringify(locals[item])}`
+                    ).join(',')}\n`;
+                    code += '        };\n';
+                }
+            }
+        });
         code += '        return originRender(data, ...params);\n';
         code += '    };\n';
         code += '}\n';
     }
 
     return code;
-}
+}
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -8,7 +8,9 @@ import {callSanSsr} from './lib/callSanSsr';
 import {changeSanFileExtension, autoGetJsTsPath} from './lib/utils';
 import RuleSet from 'webpack/lib/RuleSet';
 import {sanSsrOptions} from './types/san-ssr';
-
+import type {
+    ExtractedCssResult,
+} from './types';
 
 const {
     readFile,
@@ -43,7 +45,16 @@ export interface PluginOptions {
          */
         path: string;
     } & sanSsrOptions;
-    appendRenderFunction?: (styleId: string, css?: string, locals?: Record<string, string>) => string;
+    appendRenderFunction?: (
+        styleId: string,
+        css?: string,
+        locals?: Record<string, string>,
+        namedModuleCss?: Array<{
+            name: string;
+            css?: string;
+            locals?: Record<string, string>;
+        }>
+    ) => string;
 }
 
 export default class SanSSRLoaderPlugin {
@@ -91,7 +102,7 @@ export default class SanSSRLoaderPlugin {
                         );
                         return;
                     }
-                    const styles = styleStore.get(filePath);
+                    const styles = styleStore.get(filePath) as ExtractedCssResult[];
                     const template = templateStore.get(filePath)?.[0];
 
                     const tsRes = compileSanToTs(
@@ -276,6 +287,3 @@ function addSanLoader(compiler: Compiler) {
         }
     }
 }
-
-
-
diff --git a/src/style-loader.ts b/src/style-loader.ts
@@ -16,7 +16,10 @@ export default function (this: loader.LoaderContext, content: string) {
 
     extractCssResult(content, this, cssRes => {
         const styleStore = getRootCompilation(this._compilation)._styleStore;
+        const moduleMatch = this.resourceQuery.match(/&module=(\w+)&/);
+        const moduleName = moduleMatch && moduleMatch[1] || undefined;
         styleStore.set(this.resourcePath, {
+            name: moduleName,
             locals: cssRes.exports.locals,
             cssCode: cssRes.exports[0][1],
         });

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -27,6 +27,7 @@ export interface ASTAttr {
 };
 
 export interface ExtractedCssResult {
+    name?: string;
     cssCode: string;
     locals?: Record<string, string> | undefined;
 }
@@ -36,4 +37,4 @@ export interface CompileTsOptions {
     context: string;
     template?: string;
     reportError?: (err: Error) => void;
-}
+}
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -32,12 +32,12 @@ test('Must ts', async () => {
     try {
         stats = await compiler('must-ts.san');
     }
-    catch (e) {
+    catch (e: any) {
         mockFunction();
         expect(e.message).toBe('.san file must be written in TypeScript!');
     }
 
     expect(mockFunction.mock.calls.length).toBe(1);
 
     expect(!stats).toBe(true);
-});
+});