handoff-app 2.0.0-8 → 2.0.0-9

package/dist/transformers/utils/build.js

@@ -1,12 +1,35 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_CLIENT_BUILD_CONFIG = exports.DEFAULT_SSR_BUILD_CONFIG = void 0;
+exports.DEFAULT_CLIENT_BUILD_CONFIG = exports.DEFAULT_SSR_BUILD_CONFIG = exports.STYLE_IMPORT_LOADERS = void 0;
+exports.withStyleLoaders = withStyleLoaders;
+exports.collectStyleImports = collectStyleImports;
 exports.resolveModule = resolveModule;
 exports.createReactResolvePlugin = createReactResolvePlugin;
+const esbuild_1 = __importDefault(require("esbuild"));
 const path_1 = __importDefault(require("path"));
+const STYLE_EXTENSIONS = ['.css', '.scss', '.sass'];
+/**
+ * Keeps co-located stylesheet imports out of the JavaScript graph; the CSS pipeline compiles them.
+ *
+ * esbuild has no `.scss` loader, and a `.css` import fails too because these builds run with
+ * `write: false` and no output path. `empty` rather than a plugin: `esbuild.buildSync` rejects
+ * plugins, and the declaration and config loaders are synchronous.
+ *
+ * CSS Modules are not covered — the empty module leaves the class map undefined.
+ */
+exports.STYLE_IMPORT_LOADERS = Object.fromEntries(STYLE_EXTENSIONS.map((extension) => [extension, 'empty']));
 /**
  * Default esbuild configuration for SSR builds
  */
