From 0379b14bb1dd848761256465b05875ffcdc0ad1e Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Thu, 19 Dec 2024 10:10:05 +0100
Subject: [PATCH] fix(postcss-syntax): parse styles with newlines (#629)

* wip

* Change files

* match windows newline
---
 ...-caa9eb82-b2c5-45ed-9e4c-17fc492b8225.json |  7 ++
 packages/postcss-syntax/src/parse.test.ts     | 74 +++++++++++++++++++
 packages/postcss-syntax/src/parse.ts          |  5 +-
 3 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 change/@griffel-postcss-syntax-caa9eb82-b2c5-45ed-9e4c-17fc492b8225.json

diff --git a/change/@griffel-postcss-syntax-caa9eb82-b2c5-45ed-9e4c-17fc492b8225.json b/change/@griffel-postcss-syntax-caa9eb82-b2c5-45ed-9e4c-17fc492b8225.json
new file mode 100644
index 000000000..4e1f56672
--- /dev/null
+++ b/change/@griffel-postcss-syntax-caa9eb82-b2c5-45ed-9e4c-17fc492b8225.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: parse styles with new lines",
+  "packageName": "@griffel/postcss-syntax",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/postcss-syntax/src/parse.test.ts b/packages/postcss-syntax/src/parse.test.ts
index ef2d0ee0f..e37a78606 100644
--- a/packages/postcss-syntax/src/parse.test.ts
+++ b/packages/postcss-syntax/src/parse.test.ts
@@ -113,6 +113,47 @@ export const useStyles = makeStyles({
       });
     });
 
+    it('should map style locations to slots when styles contains new lines', () => {
+      const fixture = `
+import { makeStyles } from "@griffel/react";
+
+export const useStyles = makeStyles({
+  slot1: {
+    background: \`linear-gradient(#e66465, 
+      #9198e5)\`,
+  },
+
+  slot2: {
+    color: "blue",
+  },
+});
+`;
+      const root = parse(fixture, { from: 'fixture.styles.ts' });
+
+      expect(root.toString()).toMatchInlineSnapshot(`
+        ".f1qmhkic{background:linear-gradient(#e66465,        #9198e5);}
+        .f163i14w{color:blue;}"
+      `);
+
+      root.walk(node => {
+        const slot = node.raw(GRIFFEL_SLOT_RAW);
+        expect(['slot1', 'slot2']).toContain(slot);
+
+        if (slot === 'slot1') {
+          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
+            start: { line: 5, column: 2, index: 87 },
+            end: { line: 8, column: 3, index: 159 },
+          });
+        }
+        if (slot === 'slot2') {
+          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
+            start: { line: 10, column: 2, index: 164 },
+            end: { line: 12, column: 3, index: 195 },
+          });
+        }
+      });
+    });
+
     it('should hold original source in document raw field', () => {
       const fixture = `
 import { makeStyles } from '@griffel/react';
@@ -260,6 +301,39 @@ export const useResetStyles = makeResetStyles({
       });
     });
 
+    it('should map style locations to reset styles when styles contains new lines', () => {
+      const fixture = `
+import { makeResetStyles } from "@griffel/react";
+
+export const useResetStyles1 = makeResetStyles({
+  color: "red",
+  background: \`linear-gradient(#e66465, 
+    #9198e5)\`,
+});
+export const useResetStyles2 = makeResetStyles({
+  color: "red",
+});
+`;
+      const root = parse(fixture, { from: 'fixture.styles.ts' });
+
+      root.walk(node => {
+        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
+        if (declarator === 'useResetStyles1') {
+          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
+            start: { line: 4, column: 47, index: 99 },
+            end: { line: 8, column: 1, index: 174 },
+          });
+        }
+
+        if (declarator === 'useResetStyles2') {
+          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
+            start: { line: 9, column: 47, index: 224 },
+            end: { line: 11, column: 1, index: 243 },
+          });
+        }
+      });
+    });
+
     it('should hold original source in document raw field', () => {
       const fixture = `
 import { makeResetStyles } from '@griffel/react';
diff --git a/packages/postcss-syntax/src/parse.ts b/packages/postcss-syntax/src/parse.ts
index 8fbced664..b36fa3743 100644
--- a/packages/postcss-syntax/src/parse.ts
+++ b/packages/postcss-syntax/src/parse.ts
@@ -9,6 +9,7 @@ import {
 } from './constants';
 import type { BabelPluginOptions } from '@griffel/babel-preset';
 import type { CommentDirective } from './location-preset';
+import * as os from 'os';
 
 export type PostCSSParserOptions = Pick<postcss.ProcessOptions<postcss.Document | postcss.Root>, 'from' | 'map'>;
 
@@ -39,7 +40,7 @@ export const parse = (css: string | { toString(): string }, opts?: ParserOptions
   Object.entries(cssEntries).forEach(([declarator, slots]) => {
     Object.entries(slots).forEach(([slot, rules]) => {
       cssRuleSlotNames.push(`${declarator} ${slot}`);
-      let cssRule = rules.join('');
+      let cssRule = rules.join('').replace(new RegExp(os.EOL, 'g'), ' ');
 
       const ignoredRules = getIgnoredRulesFromDirectives(commentDirectives[declarator]?.[slot] ?? []);
       if (ignoredRules.length) {
@@ -54,7 +55,7 @@ export const parse = (css: string | { toString(): string }, opts?: ParserOptions
   Object.entries(cssResetEntries).forEach(([declarator, resetRules]) => {
     cssRuleSlotNames.push(`${declarator}`);
     const ignoredRules = getIgnoredRulesFromDirectives(resetCommentDirectives[declarator] ?? []);
-    let cssRule = resetRules.join('');
+    let cssRule = resetRules.join('').replace(new RegExp(os.EOL, 'g'), ' ');
 
     if (ignoredRules.length) {
       const stylelintIgnore = `/* stylelint-disable-line ${ignoredRules.join(',')} */`;