fix: issue with css image through webpack

Due to how we are handling our weird multi-compiler publicPath
things were getting messed up. So use a separate config for CSS
in production build to specify publicPath.

Fixes #117

examples/plugin/package.json

@@ -18,7 +18,9 @@
     "bootstrap": "wpackio-scripts bootstrap",
     "start": "wpackio-scripts start",
     "build": "wpackio-scripts build",
-    "archive": "wpackio-scripts pack"
+    "archive": "wpackio-scripts pack",
+    "start:dev": "../../packages/scripts/lib/bin/index.js start",
+    "build:dev": "../../packages/scripts/lib/bin/index.js build"
   },
   "dependencies": {
     "@types/webpack-env": "^1.13.6",

examples/plugin/src/app/index.css

@@ -6,4 +6,9 @@ body {
 .site-title a {
 	color: azure !important;
 	background-color: aqua !important;
+	background-image: url('./bg.jpg');
+}
+.site-content {
+	background: url('./image.png') no-repeat top left;
+	background-size: 100px 70px;
 }

examples/plugin/yarn.lock

@@ -1106,10 +1106,10 @@
     "@webassemblyjs/wast-parser" "1.7.11"
     "@xtuc/long" "4.2.1"
 
-"@wpackio/babel-preset-base@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@wpackio/babel-preset-base/-/babel-preset-base-2.6.0.tgz#7933a263ea4680158b82af763031648f3f30c0ba"
-  integrity sha512-LFfn4sZs1rnbD/3vIgjiJnX1vcvl/ioonF1XhdTjRORLhzxXF04WM5/zyZ7N/2d34OuPQWyNKVlR2jrAhZMSfA==
+"@wpackio/babel-preset-base@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@wpackio/babel-preset-base/-/babel-preset-base-2.8.0.tgz#f661d8ea2cec14ab348d8c493e42a443deba7583"
+  integrity sha512-qAUG+/6cBEq9KYqNJLdHqYBuy0fAOSjrq28tnVAsKVgcBia7Hdwlm0VTz8xlNQPhFaHcswK0BP9Lw53Vk1m7IA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.1.0"
@@ -1125,7 +1125,7 @@
     "@types/webpack-env" "^1.13.6"
 
 "@wpackio/scripts@file:../../packages/scripts":
-  version "2.6.0"
+  version "2.8.0"
   dependencies:
     "@babel/core" "^7.1.0"
     "@babel/preset-flow" "^7.0.0"
@@ -1152,7 +1152,7 @@
     "@types/webpack-dev-middleware" "^2.0.2"
     "@types/webpack-env" "^1.13.6"
     "@types/webpack-hot-middleware" "^2.16.4"
-    "@wpackio/babel-preset-base" "^2.6.0"
+    "@wpackio/babel-preset-base" "^2.8.0"
     archiver "^3.0.0"
     autoprefixer "^9.1.5"
     babel-loader "^8.0.2"

packages/scripts/src/config/WebpackConfigHelper.ts

@@ -63,7 +63,7 @@ interface CommonWebpackConfig {
  */
 export class WebpackConfigHelper {
 	// This is where all the filename will be prefixed, so we create a directory
-	public readonly outputInnerDir: string;
+	public readonly appDir: string;
 	// Actual outputPath as provided by user
 	public readonly outputPath: string;
 	private file: FileConfig;
@@ -107,7 +107,7 @@ export class WebpackConfigHelper {
 		// all middlewares would actually use the `name` from webpack config
 		// to separate updates.
 		const { name } = this.file;
-		this.outputInnerDir = slugify(name, { lower: true });
+		this.appDir = slugify(name, { lower: true });
 		this.outputPath = path.join(this.cwd, outputPath);
 	}
 
@@ -201,7 +201,7 @@ export class WebpackConfigHelper {
 			// We do not use path.resolve, because we expect outputPath to be
 			// relative. @todo: create a test here
 			path: this.outputPath,
-			filename: `${this.outputInnerDir}/[name].js`,
+			filename: `${this.appDir}/[name].js`,
 			// leave blank because we would handle with free variable
 			// __webpack_public_path__ in runtime.
 			publicPath: '',
@@ -248,20 +248,18 @@ export class WebpackConfigHelper {
 				},
 			}),
 			// Clean dist directory
-			new cleanWebpackPlugin(
-				[`${this.outputPath}/${this.outputInnerDir}`],
-				{ root: this.cwd, verbose: false }
-			),
+			new cleanWebpackPlugin([`${this.outputPath}/${this.appDir}`], {
+				root: this.cwd,
+				verbose: false,
+			}),
 			// Initiate mini css extract
 			new miniCssExtractPlugin({
-				filename: `${this.outputInnerDir}/[name].css`,
+				filename: `${this.appDir}/[name].css`,
 			}),
 			// Create Manifest for PHP Consumption
 			new WebpackAssetsManifest({
 				writeToDisk: true,
-				output: `${this.outputPath}/${
-					this.outputInnerDir
-				}/manifest.json`,
+				output: `${this.outputPath}/${this.appDir}/manifest.json`,
 				publicPath: ``, // We dont put ${this.config.outputPath}/ here because, PHP will pick it up anyway.
 				entrypoints: true,
 				entrypointsKey: 'wpackioEp',
@@ -468,21 +466,51 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 			});
 		}
 		// create file rules
-		const fileRules: webpack.RuleSetRule = {
-			test: /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
+		// But use relativePath for style type resources like sass, scss or css
+		// This is needed because we can't know the absolute publicPath
+		// of CSS imported assets.
+		const fileLoaderTest = /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/;
+		const fileLoaderOptions = {
+			name: `[name]-[hash:8].[ext]`,
+			outputPath: `${this.appDir}/assets/`,
+		};
+		const fileRulesNonStyle: webpack.RuleSetRule = {
+			test: fileLoaderTest,
 			use: [
 				{
 					loader: 'file-loader',
 					options: {
-						name: 'asset-[hash].[ext]',
-						outputPath: `${this.outputInnerDir}/assets/`,
+						...fileLoaderOptions,
 					},
 				},
 			],
+			issuer: location => !/\.(sa|sc|c)ss$/.test(location),
+		};
+		const fileRulesStyle: webpack.RuleSetRule = {
+			test: fileLoaderTest,
+			use: [
+				{
+					loader: 'file-loader',
+					options: {
+						...fileLoaderOptions,
+						// Here mention the public path relative to the css
+						// file directory, but only during production mode
+						// for development mode, it is still undefined
+						publicPath: this.isDev ? undefined : `assets/`,
+					},
+				},
+			],
+			issuer: location => /\.(sa|sc|c)ss$/.test(location),
 		};
 
 		return {
-			rules: [jsRules, tsRules, styleRules, fileRules],
+			rules: [
+				jsRules,
+				tsRules,
+				styleRules,
+				fileRulesNonStyle,
+				fileRulesStyle,
+			],
 		};
 	}