@homebound/truss 2.1.0-next.4 → 2.1.0-next.6

package/build/plugin/index.js

@@ -163,7 +163,7 @@ function collectVariableRules(rules, seg, mapping) {
   const prefix = conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
   const segmentBaseKey = seg.key.split("__")[0];
   for (const prop of seg.variableProps) {
-    const baseKey = variableBaseKey(seg, prop);
+    const baseKey = seg.key.split("__")[0];
     const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
     const varName = toCssVariableName(className, baseKey, prop);
     const declaration = { cssProperty: camelToKebab(prop), cssValue: `var(${varName})`, cssVarName: varName };
@@ -242,7 +242,7 @@ function collectWhenVariableRules(rules, seg, mapping) {
   const segmentBaseKey = seg.key.split("__")[0];
   const mClass = markerClassName(wp.markerNode);
   for (const prop of seg.variableProps) {
-    const baseKey = variableBaseKey(seg, prop);
+    const baseKey = seg.key.split("__")[0];
     const className = `${prefix}${baseKey}_var`;
     const varName = toCssVariableName(className, baseKey, prop);
     const declaration = { cssProperty: camelToKebab(prop), cssValue: `var(${varName})`, cssVarName: varName };
@@ -469,7 +469,7 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
       const prefix = seg.whenPseudo ? whenPrefix(seg.whenPseudo) : conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
       const segmentBaseKey = seg.key.split("__")[0];
       for (const prop of seg.variableProps) {
-        const baseKey = variableBaseKey(seg, prop);
+        const baseKey = seg.key.split("__")[0];
         const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
         const varName = toCssVariableName(className, baseKey, prop);
         if (!propGroups.has(prop)) propGroups.set(prop, []);
@@ -530,12 +530,6 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
   }
   return properties;
 }
-function variableBaseKey(seg, cssProp) {
-  if (seg.key.startsWith("add_")) {
-    return cssProp;
-  }
-  return seg.key.split("__")[0];
-}
 function toCssVariableName(className, baseKey, cssProp) {
   const baseClassName = `${baseKey}_var`;
   const conditionPrefix2 = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
@@ -1148,17 +1142,17 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
     const wpSuffix = whenPseudoKeyName(whenPseudo);
     if (literalValue !== null) {
       const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-      const key = `add_${propName}__${keySuffix}__${wpSuffix}`;
+      const key = `${propName}__${keySuffix}__${wpSuffix}`;
       return { key, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
     } else {
-      const key = `add_${propName}__${wpSuffix}`;
+      const key = `${propName}__${wpSuffix}`;
       return { key, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
     }
   }
   const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   if (literalValue !== null) {
     const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-    const key = suffix ? `add_${propName}__${keySuffix}__${suffix}` : `add_${propName}__${keySuffix}`;
+    const key = suffix ? `${propName}__${keySuffix}__${suffix}` : `${propName}__${keySuffix}`;
     const defs = { [propName]: literalValue };
     const wrappedDefs = wrapDefsWithConditions(defs, mediaQuery, pseudoClass);
     return {
@@ -1170,7 +1164,7 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
       argResolved: literalValue
     };
   } else {
-    const key = suffix ? `add_${propName}__${suffix}` : `add_${propName}`;
+    const key = suffix ? `${propName}__${suffix}` : propName;
     return {
       key,
       defs: {},
@@ -1623,6 +1617,29 @@ function findNamedImportBinding(ast, source, importedName) {
   }
   return null;
 }
+function findImportDeclaration(ast, source) {
+  for (const node of ast.program.body) {
+    if (t2.isImportDeclaration(node) && node.source.value === source) {
+      return node;
+    }
+  }
+  return null;
+}
+function replaceCssImportWithNamedImports(ast, cssBinding, source, imports) {
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node)) continue;
+    const cssSpecIndex = node.specifiers.findIndex(function(spec) {
+      return t2.isImportSpecifier(spec) && spec.local.name === cssBinding;
+    });
+    if (cssSpecIndex === -1 || node.specifiers.length !== 1) continue;
+    node.source = t2.stringLiteral(source);
+    node.specifiers = imports.map(function(entry) {
+      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
+    });
+    return true;
+  }
+  return false;
+}
 function upsertNamedImports(ast, source, imports) {
   if (imports.length === 0) return;
   for (const node of ast.program.body) {
@@ -1718,6 +1735,7 @@ function getCssAttributePath(path) {
 }
 function buildStyleHashFromChain(chain, options) {
   const members = [];
+  const previousProperties = /* @__PURE__ */ new Map();
   if (chain.markers.length > 0) {
     const markerClasses = chain.markers.map(function(marker) {
       return markerClassName(marker.markerNode);
@@ -1726,10 +1744,22 @@ function buildStyleHashFromChain(chain, options) {
   }
   for (const part of chain.parts) {
     if (part.type === "unconditional") {
-      members.push(...buildStyleHashMembers(part.segments, options));
+      const partMembers = buildStyleHashMembers(part.segments, options);
+      members.push(...partMembers);
+      for (const member of partMembers) {
+        if (t3.isObjectProperty(member)) {
+          previousProperties.set(propertyName(member.key), member);
+        }
+      }
     } else {
-      const thenMembers = buildStyleHashMembers(part.thenSegments, options);
-      const elseMembers = buildStyleHashMembers(part.elseSegments, options);
+      const thenMembers = mergeConditionalBranchMembers(
+        buildStyleHashMembers(part.thenSegments, options),
+        previousProperties
+      );
+      const elseMembers = mergeConditionalBranchMembers(
+        buildStyleHashMembers(part.elseSegments, options),
+        previousProperties
+      );
       members.push(
         t3.spreadElement(
           t3.conditionalExpression(part.conditionNode, t3.objectExpression(thenMembers), t3.objectExpression(elseMembers))
@@ -1773,6 +1803,82 @@ function buildStyleHashMembers(segments, options) {
   flushNormal();
   return members;
 }
+function mergeConditionalBranchMembers(members, previousProperties) {
+  return members.map(function(member) {
+    if (!t3.isObjectProperty(member)) {
+      return member;
+    }
+    const prior = previousProperties.get(propertyName(member.key));
+    if (!prior) {
+      return member;
+    }
+    return t3.objectProperty(
+      clonePropertyKey(member.key),
+      mergePropertyValues(prior.value, member.value)
+    );
+  });
+}
+function mergePropertyValues(previousValue, currentValue) {
+  if (t3.isStringLiteral(previousValue) && t3.isStringLiteral(currentValue)) {
+    return t3.stringLiteral(`${previousValue.value} ${currentValue.value}`);
+  }
+  if (t3.isStringLiteral(previousValue) && t3.isArrayExpression(currentValue)) {
+    return mergeTupleValue(currentValue, previousValue.value, true);
+  }
+  if (t3.isArrayExpression(previousValue) && t3.isStringLiteral(currentValue)) {
+    return mergeTupleValue(previousValue, currentValue.value, false);
+  }
+  if (t3.isArrayExpression(previousValue) && t3.isArrayExpression(currentValue)) {
+    const previousClassNames = tupleClassNames(previousValue);
+    return mergeTupleValue(currentValue, previousClassNames, true, arrayElementExpression(previousValue.elements[1]));
+  }
+  return t3.cloneNode(currentValue, true);
+}
+function mergeTupleValue(tuple, classNames, prependClassNames, previousVars) {
+  const currentClassNames = tupleClassNames(tuple);
+  const mergedClassNames = prependClassNames ? `${classNames} ${currentClassNames}` : `${currentClassNames} ${classNames}`;
+  const varsExpr = tuple.elements[1];
+  const mergedVars = previousVars && arrayElementExpression(varsExpr) ? mergeVarsObject(previousVars, arrayElementExpression(varsExpr)) : arrayElementExpression(varsExpr) ?? previousVars ?? null;
+  return t3.arrayExpression([
+    t3.stringLiteral(mergedClassNames),
+    mergedVars ? t3.cloneNode(mergedVars, true) : t3.objectExpression([])
+  ]);
+}
+function tupleClassNames(tuple) {
+  const classNames = tuple.elements[0];
+  return t3.isStringLiteral(classNames) ? classNames.value : "";
+}
+function arrayElementExpression(element) {
+  return element && !t3.isSpreadElement(element) ? element : null;
+}
+function mergeVarsObject(previousVars, currentVars) {
+  if (t3.isObjectExpression(previousVars) && t3.isObjectExpression(currentVars)) {
+    return t3.objectExpression([
+      ...previousVars.properties.map(function(property) {
+        return t3.cloneNode(property, true);
+      }),
+      ...currentVars.properties.map(function(property) {
+        return t3.cloneNode(property, true);
+      })
+    ]);
+  }
+  return t3.cloneNode(currentVars, true);
+}
+function propertyName(key) {
+  if (t3.isIdentifier(key)) {
+    return key.name;
+  }
+  if (t3.isStringLiteral(key)) {
+    return key.value;
+  }
+  return generate(key).code;
+}
+function clonePropertyKey(key) {
+  if (t3.isPrivateName(key)) {
+    return t3.identifier(key.id.name);
+  }
+  return t3.cloneNode(key, true);
+}
 function injectDebugInfo(expr, line, options) {
   if (!options.debug) return;
   const firstProp = expr.properties.find(function(p) {
@@ -1973,7 +2079,6 @@ function transformTruss(code, filename, mapping, options = {}) {
     skippedCssPropMessages: errorMessages,
     runtimeLookupNames
   });
-  removeCssImport(ast, cssBindingName);
   const runtimeImports = [];
   if (needsTrussPropsHelper.current) {
     runtimeImports.push({ importedName: "trussProps", localName: trussPropsHelperName });
@@ -1987,8 +2092,14 @@ function transformTruss(code, filename, mapping, options = {}) {
   if (options.injectCss) {
     runtimeImports.push({ importedName: "__injectTrussCSS", localName: "__injectTrussCSS" });
   }
+  const reusedCssImportLine = runtimeImports.length > 0 && findImportDeclaration(ast, "@homebound/truss/runtime") === null && replaceCssImportWithNamedImports(ast, cssBindingName, "@homebound/truss/runtime", runtimeImports);
+  if (!reusedCssImportLine) {
+    removeCssImport(ast, cssBindingName);
+  }
   if (runtimeImports.length > 0) {
-    upsertNamedImports(ast, "@homebound/truss/runtime", runtimeImports);
+    if (!reusedCssImportLine) {
+      upsertNamedImports(ast, "@homebound/truss/runtime", runtimeImports);
+    }
   }
   const declarationsToInsert = [];
   if (maybeIncHelperName) {
@@ -2023,9 +2134,11 @@ function transformTruss(code, filename, mapping, options = {}) {
   }
   const output = generate2(ast, {
     sourceFileName: filename,
+    sourceMaps: true,
     retainLines: false
   });
-  return { code: output.code, map: output.map, css: cssText, rules };
+  const outputCode = preserveBlankLineAfterImports(code, output.code);
+  return { code: outputCode, map: output.map, css: cssText, rules };
 }
 function collectRuntimeLookups(chains) {
   const lookups = /* @__PURE__ */ new Map();
@@ -2043,6 +2156,31 @@ function collectRuntimeLookups(chains) {
   }
   return lookups;
 }
+function preserveBlankLineAfterImports(input, output) {
+  const inputLines = input.split("\n");
+  const outputLines = output.split("\n");
+  const lastInputImportLine = findLastImportLine(inputLines);
+  const lastOutputImportLine = findLastImportLine(outputLines);
+  if (lastInputImportLine === -1 || lastOutputImportLine === -1) {
+    return output;
+  }
+  const inputHasBlankLineAfterImports = inputLines[lastInputImportLine + 1]?.trim() === "";
+  const outputHasBlankLineAfterImports = outputLines[lastOutputImportLine + 1]?.trim() === "";
+  if (!inputHasBlankLineAfterImports || outputHasBlankLineAfterImports) {
+    return output;
+  }
+  outputLines.splice(lastOutputImportLine + 1, 0, "");
+  return outputLines.join("\n");
+}
+function findLastImportLine(lines) {
+  let lastImportLine = -1;
+  for (let index = 0; index < lines.length; index++) {
+    if (lines[index].trimStart().startsWith("import ")) {
+      lastImportLine = index;
+    }
+  }
+  return lastImportLine;
+}
 
 // src/plugin/transform-css.ts
 import { parse as parse2 } from "@babel/parser";