@wix/origami-transforms 0.1.13 → 0.1.14

package/dist/cssPlugins/componentPosition.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const componentPositionPlugin: import("../transform/types.js").CssTransformPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -16,7 +16,7 @@
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@wix/origami-fonts": "1.0.1",
-    "@wix/origami-system-components": "1.8.0",
+    "@wix/origami-system-components": "1.9.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1"
   },
@@ -58,5 +58,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "97d30a95762f9e320a620f5de79aa530f7b592e354a3d6776219c7fa"
+  "falconPackageHash": "dcaeecf42c720e3e9a25f95eadad7516666d783eef907ba5f39467f1"
 }

package/src/cssPlugins/componentPosition.js

@@ -0,0 +1,26 @@
+// Gives every component the `position: relative` Thunderbolt gives it by default, so what a component positions
+// against itself (the Menu's dropdown) is placed and sized by the component. See componentPosition.md.
+
+import { isLayoutSource } from './layout/parser.js'
+
+// One class or id: DM writes `.compId`, and layout.css still accepts `#compId` (see layout/parser.js).
+const SINGLE_CLASS_OR_ID = /^[.#][\w-]+$/
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const componentPositionPlugin = {
+    name: 'component-position',
+    order: 14,
+    transform(root, context) {
+        // A component's base rules, by selector: DM may write one class in several rules.
+        /** @type {Map<string, import('postcss').Rule[]>} */
+        const baseRules = new Map()
+        for (const node of root.nodes) {
+            if (node.type !== 'rule' || !SINGLE_CLASS_OR_ID.test(node.selector) || !isLayoutSource(node, context)) continue
+            baseRules.set(node.selector, [...(baseRules.get(node.selector) ?? []), node])
+        }
+        for (const rules of baseRules.values()) {
+            if (rules.some(rule => rule.nodes.some(node => node.type === 'decl' && node.prop === 'position'))) continue
+            rules[0].prepend({ prop: 'position', value: 'relative' })
+        }
+    },
+}

package/src/cssPlugins/componentPosition.md

@@ -0,0 +1,34 @@
+# Components are `position: relative` by default
+
+Thunderbolt writes `position: relative` into each component's layout CSS when the component's layout sets no
+position, for the default breakpoint and variant only
+([responsiveLayoutCompNode.ts](https://github.com/wix-private/thunderbolt/blob/09356e43df04152b47de507f73ce2d8e2a74a97a/packages/thunderbolt-catharsis-extensions/src/features/responsiveLayout/responsiveLayoutCompNode.ts#L165-L173)).
+A component's CSS relies on it: the Menu's dropdown is `position: absolute` and as wide as the nearest positioned
+ancestor, which is the Menu only because of this default.
+
+DM's export writes a `position` only when the layout data has one, and a `position: relative` written into
+`layout.css` is imported back as data. So the default is added at build time, never in the source:
+
+```css
+/* layout.css */
+.comp-1 { width: 100%; }
+.comp-2 { position: sticky; }
+@media (max-width: 750px) { .comp-1 { width: 50%; } }
+```
+
+builds to
+
+```css
+.comp-1 { position: relative; width: 100%; }
+.comp-2 { position: sticky; }
+@media (max-width: 750px) { .comp-1 { width: 50%; } }
+```
+
+## The rules
+
+- Only a component's base rule gets it: a top-level rule in a site-owned `layout.css` whose selector is one class
+  or id (`.comp-1`, a page's `.c1dmp`, or `#comp-1`, which layout.css still accepts). That is the default breakpoint and variant; the `@media` rules inherit it.
+- A rule that sets `position` keeps its own (sticky, or the `absolute` and `fixed` DM writes for pinned and fixed
+  items).
+- The declaration goes into the authored rule, so it has the rule's specificity and wins over the component's own
+  class rules, as Thunderbolt's `#main_MF :where(.comp-1)` does.

package/src/cssPlugins/index.js

@@ -11,10 +11,12 @@
 // authored one. custom-enums runs after mixins as well, so an enum a mixin body sets is resolved, and before presets
 // and layout move declarations out of the instance's rule. fonts appends the `@font-face` rules that load the Wix fonts
 // the stylesheet names from Wix's CDN.
+// component-position runs after mixins, so a position a mixin body sets is kept, and before layout compiles the rules.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
 
 import { customEnumsPlugin } from './customEnums.js'
+import { componentPositionPlugin } from './componentPosition.js'
 import { customMediaPlugin } from './customMedia.js'
 import { fontsPlugin } from './fonts.js'
 import { mixinsPlugin } from './mixins.js'
@@ -31,6 +33,7 @@ export const cssPlugins = Object.freeze([
     customEnumsPlugin,
     stackChildrenPlugin,
     presetsPlugin,
+    componentPositionPlugin,
     layoutPlugin,
     spxPlugin,
 ])