@wix/origami-transforms 0.1.9 → 0.1.10

package/dist/cssPlugins/customEnums.d.ts

@@ -1,2 +1,3 @@
+export function removeCustomEnums(root: any): any;
 /** @type {import('../transform/types.js').CssTransformPlugin} */
 export const customEnumsPlugin: import("../transform/types.js").CssTransformPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -54,5 +54,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "3225c4d857f7c4821fc78ea579b9a416bd05abd58f4bf0b0ac7906c0"
+  "falconPackageHash": "7e56e4dabc968e17605f0b4d379f65ad4b9222d482fb82ddc70a9cbe"
 }

package/src/cssPlugins/customEnums.js

@@ -1,19 +1,21 @@
 // Resolves a component's custom enums at build time. A site sets only the enum's value on an instance,
 // `#comp-1 { --labelAlign: center }`, and this writes the vars that option applies in its place, from the
 // `@custom-enum` blocks in the component wrapper's `custom-enums.css` (see component-wrapper-server's
-// `customEnums.ts`), which the page imports and the bundler inlines. The blocks are removed from the output.
+// `customEnums.ts`), read from the wrapper's folder: the item's JSX imports the wrapper's CSS, so the blocks aren't in
+// the stylesheet. A stylesheet that `@import`s the wrapper's CSS has them inlined; those are used and removed.
 // Native `if()` can't do it: Firefox doesn't have it, and a var named like its key refers to itself.
 //
 // The instance's component comes from the item's structure file (structureFile.js): the element with
 // `id="comp-1"`, and the `@origami-wrappers/…` import it is rendered from. See customEnums.md.
 
-import { realpathSync } from 'node:fs'
+import { existsSync, readFileSync, realpathSync } from 'node:fs'
 import { createRequire } from 'node:module'
-import { basename, dirname } from 'node:path'
+import { basename, dirname, join } from 'node:path'
 import postcss from 'postcss'
 import { LayoutError } from '../transform/layoutError.js'
 import { literalIdOf, parseStructure, structureFileOf, walk } from './structureFile.js'
 
+const CUSTOM_ENUMS_CSS = 'custom-enums.css'
 // `@origami-wrappers/<module>/<symbol>`, and nothing that could resolve outside its package.
 const WRAPPER_IMPORT = /^@origami-wrappers\/[\w-]+\/[\w-]+$/
 // `#id` or `.id` (exports give an instance both), then only what narrows that same element: classes,
@@ -49,10 +51,10 @@ const real = path => {
 }
 
 /**
- * Id → the enums of every wrapper instance; none for one whose component has no custom enums. An instance's enums
- * are the `@custom-enum` blocks from its wrapper's folder.
+ * Id → the enums of every wrapper instance; none for one whose component has no custom enums. `enumsOf` gives a
+ * wrapper folder's enums.
  */
