fix npm ci

docs/v2/esbuild.mjs

@@ -1,5 +1,5 @@
 import glob from 'fast-glob';
-import { esbuild } from '@~local-docs/esbuild';
+import { esbuild } from '@~local/esbuild';
 
 const processArgs = process.argv.slice(2);
 const watch = processArgs.includes('-w');

docs/v2/package.json

@@ -11,8 +11,6 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@~local-docs/esbuild": "file:./local/esbuild",
-    "@~local-docs/tailwind": "file:./local/tailwind",
     "@types/node": "18.7.20",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",

docs/v2/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   // eslint-disable-next-line global-require
-  presets: [require('@~local-docs/tailwind')],
+  presets: [require('@~local/tailwind')],
   content: ['**/*.{js,ts,jsx,tsx}'],
 };

local/browser-testing/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "browser-testing",
   "version": "0.0.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

local/config/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "@~local/config",
   "exports": {
     "./resolve": "./src/resolve.json",
     "./playwright": "./src/playwright.js",

local/esbuild/src/esbuild.js

@@ -38,7 +38,6 @@ export const esbuild = async (options = {}, { tailwindConfig = './tailwind.confi
       esbuildPluginStyles({
         sassFilesRegex: /\.s[ac]ss$/,
         cssFilesRegex: /\.css$/,
-        cssModulesRegex: /\.module\.\S+$/,
       }),
       esbuildPluginTailwind({
         tailwindConfig,

local/esbuild/src/normalizePathSlashes.js

@@ -0,0 +1,4 @@
+const isExtendedLengthPath = /^\\\\\?\\/;
+
+export const normalizePathSlashes = (path) =>
+  isExtendedLengthPath.test(path) ? path : path.replace(/\\/g, '/');

local/esbuild/src/plugins/styles.js

@@ -3,97 +3,32 @@ import path from 'node:path';
 import crypto from 'node:crypto';
 import sass from 'sass';
 import esbuild from 'esbuild';
-import { writeOnlyChanges } from '../writeOnlyChanges.js';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
 
-const externalRegex = /node_modules/;
+import { normalizePathSlashes } from '../normalizePathSlashes.js';
-const isExtendedLengthPath = /^\\\\\?\\/;
-
-const normalizePathSlashes = (pathToNormalize) =>
-  isExtendedLengthPath.test(pathToNormalize)
-    ? pathToNormalize
-    : pathToNormalize.replace(/\\/g, '/');
 
 const getHash = (content) => crypto.createHash('sha1').update(content).digest('hex');
 
 export const esbuildPluginStyles = (options) => {
-  const changesMap = new Map();
   const {
     cssBuildOptions = {},
-    cssModulesRegex = /\.module\.\S+$/,
+    cssModulesRegex = null,
     sassFilesRegex = /\.s[ac]ss$/,
-    cssFilesRegex = /\.css$/,
+    include = /\.(css|scss|sass)$/,
   } = options;
+  const replaceExtensionRegex = /\.[^.]*$/;
   const sassCache = new Map();
+  const postcssCache = new Map();
   const esbuildCache = new Map();
 
-  const replaceExtension = (filePath, replacement = '') => {
+  const replaceExtension = (filePath, replacement = '') =>
-    const replacementRegex = /\.[^.]*$/;
+    filePath.replace(
-    return filePath.replace(
+      replaceExtensionRegex,
-      replacementRegex,
       typeof replacement === 'function'
-        ? replacement((filePath.match(replacementRegex) || [])[0] || '')
+        ? replacement((filePath.match(replaceExtensionRegex) || [])[0] || '')
         : replacement
     );
-  };
-
-  const resolveFile = async (build, onResolveArgs) => {
-    const { resolveDir, importer } = onResolveArgs;
-    const { path: resolvedPath } = await build.resolve(onResolveArgs.path, {
-      resolveDir,
-      importer,
-      kind: 'entry-point',
-      namespace: 'resolve-pls',
-    });
-    const external = externalRegex.test(resolvedPath);
-
-    return [resolvedPath, external];
-  };
-
-  const resolveProcessedCss = (args) => ({
-    path: args.path,
-    namespace: 'css-processed',
-    pluginData: args.pluginData,
-  });
-
-  const setupSassResolve = (build) => {
-    build.onResolve({ filter: sassFilesRegex, namespace: 'file' }, async (args) => {
-      const [resolvedPath, external] = await resolveFile(build, args);
-
-      return external
-        ? {
-            path: args.path,
-            external: true,
-          }
-        : {
-            path: cssModulesRegex.test(resolvedPath)
-              ? `${resolvedPath}.module.css`
-              : `${resolvedPath}.css`,
-            namespace: 'sass',
-            pluginData: {
-              resolvedPath,
-            },
-          };
-    });
-  };
-
-  const setupCssResolve = (build) => {
-    build.onResolve({ filter: cssFilesRegex, namespace: 'file' }, async (args) => {
-      const [resolvedPath, external] = await resolveFile(build, args);
-
-      return external
-        ? {
-            path: args.path,
-            external: true,
-          }
-        : {
-            path: resolvedPath,
-            namespace: 'css',
-            pluginData: {
-              resolvedPath,
-            },
-          };
-    });
-  };
 
   const transpileSass = (css, filePath) => {
     const currHash = getHash(css);
@@ -109,6 +44,25 @@ export const esbuildPluginStyles = (options) => {
     return sassCache.get(filePath)[1] || css;
   };
 
+  const transpilePostCss = async (source, filePath) => {
+    const currHash = getHash(source);
+    const [cacheHash] = postcssCache.get(filePath) || [];
+
+    if (currHash !== cacheHash) {
+      let cssModulesJson;
+      const plugins = [autoprefixer()].filter(Boolean);
+      try {
+        const { css } = await postcss(plugins).process(source, {
+          from: filePath,
+        });
+        const result = [css, cssModulesJson];
+        postcssCache.set(filePath, [currHash, result]);
+      } catch {}
+    }
+
+    return postcssCache.get(filePath)[1] || [source];
+  };
+
   const esbuildCss = async (initialBuildOptions, stdin, filePath) => {
     const source = stdin.contents;
     const currHash = getHash(source);
@@ -166,13 +120,18 @@ export const esbuildPluginStyles = (options) => {
 
     async setup(build) {
       const initBuildOptions = build.initialOptions;
-
+      const assetOutputFiles = new Set();
-      setupSassResolve(build);
-      setupCssResolve(build);
 
       // move newly crete stub modules to 'css-processed' namespace
-      build.onResolve({ filter: cssFilesRegex, namespace: 'sass' }, resolveProcessedCss);
+      build.onResolve({ filter: /.*/ }, (args) => {
-      build.onResolve({ filter: cssFilesRegex, namespace: 'css' }, resolveProcessedCss);
+        if (args.pluginData?.contents) {
+          return {
+            path: args.path,
+            namespace: 'css-processed',
+            pluginData: args.pluginData,
+          };
+        }
+      });
 
       // resolve asset imports for generated css files
       build.onResolve({ filter: /.*/, namespace: 'css-processed' }, async (args) =>
@@ -183,11 +142,12 @@ export const esbuildPluginStyles = (options) => {
         })
       );
 
-      build.onLoad({ filter: cssFilesRegex }, async (args) => {
+      build.onLoad({ filter: include }, async (args) => {
-        const { namespace, pluginData } = args;
+        const { namespace, pluginData, path: filePath } = args;
 
         if (namespace === 'css-processed') {
           const { contents } = pluginData;
+
           return {
             contents,
             loader: 'copy',
@@ -195,11 +155,17 @@ export const esbuildPluginStyles = (options) => {
           };
         }
 
-        const { resolvedPath } = pluginData;
+        const isSass = sassFilesRegex.test(filePath);
-        const fileName = path.basename(resolvedPath);
+
-        const resolveDir = path.dirname(resolvedPath);
+        const isCssMdoule = cssModulesRegex && cssModulesRegex.test(filePath);
-        const css = await fs.promises.readFile(resolvedPath);
+        const fileName = path.basename(filePath);
-        const source = namespace === 'sass' ? transpileSass(css, resolvedPath) : css;
+        const resolveDir = path.dirname(filePath);
+        const css = await fs.promises.readFile(filePath);
+        const [source, cssModulesJson] = await transpilePostCss(
+          isSass ? transpileSass(css, filePath) : css,
+          filePath,
+          isCssMdoule
+        );
 
         const { outputFiles, entryFile, watchFiles, warnings, errors } = await esbuildCss(
           initBuildOptions,
@@ -209,7 +175,7 @@ export const esbuildPluginStyles = (options) => {
             resolveDir,
             loader: 'css',
           },
-          resolvedPath
+          filePath
         );
 
         if (errors) {
@@ -218,15 +184,33 @@ export const esbuildPluginStyles = (options) => {
           };
         }
 
-        const entryFilePath = path.resolve(
+        const entryFilePath = normalizePathSlashes(
-          path.dirname(entryFile.path),
+          path.resolve(
-          `${path.basename(replaceExtension(args.path))}${path
+            path.dirname(entryFile.path),
-            .basename(entryFile.path)
+            `${path.basename(replaceExtension(args.path, '.css'))}`
-            .replace('stdin', '')}`
+          )
         );
-        const adaptedOutputFiles = outputFiles.filter((file) => file !== entryFile);
 
-        await writeOnlyChanges(adaptedOutputFiles, changesMap);
+        outputFiles.forEach((file) => {
+          if (file !== entryFile) {
+            assetOutputFiles.add(file);
+          }
+        });
+
+        if (isCssMdoule) {
+          return {
+            contents: `
+              export { default as file } from ${JSON.stringify(entryFilePath)};
+              export default ${JSON.stringify(cssModulesJson)};
+            `,
+            resolveDir,
+            watchFiles,
+            warnings,
+            pluginData: {
+              contents: entryFile.contents,
+            },
+          };
+        }
 
         return {
           contents: `export { default } from ${JSON.stringify(entryFilePath)};`,
@@ -238,6 +222,13 @@ export const esbuildPluginStyles = (options) => {
           },
         };
       });
+
+      build.onEnd((result) => {
+        const { outputFiles } = result;
+
+        outputFiles.push(...Array.from(assetOutputFiles));
+        assetOutputFiles.clear();
+      });
     },
   };
 };

local/full-coverage/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "@~local/full-coverage",
   "bin": {
     "full-coverage": "./bin/generateFullCoverage.js"
   },

local/playwright-tooling/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "@~local/playwright-tooling",
   "main": "./src/index.js",
   "bin": {
     "playwright-merge-coverage": "./bin/mergeCoverage.js"

local/rollup/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "@~local/rollup",
   "exports": {
     ".": "./src/createRollupConfig.js",
     "./playwright": "./src/playwright/createPlaywrightRollupConfig.js"

local/tsconfig/package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "name": "@~local/tsconfig",
   "main": "./tsconfig.json",
   "version": "0.0.0"
 }

package-lock.json

@@ -6,15 +6,16 @@
     "": {
       "workspaces": [
         "packages/*",
-        "docs/*",
+        "docs/*"
-        "local/*"
       ],
       "devDependencies": {
         "@~local/browser-testing": "file:./local/browser-testing",
         "@~local/config": "file:./local/config",
+        "@~local/esbuild": "file:./local/esbuild",
         "@~local/full-coverage": "file:./local/full-coverage",
         "@~local/playwright-tooling": "file:./local/playwright-tooling",
         "@~local/rollup": "file:./local/rollup",
+        "@~local/tailwind": "file:./local/tailwind",
         "@~local/tsconfig": "file:./local/tsconfig",
         "@babel/core": "^7.18.2",
         "@babel/plugin-transform-runtime": "^7.18.2",
@@ -83,8 +84,6 @@
         "react-dom": "18.2.0"
       },
       "devDependencies": {
-        "@~local-docs/esbuild": "file:./local/esbuild",
-        "@~local-docs/tailwind": "file:./local/tailwind",
         "@types/node": "18.7.20",
         "@types/react": "18.0.21",
         "@types/react-dom": "18.0.6",
@@ -112,51 +111,50 @@
       }
     },
     "docs/v2/local/esbuild": {
-      "dev": true
+      "extraneous": true
     },
     "docs/v2/local/tailwind": {
-      "dev": true
+      "extraneous": true
     },
     "docs/v2/local/tsconfig": {
       "extraneous": true
     },
     "local/browser-testing": {
       "version": "0.0.0",
+      "dev": true,
       "hasInstallScript": true
     },
     "local/config": {
-      "name": "@~local/config",
+      "version": "0.0.0",
-      "version": "0.0.0"
+      "dev": true
+    },
+    "local/esbuild": {
+      "dev": true
     },
     "local/full-coverage": {
-      "name": "@~local/full-coverage",
       "version": "0.0.0",
+      "dev": true,
       "bin": {
         "full-coverage": "bin/generateFullCoverage.js"
       }
     },
     "local/playwright-tooling": {
-      "name": "@~local/playwright-tooling",
       "version": "0.0.0",
+      "dev": true,
       "bin": {
         "playwright-merge-coverage": "bin/mergeCoverage.js"
       }
     },
     "local/rollup": {
-      "name": "@~local/rollup",
+      "version": "0.0.0",
-      "version": "0.0.0"
+      "dev": true
+    },
+    "local/tailwind": {
+      "dev": true
     },
     "local/tsconfig": {
-      "name": "@~local/tsconfig",
+      "version": "0.0.0",
-      "version": "0.0.0"
+      "dev": true
-    },
-    "node_modules/@~local-docs/esbuild": {
-      "resolved": "docs/v2/local/esbuild",
-      "link": true
-    },
-    "node_modules/@~local-docs/tailwind": {
-      "resolved": "docs/v2/local/tailwind",
-      "link": true
     },
     "node_modules/@~local/browser-testing": {
       "resolved": "local/browser-testing",
@@ -166,6 +164,10 @@
       "resolved": "local/config",
       "link": true
     },
+    "node_modules/@~local/esbuild": {
+      "resolved": "local/esbuild",
+      "link": true
+    },
     "node_modules/@~local/full-coverage": {
       "resolved": "local/full-coverage",
       "link": true
@@ -178,6 +180,10 @@
       "resolved": "local/rollup",
       "link": true
     },
+    "node_modules/@~local/tailwind": {
+      "resolved": "local/tailwind",
+      "link": true
+    },
     "node_modules/@~local/tsconfig": {
       "resolved": "local/tsconfig",
       "link": true
@@ -4278,10 +4284,6 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
-    "node_modules/browser-testing": {
-      "resolved": "local/browser-testing",
-      "link": true
-    },
     "node_modules/browserslist": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.0.tgz",
@@ -13040,18 +13042,15 @@
     }
   },
   "dependencies": {
-    "@~local-docs/esbuild": {
-      "version": "file:docs/v2/local/esbuild"
-    },
-    "@~local-docs/tailwind": {
-      "version": "file:docs/v2/local/tailwind"
-    },
     "@~local/browser-testing": {
       "version": "file:local/browser-testing"
     },
     "@~local/config": {
       "version": "file:local/config"
     },
+    "@~local/esbuild": {
+      "version": "file:local/esbuild"
+    },
     "@~local/full-coverage": {
       "version": "file:local/full-coverage"
     },
@@ -13061,6 +13060,9 @@
     "@~local/rollup": {
       "version": "file:local/rollup"
     },
+    "@~local/tailwind": {
+      "version": "file:local/tailwind"
+    },
     "@~local/tsconfig": {
       "version": "file:local/tsconfig"
     },
@@ -16057,9 +16059,6 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
-    "browser-testing": {
-      "version": "file:local/browser-testing"
-    },
     "browserslist": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.0.tgz",
@@ -22064,8 +22063,6 @@
     "v2": {
       "version": "file:docs/v2",
       "requires": {
-        "@~local-docs/esbuild": "file:local/esbuild",
-        "@~local-docs/tailwind": "file:local/tailwind",
         "@types/node": "18.7.20",
         "@types/react": "18.0.21",
         "@types/react-dom": "18.0.6",

package.json

@@ -2,15 +2,16 @@
   "private": true,
   "workspaces": [
     "packages/*",
-    "docs/*",
+    "docs/*"
-    "local/*"
   ],
   "devDependencies": {
     "@~local/browser-testing": "file:./local/browser-testing",
     "@~local/config": "file:./local/config",
+    "@~local/esbuild": "file:./local/esbuild",
     "@~local/full-coverage": "file:./local/full-coverage",
     "@~local/playwright-tooling": "file:./local/playwright-tooling",
     "@~local/rollup": "file:./local/rollup",
+    "@~local/tailwind": "file:./local/tailwind",
     "@~local/tsconfig": "file:./local/tsconfig",
     "@babel/core": "^7.18.2",
     "@babel/plugin-transform-runtime": "^7.18.2",