fix: make StyledProcessor and tests run on Windows (#1362)

callstack · Sep 28, 2023 · 1e88993 · 1e88993
1 parent 5f216d3
commit 1e88993
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 28 deletions.
diff --git a/.changeset/cuddly-olives-argue.md b/.changeset/cuddly-olives-argue.md
@@ -0,0 +1,5 @@
+---
+"@linaria/react": patch
+---
+
+fix: make StyledProcessor work on Windows
diff --git a/.changeset/hot-wasps-marry.md b/.changeset/hot-wasps-marry.md
@@ -0,0 +1,5 @@
+---
+"@linaria/tags": patch
+---
+
+fix: update getClassNameAndSlug to generate consistent hashes on Windows
diff --git a/babel.config.js b/babel.config.js
@@ -54,7 +54,7 @@ module.exports = {
       /**
        * only react and core packages are targeted to be run in the browser
        */
-      test: /\/packages\/(?:atomic|core|react)\/(?!src\/processors\/)/,
+      test: /[\\/]packages[\\/](?:atomic|core|react)[\\/](?!src[\\/]processors[\\/])/,
       presets: ['@babel/preset-react'],
       env: {
         legacy: {
@@ -81,7 +81,7 @@ module.exports = {
       /**
        * we have to transpile JSX in tests
        */
-      test: /\/(__tests__|__fixtures__|packages\/teskit\/src)\//,
+      test: /[\\/](__tests__|__fixtures__|packages[\\/]teskit[\\/]src)[\\/]/,
       presets: ['@babel/preset-react'],
     },
   ],

diff --git a/packages/esbuild/src/index.ts b/packages/esbuild/src/index.ts
@@ -55,7 +55,7 @@ export default function linaria({
           throw new Error(`Cannot resolve ${token}`);
         }
 
-        return result.path;
+        return result.path.replace(/\\/g, path.posix.sep);
       };
 
       build.onResolve({ filter: /\.linaria\.css$/ }, (args) => {

diff --git a/packages/react/src/processors/styled.ts b/packages/react/src/processors/styled.ts
@@ -1,5 +1,5 @@
 import { readFileSync } from 'fs';
-import { dirname, join, sep } from 'path';
+import { dirname, join, posix } from 'path';
 
 import type {
   CallExpression,
@@ -107,8 +107,11 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
 
               if (mask) {
                 const packageDir = dirname(importedPkg);
-                const normalizedMask = mask.replace(/\//g, sep);
-                const fullMask = join(packageDir, normalizedMask);
+                // Masks for minimatch should always use POSIX slashes
+                const fullMask = join(packageDir, mask).replace(
+                  /\\/g,
+                  posix.sep
+                );
                 const fileWithComponent = require.resolve(importedFrom, {
                   paths: [dirname(this.context.filename!)],
                 });

diff --git a/packages/tags/src/utils/getClassNameAndSlug.ts b/packages/tags/src/utils/getClassNameAndSlug.ts
@@ -1,4 +1,4 @@
-import { basename, dirname, extname, relative, sep } from 'path';
+import { basename, dirname, extname, relative, sep, posix } from 'path';
 
 import { debug } from '@linaria/logger';
 import type { ClassNameSlugVars } from '@linaria/utils';
@@ -14,10 +14,12 @@ export default function getClassNameAndSlug(
   options: IOptions,
   context: IFileContext
 ): { className: string; slug: string } {
-  const relativeFilename =
+  const relativeFilename = (
     context.root && context.filename
       ? relative(context.root, context.filename)
-      : context.filename ?? 'unknown';
+      : context.filename ?? 'unknown'
+  ).replace(/\\/g, posix.sep);
+
   // Custom properties need to start with a letter, so we prefix the slug
   // Also use append the index of the class to the filename for uniqueness in the file
   const slug = toValidCSSIdentifier(

diff --git a/packages/testkit/src/__snapshots__/babel.test.ts.snap b/packages/testkit/src/__snapshots__/babel.test.ts.snap
@@ -661,13 +661,13 @@ Dependencies: NA
 `;
 
 exports[`strategy shaker does not strip istanbul coverage sequences 1`] = `
-"function cov_2dr9r1nt95() {
-  var path = "/home/user/project/file.js";
-  var hash = "36a1bd3d459d3717fbdf9bd0068161503f8053a5";
+"function cov___HASH__() {
+  var path = "__PATH__";
+  var hash = "__HASH__";
   var global = new Function("return this")();
   var gcv = "__coverage__";
   var coverageData = {
-    path: "/home/user/project/file.js",
+    path: "__PATH__",
     statementMap: {
       "0": {
         start: {
@@ -699,7 +699,7 @@ exports[`strategy shaker does not strip istanbul coverage sequences 1`] = `
     f: {},
     b: {},
     _coverageSchema: "1a1c01bbd47fc00a2c39e90264f33305004495a9",
-    hash: "36a1bd3d459d3717fbdf9bd0068161503f8053a5"
+    hash: "__HASH__"
   };
   var coverage = global[gcv] || (global[gcv] = {});
   if (!coverage[path] || coverage[path].hash !== hash) {
@@ -708,13 +708,13 @@ exports[`strategy shaker does not strip istanbul coverage sequences 1`] = `
   var actualCoverage = coverage[path];
   {
     // @ts-ignore
-    cov_2dr9r1nt95 = function () {
+    cov___HASH__ = function () {
       return actualCoverage;
     };
   }
   return actualCoverage;
 }
-cov_2dr9r1nt95();
+cov___HASH__();
 export const titleClass = "titleClass_t13jq05";"
 `;
 

diff --git a/packages/testkit/src/babel.test.ts b/packages/testkit/src/babel.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { readFileSync } from 'fs';
-import { dirname, join, resolve } from 'path';
+import { dirname, join, resolve, sep } from 'path';
 
 import * as babel from '@babel/core';
 import type { PluginItem } from '@babel/core';
@@ -87,7 +87,7 @@ const getLinariaConfig = (
         },
       },
       {
-        test: /\/node_modules\/(?!@linaria)/,
+        test: /[\\/]node_modules[\\/](?!@linaria)/,
         action: 'ignore',
       },
     ],
@@ -1001,7 +1001,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -1520,7 +1523,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -1724,7 +1730,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -1749,7 +1758,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -1774,7 +1786,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -2045,7 +2060,10 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
@@ -2117,13 +2135,20 @@ describe('strategy shaker', () => {
     } catch (e) {
       expect(
         stripAnsi(
-          (e as { message: string }).message.replace(dirName, '<<DIRNAME>>')
+          (e as { message: string }).message.replace(
+            dirName + sep,
+            '<<DIRNAME>>/'
+          )
         )
       ).toMatchSnapshot();
     }
   });
 
   it('does not strip istanbul coverage sequences', async () => {
+    const cwd =
+      process.platform === 'win32'
+        ? 'C:\\Users\\project'
+        : '/home/user/project';
     const withIstanbul = await babel.transformAsync(
       dedent`
       import { css } from './custom-css-tag';
@@ -2134,7 +2159,7 @@ describe('strategy shaker', () => {
       \`;
       `,
       {
-        cwd: '/home/user/project',
+        cwd,
         filename: 'file.js',
         plugins: [
           [
@@ -2143,7 +2168,7 @@ describe('strategy shaker', () => {
               ...babel,
               assertVersion: () => {},
             }),
-            { cwd: '/home/user/project' },
+            { cwd },
           ],
         ],
       }
@@ -2166,7 +2191,13 @@ describe('strategy shaker', () => {
       },
     ]);
 
-    expect(code).toMatchSnapshot();
+    // The output is different on Windows & POSIX-like system
+    const normalizedCode = code
+      .replace(/(cov_)\w+([\s(])/g, `$1__HASH__$2`)
+      .replace(/(hash\s?[:=]\s")\w+(")/g, `$1__HASH__$2`)
+      .replace(/(path\s?[:=]\s")[\w:\\/.]+(")/g, `$1__PATH__$2`);
+
+    expect(normalizedCode).toMatchSnapshot();
     expect(metadata).toMatchSnapshot();
   });