@@ -17,6 +40,7 @@ exports.DEFAULT_SSR_BUILD_CONFIG = {
     platform: 'node',
     jsx: 'automatic',
     external: ['react', 'react-dom', '@opentelemetry/api'],
+    loader: exports.STYLE_IMPORT_LOADERS,
 };
 /**
  * Default esbuild configuration for client builds
@@ -29,7 +53,65 @@ exports.DEFAULT_CLIENT_BUILD_CONFIG = {
     jsx: 'automatic',
     sourcemap: false,
     minify: false,
+    loader: exports.STYLE_IMPORT_LOADERS,
 };
+/** Apply after a consumer hook: a hook that replaces `loader` would otherwise drop these. */
+function withStyleLoaders(config) {
+    return Object.assign(Object.assign({}, config), { loader: Object.assign(Object.assign({}, config.loader), exports.STYLE_IMPORT_LOADERS) });
+}
+/**
+ * Stylesheets of the module graph in cascade order: every import of a module before the module
+ * itself, siblings in source order.
+ *
+ * This is the order a bundler emits CSS in, and the cascade depends on it. A component that
+ * overrides a rule of a component it imports ties that rule on specificity, so the later of the
+ * two wins. esbuild's `onLoad` callbacks do not give this order: they fire roughly breadth-first,
+ * which puts a component's own stylesheet ahead of the ones it imports and reverses every such
+ * override.
+ */
+function orderStyleImports(metafile, entryPath) {
+    const entryKey = Object.keys(metafile.inputs).find((key) => path_1.default.resolve(key) === entryPath);
+    if (!entryKey)
+        return [];
+    const ordered = [];
+    const visited = new Set();
+    const visit = (key) => {
+        var _a, _b;
+        if (visited.has(key))
+            return;
+        visited.add(key);
+        for (const imported of (_b = (_a = metafile.inputs[key]) === null || _a === void 0 ? void 0 : _a.imports) !== null && _b !== void 0 ? _b : []) {
+            if (!imported.external && metafile.inputs[imported.path])
+                visit(imported.path);
+        }
+        if (STYLE_EXTENSIONS.includes(path_1.default.extname(key)))
+            ordered.push(path_1.default.resolve(key));
+    };
+    visit(entryKey);
+    return ordered;
+}
+/**
+ * Stylesheet paths imported anywhere in a component's module graph, in cascade order.
+ *
+ * An unbuildable graph yields an empty list rather than throwing, leaving the CSS step with the
+ * declared entry.
+ */
+function collectStyleImports(entryPath, handoff) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        const baseConfig = Object.assign(Object.assign({}, exports.DEFAULT_SSR_BUILD_CONFIG), { entryPoints: [entryPath], logLevel: 'silent' });
+        const hookedConfig = ((_b = (_a = handoff === null || handoff === void 0 ? void 0 : handoff.config) === null || _a === void 0 ? void 0 : _a.hooks) === null || _b === void 0 ? void 0 : _b.ssrBuildConfig) ? handoff.config.hooks.ssrBuildConfig(baseConfig) : baseConfig;
+        try {
+            // The `empty` loader keeps stylesheets out of the JavaScript, and the metafile still records
+            // them as inputs, so the graph carries the order.
+            const result = yield esbuild_1.default.build(Object.assign(Object.assign({}, withStyleLoaders(hookedConfig)), { metafile: true }));
+            return result.metafile ? orderStyleImports(result.metafile, entryPath) : [];
+        }
+        catch (_c) {
+            return [];
+        }
+    });
+}
 /**
  * Resolves a module from multiple search directories
  * @param id - Module ID to resolve

package/dist/transformers/utils/module.js

@@ -19,9 +19,10 @@ const build_1 = require("./build");
 function createModuleBuildConfig(entryPath, handoff) {
     var _a, _b;
     const defaultBuildConfig = Object.assign(Object.assign({}, build_1.DEFAULT_SSR_BUILD_CONFIG), { entryPoints: [entryPath] });
-    return ((_b = (_a = handoff.config) === null || _a === void 0 ? void 0 : _a.hooks) === null || _b === void 0 ? void 0 : _b.ssrBuildConfig)
+    const hookedBuildConfig = ((_b = (_a = handoff.config) === null || _a === void 0 ? void 0 : _a.hooks) === null || _b === void 0 ? void 0 : _b.ssrBuildConfig)
         ? handoff.config.hooks.ssrBuildConfig(defaultBuildConfig)
         : defaultBuildConfig;
+    return (0, build_1.withStyleLoaders)(hookedBuildConfig);
 }
 function evaluateBuiltModule(code) {
     const mod = { exports: {} };

package/dist/types/config.d.ts

@@ -273,6 +273,9 @@ export interface Config {
         validateComponent?: (component: TransformComponentTokensResult) => Promise<Record<string, ValidationResult>>;
         /**
          * Optional hook to override the SSR build configuration used in the ssrRenderPlugin
+         *
+         * Stylesheet loaders are re-applied after this hook, so a `.css`/`.scss`/`.sass` import stays out
+         * of the JavaScript graph whatever the hook returns.
          * @param config - The default esbuild configuration
          * @returns Modified esbuild configuration
          * @example
@@ -286,6 +289,9 @@ export interface Config {
         ssrBuildConfig?: (config: BuildOptions) => BuildOptions;
         /**
          * Optional hook to override the client-side build configuration used in the ssrRenderPlugin
+         *
+         * Stylesheet loaders are re-applied after this hook, so a `.css`/`.scss`/`.sass` import stays out
+         * of the JavaScript graph whatever the hook returns.
          * @param config - The default esbuild configuration
          * @returns Modified esbuild configuration
          * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "2.0.0-8",
+  "version": "2.0.0-9",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

package/src/app/components/Component/PageSliceResolver.tsx

@@ -44,6 +44,7 @@ export const PageSliceResolver: React.FC<PageSliceResolverProps> = ({
           showPreview={slice.showPreview}
           showCodeHighlight={slice.showCodeHighlight}
           defaultHeight={slice.defaultHeight}
+          defaultWidth={slice.defaultWidth}
           filterBy={slice.filterBy}
           codeHighlight={codeHighlight}
         />