mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Tim NeutkensandGitHub
bf6784f78b
### What? Adds support for TypeScript PostCSS configuration files in Turbopack. ### Why? Users can write their PostCSS configuration in TypeScript for better type safety and IDE support. This was already supported in webpack but was missing in Turbopack. ### How? Added the following TypeScript config file names to Turbopack's PostCSS config detection: - `postcss.config.ts`, `postcss.config.mts`, `postcss.config.cts` - `.postcssrc.ts`, `.postcssrc.mts`, `.postcssrc.cts` - `.config/postcssrc.ts`, `.config/postcssrc.mts`, `.config/postcssrc.cts` Also updated the Turbopack documentation to reflect the supported config file extensions (`.js`, `.mjs`, `.cjs`, `.ts`, `.mts`, `.cts`). ### Testing Added e2e tests that verify the TypeScript PostCSS config is actually loaded and applied by using a custom plugin that transforms colors. Tests cover: - `postcss.config.ts` - `postcss.config.mts` - `postcss.config.cts` - `.postcssrc.ts`
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import { FileRef, nextTestSetup } from 'e2e-utils'
|
|
import { join } from 'path'
|
|
|
|
// Not supported when using webpack.
|
|
;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
|
|
'postcss-config-ts',
|
|
() => {
|
|
describe('postcss.config.ts', () => {
|
|
const { next } = nextTestSetup({
|
|
files: new FileRef(join(__dirname, 'postcss-config')),
|
|
})
|
|
|
|
it('works with postcss.config.ts files', async () => {
|
|
const browser = await next.browser('/')
|
|
try {
|
|
const text = await browser.elementByCss('#test').text()
|
|
expect(text).toBe('Hello World')
|
|
// The CSS has `color: red` but the PostCSS plugin transforms it to green.
|
|
// If this is green, it proves the TypeScript PostCSS config was loaded and applied.
|
|
const color = await browser
|
|
.elementByCss('#test')
|
|
.getComputedCss('color')
|
|
expect(color).toBe('rgb(0, 128, 0)')
|
|
} finally {
|
|
await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('.postcssrc.ts', () => {
|
|
const { next } = nextTestSetup({
|
|
files: new FileRef(join(__dirname, 'postcssrc')),
|
|
})
|
|
|
|
it('works with .postcssrc.ts files', async () => {
|
|
const browser = await next.browser('/')
|
|
try {
|
|
const text = await browser.elementByCss('#test').text()
|
|
expect(text).toBe('Hello World')
|
|
// The CSS has `color: red` but the PostCSS plugin transforms it to green.
|
|
// If this is green, it proves the TypeScript PostCSS config was loaded and applied.
|
|
const color = await browser
|
|
.elementByCss('#test')
|
|
.getComputedCss('color')
|
|
expect(color).toBe('rgb(0, 128, 0)')
|
|
} finally {
|
|
await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('postcss.config.mts', () => {
|
|
const { next } = nextTestSetup({
|
|
files: new FileRef(join(__dirname, 'postcss-config-mts')),
|
|
})
|
|
|
|
it('works with postcss.config.mts files', async () => {
|
|
const browser = await next.browser('/')
|
|
try {
|
|
const text = await browser.elementByCss('#test').text()
|
|
expect(text).toBe('Hello World')
|
|
// The CSS has `color: red` but the PostCSS plugin transforms it to green.
|
|
// If this is green, it proves the TypeScript PostCSS config was loaded and applied.
|
|
const color = await browser
|
|
.elementByCss('#test')
|
|
.getComputedCss('color')
|
|
expect(color).toBe('rgb(0, 128, 0)')
|
|
} finally {
|
|
await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('postcss.config.cts', () => {
|
|
const { next } = nextTestSetup({
|
|
files: new FileRef(join(__dirname, 'postcss-config-cts')),
|
|
})
|
|
|
|
it('works with postcss.config.cts files', async () => {
|
|
const browser = await next.browser('/')
|
|
try {
|
|
const text = await browser.elementByCss('#test').text()
|
|
expect(text).toBe('Hello World')
|
|
// The CSS has `color: red` but the PostCSS plugin transforms it to green.
|
|
// If this is green, it proves the TypeScript PostCSS config was loaded and applied.
|
|
const color = await browser
|
|
.elementByCss('#test')
|
|
.getComputedCss('color')
|
|
expect(color).toBe('rgb(0, 128, 0)')
|
|
} finally {
|
|
await browser.close()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
)
|