Fix the expressions in at-rule parameters and rules with functions (#…

…1384) * fix: postcss-linaria for rules with functions * fix: postcss-linaria for expressions in at-rule parameters * chore: add changeset
callstack · Dec 5, 2023 · 63392f9 · 63392f9
1 parent af4d6b9
commit 63392f9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/.changeset/lemon-parents-accept.md b/.changeset/lemon-parents-accept.md
@@ -0,0 +1,5 @@
+---
+'@linaria/postcss-linaria': patch
+---
+
+Fix the expressions in at-rule parameters and rules with functions. Fixes #1074
diff --git a/packages/postcss-linaria/src/stringify.ts b/packages/postcss-linaria/src/stringify.ts
@@ -7,6 +7,7 @@ import type {
   Builder,
   Declaration,
   Rule,
+  AtRule,
 } from 'postcss';
 import Stringifier from 'postcss/lib/stringifier';
 
@@ -23,7 +24,8 @@ const substitutePlaceholders = (
   const values = stringWithPlaceholders.split(' ');
   const temp: string[] = [];
   values.forEach((val) => {
-    let [, expressionIndexString] = val.split(placeholderText);
+    let [prefix, expressionIndexString] = val.split(placeholderText);
+    prefix = prefix.replace(/(\.|--|\/\*)$/, '');
     // if the val is 'pcss-lin10px', need to remove the px to get the placeholder number
     let suffix = '';
     while (
@@ -43,7 +45,7 @@ const substitutePlaceholders = (
       !Number.isNaN(expressionIndex) &&
       expressions[expressionIndex];
     if (expression) {
-      temp.push(expression + suffix);
+      temp.push(prefix + expression + suffix);
     } else {
       temp.push(val);
     }
@@ -81,6 +83,18 @@ class LinariaStringifier extends Stringifier {
     super(wrappedBuilder);
   }
 
+  public override atrule(node: AtRule, semicolon?: boolean) {
+    const { params } = node;
+
+    const expressionStrings = node.root().raws.linariaTemplateExpressions;
+    if (params.includes(placeholderText)) {
+      // eslint-disable-next-line no-param-reassign
+      node.params = substitutePlaceholders(params, expressionStrings);
+    }
+
+    super.atrule(node, semicolon);
+  }
+
   /** @inheritdoc */
   public override comment(node: Comment): void {
     const placeholderPattern = new RegExp(`^${placeholderText}:\\d+$`);

diff --git a/packages/postcss-linaria/src/util.ts b/packages/postcss-linaria/src/util.ts
@@ -43,7 +43,7 @@ const isRuleSet = (sourceAsString: string, indexAfterExpression: number) => {
   let hasColonOutsideOfExpression = possibleRuleset.includes(':');
   if (hasFuncInExpression) {
     hasColonOutsideOfExpression =
-      possibleRuleset.lastIndexOf(':', indexOfOpenParenthesis) > 0 &&
+      possibleRuleset.lastIndexOf(':', indexOfOpenParenthesis) > 0 ||
       possibleRuleset.indexOf(':', indexOfClosedParenthesis) > 0;
   }
 
@@ -54,7 +54,7 @@ const isRuleSet = (sourceAsString: string, indexAfterExpression: number) => {
   );
 };
 
-export const placeholderText = 'pcss-lin';
+export const placeholderText = 'pcss_lin';
 
 export const createPlaceholder = (
   i: number,