Merge pull request #107 from Becklyn/next

Next: build into separate dirs, compile only specific node_modules and reluctantly compile SCSS

Author: Jannik Zschiesche

CHANGELOG.md

@@ -33,8 +33,10 @@
 *   (internal) Bumped all dependencies.
 *   (improvement) Allow `++` in JS/TS code.
 *   (improvement) The code is now always compiled per entry file
-*   (improvement) Ignore `.css` files when compiling webpack. You need to import them manually in your SCSS.
 *   (improvement) Build TypeScript for the `esnext` module system, that (amongst other things) allows to use `import()`.
+*   (bug) Compile every entry into a separate directory, to avoid issues with the clean plugin.
+*   (bc) Now only specific modules in `node_modules` are transformed. You need to set your packages explicity via `.compileNpmPackages(...)`.
+*   (feature) Even if not recommended (use SCSS!), we now support compiling CSS via webpack (not as entry point though). The CSS will be injected into the head dynamically.
 
 
 8.1.0

UPGRADE.md

@@ -5,6 +5,7 @@
 *   Always build a legacy and a modern JS build.
 *   Removed the ability to use the project's `tsconfig.json`. 
 *   Removed `disableChunkSplitting()`, chunk splitting is now always disabled. Use code splitting instead and remove the call to this method.
+*   Now no npm package is built anymore. Define your npm packages that need a transformation via `.compileNpmPackages(...)` (for now only top-level entries support, so either complete vendor or global package name).
 
 
 7.x to 8.0

package.json

@@ -37,13 +37,14 @@
         "eslint-plugin-react": "^7.17.0",
         "eslint-plugin-react-hooks": "^2.3.0",
         "fs-extra": "^8.1.0",
-        "ignore-loader": "^0.1.2",
         "kaba-babel-preset": "^4.1.1",
         "kleur": "^3.0.3",
+        "postcss-loader": "^3.0.0",
         "pretty-hrtime": "^1.0.3",
         "progress-bar-webpack-plugin": "^2.1.0",
         "raw-loader": "^4.0.0",
         "sade": "^1.7.0",
+        "style-loader": "^1.1.3",
         "terser-webpack-plugin": "^2.3.2",
         "ts-loader": "^6.2.1",
         "typescript": "^3.7.4",

src/Kaba.ts

@@ -11,6 +11,9 @@ const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
+const PACKAGE_MATCHER = /\/node_modules\/(?<package>[^\/]+)\//;
+interface CompiledNpmPackagesMapping {[name: string]: true}
+interface PostCssLoaderOptions {[key: string]: any}
 
 interface Entries
 {
@@ -29,6 +32,22 @@ interface Externals
     [name: string]: string;
 }
 
+/**
+ * Determines whether a file should processed by the asset pipeline.
+ */
+function isAllowedPath (path: string, allowedPaths: CompiledNpmPackagesMapping) : boolean
+{
+    const match = PACKAGE_MATCHER.exec(path);
+
+    // not in node_modules, so always process
+    if (!match)
+    {
+        return true;
+    }
+
+    // only allow the allowed package names
+    return true === allowedPaths[(match.groups as any).package];
+}
 
 /**
  * Main Kaba class
@@ -52,6 +71,13 @@ export class Kaba
     private hashFileNames: boolean = true;
     private buildModern: boolean = true;
     private nodeSettings: webpack.Node|false = false;
+    private compiledNpmPackages: CompiledNpmPackagesMapping = {
+        '@becklyn': true,
+        '@mayd': true,
+        mojave: true,
+        preact: true,
+    };
+    private postCssLoaderOptions: PostCssLoaderOptions = {};
 
 
     /**
@@ -77,6 +103,16 @@ export class Kaba
     }
 
 
+    /**
+     * Defines which npm packages are compiled
+     */
+    public compileNpmPackages (modules: string[]): this
+    {
+        modules.forEach(module => this.compiledNpmPackages[module] = true);
+        return this;
+    }
+
+
     /**
      * Adds Sass entries
      */
@@ -219,6 +255,16 @@ export class Kaba
     }
 
 
+    /**
+     * Sets the loader options for the postcss loader
+     */
+    public setPostCssLoaderOptions (options: PostCssLoaderOptions): this
+    {
+        this.postCssLoaderOptions = options;
+        return this;
+    }
+
+
     /**
      * Returns the kaba config
      *
@@ -294,7 +340,7 @@ export class Kaba
      */
     private buildWebpackConfig (entry: string, entryFile: string, cliConfig: kaba.CliConfig, isModule: boolean): Partial<webpack.Configuration>
     {
-        const babelLoader = {
+        const babelLoader: webpack.RuleSetUseItem = {
             loader: "babel-loader?cacheDirectory",
             options: {
                 babelrc: false,
@@ -312,8 +358,8 @@ export class Kaba
 
         const entryName = isModule ? `_modern.${entry}` : entry;
 
-        let configTemplate = {
-            name: isModule ? "modern" : "legacy",
+        let configTemplate: webpack.Configuration = {
+            name: `${entry}: ${isModule ? "modern" : "legacy"}`,
             entry: {
                 [entryName]: entryFile,
             },
@@ -344,10 +390,10 @@ export class Kaba
 
             // output
             output: {
-                path: path.join(this.outputPaths.base, this.outputPaths.js, isModule ? "modern" : "legacy"),
+                path: path.join(this.outputPaths.base, this.outputPaths.js, entry, isModule ? "modern" : "legacy"),
                 filename: this.hashFileNames ? '[name].[chunkhash].js' : '[name].js',
                 // the slash at the end is required of the public path entries
-                publicPath: path.join(this.publicPath, isModule ? "modern/" : "legacy/"),
+                publicPath: path.join(this.publicPath, entry, isModule ? "modern/" : "legacy/"),
                 pathinfo: cliConfig.debug,
             },
 
@@ -369,12 +415,14 @@ export class Kaba
                                 },
                             },
                         ],
+                        include: (path: string) => isAllowedPath(path, this.compiledNpmPackages),
                     },
 
                     // Babel
                     {
                         test: /\.m?jsx?$/,
                         use: ['cache-loader', babelLoader],
+                        include: (path: string) => isAllowedPath(path, this.compiledNpmPackages),
                     },
 
                     // content files
@@ -383,12 +431,23 @@ export class Kaba
                         loader: "raw-loader",
                     },
 
-                    // ignore CSS files
+                    // Try to avoid compiling CSS, but if there is CSS then inject it into the head
                     {
                         test: /\.css$/,
-                        loader: "ignore-loader",
-                    }
-                ] as webpack.RuleSetRule[],
+                        use: [
+                            {
+                                loader: 'style-loader',
+                                options: {
+                                    injectType: 'singletonStyleTag',
+                                },
+                            },
+                            {
+                                loader: 'postcss-loader',
+                                options: this.postCssLoaderOptions,
+                            },
+                        ],
+                    },
+                ],
             },
 
             // optimization