fix: use relative path to require css modules

.github/workflows/ci.yml

@@ -13,9 +13,13 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-latest, macos-latest]
+        os: [windows-latest, ubuntu-latest, macos-latest]
         node: [16]
     steps:
+    - name: Prepare git on Windows
+      if: matrix.os == 'windows-latest'
+      run: git config --global core.autocrlf false
+
     - uses: actions/checkout@v3
     - uses: pnpm/[email protected]
       with:
@@ -43,4 +47,11 @@ jobs:
 
     - name: Run tests
       run: pnpm run test
+
+    - name: Upload test results
+      if: ${{ failure() }}
+      uses: actions/upload-artifact@v3
+      with:
+        name: playwright-report
+        path: tests/example/apps/nextjs/test-results
 

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 .next/
 lib/
-
-.DS_Store
+test-results/
+.DS_Store
+tests/example/apps/nextjs/.vscode/settings.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-with-linaria",
-  "version": "0.3.0",
+  "version": "0.3.1-canary.0",
   "description": "Linaria support for Next.js 13 app directory feature",
   "main": "lib/webpackConfig.js",
   "scripts": {

src/loaders/transformLoader.ts

@@ -115,20 +115,23 @@ const transformLoader: LoaderType = function (content, inputSourceMap) {
           const fileDir = path.dirname(this.resourcePath);
           const isGlobalStyle = filename.endsWith(LINARIA_GLOBAL_EXTENSION);
 
-          const outputFileName = path.join(
-            fileDir,
-            `${filename}${isGlobalStyle ? '' : LINARIA_MODULE_EXTENSION}.css`,
-          );
+          const cssModuleName = `${filename}${
+            isGlobalStyle ? '' : LINARIA_MODULE_EXTENSION
+          }.css`;
 
-          moduleStore.addModule(outputFileName, cssText);
-          moduleStore.addModuleDependencies(
-            outputFileName,
-            this.getDependencies(),
-          );
+          const fullPathToModule = path.join(fileDir, cssModuleName);
+
+          await Promise.all([
+            moduleStore.addModule(fullPathToModule, cssText),
+            moduleStore.addModuleDependencies(
+              fullPathToModule,
+              this.getDependencies(),
+            ),
+          ]);
 
           this.callback(
             null,
-            `${result.code}\n\nrequire("${outputFileName}");`,
+            `${result.code}\n\nrequire("./${cssModuleName}");`,
             result.sourceMap ?? undefined,
           );
         } catch (err) {

tests/example/apps/nextjs/package.json

@@ -7,25 +7,26 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "TARGET=prod playwright test && TARGET=dev playwright test"
+    "test": "cross-env TARGET=prod playwright test && cross-env TARGET=dev playwright test"
   },
   "dependencies": {
-    "@linaria/core": "4.2.2",
-    "@linaria/react": "4.3.0",
-    "next": "13.0.2",
+    "@linaria/core": "4.2.4",
+    "@linaria/react": "4.3.2",
+    "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "ui-kit": "workspace:1.0.0"
   },
   "devDependencies": {
-    "@linaria/babel-preset": "4.3.0",
-    "@playwright/test": "1.27.1",
-    "@types/node": "18.11.7",
-    "@types/react": "18.0.24",
-    "@types/react-dom": "18.0.8",
-    "eslint": "8.26.0",
-    "eslint-config-next": "13.0.2",
+    "@linaria/babel-preset": "4.3.2",
+    "@playwright/test": "1.28.1",
+    "@types/node": "18.11.14",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "cross-env": "^7.0.3",
+    "eslint": "8.29.0",
+    "eslint-config-next": "13.0.6",
     "nodemon": "2.0.20",
-    "typescript": "4.8.4"
+    "typescript": "4.9.4"
   }
 }

tests/example/apps/nextjs/playwright.config.ts

@@ -23,13 +23,15 @@ const config: PlaywrightTestConfig = {
   outputDir: path.join(__dirname, 'test-results'),
   testDir: path.join(__dirname, 'e2e'),
   workers: isCI ? 2 : undefined,
+  reporter: process.env.CI ? 'github' : 'list',
   webServer: {
     command: webServer.command,
     port: port,
     reuseExistingServer: !isCI,
   },
   use: {
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
   projects: [
     {

tests/example/packages/ui-kit/package.json

@@ -8,8 +8,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@linaria/core": "^4.2.2",
-    "@linaria/react": "^4.3.0"
+    "@linaria/core": "^4.2.4",
+    "@linaria/react": "^4.3.2"
   },
   "devDependencies": {
     "react": "18.2.0"