addFileScope: Don't mangle non-template strings that contain newlin…

…es (#1406)
vanilla-extract-css · May 4, 2024 · 5e06ada · 5e06ada
1 parent c239f1f
commit 5e06ada
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 24 deletions.
diff --git a/.changeset/clean-tigers-drive.md b/.changeset/clean-tigers-drive.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+`addFileScope`: Fixes a bug where non-template strings that contained a newline where being mangled
diff --git a/.changeset/silver-cows-march.md b/.changeset/silver-cows-march.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Bump `dedent` dependency to `^1.5.3`
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -112,7 +112,7 @@
     "css-what": "^6.1.0",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
-    "dedent": "^1.5.1",
+    "dedent": "^1.5.3",
     "deep-object-diff": "^1.1.9",
     "deepmerge": "^4.2.2",
     "media-query-parser": "^2.0.2",

diff --git a/packages/integration/package.json b/packages/integration/package.json
@@ -18,7 +18,7 @@
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@vanilla-extract/babel-plugin-debug-ids": "^1.0.5",
     "@vanilla-extract/css": "^1.15.1",
-    "dedent": "^1.5.1",
+    "dedent": "^1.5.3",
     "esbuild": "npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0",
     "eval": "0.1.8",
     "find-up": "^5.0.0",

diff --git a/packages/integration/src/addFileScope.test.ts b/packages/integration/src/addFileScope.test.ts
@@ -147,6 +147,24 @@ describe('ESM', () => {
       vanillaFileScope.endFileScope();
     `);
   });
+
+  test('should preserve non-template strings that contain newline characters', () => {
+    const source = `export const multiLineString = "\\nfoo\\n";`;
+
+    expect(
+      addFileScope({
+        source,
+        rootPath: '/the-root',
+        filePath: '/the-root/app/app.css.ts',
+        packageName: 'my-package',
+      }),
+    ).toMatchInlineSnapshot(`
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      setFileScope("app/app.css.ts", "my-package");
+      export const multiLineString = "\\nfoo\\n";
+      endFileScope();
+    `);
+  });
 });
 
 describe('CJS', () => {
@@ -266,6 +284,24 @@ describe('CJS', () => {
       __vanilla_filescope__.endFileScope();
     `);
   });
+
+  test('should preserve non-template strings that contain newline characters', () => {
+    const source = `exports.multiLineString =  "\\nfoo\\n";`;
+
+    expect(
+      addFileScope({
+        source,
+        rootPath: '/the-root',
+        filePath: '/the-root/app/app.css.ts',
+        packageName: 'my-package',
+      }),
+    ).toMatchInlineSnapshot(`
+      const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+      __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
+      exports.multiLineString =  "\\nfoo\\n";
+      __vanilla_filescope__.endFileScope();
+    `);
+  });
 });
 
 test('platform-specific relative path', () => {

diff --git a/packages/integration/src/addFileScope.ts b/packages/integration/src/addFileScope.ts
@@ -33,19 +33,19 @@ export function addFileScope({
     );
   } else {
     if (hasESM && !isMixed) {
-      source = dedent`
+      source = dedent(`
         import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
         setFileScope("${normalizedPath}", "${packageName}");
         ${source}
         endFileScope();
-      `;
+      `);
     } else {
-      source = dedent`
+      source = dedent(`
         const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
         __vanilla_filescope__.setFileScope("${normalizedPath}", "${packageName}");
         ${source}
         __vanilla_filescope__.endFileScope();
-      `;
+      `);
     }
   }
 
@@ -55,12 +55,12 @@ export function addFileScope({
         ? 'import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";'
         : 'const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");';
 
-    source = dedent`
+    source = dedent(`
       ${adapterImport}
       __vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier});
       ${source}
       __vanilla_css_adapter__.removeAdapter();
-    `;
+    `);
   }
 
   return source;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/package.json b/site/package.json
@@ -14,7 +14,7 @@
     "@docsearch/react": "3.3.3",
     "@mdx-js/react": "^1.6.22",
     "classnames": "^2.5.1",
-    "dedent": "^1.5.1",
+    "dedent": "^1.5.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",