@emulsify/core 4.3.2 → 4.4.0

package/config/vite/vite.config.js

@@ -13,18 +13,13 @@
  *     parts of it by returning a patch object from `extendConfig(...)`.
  *
  * Notes:
- * - JS sourcemaps come from `build.sourcemap`. Extracted CSS gets no map from
- *   `vite build`: `vite:css-post` emits CSS through
- *   `this.emitFile({ type: 'asset' })`, Rollup/Rolldown assets carry no map,
- *   and `finalizeCss()` -> `minifyCSS()` returns code only. To trace a rule
- *   back to its `.scss` partial, let Vite compile the SCSS in Storybook: set
- *   `parameters.emulsify.loadAllCSS = false` in
- *   `config/emulsify-core/storybook/preview.js` and import the SCSS entry
- *   there, so `css.devSourcemap` can chain the map to source. Loading the
- *   compiled CSS instead yields an identity map whose only source is the
- *   compiled `.css` file.
- * - CSS is left unminified during `vite build --watch` so the develop loop
- *   stays readable; one-shot builds keep minification.
+ * - `vite build --watch` emits external JS and CSS maps while one-shot
+ *   production builds ship neither. Vite discards maps when it extracts CSS as
+ *   an asset, so Core captures the Sass/PostCSS map before URL rewriting and
+ *   attaches it to the finalized stylesheet. URL rewrites preserve source
+ *   lines, though a changed URL length can shift columns inside that value.
+ * - JS and CSS stay unminified during `vite build --watch` so generated output
+ *   remains readable. One-shot builds keep Vite's production minification.
  * - CSS assets keep their path and drop the internal `__style` suffix if present.
  */
 
@@ -36,7 +31,10 @@ import { makePlugins } from './plugins.js';
 import { buildInputs } from './entries.js';
 import { createSourceFileIndex } from './plugins/assets/source-file-index.js';
 import { createDiagnosticsCollector } from './plugins/reporter/diagnostics.js';
