Implemented multi entry possibility for themes.

Author: archfz

index.js

@@ -18,11 +18,36 @@ class MiniCssThemesWebpackPlugin {
       throw new Error(`Default theme '${defaultTheme}' missing from themes definition.`);
     }
 
-    Object.entries(themes).forEach(([themeKey, file]) => {
-      const fullPath = path.resolve(file);
+    const areThemesSingleEntry = typeof themes[defaultTheme] === 'string';
+    const themeEntryKeys = areThemesSingleEntry ? [] : Object.keys(themes[defaultTheme]);
+
+    const validateThemeFile = (themePath, themeKey, entry = null) => {
+      const fullPath = path.resolve(themePath);
       if (!fs.existsSync(fullPath)) {
-        throw new Error(`Theme '${themeKey}' file not found: ${fullPath}`);
+        throw new Error(`Theme '${entry ? `${themeKey}.${entry}` : themeKey}' file not found: ${fullPath}`);
+      }
+    };
+
+    Object.entries(themes).forEach(([themeKey, fileOrFilesObject]) => {
+      if (areThemesSingleEntry) {
+        if (typeof fileOrFilesObject !== 'string') {
+          throw new Error(`All themes value must be a string (path to theme file) as the default theme is also string.`);
+        }
+        return validateThemeFile(fileOrFilesObject, themeKey);
+      }
+
+      if (typeof fileOrFilesObject !== 'object') {
+        throw new Error(`Themes value must be either object or string.`);
+      }
+
+      const currentThemeEntryKeys = Object.keys(fileOrFilesObject);
+      if (currentThemeEntryKeys.length !== themeEntryKeys.length || themeEntryKeys.filter((k) => !currentThemeEntryKeys.includes(k)).length) {
+        throw new Error(`Missing or additional theme entries in '${themeKey}'. All themes must match schema of default theme.`);
       }
+
+      Object.entries(fileOrFilesObject).forEach(([entry, path]) => {
+        validateThemeFile(path, themeKey, entry);
+      });
     });
   }
 
@@ -32,12 +57,23 @@ class MiniCssThemesWebpackPlugin {
     this.defaultTheme = defaultTheme;
     this.chunkPrefix = chunkPrefix || 'theme__';
 
-    this.defaultImportFilename = path.basename(this.themes[this.defaultTheme]).replace(/\.[a-zA-Z0-9]+$/, '');
     this.nonDefaultThemeKeys = Object.keys(this.themes).filter(t => t !== this.defaultTheme);
     this.themeChunkNames = this.nonDefaultThemeKeys.map(theme => `${this.chunkPrefix}${theme}`);
 
-    this.absolutePathThemes = {};
-    Object.entries(themes).forEach(([key, themePath]) => this.absolutePathThemes[key] = path.resolve(themePath));
+    const areThemesSingleEntry = typeof themes[defaultTheme] === 'string';
+    this.absoluteThemePaths = {};
+
+    Object.entries(themes).forEach(([key, fileOrFilesObject]) => {
+      if (areThemesSingleEntry) {
+        this.absoluteThemePaths[key] = [path.resolve(fileOrFilesObject)];
+      } else {
+        this.absoluteThemePaths[key] = Object.entries(fileOrFilesObject)
+          .sort((a, b) => a.key > b.key ? -1 : 1)
+          .reduce((reduced, [,current]) =>  reduced.push(current) && reduced, []);
+      }
+    });
+
+    this.defaultImportFilenames = this.absoluteThemePaths[this.defaultTheme].map((themePath) => path.basename(themePath).replace(/\.[a-zA-Z0-9]+$/, ''));
   }
 
   apply(compiler) {
@@ -92,9 +128,9 @@ class MiniCssThemesWebpackPlugin {
           module.loaders.push({
             loader: require.resolve('./loader.js'),
             options: {
-              defaultImportFilename: this.defaultImportFilename,
-              defaultImportPath: this.absolutePathThemes[this.defaultTheme],
-              targetImportPath: this.absolutePathThemes[theme[1]],
+              defaultImportFilenames: this.defaultImportFilenames,
+              defaultImportPaths: this.absoluteThemePaths[this.defaultTheme],
+              targetImportPaths: this.absoluteThemePaths[theme[1]],
             }
           });
         }

loader.js

@@ -5,28 +5,41 @@ const filterMatchedImports = (importStrings, context, currentImportPath) => {
   currentImportPath = currentImportPath.replace(/(\.scss|\.sass)$/, '');
 
   return importStrings.filter(importString => {
-    const importPath = importString.match(/['"]([^'"]+)(\.scss|\.sass)?['"]/)[1];
-    return currentImportPath === path.join(context, importPath);
+    const importPath = importString.match(/['"]([^'"]+)?['"]/)[1].replace(/(\.scss|\.sass)$/, '');
+    return path.resolve(currentImportPath) === path.join(context, importPath);
   });
 };
 
 exports.default = function (content) {
   const options = loaderUtils.getOptions(this);
   const callback = this.async();
+  this.cacheable(true);
 
-  const regexFilename = options.defaultImportFilename.replace(/\./, '\\.');
-  const importPatterns = `@import\\s+['"]([^'"]+${regexFilename}(\\.scss|\\.sass)?)['"];?`;
-  const matchedImports = content.match(new RegExp(importPatterns, 'g'));
+  const replaceForImport = (defaultImportFileName, index) => {
+    const regexFilename = defaultImportFileName.replace(/\./, '\\.');
+    const pathMatch = `['"]([^'"]+${regexFilename}(\\.scss|\\.sass)?)['"];?`;
 
-  if (!matchedImports) {
-    callback(null, content);
-    return;
-  }
+    const importPatterns = `@import\\s+${pathMatch}`;
+    const matchedImports = content.match(new RegExp(importPatterns, 'g'));
+    if (matchedImports) {
+      const replaceStrings = filterMatchedImports(matchedImports, this.context, options.defaultImportPaths[index]);
+      replaceStrings.forEach(importString => {
+        content = content.replace(importString, `@import '${path.relative(this.context, options.targetImportPaths[index])}';`);
+      });
+    }
 
-  const replaceImports = filterMatchedImports(matchedImports, this.context, options.defaultImportPath);
-  replaceImports.forEach(importString => {
-    content = content.replace(importString, `@import '${path.relative(this.context, options.targetImportPath)}';`)
-  });
+    const composesPatterns = `composes\\s*\:\\s*[^\\s]+\\s+from\\s+${pathMatch}`;
+    const matchedComposes = content.match(new RegExp(composesPatterns, 'g'));
+    if (matchedComposes) {
+      const replaceStrings = filterMatchedImports(matchedComposes, this.context, options.defaultImportPaths[index]);
+      replaceStrings.forEach(importString => {
+        const replaceString = importString.replace(/['"][^'"]+['"]/, `"${path.relative(this.context, options.targetImportPaths[index])}"`);
+        content = content.replace(importString, replaceString);
+      });
+    }
+  };
+
+  options.defaultImportFilenames.forEach(replaceForImport);
 
   callback(null, content);
 };

package.json

@@ -1,10 +1,10 @@
 {
   "name": "mini-css-themes-plugin",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Webpack plugin to generate separate themes for css modules.",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "cd test && npm run test"
   },
   "repository": "https://github.com/archfz/mini-css-themes-plugin",
   "keywords": [