mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
492304212f
Since we (optionally) support source maps now it's possible that a later PostCSS plugin that *still* does url rewriting might fail to do so correctly because nodes will have preserved source locations in dev builds where before we "pretended" that everything came from the original file. But, because we can't know if such a plugin is present, disabling this behavior when source maps are enabled could cause issues *and* would be a breaking change. I wish everything *could just work* here but realistically we can't know what plugins have run before our PostCSS plugin or what plugins will run after so the best option (I think) we can offer here is to allow users to disable url rewriting at the plugin level. Fixes #16700
150 lines
3.6 KiB
TypeScript
150 lines
3.6 KiB
TypeScript
import { css, js, json, test } from '../utils'
|
|
|
|
test(
|
|
'can rewrite urls in production builds',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"postcss": "^8",
|
|
"postcss-cli": "^10",
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/postcss": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'postcss.config.js': js`
|
|
module.exports = {
|
|
plugins: {
|
|
'@tailwindcss/postcss': {},
|
|
},
|
|
}
|
|
`,
|
|
'src/index.css': css`
|
|
@reference 'tailwindcss';
|
|
@import './dir-1/bar.css';
|
|
@import './dir-1/dir-2/baz.css';
|
|
@import './dir-1/dir-2/vector.css';
|
|
`,
|
|
'src/dir-1/bar.css': css`
|
|
.test1 {
|
|
background-image: url('../../resources/image.png');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/baz.css': css`
|
|
.test2 {
|
|
background-image: url('../../../resources/image.png');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/vector.css': css`
|
|
@import './dir-3/vector.css';
|
|
.test3 {
|
|
background-image: url('../../../resources/vector.svg');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/dir-3/vector.css': css`
|
|
.test4 {
|
|
background-image: url('./vector-2.svg');
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec, expect }) => {
|
|
await exec('pnpm postcss src/index.css --output dist/out.css')
|
|
|
|
expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
|
|
"
|
|
--- dist/out.css ---
|
|
.test1 {
|
|
background-image: url('../resources/image.png');
|
|
}
|
|
.test2 {
|
|
background-image: url('../resources/image.png');
|
|
}
|
|
.test4 {
|
|
background-image: url('./dir-1/dir-2/dir-3/vector-2.svg');
|
|
}
|
|
.test3 {
|
|
background-image: url('../resources/vector.svg');
|
|
}
|
|
"
|
|
`)
|
|
},
|
|
)
|
|
|
|
test(
|
|
'url rewriting can be disabled',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"postcss": "^8",
|
|
"postcss-cli": "^10",
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/postcss": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'postcss.config.js': js`
|
|
module.exports = {
|
|
plugins: {
|
|
'@tailwindcss/postcss': {
|
|
transformAssetUrls: false,
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
'src/index.css': css`
|
|
@reference 'tailwindcss';
|
|
@import './dir-1/bar.css';
|
|
@import './dir-1/dir-2/baz.css';
|
|
@import './dir-1/dir-2/vector.css';
|
|
`,
|
|
'src/dir-1/bar.css': css`
|
|
.test1 {
|
|
background-image: url('../../resources/image.png');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/baz.css': css`
|
|
.test2 {
|
|
background-image: url('../../../resources/image.png');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/vector.css': css`
|
|
@import './dir-3/vector.css';
|
|
.test3 {
|
|
background-image: url('../../../resources/vector.svg');
|
|
}
|
|
`,
|
|
'src/dir-1/dir-2/dir-3/vector.css': css`
|
|
.test4 {
|
|
background-image: url('./vector-2.svg');
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec, expect }) => {
|
|
await exec('pnpm postcss src/index.css --output dist/out.css')
|
|
|
|
expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
|
|
"
|
|
--- dist/out.css ---
|
|
.test1 {
|
|
background-image: url('../../resources/image.png');
|
|
}
|
|
.test2 {
|
|
background-image: url('../../../resources/image.png');
|
|
}
|
|
.test4 {
|
|
background-image: url('./vector-2.svg');
|
|
}
|
|
.test3 {
|
|
background-image: url('../../../resources/vector.svg');
|
|
}
|
|
"
|
|
`)
|
|
},
|
|
)
|