fix: css variable parsing

[0xdhrv]

This pull request introduces an improvement to the parseColorVariables function in utils/parse-css-input.ts to handle CSS variable references more robustly. The main change is the addition of logic to skip CSS variable references (e.g., var(--color-primary)) during color parsing, preventing errors and ensuring only actual color values are processed.

Color variable parsing improvements:

• Updated parseColorVariables to detect and skip CSS variable references (var(...)), logging a warning when encountered, so only valid color values are processed.

Summary by CodeRabbit

• Bug Fixes
  • Skip CSS variable references (e.g., var(...)) when encountered as color values, issuing a warning instead of processing them.
  • Prevents incorrect color assignments and processing errors during theme generation.
  • Improves stability and consistency; users will see warnings rather than failures for unresolved color variables.

[vercel]

@0xdhrv is attempting to deploy a commit to the tweakcn OSS program Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Added a guard in parseColorVariables to trim values, strip !important, detect var(...) CSS variable references, log a warning, and skip processing those entries; concrete color values continue to be processed and formatted as before.

Changes

Cohort / File(s)	Summary
CSS color variable filtering utils/parse-css-input.ts	Trimmed and cleaned CSS variable values; added detection for var(...) references that logs a warning and skips calling processColorValue / colorFormatter. No export or other API changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Caller
  participant Parser as parseColorVariables
  participant Logger as Logger
  participant Proc as processColorValue
  participant Fmt as colorFormatter

  Caller->>Parser: parseColorVariables(input)
  loop for each color entry
    alt cleaned value starts with "var(" and ends with ")"
      Parser->>Logger: warn("Skipping CSS variable color value")
      note right of Parser #DDEBF7: CSS variable reference skipped
    else
      Parser->>Proc: processColorValue(trimmedValue)
      Proc-->>Parser: processedColor
      Parser->>Fmt: colorFormatter(processedColor)
      Fmt-->>Parser: formattedColor
      Parser-->>Caller: assign to ThemeStyleProps
    end
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I hop through CSS, nose in the air,
If a color says var(...), I give it a stare.
A gentle warning, then off I go—
Real colors get formatted, variables say no. 🐇🌿

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title concisely indicates that the pull request fixes CSS variable parsing, which directly reflects the main change of enhancing parseColorVariables to handle var(...) references appropriately.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b4ca827 and ea64850.

📒 Files selected for processing (1)

• utils/parse-css-input.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea64850 and 4e4475e.

📒 Files selected for processing (1)

• utils/parse-css-input.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

utils/parse-css-input.ts (1)

58-66: Harden detection: skip when var( appears anywhere and strip block comments first.

Prevents crashes for values like color-mix(..., var(--x), ...) or var(--x) /*comment*/ where the current startsWith/endsWith check won’t catch it. Also ensures comments don’t leak into the color parser.

Apply this diff:

-      const valueWithoutImportant = trimmedValue.replace(/\s*!important$/i, "");
+      const valueWithoutImportant = trimmedValue.replace(/\s*!important$/i, "");
+      const valueWithoutComments = valueWithoutImportant.replace(/\/\*[\s\S]*?\*\//g, "").trim();
 
-      // Skip CSS variable references (var(...)) as they can't be processed as colors
-      if (
-        valueWithoutImportant.toLowerCase().startsWith("var(") &&
-        valueWithoutImportant.endsWith(")")
-      ) {
+      // Skip if any CSS variable reference is present; color parsing would be unreliable
+      if (/\bvar\s*\(/i.test(valueWithoutComments)) {
         console.warn(`Skipping CSS variable reference: ${cleanName}: ${trimmedValue}`);
         return;
       }
 
-      const colorValue = processColorValue(valueWithoutImportant);
+      const colorValue = processColorValue(valueWithoutComments);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4e4475e and 1a15beb.

📒 Files selected for processing (1)

• utils/parse-css-input.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

🔇 Additional comments (1)

utils/parse-css-input.ts (1)

55-67: LGTM: normalization + guard are correct, and cleaned value is used.

Trimming, stripping !important, skipping var(...), and passing the cleaned value into processColorValue address the crash path and prior feedback.