@wix/origami-transforms 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.7",
+  "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": "9674cee94f59f7db338de844100c7527c7eeddff5e2d58f750c8f488"
+  "falconPackageHash": "09b1c7aec92977ffa2db7c85a87daf406d7628c92600cbe85ed3ef94"
 }

package/src/cssPlugins/stackChildren.js

@@ -1,17 +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 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.
+// 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 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.
@@ -79,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'
 }
 
@@ -135,12 +162,13 @@ export const stackChildrenPlugin = {
         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))
@@ -156,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

@@ -1,6 +1,6 @@
 // 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`.
+// 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'