@wix/origami-transforms 0.1.6 → 0.1.8

package/dist/cssPlugins/structureFile.d.ts

@@ -0,0 +1,4 @@
+export function structureFileOf(stylesheetPath: any): string | undefined;
+export function parseStructure(structurePath: any): any;
+export function walk(node: any, visit: any): void;
+export function literalIdOf(openingElement: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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": "104bb1dbbdebc96c665a8cdf46acdfeb8ceef46bd8a7fcbd1ff2d10b"
+  "falconPackageHash": "09b1c7aec92977ffa2db7c85a87daf406d7628c92600cbe85ed3ef94"
 }

package/src/cssPlugins/customEnums.js

@@ -4,18 +4,16 @@
 // `customEnums.ts`), which the page imports and the bundler inlines. The blocks are removed from the output.
 // 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, as in stackChildren.js: the element with
+// 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 { existsSync, readFileSync, realpathSync } from 'node:fs'
+import { realpathSync } from 'node:fs'
 import { createRequire } from 'node:module'
-import { basename, dirname, join } from 'node:path'
-import { parseSync } from '@babel/core'
+import { basename, dirname } from 'node:path'
 import postcss from 'postcss'
 import { LayoutError } from '../transform/layoutError.js'
+import { literalIdOf, parseStructure, structureFileOf, walk } from './structureFile.js'
 
-const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
-const GENERATED = '_generated'
 // `@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,
