Lint files

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: '@studiometa/eslint-config',
   rules: {
     'global-require': 'off',
+    'import/extensions': ['error', 'always', { ignorePackages: false }],
   },
   overrides: [
     {

package.json

@@ -2,8 +2,18 @@
   "name": "@studiometa/webpack-config-root",
   "version": "2.9.3",
   "private": true,
-  "type": "module",
+  "type": "commonjs",
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "scripts": {
+    "lint": "eslint packages/webpack-config/src packages/demo/src --ext=.js,.vue",
+    "fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "@studiometa/eslint-config": "^2.1.3",
+    "@studiometa/prettier-config": "^2.0.1",
+    "eslint": "^7.32.0",
+    "prettier": "^2.3.2"
+  }
 }

packages/demo/.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   extends: ['@studiometa/eslint-config'],
+  rules: {
+    'import/extensions': ['error', 'always', { ignorePackages: false }],
+  },
   settings: {
     'import/resolver': 'webpack',
   },

packages/demo/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@studiometa/stylelint-config',
+};

packages/demo/meta.config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   presets: ['prototyping', 'yaml'],
   // Exclude the `test.scss` file from the merge
   mergeCSS: /^(?!.*css\/test\.scss).*$/,

packages/demo/package.json

@@ -2,7 +2,7 @@
   "name": "@studiometa/webpack-config-demo",
   "version": "2.9.3",
   "private": true,
-  "type": "module",
+  "type": "commonjs",
   "scripts": {
     "dev": "node ../webpack-config/bin/cli.js dev",
     "build": "node ../webpack-config/bin/cli.js build"

packages/demo/src/js/app.js

@@ -17,7 +17,7 @@ class App extends Base {
     refs: ['content', 'vue'],
     ...config,
     components: {
-      Component: () => import('./components/Component'),
+      Component: () => import('./components/Component.js'),
     },
   };
 

packages/demo/src/js/components/Component.js

@@ -9,7 +9,7 @@ export default class Component extends Base {
   static config = {
     name: 'Component',
     components: {
-      ComponentFoo: () => import('../foo/Component'),
+      ComponentFoo: () => import('../foo/Component.js'),
     },
   };
 }

packages/webpack-config/src/presets/tailwindcss.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge';
-import findUp from 'find-up';
+import { findUpSync } from 'find-up';
 import chalk from 'chalk';
 import createServer from 'tailwind-config-viewer/server/index.js';
 import { createRequire } from 'module';
@@ -23,8 +23,9 @@ export default async (config, options = {}) => {
   if (process.env.NODE_ENV === 'development') {
     await extendBrowserSyncConfig(config, async (bsConfig) => {
       const tailwindConfigViewerServer = createServer({
-        // eslint-disable-next-line import/no-dynamic-require
-        tailwindConfigProvider: () => require(findUp.sync('tailwind.config.js')),
+        tailwindConfigProvider: () =>
+          // eslint-disable-next-line import/no-dynamic-require
+          require(findUpSync(['tailwind.config.js', 'tailwind.config.cjs'])),
       }).asMiddleware();
 
       bsConfig.middleware = bsConfig.middleware || [];
@@ -78,4 +79,3 @@ export default async (config, options = {}) => {
     });
   });
 };
-

packages/webpack-config/src/utils/get-config.js

@@ -24,21 +24,23 @@ export default async (options) => {
   if (Array.isArray(config.presets) && config.presets.length) {
     console.log('Applying presets...');
 
-    await Promise.all(config.presets.map(async (preset) => {
-      const name = Array.isArray(preset) ? preset[0] : preset;
-      const opts = Array.isArray(preset) ? preset[1] : {};
-      const presetPathInfo = new URL(`../presets/${name}.js`, import.meta.url);
-
-      if (!fs.existsSync(presetPathInfo.pathname)) {
-        console.error(`The "${name}" preset is not available.`);
-        return;
-      }
-
-      console.log(`Using the "${name}" preset.`);
-
-      const { default: presetHandler } = await import(presetPathInfo.pathname);
-      await presetHandler(config, opts);
-    }));
+    await Promise.all(
+      config.presets.map(async (preset) => {
+        const name = Array.isArray(preset) ? preset[0] : preset;
+        const opts = Array.isArray(preset) ? preset[1] : {};
+        const presetPathInfo = new URL(`../presets/${name}.js`, import.meta.url);
+
+        if (!fs.existsSync(presetPathInfo.pathname)) {
+          console.error(`The "${name}" preset is not available.`);
+          return;
+        }
+
+        console.log(`Using the "${name}" preset.`);
+
+        const { default: presetHandler } = await import(presetPathInfo.pathname);
+        await presetHandler(config, opts);
+      })
+    );
   }
 
   return config;

packages/webpack-config/src/webpack.base.config.js

@@ -15,7 +15,7 @@ import WebpackAssetsManifest from 'webpack-assets-manifest';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 
 const { DefinePlugin } = webpack;
-const { BundleAnalyzerPlugin} = BundleAnalyzerPluginImport;
+const { BundleAnalyzerPlugin } = BundleAnalyzerPluginImport;
 
 dotenv.config();
 

packages/webpack-config/src/webpack.prod.config.js

@@ -1,5 +1,5 @@
 import webpackMerge from 'webpack-merge';
-import getWebpackConfig from './webpack.base.config.js'
+import getWebpackConfig from './webpack.base.config.js';
 
 export default async (config) => {
   const baseConfig = await getWebpackConfig(config);