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.
bigbite · Oct 27, 2021 · e845909 · e845909
1 parent ba29c57
commit e845909
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git 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
@@ -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
@@ -7,14 +7,15 @@ 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.
       MiniCssExtractPlugin.loader,
       {
         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
@@ -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__),
       ],
     },
   };