@@ -23,44 +21,21 @@ const WRAPPER_IMPORT = /^@origami-wrappers\/[\w-]+\/[\w-]+$/
 // and no pseudo-elements, which the component doesn't read vars from.
 const INSTANCE = /^[#.]([\w-]+)(?!.*::)(?:[.:[][^\s>+~]*)?((?:\s+[^\s>+~]+)*)$/
 
-/** The folder holding the structure file a stylesheet is checked against: its own, or its item's for `_generated/`. */
-const structureFolderOf = stylesheetPath => {
-    const folder = dirname(stylesheetPath)
-    return basename(folder) === GENERATED ? dirname(folder) : folder
-}
-
 /** Id → the wrapper import it is rendered from, for elements with a literal `id` and an imported wrapper tag. */
 const importsById = structurePath => {
-    const ast = parseSync(readFileSync(structurePath, 'utf8'), {
-        babelrc: false,
-        configFile: false,
-        filename: structurePath,
-        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
-    })
+    const program = parseStructure(structurePath)
     const sources = new Map()
-    for (const node of ast?.program.body ?? []) {
+    for (const node of program?.body ?? []) {
         if (node.type !== 'ImportDeclaration' || !WRAPPER_IMPORT.test(node.source.value)) continue
         for (const specifier of node.specifiers) sources.set(specifier.local.name, node.source.value)
     }
     const byId = new Map()
-    const visit = node => {
-        if (Array.isArray(node)) return node.forEach(visit)
-        if (!node || typeof node.type !== 'string') return
-        if (node.type === 'JSXOpeningElement' && node.name.type === 'JSXIdentifier') {
-            const id = node.attributes.find(
-                attribute =>
-                    attribute.type === 'JSXAttribute' &&
-                    attribute.name.name === 'id' &&
-                    attribute.value?.type === 'StringLiteral'
-            )?.value.value
-            const source = sources.get(node.name.name)
-            if (id !== undefined && source !== undefined) byId.set(id, source)
-        }
-        for (const [key, value] of Object.entries(node)) {
-            if (key !== 'loc' && value && typeof value === 'object') visit(value)
-        }
-    }
-    visit(ast?.program)
+    walk(program, node => {
+        if (node.type !== 'JSXOpeningElement' || node.name.type !== 'JSXIdentifier') return
+        const id = literalIdOf(node)
+        const source = sources.get(node.name.name)
+        if (id !== undefined && source !== undefined) byId.set(id, source)
+    })
     return byId
 }
 
@@ -221,9 +196,7 @@ export const customEnumsPlugin = {
     transform(root, context) {
         const { byFolder, blocks, malformed } = definitionsIn(root)
         if (blocks.length === 0) return
-        const structurePath = STRUCTURE_FILES.map(file => join(structureFolderOf(context.filePath), file)).find(
-            existsSync
-        )
+        const structurePath = structureFileOf(context.filePath)
         if (structurePath !== undefined) context.addDependency?.(structurePath)
         const instances = structurePath === undefined ? new Map() : enumsById(structurePath, byFolder)
         const keys = new Set([...instances.values()].flatMap(enums => enums.map(({ key }) => key)))

package/src/cssPlugins/stackChildren.js

@@ -1,21 +1,19 @@
 // Checks the CSS of a stack's direct children (rule S2-STACK-001). It changes nothing: every violation in the
 // stylesheet is collected, and the build fails once with all of them.
 //
-// A stack is a parent whose rule declares `--container-layout-type: StackContainerLayout`; its
-// `flex-direction` says which way it stacks (column → vertical, anything else → horizontal, as in
-// CSS). Parent and child are the JSX tree's, so the tree comes from the item's `structure.tsx` (or `.jsx`): next
-// to the stylesheet, or one folder up when the stylesheet is the generated one in `_generated/`. Elements and
-// rules meet on `id` and `#id`. The stylesheet is the page's, with its
-// carriers already inlined (see ../transform/css/postcssPlugin.js), so every rule is in view.
-
-import { existsSync, readFileSync } from 'node:fs'
-import { basename, dirname, join } from 'node:path'
-import { parseSync } from '@babel/core'
+// A stack is a parent laid out with a non-wrapping flex, as DM derives it; an internal container writes its
+// layout in its `@origami-target internal-container-content-wrapper` block. `flex-direction` says which way
+// it stacks (column → vertical, anything else → horizontal, as in CSS).
+//
+// Parent and child are the JSX tree's, so the tree comes from the item's structure file (see
+// structureFile.js). The stylesheet is the page's, with its carriers already inlined (see
+// ../transform/css/postcssPlugin.js), so every rule is in view.
+
+import { basename } from 'node:path'
 import { LayoutError } from '../transform/layoutError.js'
+import { literalIdOf, parseStructure, structureFileOf, walk } from './structureFile.js'
 
-const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
-const GENERATED = '_generated'
-const STACK_CONTAINER = 'StackContainerLayout'
+const CONTENT_WRAPPER = 'internal-container-content-wrapper'
 const BASE = ''
 
 // What a stack child may write, per direction. `0` is allowed wherever a length is.
@@ -56,46 +54,21 @@ const lengthOf = token => {
     return UNIT.exec(token)?.[1].toLowerCase()
 }
 
-/** The folder holding the structure file a stylesheet is checked against: its own, or its item's for `_generated/`. */
-const structureFolderOf = stylesheetPath => {
-    const folder = dirname(stylesheetPath)
-    return basename(folder) === GENERATED ? dirname(folder) : folder
-}
-
 /** Child id → its direct parent's id, for elements with a literal `id`. Slot props are not children. */
 const parentsIn = structurePath => {
-    const ast = parseSync(readFileSync(structurePath, 'utf8'), {
-        babelrc: false,
-        configFile: false,
-        filename: structurePath,
-        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
-    })
     const parents = new Map()
-    const idOf = element => {
-        const attribute = element.openingElement.attributes.find(
-            node => node.type === 'JSXAttribute' && node.name.name === 'id' && node.value?.type === 'StringLiteral'
-        )
-        return attribute?.value.value
-    }
     const directChildren = node =>
         node.children.flatMap(child =>
             child.type === 'JSXElement' ? [child] : child.type === 'JSXFragment' ? directChildren(child) : []
         )
-    const visit = node => {
-        if (Array.isArray(node)) return node.forEach(visit)
-        if (!node || typeof node.type !== 'string') return
-        if (node.type === 'JSXElement') {
-            const parent = idOf(node)
-            for (const child of directChildren(node)) {
-                const id = idOf(child)
-                if (parent !== undefined && id !== undefined) parents.set(id, parent)
-            }
+    walk(parseStructure(structurePath), node => {
+        if (node.type !== 'JSXElement') return
+        const parent = literalIdOf(node.openingElement)
+        for (const child of directChildren(node)) {
+            const id = literalIdOf(child.openingElement)
+            if (parent !== undefined && id !== undefined) parents.set(id, parent)
         }
-        for (const [key, value] of Object.entries(node)) {
-            if (key !== 'loc' && value && typeof value === 'object') visit(value)
-        }
-    }
-    visit(ast?.program)
+    })
     return parents
 }
 
@@ -108,38 +81,63 @@ const conditionOf = rule => {
     return conditions.join(' / ')
 }
 
-/** Id → condition → the declarations that rules selecting exactly `#id` make there, in source order. */
-const declarationsById = root => {
+// Exports give an element both `#id` and `.id`, and write its CSS on the class.
+const OWN_SELECTOR = /^([#.])([\w-]+)$/
+
+const isContentWrapper = node =>
+    node.type === 'atrule' && node.name === 'origami-target' && node.params.trim() === CONTENT_WRAPPER
+
+/** Id → condition → `.`/`#` → declarations, in source order. With `content`, a content wrapper block counts. */
+const declarationsById = (root, { content = false } = {}) => {
     const byId = new Map()
     root.walkRules(rule => {
-        const ids = rule.selectors.map(selector => /^#([\w-]+)$/.exec(selector.trim())?.[1]).filter(Boolean)
-        if (!ids.length) return
+        const own = rule.selectors.map(selector => OWN_SELECTOR.exec(selector.trim())).filter(Boolean)
+        if (!own.length) return
         const condition = conditionOf(rule)
-        for (const id of ids) {
+        for (const [, kind, id] of own) {
             const byCondition = byId.get(id) ?? new Map()
             byId.set(id, byCondition)
-            const declarations = byCondition.get(condition) ?? []
-            byCondition.set(condition, declarations)
+            const byKind = byCondition.get(condition) ?? { '.': [], '#': [] }
+            byCondition.set(condition, byKind)
             rule.each(node => {
-                if (node.type === 'decl') declarations.push(node)
+                if (node.type === 'decl') byKind[kind].push(node)
+                else if (content && isContentWrapper(node)) {
+                    node.each(inner => {
+                        if (inner.type === 'decl') byKind[kind].push(inner)
+                    })
+                }
             })
         }
     })
     return byId
 }
 
-/** The declarations in effect under `condition`: the base ones, then the condition's own. */
+/**
+ * The declarations in effect under `condition`: the base ones, then the condition's own; `#id` beats `.id`, and
+ * `!important` beats both.
+ */
 const effective = (byCondition, condition) => {
     const result = new Map()
-    for (const key of condition === BASE ? [BASE] : [BASE, condition]) {
-        for (const declaration of byCondition?.get(key) ?? []) result.set(declaration.prop, declaration)
+    for (const important of [false, true]) {
+        for (const kind of ['.', '#']) {
+            for (const key of condition === BASE ? [BASE] : [BASE, condition]) {
+                for (const declaration of byCondition?.get(key)?.[kind] ?? []) {
+                    if (Boolean(declaration.important) === important) result.set(declaration.prop, declaration)
+                }
+            }
+        }
     }
     return result
 }
 
+const selectorOf = (declaration, id) =>
+    declaration.parent.selectors.some(selector => selector.trim() === `#${id}`) ? `#${id}` : `.${id}`
+
 /** 'vertical' or 'horizontal' when these declarations make a stack, else undefined. */
 const directionOf = declarations => {
-    if (declarations.get('--container-layout-type')?.value.trim() !== STACK_CONTAINER) return undefined
+    if (declarations.get('display')?.value.trim() !== 'flex') return undefined
+    const wrap = declarations.get('flex-wrap')?.value.trim()
+    if (wrap !== undefined && wrap !== 'nowrap') return undefined
     return /^column/.test(declarations.get('flex-direction')?.value.trim() ?? '') ? 'vertical' : 'horizontal'
 }
 
@@ -158,20 +156,19 @@ export const stackChildrenPlugin = {
     // After mixins copy their bodies in, before spx rewrites --spx() calls away.
     order: 12,
     transform(root, context) {
-        const structurePath = STRUCTURE_FILES.map(file => join(structureFolderOf(context.filePath), file)).find(
-            existsSync
-        )
+        const structurePath = structureFileOf(context.filePath)
         if (structurePath === undefined) return
         context.addDependency?.(structurePath)
         const parents = parentsIn(structurePath)
         if (parents.size === 0) return
         const byId = declarationsById(root)
+        const layoutById = declarationsById(root, { content: true })
 
         const violations = new Set()
         let first
         for (const [child, parent] of parents) {
             const childRules = byId.get(child)
-            const parentRules = byId.get(parent)
+            const parentRules = layoutById.get(parent)
             if (childRules === undefined || parentRules === undefined) continue
             for (const condition of new Set([BASE, ...parentRules.keys(), ...childRules.keys()])) {
                 const direction = directionOf(effective(parentRules, condition))
@@ -187,8 +184,8 @@ export const stackChildrenPlugin = {
                     if (!bad.length) continue
                     first ??= declaration.source
                     violations.add(
-                        `#${child}${where(declaration)}, a ${direction} stack child: ${declaration.prop} must be ` +
-                            `${or(allowed.map(unit => LABELS[unit]))}; found ${bad.join(' ')}.`
+                        `${selectorOf(declaration, child)}${where(declaration)}, a ${direction} stack child: ` +
+                            `${declaration.prop} must be ${or(allowed.map(unit => LABELS[unit]))}; found ${bad.join(' ')}.`
                     )
                 }
             }

package/src/cssPlugins/structureFile.js

@@ -0,0 +1,43 @@
+// The item's structure file, for CSS plugins that check a stylesheet against its JSX tree: `structure.tsx` (or
+// `.jsx`) next to the stylesheet, or one folder up when the stylesheet is the generated one in `_generated/`.
+// Elements and rules meet on a literal `id` and `#id` (or `.id`).
+
+import { existsSync, readFileSync } from 'node:fs'
+import { basename, dirname, join } from 'node:path'
+import { parseSync } from '@babel/core'
+
+const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
+const GENERATED = '_generated'
+
+/** The structure file `stylesheetPath` is checked against, or undefined when its item has none. */
+export const structureFileOf = stylesheetPath => {
+    const folder = dirname(stylesheetPath)
+    const item = basename(folder) === GENERATED ? dirname(folder) : folder
+    return STRUCTURE_FILES.map(file => join(item, file)).find(existsSync)
+}
+
+/** The structure file's program. */
+export const parseStructure = structurePath =>
+    parseSync(readFileSync(structurePath, 'utf8'), {
+        babelrc: false,
+        configFile: false,
+        filename: structurePath,
+        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
+    })?.program
+
+/** Calls `visit` on every node under `node`, parents first. */
+export const walk = (node, visit) => {
+    if (Array.isArray(node)) return node.forEach(child => walk(child, visit))
+    if (!node || typeof node.type !== 'string') return
+    visit(node)
+    for (const [key, value] of Object.entries(node)) {
+        if (key !== 'loc' && value && typeof value === 'object') walk(value, visit)
+    }
+}
+
+/** A JSX opening element's `id`, when it is a string literal. */
+export const literalIdOf = openingElement =>
+    openingElement.attributes.find(
+        attribute =>
+            attribute.type === 'JSXAttribute' && attribute.name.name === 'id' && attribute.value?.type === 'StringLiteral'
+    )?.value.value