diff --git a/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts b/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts
new file mode 100644
index 00000000000000..e36c1f52d2c1f8
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts
@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (isBuild) {
+ test('should not output sourcemap warning (#4939)', () => {
+ serverLogs.forEach((log) => {
+ expect(log).not.toMatch('Sourcemap is likely to be incorrect')
+ })
+ })
+} else {
+ test('this file only includes test for build', () => {
+ expect(true).toBe(true)
+ })
+}
diff --git a/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts b/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts
new file mode 100644
index 00000000000000..d961f75e4536e5
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts
@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (!isBuild) {
+ test('should not output missing source file warning', () => {
+ serverLogs.forEach((log) => {
+ expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
+ })
+ })
+} else {
+ test('this file only includes test for serve', () => {
+ expect(true).toBe(true)
+ })
+}
diff --git a/packages/playground/tailwind-sourcemap/index.html b/packages/playground/tailwind-sourcemap/index.html
new file mode 100644
index 00000000000000..95c8c5da7716d1
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/index.html
@@ -0,0 +1,9 @@
+
+
Tailwind Sourcemap
+
+
foo
+
+
+
diff --git a/packages/playground/tailwind-sourcemap/package.json b/packages/playground/tailwind-sourcemap/package.json
new file mode 100644
index 00000000000000..5c374f3bf47f1b
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "test-tailwind-sourcemap",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "debug": "node --inspect-brk ../../vite/bin/vite",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "tailwindcss": "^3.0.23"
+ }
+}
diff --git a/packages/playground/tailwind-sourcemap/postcss.config.js b/packages/playground/tailwind-sourcemap/postcss.config.js
new file mode 100644
index 00000000000000..eab3760cbc7b42
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: {
+ tailwindcss: { config: __dirname + '/tailwind.config.js' }
+ }
+}
diff --git a/packages/playground/tailwind-sourcemap/tailwind.config.js b/packages/playground/tailwind-sourcemap/tailwind.config.js
new file mode 100644
index 00000000000000..f89a536ccd742f
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ content: ['./index.html'],
+ theme: {
+ extend: {}
+ },
+ plugins: []
+}
diff --git a/packages/playground/tailwind-sourcemap/tailwind.css b/packages/playground/tailwind-sourcemap/tailwind.css
new file mode 100644
index 00000000000000..b5c61c956711f9
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/playground/tailwind-sourcemap/vite.config.js b/packages/playground/tailwind-sourcemap/vite.config.js
new file mode 100644
index 00000000000000..70fea77247bcd4
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/vite.config.js
@@ -0,0 +1,11 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+ css: {
+ devSourcemap: true
+ },
+ build: {
+ sourcemap: true
+ }
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 4933f8455931c1..afd9e7849b7432 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -783,7 +783,9 @@ async function compileCSS(
map: {
inline: false,
annotation: false,
- sourcesContent: false
+ // postcss may return virtual files
+ // we cannot obtain content of them, so this needs to be enabled
+ sourcesContent: true
// when "prev: preprocessorMap", the result map may include duplicate filename in `postcssResult.map.sources`
// prev: preprocessorMap,
}
@@ -862,19 +864,33 @@ export function formatPostcssSourceMap(
file: string
): ExistingRawSourceMap {
const inputFileDir = path.dirname(file)
- const sources = rawMap.sources
+
+ const sources: string[] = []
+ const sourcesContent: string[] = []
+ for (const [i, source] of rawMap.sources.entries()) {
// remove from sources, to prevent source map to be combined incorrectly
- .filter((source) => source !== '')
- .map((source) => {
- const cleanSource = cleanUrl(decodeURIComponent(source))
- return normalizePath(path.resolve(inputFileDir, cleanSource))
- })
+ if (source === '') continue
+
+ const cleanSource = cleanUrl(decodeURIComponent(source))
+
+ // postcss returns virtual files
+ if (/^<.+>$/.test(cleanSource)) {
+ sources.push(`\0${cleanSource}`)
+ } else {
+ sources.push(normalizePath(path.resolve(inputFileDir, cleanSource)))
+ }
+
+ if (rawMap.sourcesContent) {
+ sourcesContent.push(rawMap.sourcesContent[i])
+ }
+ }
return {
file,
mappings: rawMap.mappings,
names: rawMap.names,
sources,
+ sourcesContent,
version: rawMap.version
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0574f04c53b86..461ca065e2e18d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -666,6 +666,12 @@ importers:
devDependencies:
'@vitejs/plugin-vue': link:../../plugin-vue
+ packages/playground/tailwind-sourcemap:
+ specifiers:
+ tailwindcss: ^3.0.23
+ dependencies:
+ tailwindcss: 3.0.23_ts-node@10.4.0
+
packages/playground/tsconfig-json:
specifiers: {}
@@ -3553,7 +3559,6 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
- dev: true
/chownr/2.0.0:
resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -7526,6 +7531,16 @@ packages:
postcss: 8.4.5
dev: false
+ /postcss-js/4.0.0_postcss@8.4.12:
+ resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+ engines: {node: ^12 || ^14 || >= 16}
+ peerDependencies:
+ postcss: ^8.3.3
+ dependencies:
+ camelcase-css: 2.0.1
+ postcss: 8.4.12
+ dev: false
+
/postcss-load-config/3.1.0_ts-node@10.4.0:
resolution: {integrity: sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==}
engines: {node: '>= 10'}
@@ -7556,7 +7571,6 @@ packages:
postcss: 8.4.12
ts-node: 10.4.0_44ef5af6cbbc24239b4e70b5c7b0d7a6
yaml: 1.10.2
- dev: true
/postcss-modules-extract-imports/3.0.0_postcss@8.4.12:
resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
@@ -7623,6 +7637,16 @@ packages:
dependencies:
postcss-selector-parser: 6.0.8
+ /postcss-nested/5.0.6_postcss@8.4.12:
+ resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+ engines: {node: '>=12.0'}
+ peerDependencies:
+ postcss: ^8.2.14
+ dependencies:
+ postcss: 8.4.12
+ postcss-selector-parser: 6.0.8
+ dev: false
+
/postcss-selector-parser/6.0.8:
resolution: {integrity: sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==}
engines: {node: '>=4'}
@@ -7630,6 +7654,14 @@ packages:
cssesc: 3.0.0
util-deprecate: 1.0.2
+ /postcss-selector-parser/6.0.9:
+ resolution: {integrity: sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==}
+ engines: {node: '>=4'}
+ dependencies:
+ cssesc: 3.0.0
+ util-deprecate: 1.0.2
+ dev: false
+
/postcss-value-parser/3.3.1:
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
dev: false
@@ -8861,6 +8893,38 @@ packages:
- ts-node
dev: false
+ /tailwindcss/3.0.23_ts-node@10.4.0:
+ resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
+ engines: {node: '>=12.13.0'}
+ hasBin: true
+ peerDependencies:
+ autoprefixer: ^10.0.2
+ dependencies:
+ arg: 5.0.1
+ chalk: 4.1.2
+ chokidar: 3.5.3
+ color-name: 1.1.4
+ cosmiconfig: 7.0.1
+ detective: 5.2.0
+ didyoumean: 1.2.2
+ dlv: 1.1.3
+ fast-glob: 3.2.11
+ glob-parent: 6.0.2
+ is-glob: 4.0.3
+ normalize-path: 3.0.0
+ object-hash: 2.2.0
+ postcss: 8.4.12
+ postcss-js: 4.0.0_postcss@8.4.12
+ postcss-load-config: 3.1.3_postcss@8.4.12+ts-node@10.4.0
+ postcss-nested: 5.0.6_postcss@8.4.12
+ postcss-selector-parser: 6.0.9
+ postcss-value-parser: 4.2.0
+ quick-lru: 5.1.1
+ resolve: 1.22.0
+ transitivePeerDependencies:
+ - ts-node
+ dev: false
+
/tar/6.1.11:
resolution: {integrity: sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==}
engines: {node: '>= 10'}