chore(): path is string or string[]

zougt · zougt · commit 4f113cf8876a · 2021-03-11T11:04:49.000+08:00
diff --git a/README.md b/README.md
@@ -14,6 +14,18 @@ $ npm install less @zougt/less-loader --save-dev
 
 在 webpack.config.js 使用`less-loader`的地方替换成`@zougt/less-loader`, 并添加`multipleScopeVars`属性
 
+### multipleScopeVars
+
+Type `object[]`
+
+#### multipleScopeVars[].scopeName
+
+Type `string`
+
+#### multipleScopeVars[].path
+
+Type `string | string[]`
+
 ```js
 const path = require("path");
 module.exports = {
@@ -125,7 +137,7 @@ src/components/Button/style.css
 }
 ```
 
-在`html`中改变 classname 切换主题
+在`html`中改变 classname 切换主题，只作用于 html 标签 ：
 
 ```html
 <!DOCTYPE html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zougt/less-loader",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "A Less loader for webpack. Compiles Less to CSS.",
   "license": "MIT",
   "repository": "GitOfZGT/less-loader",
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,4 @@
 import path from "path";
-import fs from "fs";
 
 import less from "less";
 
@@ -9,6 +8,8 @@ import {
   isUnsupportedUrl,
   normalizeSourceMap,
   getScropProcessResult,
+  getAllStyleVarFiles,
+  getVarsContent,
 } from "./utils";
 import LessError from "./LessError";
 
@@ -37,19 +38,12 @@ async function lessLoader(source) {
   let result;
   const preProcessor = (code) =>
     (options.implementation || less).render(code, lessOptions);
-  const styleVarFiles = options.multipleScopeVars;
-  const allStyleVarFiles = Array.isArray(styleVarFiles)
-    ? styleVarFiles.filter(
-        (item) => item.scopeName && item.path && fs.existsSync(item.path)
-      )
-    : [{ scopeName: "", path: "" }];
+  const allStyleVarFiles = getAllStyleVarFiles(this, options);
   try {
     // result = await (options.implementation || less).render(data, lessOptions);
     result = await Promise.all(
       allStyleVarFiles.map((file) => {
-        const varscontent = file.path
-          ? fs.readFileSync(file.path).toString()
-          : "";
+        const varscontent = getVarsContent(file.path);
         return preProcessor(`${data}\n${varscontent}`, lessOptions);
       })
     ).then((prs) =>
diff --git a/src/options.json b/src/options.json
@@ -38,7 +38,7 @@
       "type": "object"
     },
     "multipleScopeVars": {
-      "description": "The multipleScopeVars of the `Less` to be used (https://github.com/GitOfZGT/less-loader).",
+      "description": "The multipleScopeVars of the `less-loader` to be used (https://github.com/GitOfZGT/less-loader).",
       "type": "array"
     }
   },
diff --git a/src/utils.js b/src/utils.js
@@ -1,4 +1,5 @@
 import path from "path";
+import fs from "fs";
 
 import less from "less";
 import { klona } from "klona/full";
@@ -219,16 +220,63 @@ function normalizeSourceMap(map) {
 
   return newMap;
 }
-const cssFragReg = /\.[^{}/\\]+{[^{}]*?}/g;
-const classNameFragReg = /\.[^{}/\\]+(?={)/;
+const getAllStyleVarFiles = (loaderContext, options) => {
+  const styleVarFiles = options.multipleScopeVars;
+  let allStyleVarFiles = [{ scopeName: "", path: "" }];
+  if (Array.isArray(styleVarFiles)) {
+    allStyleVarFiles = styleVarFiles.filter((item) => {
+      if (!item.scopeName) {
+        loaderContext.emitError(
+          new Error("Not found scopeName in less-loader multipleScopeVars")
+        );
+        return false;
+      }
+      if (Array.isArray(item.path)) {
+        return item.path.every((pathstr) => {
+          const exists = pathstr && fs.existsSync(pathstr);
+          if (!exists) {
+            loaderContext.emitError(
+              new Error(
+                `Not found path: ${pathstr} in less-loader multipleScopeVars`
+              )
+            );
+          }
+          return exists;
+        });
+      }
+      if (
+        !item.path ||
+        typeof item.path !== "string" ||
+        !fs.existsSync(item.path)
+      ) {
+        loaderContext.emitError(
+          new Error(
+            `Not found path: ${item.path} in less-loader multipleScopeVars`
+          )
+        );
+        return false;
+      }
+      return true;
+    });
+  }
+  return allStyleVarFiles;
+};
+
+const cssFragReg = /[^{}/\\]+{[^{}]*?}/g;
+const classNameFragReg = /[^{}/\\]+(?={)/;
 const addScopeName = (css, scopeName) => {
   const splitCodes = css.match(cssFragReg) || [];
 
   if (splitCodes.length && scopeName) {
     const fragments = [];
     const resultCode = splitCodes.reduce((codes, curr) => {
       const replacerFragment = curr.replace(classNameFragReg, (a) =>
-        a.split(",").reduce((tol, c) => tol.replace(c, `.${scopeName} ${c}`), a)
+        a.split(",").reduce((tol, c) => {
+          if (/^html/i.test(c)) {
+            return tol;
+          }
+          return tol.replace(c, `.${scopeName} ${c}`);
+        }, a)
       );
       fragments.push(replacerFragment);
       return codes.replace(curr, replacerFragment);
@@ -247,11 +295,11 @@ const addScopeName = (css, scopeName) => {
   };
 };
 
-const getScropProcessResult = (lessResults = [], allStyleVarFiles = []) => {
+const getScropProcessResult = (cssResults = [], allStyleVarFiles = []) => {
   const preprocessResult = { deps: [], code: "", errors: [] };
   const fragmentsGroup = [];
   const sourceFragmentsGroup = [];
-  lessResults.forEach((item, i) => {
+  cssResults.forEach((item, i) => {
     const { fragments, sourceFragments } = addScopeName(
       item.code,
       allStyleVarFiles[i].scopeName
@@ -262,26 +310,52 @@ const getScropProcessResult = (lessResults = [], allStyleVarFiles = []) => {
       ...(preprocessResult.errors || []),
       ...(item.errors || []),
     ];
-    if (allStyleVarFiles[i].path) {
-      preprocessResult.deps.push(allStyleVarFiles[i].path);
-    }
+    const deps = Array.isArray(allStyleVarFiles[i].path)
+      ? allStyleVarFiles[i].path
+      : [allStyleVarFiles[i].path];
+    deps.forEach((str) => {
+      if (str) {
+        preprocessResult.deps.push(str);
+      }
+    });
   });
-  if (lessResults.length && sourceFragmentsGroup.length) {
+  if (cssResults.length && sourceFragmentsGroup.length) {
     preprocessResult.code = sourceFragmentsGroup[0].reduce(
       (tol, curr, i) =>
         tol.replace(curr, () => fragmentsGroup.map((g) => g[i]).join("\n")),
-      lessResults[0].code
+      cssResults[0].code
     );
-    preprocessResult.map = lessResults[0].map;
-    preprocessResult.deps = [...preprocessResult.deps, ...lessResults[0].deps];
+    preprocessResult.map = cssResults[0].map;
+    preprocessResult.deps = [...preprocessResult.deps, ...cssResults[0].deps];
   }
 
   return preprocessResult;
 };
+const replaceFormSass = (url) => {
+  let code = url ? fs.readFileSync(url).toString() : "";
+  if (/\.(scss|sass)$/i.test(url)) {
+    code = code.replace(/\$/g, "@").replace(/!default/g, "");
+  }
+  return code;
+};
+
+const getVarsContent = (url) => {
+  let content = "";
+  if (Array.isArray(url)) {
+    url.forEach((p) => {
+      content += replaceFormSass(p);
+    });
+  } else {
+    content = replaceFormSass(url);
+  }
+  return content;
+};
 export {
   getLessOptions,
   isUnsupportedUrl,
   normalizeSourceMap,
+  getAllStyleVarFiles,
   addScopeName,
   getScropProcessResult,
+  getVarsContent,
 };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@zougt/less-loader",`
`3`		`- "version": "8.1.0",`
	`3`	`+ "version": "8.1.1",`
`4`	`4`	`"description": "A Less loader for webpack. Compiles Less to CSS.",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"repository": "GitOfZGT/less-loader",`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`"type": "object"`
`39`	`39`	`},`
`40`	`40`	`"multipleScopeVars": {`
`41`		- "description": "The multipleScopeVars of the `Less` to be used (https://github.com/GitOfZGT/less-loader).",
	`41`	+ "description": "The multipleScopeVars of the `less-loader` to be used (https://github.com/GitOfZGT/less-loader).",
`42`	`42`	`"type": "array"`
`43`	`43`	`}`
`44`	`44`	`},`