Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correctly resolve module paths when using Vite plugins that affect module resolution #1309

Merged
merged 14 commits into from
Feb 4, 2024
Merged
7 changes: 7 additions & 0 deletions .changeset/integration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@vanilla-extract/integration': major
---

Use absolute paths internally to make sure Vite resolves modules correctly
mrm007 marked this conversation as resolved.
Show resolved Hide resolved

This change only affects integrations that use the vite-node compiler, which is currently the esbuild (next) and Vite plugins
6 changes: 6 additions & 0 deletions .changeset/plugins.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@vanilla-extract/vite-plugin': patch
'@vanilla-extract/esbuild-plugin-next': patch
---

Correctly resolve module paths when using Vite plugins that affect module resolution, such as [`vite-tsconfig-paths`](https://github.com/aleclarson/vite-tsconfig-paths)
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"start-site": "pnpm --filter=site start",
"build-site": "pnpm --filter=site build",
"test:unit": "pnpm test:jest && pnpm test:vitest",
"test:jest": "jest",
"test:jest": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
"test:vitest": "vitest --watch=false",
"test:playwright": "NODE_OPTIONS=--no-experimental-fetch playwright test",
"format": "prettier --write .",
Expand All @@ -41,17 +41,18 @@
"@types/testing-library__jest-dom": "^5.14.5",
"@vanilla-extract/jest-transform": "*",
"babel-jest": "^27.3.1",
"cross-env": "^7.0.3",
"fast-glob": "^3.2.7",
"jest": "^29.3.1",
"jest": "^29.7.0",
mrm007 marked this conversation as resolved.
Show resolved Hide resolved
"jest-environment-jsdom": "^29.3.1",
"prettier": "^2.8.8",
"resolve.exports": "^1.1.0",
"rollup": "^2.7.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-node-externals": "^5.0.0",
"ts-node": "^10.0.0",
"typescript": "^4.9.4",
"vitest": "^1.1.0"
"typescript": "^5.3.3",
"vitest": "^1.2.2"
},
"preconstruct": {
"___experimentalFlags_WILL_CHANGE_IN_PATCH": {
Expand Down
4 changes: 2 additions & 2 deletions packages/esbuild-plugin-next/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ export function vanillaExtractPlugin({
build.onLoad(
{ filter: /.*/, namespace: vanillaCssNamespace },
async ({ path }) => {
const [rootRelativePath] = path.split('.vanilla.css');
const [vanillaModulePath] = path.split('.vanilla.css');

let { css, filePath } = compiler.getCssForFile(rootRelativePath);
let { css, filePath } = compiler.getCssForFile(vanillaModulePath);

if (typeof processCss === 'function') {
css = await processCss(css);
Expand Down
20 changes: 8 additions & 12 deletions packages/integration/src/compiler.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { join, relative, isAbsolute } from 'path';
import { join, isAbsolute } from 'path';
import type { Adapter } from '@vanilla-extract/css';
import { transformCss } from '@vanilla-extract/css/transformCss';
import type { ModuleNode, InlineConfig as ViteConfig } from 'vite';
Expand All @@ -16,7 +16,7 @@ type Composition = Parameters<Adapter['registerComposition']>[0];

const globalAdapterIdentifier = '__vanilla_globalCssAdapter__';

const scanModule = (entryModule: ModuleNode, root: string) => {
const scanModule = (entryModule: ModuleNode) => {
const queue = new Set([entryModule]);
const cssDeps = new Set<string>();
const watchFiles = new Set<string>();
Expand All @@ -26,10 +26,8 @@ const scanModule = (entryModule: ModuleNode, root: string) => {
continue;
}

const relativePath = moduleNode.id && relative(root, moduleNode.id);

if (relativePath && cssFileFilter.test(relativePath)) {
cssDeps.add(relativePath);
if (moduleNode.id && cssFileFilter.test(moduleNode.id)) {
cssDeps.add(moduleNode.id);
}
if (moduleNode.file) {
watchFiles.add(moduleNode.file);
Expand Down Expand Up @@ -151,7 +149,7 @@ class NormalizedMap<V> extends Map<string, V> {

#normalizePath(filePath: string) {
return normalizePath(
isAbsolute(filePath) ? relative(this.root, filePath) : filePath,
isAbsolute(filePath) ? filePath : join(this.root, filePath),
);
}

Expand Down Expand Up @@ -319,7 +317,7 @@ export const createCompiler = ({

const cssImports = [];

const { cssDeps, watchFiles } = scanModule(moduleNode, root);
const { cssDeps, watchFiles } = scanModule(moduleNode);

for (const cssDep of cssDeps) {
const cssDepModuleId = normalizePath(cssDep);
Expand Down Expand Up @@ -388,9 +386,7 @@ export const createCompiler = ({
},
getCssForFile(filePath: string) {
filePath = isAbsolute(filePath) ? filePath : join(root, filePath);
const rootRelativePath = relative(root, filePath);

const moduleId = normalizePath(rootRelativePath);
const moduleId = normalizePath(filePath);
const result = cssCache.get(moduleId);

if (!result) {
Expand All @@ -399,7 +395,7 @@ export const createCompiler = ({

return {
css: result.css,
filePath: rootRelativePath,
filePath: filePath,
resolveDir: root,
};
},
Expand Down
Loading
Loading