-import { createSassOptions } from './plugins/reporter/sass-logger.js';
+import {
+  createSassOptions,
+  shouldQuietSass,
+} from './plugins/reporter/sass-logger.js';
 import {
   createReporterLogger,
   isVerbose,
@@ -45,7 +43,7 @@ import { isWatchInvocation } from './plugins/reporter/watch-mode.js';
 import { loadProjectExtensions } from './project-extensions.js';
 import { mergeReactSingletonResolve } from './utils/react-singleton.js';
 
-export default defineConfig(async () => {
+async function createViteConfig({ command, isStorybookBuild = false } = {}) {
   /**
    * Environment details for this build (project paths, platform, flags).
    * @typedef {Object} EmulsifyEnv
@@ -56,20 +54,42 @@ export default defineConfig(async () => {
    * @property {boolean} [SDC] - Single Directory Components toggle, if available.
    * @property {boolean} [structureOverrides] - Whether component structure overrides are enabled.
    * @property {string[]} [structureRoots] - Override roots, if provided.
+   * @property {boolean} [assetRebase] - Whether unresolved CSS asset URLs are repaired.
+   * @property {boolean} [selfContainedOutput] - Whether project assets remain in the output.
    * @property {object} [platformAdapter] - Active platform behavior adapter.
+   * @property {boolean} [developmentBuild] - Whether this is the long-running develop build.
    */
 
   /** @type {EmulsifyEnv} */
   const env = resolveEnvironment();
   const sourceFileIndex = createSourceFileIndex(env.projectStructure);
 
-  // The develop reporter takes over output only for `vite build --watch`, the
-  // watcher `npm run develop` runs. One-shot builds, Storybook, and the release
-  // fixture verifications keep their existing output untouched, so no warning
-  // is ever collected without also being reported.
+  // The full develop summary runs only for `vite build --watch`, the watcher
+  // `npm run develop` starts. One-shot builds keep their normal output and add
+  // a compact diagnostic block only when the collector has something to say.
   const watching = isWatchInvocation();
-  const diagnostics = watching ? createDiagnosticsCollector() : undefined;
-  const envWithSourceFileIndex = { ...env, sourceFileIndex, diagnostics };
+
+  // The collector itself is a handful of Maps, and one-shot builds need one
+  // too: an unresolved CSS asset URL used to print a single raw Vite line and
+  // exit 0, so a broken asset path shipped through CI unnoticed. The reporter
+  // plugin decides whether to speak, and for a one-shot build it stays silent
+  // unless there is an asset problem or a collected Sass deprecation tally —
+  // a clean project's output is unchanged.
+  const diagnostics = createDiagnosticsCollector();
+  const envWithSourceFileIndex = {
+    ...env,
+    sourceFileIndex,
+    diagnostics,
+    developmentBuild: watching,
+  };
+
+  // `vite build` and `vite build --watch` both resolve `command: 'build'`.
+  // Storybook pins `serve` for both of its commands, so its Vite adapter
+  // supplies the separate static-build signal. Raw verbose output still needs
+  // the wrapper: it passes the notice through while retaining a copy for
+  // strict asset mode.
+  const captureViteNotices =
+    !watching && (command === 'build' || isStorybookBuild);
 
   // Build the Rollup/Vite entry map: keys encode output paths, values source files.
   /** @type {Record<string, string>} */
@@ -93,7 +113,9 @@ export default defineConfig(async () => {
    *   extendConfig?: (base: import('vite').UserConfig, ctx: { env: EmulsifyEnv }) => import('vite').UserConfig
    * }}
    */
-  const { projectPlugins, extendConfig } = await loadProjectExtensions({ env });
+  const { projectPlugins, extendConfig } = await loadProjectExtensions({
+    env,
+  });
 
   // Assemble the base config before applying project extensions.
   /** @type {import('vite').UserConfig} */
@@ -137,7 +159,15 @@ export default defineConfig(async () => {
     // build reporter consults the level and never consults the logger.
     // `build.reportCompressedSize` is deliberately left alone; it suppresses
     // only the gzip column, and the table it belongs to is already gone.
-    ...(diagnostics
+    //
+    // A one-shot build takes only the second switch. `logLevel: 'warn'` is what
+    // stops Rolldown instrumenting transforms, so setting it there would delete
+    // the module count and the per-file asset table from `npm run build` — the
+    // one command whose output people actually read. The comment above already
+    // establishes the two are independent, and this relies on that: the logger
+    // captures the unresolved-URL notices, the reporter prints them back as one
+    // block, and Rolldown's report is untouched.
+    ...(watching
       ? {
           logLevel: isVerbose() ? 'info' : 'warn',
           customLogger: createReporterLogger(
@@ -145,42 +175,52 @@ export default defineConfig(async () => {
             createLogger(isVerbose() ? 'info' : 'warn'),
           ),
         }
-      : {}),
+      : captureViteNotices
+        ? { customLogger: createReporterLogger(diagnostics, createLogger()) }
+        : {}),
 
     // Keep React-based story helpers on the consumer project's React singleton.
     resolve: mergeReactSingletonResolve(),
 
-    // Generate CSS sourcemaps in dev; JS sourcemaps are set in `build.sourcemap`.
-    // These map only what Vite itself compiles. A preview that imports
-    // already-compiled CSS gets an identity map pointing at that `.css` file,
-    // so import SCSS entries when styles need to resolve to their partials.
+    // Ask Sass/PostCSS for maps. Vite uses them directly in its dev server;
+    // Core's development map plugins retain them for extracted watch-build CSS.
+    // JS sourcemaps are controlled by `build.sourcemap` below.
     css: {
       devSourcemap: true,
 
-      // During a watch build, route Sass warnings into the diagnostics
-      // collector instead of letting Dart Sass print a formatted block per
-      // occurrence. The reporter prints one deduplicated tally per cycle, so
-      // the deprecation debt stays visible without the repetition.
-      ...(diagnostics
+      // Route Sass warnings into the diagnostics collector instead of letting
+      // Dart Sass print a formatted block per occurrence. The reporter prints
+      // one deduplicated tally per develop session or standalone Storybook
+      // build, so the debt stays visible without the repetition.
+      // `shouldQuietSass` owns which invocations get this.
+      ...(shouldQuietSass({ watching, command, verbose: isVerbose() })
         ? { preprocessorOptions: { scss: createSassOptions(diagnostics) } }
         : {}),
     },
 
     build: {
-      // Clean the output directory before building.
+      // Clean the output directory before building. Vite re-empties it on every
+      // watch rebuild, not just the first, which rewrites stylesheets no edit
+      // touched; `stableWatchOutputPlugin` turns that off once the develop
+      // loop's first cycle has produced a clean tree.
       emptyOutDir: true,
 
       // All outputs are written into ./dist/
       outDir: 'dist/',
 
-      // Emit JS sourcemaps. Extracted CSS is not covered; see the file header.
-      sourcemap: true,
+      // Keep source maps available to the develop watcher without shipping
+      // them in one-shot production builds. Core bridges the extracted-CSS gap
+      // left by Vite; see the file header.
+      sourcemap: watching,
+
+      // Readable generated JavaScript plus its source map makes the watch
+      // output useful on both sides of devtools. Production retains Vite's
+      // default minification behavior through the explicit TRUE value.
+      minify: !watching,
 
-      // Vite cannot map extracted CSS, so during `vite build --watch` the
-      // readable stylesheet is the debugging aid: keep it unminified so
-      // devtools shows one declaration per line instead of a single long line.
-      // One-shot `vite build`, `storybook build`, and the release fixture
-      // verifications still minify, so nothing a platform ships changes.
+      // Keep development styles readable as well as mapped. One-shot
+      // `vite build`, `storybook build`, and release fixtures still minify, so
+      // nothing a platform ships changes.
       cssMinify: !watching,
 
       rollupOptions: {
@@ -238,10 +278,34 @@ export default defineConfig(async () => {
 
   // Let project extensions patch the final Vite config.
   /** @type {import('vite').UserConfig} */
+  const extensionPatch =
+    typeof extendConfig === 'function' ? extendConfig(base, { env }) || {} : {};
   const patched =
     typeof extendConfig === 'function'
-      ? mergeConfig(base, extendConfig(base, { env }) || {})
+      ? mergeConfig(base, extensionPatch)
       : base;
 
+  // A project extension can enable watch mode without a CLI flag. Apply the
+  // same development defaults in that case while preserving any explicit
+  // sourcemap or minification choices in the extension itself.
+  if (!watching && patched.build?.watch) {
+    const extensionBuild = extensionPatch.build || {};
+    return {
+      ...patched,
+      build: {
+        ...patched.build,
+        ...(!Object.hasOwn(extensionBuild, 'sourcemap')
+          ? { sourcemap: true }
+          : {}),
+        ...(!Object.hasOwn(extensionBuild, 'minify') ? { minify: false } : {}),
+        ...(!Object.hasOwn(extensionBuild, 'cssMinify')
+          ? { cssMinify: false }
+          : {}),
+      },
+    };
+  }
+
   return patched;
-});
+}
+
+export default defineConfig(createViteConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "Bundled tooling for Storybook development + Vite Build",
   "keywords": [
     "component library",
@@ -59,11 +59,18 @@
     "config/vite/entries.js",
     "config/vite/environment.js",
     "config/vite/platforms.js",
+    "config/vite/plugins.js",
+    "config/vite/plugins/assets/asset-url-rebase.js",
     "config/vite/plugins/assets/copy-src-assets.js",
     "config/vite/plugins/assets/copy-twig-files.js",
+    "config/vite/plugins/assets/css-asset-rebase.js",
     "config/vite/plugins/assets/css-asset-relativizer.js",
+    "config/vite/plugins/assets/development-source-maps.js",
     "config/vite/plugins/assets/mirror-components.js",
+    "config/vite/plugins/assets/output-freshness.js",
     "config/vite/plugins/assets/source-file-index.js",
+    "config/vite/plugins/assets/stable-watch-output.js",
+    "config/vite/plugins/assets/storybook-output.js",
     "config/vite/plugins/assets/svg-sprite.js",
     "config/vite/plugins/index.js",
     "config/vite/plugins/reporter/asset-resolver.js",
@@ -74,6 +81,7 @@
     "config/vite/plugins/reporter/render.js",
     "config/vite/plugins/reporter/sass-logger.js",
     "config/vite/plugins/reporter/source-roots.js",
+    "config/vite/plugins/reporter/strict-mode.js",
     "config/vite/plugins/reporter/verbosity.js",
     "config/vite/plugins/reporter/vite-logger.js",
     "config/vite/plugins/reporter/watch-mode.js",
@@ -85,23 +93,22 @@
     "config/vite/plugins/twig/virtual-twig-globs.js",
     "config/vite/plugins/twig/vituum-patch.js",
     "config/vite/plugins/yaml-module.js",
-    "config/vite/plugins.js",
     "config/vite/project-config.js",
     "config/vite/project-extensions.js",
     "config/vite/project-structure.js",
+    "config/vite/utils/asset-roots.js",
+    "config/vite/utils/css-urls.js",
     "config/vite/utils/fs-safe.js",
     "config/vite/utils/lru.js",
     "config/vite/utils/package-version.js",
     "config/vite/utils/paths.js",
     "config/vite/utils/react-singleton.js",
+    "config/vite/utils/source-maps.js",
     "config/vite/vite.config.js",
     "scripts/a11y.js",
+    "scripts/audit-twig-stories.js",
     "scripts/audit.js",
     "scripts/audit/**/*.js",
-    "!scripts/audit/**/*.test.js",
-    "!scripts/audit/**/__snapshots__/**",
-    "!scripts/audit/test-utils.js",
-    "scripts/audit-twig-stories.js",
     "scripts/check-node-version.js",
     "scripts/inspect-components.js",
     "scripts/lib/cli.js",
@@ -139,7 +146,10 @@
     "src/storybook/twig/resolver.js",
     "src/storybook/twig/setup.js",
     "src/storybook/twig/source-function.js",
-    "src/storybook/twig/source.js"
+    "src/storybook/twig/source.js",
+    "!scripts/audit/**/*.test.js",
+    "!scripts/audit/**/__snapshots__/**",
+    "!scripts/audit/test-utils.js"
   ],
   "exports": {
     ".": "./src/extensions/index.js",
@@ -157,7 +167,8 @@
     "./package.json": "./package.json"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "config": {
     "scripts-prepend-node-path": "auto"
@@ -201,57 +212,55 @@
     "@emulsify/cli": "^2.2.0",
     "@eslint/js": "^9.39.5",
     "@mlnop/vite-plugin-sass-glob-import": "^6.2.0",
-    "@storybook/addon-a11y": "^10.5.4",
-    "@storybook/addon-links": "^10.5.4",
-    "@storybook/addon-themes": "^10.5.4",
-    "@storybook/react": "^10.5.4",
-    "@storybook/react-vite": "^10.5.4",
+    "@storybook/addon-a11y": "^10.5.8",
+    "@storybook/addon-links": "^10.5.8",
+    "@storybook/addon-themes": "^10.5.8",
+    "@storybook/react": "^10.5.8",
+    "@storybook/react-vite": "^10.5.8",
     "@vituum/vite-plugin-twig": "^2.0.1",
     "autoprefixer": "^10.5.4",
-    "axe-core": "^4.12.1",
+    "axe-core": "^4.13.0",
     "babel-preset-minify": "^0.5.2",
-    "concurrently": "^10.0.4",
+    "concurrently": "^10.0.5",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.16.0",
+    "eslint-plugin-jest": "^29.16.1",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-security": "^4.0.1",
-    "eslint-plugin-storybook": "^10.5.4",
+    "eslint-plugin-storybook": "^10.5.8",
     "glob": "^13.0.6",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
-    "js-yaml": "^5.2.2",
+    "js-yaml": "^5.3.0",
     "normalize.css": "^8.0.1",
     "open-cli": "^9.0.0",
     "pa11y": "^9.1.1",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.26",
     "postcss-scss": "^4.0.9",
     "sass": "^1.102.0",
-    "storybook": "^10.5.4",
+    "storybook": "^10.5.8",
     "stylelint": "^17.14.1",
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-selector-bem-pattern": "^5.0.0",
     "twig": "^3.0.0",
     "twig-drupal-filters": "^3.2.0",
-    "vite": "^8.1.5"
+    "vite": "^8.2.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^21.2.1",
-    "@commitlint/config-conventional": "^21.2.0",
-    "@semantic-release/changelog": "^7.0.0",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@semantic-release/commit-analyzer": "^13.0.1",
-    "@semantic-release/git": "^11.0.1",
     "@semantic-release/github": "^12.0.9",
     "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.1",
     "husky": "^9.1.7",
-    "lint-staged": "^17.2.0",
-    "puppeteer": "^25.3.0",
+    "lint-staged": "^17.3.0",
+    "puppeteer": "^25.7.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "semantic-release": "^25.0.8"
+    "semantic-release": "^25.0.9"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -268,6 +277,8 @@
     "fsevents@2.3.3": true,
     "puppeteer@24.43.1": true,
     "unrs-resolver@1.12.2": true,
-    "puppeteer@25.4.0": true
+    "puppeteer@25.4.0": true,
+    "puppeteer@25.5.0": true,
+    "puppeteer@25.7.0": true
   }
 }