@wix/origami-transforms 0.1.8 → 0.1.9

package/package.json

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

package/src/cssPlugins/stackChildren.js

@@ -3,7 +3,8 @@
 //
 // 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).
+// it stacks (column → vertical, row or none → horizontal). Any other value, such as `inherit` or `var(--d)`,
+// fails DM's import, so its children aren't checked here.
 //
 // 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
@@ -133,12 +134,16 @@ const effective = (byCondition, condition) => {
 const selectorOf = (declaration, id) =>
     declaration.parent.selectors.some(selector => selector.trim() === `#${id}`) ? `#${id}` : `.${id}`
 
+// The flex-direction values DM's import accepts, matched as written.
+const DIRECTIONS = { row: 'horizontal', 'row-reverse': 'horizontal', column: 'vertical', 'column-reverse': 'vertical' }
+
 /** 'vertical' or 'horizontal' when these declarations make a stack, else undefined. */
 const directionOf = declarations => {
     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'
+    const direction = declarations.get('flex-direction')?.value.trim() ?? 'row'
+    return Object.hasOwn(DIRECTIONS, direction) ? DIRECTIONS[direction] : undefined
 }
 
 /** ` (layout.css:12)`: the carrier the declaration was written in, which the bundler doesn't name. */