@homebound/truss 2.1.0-next.1 → 2.1.0-next.2

package/build/plugin/index.js

@@ -165,16 +165,32 @@ function collectVariableRules(rules, seg, mapping) {
   for (const prop of seg.variableProps) {
     const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
     const varName = toCssVariableName(className, baseKey, prop);
-    if (!rules.has(className)) {
+    const declaration = { cssProperty: camelToKebab(prop), cssValue: `var(${varName})`, cssVarName: varName };
+    const existingRule = rules.get(className);
+    if (!existingRule) {
       rules.set(className, {
         className,
-        cssProperty: camelToKebab(prop),
-        cssValue: `var(${varName})`,
+        cssProperty: declaration.cssProperty,
+        cssValue: declaration.cssValue,
+        declarations: [declaration],
         pseudoClass: seg.pseudoClass ?? void 0,
         mediaQuery: seg.mediaQuery ?? void 0,
         pseudoElement: seg.pseudoElement ?? void 0,
         cssVarName: varName
       });
+      continue;
+    }
+    existingRule.declarations ??= [
+      {
+        cssProperty: existingRule.cssProperty,
+        cssValue: existingRule.cssValue,
+        cssVarName: existingRule.cssVarName
+      }
+    ];
+    if (!existingRule.declarations.some(function(entry) {
+      return entry.cssProperty === declaration.cssProperty;
+    })) {
+      existingRule.declarations.push(declaration);
     }
   }
   if (seg.variableExtraDefs) {
@@ -227,11 +243,14 @@ function collectWhenVariableRules(rules, seg, mapping) {
   for (const prop of seg.variableProps) {
     const className = `${prefix}${baseKey}_var`;
     const varName = toCssVariableName(className, baseKey, prop);
-    if (!rules.has(className)) {
+    const declaration = { cssProperty: camelToKebab(prop), cssValue: `var(${varName})`, cssVarName: varName };
+    const existingRule = rules.get(className);
+    if (!existingRule) {
       rules.set(className, {
         className,
-        cssProperty: camelToKebab(prop),
-        cssValue: `var(${varName})`,
+        cssProperty: declaration.cssProperty,
+        cssValue: declaration.cssValue,
+        declarations: [declaration],
         cssVarName: varName,
         whenSelector: {
           relationship: wp.relationship ?? "ancestor",
@@ -239,6 +258,19 @@ function collectWhenVariableRules(rules, seg, mapping) {
           pseudo: wp.pseudo
         }
       });
+      continue;
+    }
+    existingRule.declarations ??= [
+      {
+        cssProperty: existingRule.cssProperty,
+        cssValue: existingRule.cssValue,
+        cssVarName: existingRule.cssVarName
+      }
+    ];
+    if (!existingRule.declarations.some(function(entry) {
+      return entry.cssProperty === declaration.cssProperty;
+    })) {
+      existingRule.declarations.push(declaration);
     }
   }
   if (seg.variableExtraDefs) {
@@ -351,30 +383,26 @@ function generateCssText(rules) {
     lines.push(formatMediaPseudoElementRule(rule));
   }
   for (const rule of allRules) {
-    if (rule.cssVarName) {
-      lines.push(`@property ${rule.cssVarName} {
+    for (const declaration of getRuleDeclarations(rule)) {
+      if (declaration.cssVarName) {
+        lines.push(`@property ${declaration.cssVarName} {
   syntax: "*";
   inherits: false;
 }`);
+      }
     }
   }
   return lines.join("\n");
 }
 function formatBaseRule(rule) {
-  return `.${rule.className} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+  return formatRuleBlock(`.${rule.className}`, rule);
 }
 function formatPseudoRule(rule) {
   const pe = rule.pseudoElement ? rule.pseudoElement : "";
-  return `.${rule.className}${rule.pseudoClass}${pe} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+  return formatRuleBlock(`.${rule.className}${rule.pseudoClass}${pe}`, rule);
 }
 function formatPseudoElementRule(rule) {
-  return `.${rule.className}${rule.pseudoElement} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+  return formatRuleBlock(`.${rule.className}${rule.pseudoElement}`, rule);
 }
 function formatWhenRule(rule) {
   const whenSelector = rule.whenSelector;
@@ -384,53 +412,50 @@ function formatWhenRule(rule) {
   const markerSelector = `.${whenSelector.markerClass}${whenSelector.pseudo}`;
   const targetSelector = `.${rule.className}`;
   if (whenSelector.relationship === "ancestor") {
-    return `${markerSelector} ${targetSelector} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+    return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
   }
   if (whenSelector.relationship === "descendant") {
-    return `${targetSelector}:has(${markerSelector}) {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+    return formatRuleBlock(`${targetSelector}:has(${markerSelector})`, rule);
   }
   if (whenSelector.relationship === "siblingAfter") {
-    return `${targetSelector}:has(~ ${markerSelector}) {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector})`, rule);
   }
   if (whenSelector.relationship === "siblingBefore") {
-    return `${markerSelector} ~ ${targetSelector} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+    return formatRuleBlock(`${markerSelector} ~ ${targetSelector}`, rule);
   }
   if (whenSelector.relationship === "anySibling") {
-    return `${targetSelector}:has(~ ${markerSelector}), ${markerSelector} ~ ${targetSelector} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector}), ${markerSelector} ~ ${targetSelector}`, rule);
   }
-  return `${markerSelector} ${targetSelector} {
-  ${rule.cssProperty}: ${rule.cssValue};
-}`;
+  return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
 }
 function formatMediaRule(rule) {
-  return `${rule.mediaQuery} {
-  .${rule.className}.${rule.className} {
-    ${rule.cssProperty}: ${rule.cssValue};
-  }
-}`;
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}`, rule);
 }
 function formatMediaPseudoRule(rule) {
-  return `${rule.mediaQuery} {
-  .${rule.className}.${rule.className}${rule.pseudoClass} {
-    ${rule.cssProperty}: ${rule.cssValue};
-  }
-}`;
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${rule.pseudoClass}`, rule);
 }
 function formatMediaPseudoElementRule(rule) {
   const pe = rule.pseudoElement ?? "";
-  return `${rule.mediaQuery} {
-  .${rule.className}.${rule.className}${pe} {
-    ${rule.cssProperty}: ${rule.cssValue};
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${pe}`, rule);
+}
+function getRuleDeclarations(rule) {
+  return rule.declarations ?? [{ cssProperty: rule.cssProperty, cssValue: rule.cssValue, cssVarName: rule.cssVarName }];
+}
+function formatRuleBlock(selector, rule) {
+  const body = getRuleDeclarations(rule).map(function(declaration) {
+    return `  ${declaration.cssProperty}: ${declaration.cssValue};`;
+  }).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
+function formatNestedRuleBlock(wrapper, selector, rule) {
+  const body = getRuleDeclarations(rule).map(function(declaration) {
+    return `    ${declaration.cssProperty}: ${declaration.cssValue};`;
+  }).join("\n");
+  return `${wrapper} {
+  ${selector} {
+${body}
   }
 }`;
 }
@@ -573,6 +598,31 @@ function resolveFullChain(chain, mapping, options) {
   let currentNodes = [];
   while (i < filteredChain.length) {
     const node = filteredChain[i];
+    const mediaStart = getMediaConditionalStartNode(node, mapping);
+    if (mediaStart) {
+      const elseIndex = findElseIndex(filteredChain, i + 1);
+      if (elseIndex !== -1) {
+        if (currentNodes.length > 0) {
+          const unconditionalSegs = resolveChain(currentNodes, mapping);
+          parts.push({
+            type: "unconditional",
+            segments: options?.skipMerge ? unconditionalSegs : mergeOverlappingConditions(unconditionalSegs)
+          });
+          currentNodes = [];
+        }
+        const thenNodes = mediaStart.thenNodes ? [...mediaStart.thenNodes, ...filteredChain.slice(i + 1, elseIndex)] : filteredChain.slice(i, elseIndex);
+        const elseNodes = [makeMediaQueryNode(mediaStart.inverseMediaQuery), ...filteredChain.slice(elseIndex + 1)];
+        const thenSegs = resolveChain(thenNodes, mapping);
+        const elseSegs = resolveChain(elseNodes, mapping);
+        const combinedSegs = [...thenSegs, ...elseSegs];
+        parts.push({
+          type: "unconditional",
+          segments: options?.skipMerge ? combinedSegs : mergeOverlappingConditions(combinedSegs)
+        });
+        i = filteredChain.length;
+        break;
+      }
+    }
     if (node.type === "if") {
       if (node.conditionNode.type === "StringLiteral") {
         const mediaQuery = node.conditionNode.value;
@@ -639,6 +689,53 @@ function resolveFullChain(chain, mapping, options) {
   }
   return { parts, markers, errors: [...scanErrors, ...segmentErrors] };
 }
+function getMediaConditionalStartNode(node, mapping) {
+  if (node.type === "if" && node.conditionNode.type === "StringLiteral") {
+    return {
+      inverseMediaQuery: invertMediaQuery(node.conditionNode.value),
+      thenNodes: [makeMediaQueryNode(node.conditionNode.value)]
+    };
+  }
+  if (node.type === "getter" && mapping.breakpoints && node.name in mapping.breakpoints) {
+    return { inverseMediaQuery: invertMediaQuery(mapping.breakpoints[node.name]) };
+  }
+  return null;
+}
+function findElseIndex(chain, start) {
+  for (let i = start; i < chain.length; i++) {
+    if (chain[i].type === "if") {
+      return -1;
+    }
+    if (chain[i].type === "else") {
+      return i;
+    }
+  }
+  return -1;
+}
+function makeMediaQueryNode(mediaQuery) {
+  return { type: "__mediaQuery", mediaQuery };
+}
+function invertMediaQuery(query) {
+  const screenPrefix = "@media screen and ";
+  if (query.startsWith(screenPrefix)) {
+    const conditions = query.slice(screenPrefix.length).trim();
+    const rangeMatch = conditions.match(/^\(min-width: (\d+)px\) and \(max-width: (\d+)px\)$/);
+    if (rangeMatch) {
+      const min = Number(rangeMatch[1]);
+      const max = Number(rangeMatch[2]);
+      return `@media screen and (max-width: ${min - 1}px), screen and (min-width: ${max + 1}px)`;
+    }
+    const minMatch = conditions.match(/^\(min-width: (\d+)px\)$/);
+    if (minMatch) {
+      return `@media screen and (max-width: ${Number(minMatch[1]) - 1}px)`;
+    }
+    const maxMatch = conditions.match(/^\(max-width: (\d+)px\)$/);
+    if (maxMatch) {
+      return `@media screen and (min-width: ${Number(maxMatch[1]) + 1}px)`;
+    }
+  }
+  return query.replace("@media", "@media not");
+}
 function resolveChain(chain, mapping) {
   const segments = [];
   let currentMediaQuery = null;