From e845909cd76c110911936a8b44d47cbcb95d8d49 Mon Sep 17 00:00:00 2001
From: ampersarnie <ampersarnie@gmail.com>
Date: Wed, 27 Oct 2021 17:27:33 +0100
Subject: [PATCH] fix: resolve issue where styles urls being parsed

Files were being parsed when styles were included via javascript, this
meant that any items, such as font files were parsed as JS files and
incorrectly moved to the scripts directory. This disables URL parsing
to prevent these issues.

Also adds the static directory to the clean routine.
---
 src/build.js            | 26 ++++++++++++++++----------
 src/rules/javascript.js | 22 ++++++++++++----------
 src/rules/styles.js     |  5 +++--
 src/webpack.js          | 13 +++++--------
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/build.js b/src/build.js
index d948bac..1fa3d4e 100644
--- a/src/build.js
+++ b/src/build.js
@@ -5,14 +5,16 @@ const { findProjectPath, findAllProjectPaths } = require('./utils/projectpaths')
 const { getPackage } = require('./utils/get-package');
 
 /**
- * 
+ *
  * @param {object} env Current environment information.
- * @param {object} args Arguments passed to webpack. 
- * @returns 
+ * @param {object} args Arguments passed to webpack.
+ * @returns
  */
 module.exports = (env, { mode, project = '', allProjects = false }) => {
   // Use env variables if working on Webpack >=5.
-  const projects = (env.project ? env.project : project).split(',').filter(item => item.length > 0);
+  const projects = (env.project ? env.project : project)
+    .split(',')
+    .filter((item) => item.length > 0);
   const isAllProjects = env['all-projects'] ? env['all-projects'] : allProjects;
 
   let paths = [];
@@ -35,18 +37,18 @@ module.exports = (env, { mode, project = '', allProjects = false }) => {
   let packages = [];
 
   try {
-    packages = paths.map((path) => getPackage(path, false)).filter(item => item);
-  } catch(e) {
+    packages = paths.map((path) => getPackage(path, false)).filter((item) => item);
+  } catch (e) {
     throw e.message;
   }
 
-  terminal("Processing the following projects:\n");
+  terminal('Processing the following projects:\n');
   packages.forEach((item) => {
     const regexDirs = targetDirs.join('|');
-    const packagePath = item.packagePath.match(`(${regexDirs})\/(.+)\/package\.json$`)
+    const packagePath = item.packagePath.match(`(${regexDirs})\/(.+)\/package\.json$`);
     terminal.defaultColor(` * %s `, item.packageName).dim(`[%s]\n`, packagePath[0]);
   });
-  terminal("\n");
+  terminal('\n');
 
   return packages.map((package) => {
     /**
@@ -62,7 +64,11 @@ module.exports = (env, { mode, project = '', allProjects = false }) => {
         config: path.resolve(`${__dirname}/configs`),
         src: path.resolve(`${package.path}/src`),
         dist: path.resolve(`${package.path}/dist`),
-        clean: [`${package.path}/dist/scripts/**/*`, `${package.path}/dist/styles/**/*`],
+        clean: [
+          `${package.path}/dist/scripts/**/*`,
+          `${package.path}/dist/styles/**/*`,
+          `${package.path}/dist/static/**/*`,
+        ],
         node_modules: path.resolve(package.path, 'node_modules'),
       },
       clean: true,
diff --git a/src/rules/javascript.js b/src/rules/javascript.js
index 8f9236a..874185b 100644
--- a/src/rules/javascript.js
+++ b/src/rules/javascript.js
@@ -3,15 +3,17 @@
  * @returns {object} Babel rules and presets for Javascript.
  */
 module.exports = () => {
-  return {
-    test: /\.(js|jsx)$/,
-    use: [
-      {
-        loader: 'babel-loader',
-        options: {
-          presets: [['@babel/preset-env', { targets: 'defaults' }], '@babel/preset-react'],
+  return [
+    {
+      test: /\.(js|jsx)$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { targets: 'defaults' }], '@babel/preset-react'],
+          },
         },
-      },
-    ],
-  };
+      ],
+    },
+  ];
 };
diff --git a/src/rules/styles.js b/src/rules/styles.js
index a266d82..714b5fd 100644
--- a/src/rules/styles.js
+++ b/src/rules/styles.js
@@ -7,7 +7,7 @@ const postcssConfig = require('../../configs/postcss');
  * @returns {object} Rules and presets for styles.
  */
 module.exports = ({ mode }) => {
-  return {
+  return [{
     test: /\.(sa|sc|c)ss$/,
     use: [
       // Seperate CSS included in JS.
@@ -15,6 +15,7 @@ module.exports = ({ mode }) => {
       {
         loader: 'css-loader',
         options: {
+          url: false,
           sourceMap: true,
         },
       },
@@ -39,5 +40,5 @@ module.exports = ({ mode }) => {
         },
       },
     ],
-  };
+  }];
 };
diff --git a/src/webpack.js b/src/webpack.js
index 38d00a0..b6096d9 100644
--- a/src/webpack.js
+++ b/src/webpack.js
@@ -10,8 +10,8 @@ const entrypoints = require('./utils/entrypoints');
 BROWSERSLIST_CONFIG = path.resolve(`${__dirname}/config`);
 
 /**
- * Build the webpack configutation for the current project. 
- * 
+ * Build the webpack configutation for the current project.
+ *
  * @param {string} package.path The current directory path of the project.
  * @param {string} mode The build mode in which webpack is currently running (e.g. development or production).
  * @param {string} projectName The name of the project - this will be the director target.
@@ -22,10 +22,7 @@ module.exports = (__PROJECT_CONFIG__, mode) => {
     entry: entrypoints(__PROJECT_CONFIG__.paths.src),
 
     resolve: {
-      modules: [
-        __PROJECT_CONFIG__.paths.node_modules,
-        'node_modules'
-      ],
+      modules: [__PROJECT_CONFIG__.paths.node_modules, 'node_modules'],
     },
 
     output: {
@@ -72,9 +69,9 @@ module.exports = (__PROJECT_CONFIG__, mode) => {
 
     module: {
       rules: [
-        Rules.javascript(__PROJECT_CONFIG__),
+        ...Rules.javascript(__PROJECT_CONFIG__),
         ...Rules.images(__PROJECT_CONFIG__),
-        Rules.styles(__PROJECT_CONFIG__),
+        ...Rules.styles(__PROJECT_CONFIG__),
       ],
     },
   };