fix: Resolve css parser issue caused by interpolation

youthfulhps · Sep 21, 2023 · 9ee5bb5 · 9ee5bb5
1 parent 648c3d2
commit 9ee5bb5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/helpers/extractor.ts b/src/helpers/extractor.ts
@@ -1,5 +1,8 @@
 import { AST } from 'prettier';
-import { generateJSXOpeningElementClassNameAttribute } from '~/helpers/generator';
+import {
+  generateConcatenatedCSSTemplateLiteral,
+  generateJSXOpeningElementClassNameAttribute,
+} from '~/helpers/generator';
 import { convertStyles } from '~/helpers/converter';
 import { parseSass } from '~/helpers/css-parser';
 
@@ -95,12 +98,16 @@ export function getVariableDeclarationThroughStyledRecursively(ast: AST) {
       'value' in node.init.quasi.quasis[0] &&
       isObject(node.init.quasi.quasis[0].value)
     ) {
-      const parsedScss = parseSass(node.init.quasi.quasis[0].value.raw);
+      const sassScript = generateConcatenatedCSSTemplateLiteral(
+        node.init.quasi.quasis,
+      );
+
+      const parsedCSS = parseSass(sassScript);
 
       const componentDeclaration: ComponentDeclaration = {
         name: node.id.name,
         tag: node.init.tag.property.name,
-        styles: parsedScss,
+        styles: parsedCSS,
       };
 
       componentDeclarations.push(componentDeclaration);

diff --git a/src/helpers/generator.ts b/src/helpers/generator.ts
@@ -66,3 +66,17 @@ export function generateJSXOpeningElementClassNameAttribute(
 
   return attributes;
 }
+
+export function generateConcatenatedCSSTemplateLiteral(quasis: any[]) {
+  return quasis.reduce((sum, curr) => {
+    if (!curr.tail) {
+      const replaced = curr.value.raw.replace(/\n|\s/g, '');
+      if (replaced[replaced.length - 1] === ':') {
+        return sum + `${curr.value.raw} unset`;
+      }
+
+      return sum + curr.value.raw;
+    }
+    return sum + curr.value.raw;
+  }, '');
+}