-const enumsById = (structurePath, byFolder) => {
+const enumsById = (structurePath, enumsOf) => {
     const require = createRequire(structurePath)
     const byId = new Map()
     for (const [id, source] of importsById(structurePath)) {
@@ -62,7 +64,7 @@ const enumsById = (structurePath, byFolder) => {
         } catch {
             folder = undefined
         }
-        byId.set(id, (folder !== undefined && byFolder.get(folder)) || [])
+        byId.set(id, folder === undefined ? [] : enumsOf(folder))
     }
     return byId
 }
@@ -89,7 +91,7 @@ const fromDependency = declaration => declaration.source?.input.file?.split(/[\\
 
 /**
  * The `@custom-enum` blocks in the stylesheet: wrapper folder → its enums, with each option as the enum's full var
- * set; the blocks themselves, to remove; and the ones that can't be read.
+ * set; the blocks themselves; and the ones that can't be read.
  *
  * A block sits in its element's rule, `.menu`, or `.menu .menu-input` for an inline element. A var an option doesn't
  * set has the default option's value, or `inherit` when the default doesn't set it either, which is what an instance
@@ -188,17 +190,42 @@ const inlineRule = (declaration, instance, { inline, editorSelector }, options,
     inserted.set(outer, node)
 }
 
+/** Removes the stylesheet's `@custom-enum` blocks, which only this plugin reads. */
+export const removeCustomEnums = root =>
+    root.walkAtRules('custom-enum', block => {
+        if (block.parent) block.parent.raws.semicolon = true
+        block.remove()
+    })
+
 /** @type {import('../transform/types.js').CssTransformPlugin} */
 export const customEnumsPlugin = {
     name: 'custom-enums',
     // After mixins copy their bodies in, before presets and layout move declarations out of the instance's rule.
     order: 11,
     transform(root, context) {
-        const { byFolder, blocks, malformed } = definitionsIn(root)
-        if (blocks.length === 0) return
+        const inlined = definitionsIn(root)
         const structurePath = structureFileOf(context.filePath)
+        if (structurePath === undefined && inlined.blocks.length === 0) return
         if (structurePath !== undefined) context.addDependency?.(structurePath)
-        const instances = structurePath === undefined ? new Map() : enumsById(structurePath, byFolder)
+        const malformed = [...inlined.malformed]
+        // A wrapper's enums are the blocks inlined from its folder, or else those in the folder's custom-enums.css.
+        const readFolders = new Map()
+        const enumsOf = folder => {
+            if (inlined.byFolder.has(folder)) return inlined.byFolder.get(folder)
+            if (!readFolders.has(folder)) {
+                const file = join(folder, CUSTOM_ENUMS_CSS)
+                let enums = []
+                if (existsSync(file)) {
+                    context.addDependency?.(file)
+                    const definitions = definitionsIn(postcss.parse(readFileSync(file, 'utf8'), { from: file }))
+                    malformed.push(...definitions.malformed)
+                    enums = definitions.byFolder.get(folder) ?? []
+                }
+                readFolders.set(folder, enums)
+            }
+            return readFolders.get(folder)
+        }
+        const instances = structurePath === undefined ? new Map() : enumsById(structurePath, enumsOf)
         const keys = new Set([...instances.values()].flatMap(enums => enums.map(({ key }) => key)))
 
         /** @type {import('postcss').Declaration[]} */
@@ -282,10 +309,7 @@ export const customEnumsPlugin = {
             })
         }
 
-        for (const block of blocks) {
-            if (block.parent) block.parent.raws.semicolon = true
-            block.remove()
-        }
+        removeCustomEnums(root)
 
         // A rule with a selector list is split, one rule per selector, so each instance gets its own option.
         for (const rule of new Set(declarations.map(ruleOf))) {

package/src/cssPlugins/customEnums.md

@@ -57,15 +57,17 @@ the defaults:
 }
 ```
 
-The page's generated stylesheet `@import`s each used wrapper's `defaults.css`, which imports this file, and
-the bundler inlines it, so the blocks are in the document the plugin gets. The plugin reads them and removes
-them from the output. Without the plugin, browsers ignore the unknown at-rule and the defaults still apply.
+The item's JSX imports each used wrapper's `defaults.css`, which imports this file, so the browser loads
+it ahead of the site's stylesheets, and the blocks are not in the document the plugin gets. The plugin reads
+them from the wrapper's folder instead. The CSS stage removes them from the wrapper's own CSS, which runs no
+other plugin; browsers would ignore the unknown at-rule anyway, and the defaults still apply. A stylesheet
+that `@import`s `defaults.css` has the blocks inlined: the plugin reads those and removes them from the output.
 An inline element's block sits in `{editor selector} {inline selector}` (`.menu .menu-input`).
 
 The item's structure file (next to the stylesheet, or one folder up for `_generated/`) says which
 component each `id` is: the element `<Menu id="comp-1" />` and its `@origami-wrappers/…` import. The
-import resolves to the wrapper's folder, and the blocks inlined from that folder are its enums. The plugin
-declares the structure file, so editing it re-runs the stylesheet.
+import resolves to the wrapper's folder, and that folder's `custom-enums.css` holds its enums. The plugin
+declares the structure file and each `custom-enums.css` it reads, so editing either re-runs the stylesheet.
 
 Each option is written as the full set of the enum's vars: the default's value wherever the option itself is
 silent, or `inherit` when the default is silent too (what an instance that picks no option gets). So a mobile

package/src/transform/css/postcssPlugin.js

@@ -8,6 +8,7 @@
 // stylesheet the plugins see is the whole page: a rule declared in one carrier and a rule that
 // depends on it in another arrive in the same document.
 
+import { removeCustomEnums } from '../../cssPlugins/customEnums.js'
 import { runCssPlugins } from './runPlugins.js'
 
 const DEPENDENCY_DIRECTORY = 'node_modules/'
@@ -34,7 +35,12 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
         if (from === undefined) return
 
         const fileContext = contextFor(from)
-        if (!isSiteOwned(fileContext.relativePath)) return
+        // A dependency's stylesheet runs no plugins. It only loses a wrapper's `@custom-enum` blocks, which the
+        // custom-enums plugin reads from the wrapper's folder and browsers would skip.
+        if (!isSiteOwned(fileContext.relativePath)) {
+            removeCustomEnums(root)
+            return
+        }
 
         const plugins = selectPlugins(fileContext)
         if (!plugins.length) return