@wix/origami-transforms 0.1.41 → 0.1.42

package/dist/wrapperSideEffects.d.ts

@@ -5,7 +5,7 @@ export const COMPANION_APP: "companionApp";
  * app: each service's bundle and the module that registers it, `<package name>/bundle.js` and `<package name>/index.js`. */
 export const VIEWER_SERVICES_FOLDER: "src/site/_generated/viewer-services";
 export function viewerServiceImport(generatedFolder: string, packageName: string): string;
-export function wrapperSideEffectImports(sources: Iterable<string>, catalog: WrapperCatalog, generatedFolder: string): string[];
+export function wrapperSideEffectImports(sources: Iterable<string>, catalog: WrapperCatalog, generatedFolder: string, refElements?: RefElements): string[];
 /**
  * the site's component catalog (`site-component-catalog.json`), by module
  */
@@ -23,3 +23,10 @@ export type WrapperCatalog = {
         };
     };
 };
+/**
+ * each wrapper component's ref element types, by
+ * its type, as its wrapper package's `origami.refElements` lists them
+ */
+export type RefElements = {
+    readonly [type: string]: readonly string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -76,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "573fa6b0fb741a4bb27078f673fa0895c486a65ee23b26a1cf1127e8"
+  "falconPackageHash": "a93543b10c8156d2dd51f02d94e447a5aaf82374b5c26370c547c8ba"
 }

package/src/wrapperSideEffects.js

@@ -1,7 +1,8 @@
 // What an item's `_generated` entry imports before its structure, for the wrappers the structure imports: each
-// component's defaults sheet, and the registration of each viewer service a companion app provider needs. The export
-// writes these lines, and `yarn dev` and `yarn build` rewrite them when the structure changes, so both follow one rule.
-// Kept free of dependencies, like `wrapperImport.js`, so the generator's bundle doesn't take the transforms with it.
+// component's defaults sheet and its ref element types', and the registration of each viewer service a companion app
+// provider needs. The export writes these lines, and `yarn dev` and `yarn build` rewrite them when the structure
+// changes, so both follow one rule. Kept free of dependencies, like `wrapperImport.js`, so the generator's bundle
+// doesn't take the transforms with it.
 import { posix } from 'node:path'
 import { moduleFromWrapperEntry, wrapperImport } from './wrapperImport.js'
 
@@ -20,6 +21,11 @@ export const VIEWER_SERVICES_FOLDER = 'src/site/_generated/viewer-services'
  * } } }} WrapperCatalog the site's component catalog (`site-component-catalog.json`), by module
  */
 
+/**
+ * @typedef {{ readonly [type: string]: readonly string[] }} RefElements each wrapper component's ref element types, by
+ * its type, as its wrapper package's `origami.refElements` lists them
+ */
+
 /**
  * The module that registers a viewer service, as an item's `_generated` folder imports it.
  * @param {string} generatedFolder the item's `_generated` folder, relative to the site app
@@ -30,26 +36,54 @@ export const viewerServiceImport = (generatedFolder, packageName) => {
     return path.startsWith('.') ? path : `./${path}`
 }
 
+/**
+ * The `/css` of a component and of its ref elements' types, which its raw component renders itself (FastGallery its
+ * ExpandedGallery) and no structure imports: each ref type's before the component's, at any depth, so a ref type's
+ * sheet never comes after the sheet of the component that styles it. A ref type the catalog doesn't have (its app isn't
+ * on the site) brings nothing.
+ * @param {WrapperCatalog} catalog
+ * @param {RefElements} refElements
+ * @param {string} module
+ * @param {string} symbol
+ * @param {Set<string>} imports where the imports go, in order
+ * @param {Set<string>} seen the types already walked, so a cycle ends
+ */
+const addComponentCss = (catalog, refElements, module, symbol, imports, seen) => {
+    const type = `${module}.${symbol}`
+    if (!catalog[module]?.entries.components?.[symbol] || seen.has(type)) return
+    seen.add(type)
+    for (const refType of refElements[type] ?? []) {
+        const separator = refType.indexOf('.')
+        if (separator > 0) addComponentCss(catalog, refElements, refType.slice(0, separator), refType.slice(separator + 1), imports, seen)
+    }
+    imports.add(`${wrapperImport({ module, symbol })}/css`)
+}
+
 /**
  * The side-effect imports of the wrappers an item's structure imports from, once each, in the structure's order: a
- * component folder's `<folder>/css`, and a companion app provider folder's viewer service registrations. A folder is the
- * catalog symbol whose `wrapperImport` it is; a function library's folder, or one the catalog doesn't have, brings
- * nothing.
+ * component folder's `<folder>/css`, after its ref types' (`addComponentCss`), and a companion app provider folder's
+ * viewer service registrations. A folder is the catalog symbol whose `wrapperImport` it is; a function library's
+ * folder, or one the catalog doesn't have, brings nothing.
  * @param {Iterable<string>} sources the structure's import sources
  * @param {WrapperCatalog} catalog
  * @param {string} generatedFolder the item's `_generated` folder, relative to the site app
+ * @param {RefElements} [refElements] the ref element types off the installed wrapper packages; the export, which runs
+ * before they are installed, has none
  * @returns {string[]}
  */
-export const wrapperSideEffectImports = (sources, catalog, generatedFolder) => {
+export const wrapperSideEffectImports = (sources, catalog, generatedFolder, refElements = {}) => {
     /** @type {Set<string>} */
     const imports = new Set()
+    /** @type {Set<string>} */
+    const seen = new Set()
     for (const source of sources) {
         const module = moduleFromWrapperEntry(source)
         if (!module) continue
         const { components = {}, contextProviders = {} } = catalog[module]?.entries ?? {}
         /** @param {string} name */
         const isFolder = name => wrapperImport({ module, symbol: name }) === source
-        if (Object.keys(components).some(isFolder)) imports.add(`${source}/css`)
+        const symbol = Object.keys(components).find(isFolder)
+        if (symbol) addComponentCss(catalog, refElements, module, symbol, imports, seen)
         if (module !== COMPANION_APP) continue
         const provider = Object.keys(contextProviders).find(isFolder)
         for (const service of (provider && contextProviders[provider].services) ?? []) {