Skip to content
Prev Previous commit
Next Next commit
Ust postcss instance provided to plugin
If we import `postcss` there’s a chance that our code is using a different version than the one the plugin was provided to. This can cause checks like `instanceof` in external tools to fail.
  • Loading branch information
thecrypticace committed Jun 30, 2025
commit 510b46cab350e2ec739438ce6e756517eff68b0a
17 changes: 11 additions & 6 deletions packages/@tailwindcss-postcss/src/ast.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import postcss, {
Input,
import {
type Postcss,
type ChildNode as PostCssChildNode,
type Container as PostCssContainerNode,
type Input as PostCssInput,
type Root as PostCssRoot,
type Source as PostcssSource,
} from 'postcss'
Expand All @@ -12,9 +13,13 @@ import { DefaultMap } from '../../tailwindcss/src/utils/default-map'

const EXCLAMATION_MARK = 0x21

export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undefined): PostCssRoot {
let inputMap = new DefaultMap<Source, Input>((src) => {
return new Input(src.code, {
export function cssAstToPostCssAst(
ast: AstNode[],
source: PostcssSource | undefined,
postcss: Postcss,
): PostCssRoot {
let inputMap = new DefaultMap<Source, PostCssInput>((src) => {
return new postcss.Input(src.code, {
map: source?.input.map,
from: src.file ?? undefined,
})
Expand Down Expand Up @@ -126,7 +131,7 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
}

export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
let inputMap = new DefaultMap<Input, Source>((input) => ({
let inputMap = new DefaultMap<PostCssInput, Source>((input) => ({
file: input.file ?? input.id ?? null,
code: input.css,
}))
Expand Down
14 changes: 7 additions & 7 deletions packages/@tailwindcss-postcss/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { clearRequireCache } from '@tailwindcss/node/require-cache'
import { Scanner } from '@tailwindcss/oxide'
import fs from 'node:fs'
import path, { relative } from 'node:path'
import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss'
import type { AcceptedPlugin, PluginCreator, Postcss, Root } from 'postcss'
import { toCss, type AstNode } from '../../tailwindcss/src/ast'
import { cssAstToPostCssAst, postCssAstToCssAst } from './ast'
import fixRelativePathsPlugin from './postcss-fix-relative-paths'
Expand All @@ -23,13 +23,13 @@ interface CacheEntry {
compiler: null | ReturnType<typeof compileAst>
scanner: null | Scanner
tailwindCssAst: AstNode[]
cachedPostCssAst: postcss.Root
optimizedPostCssAst: postcss.Root
cachedPostCssAst: Root
optimizedPostCssAst: Root
fullRebuildPaths: string[]
}
const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })

function getContextFromCache(inputFile: string, opts: PluginOptions): CacheEntry {
function getContextFromCache(inputFile: string, opts: PluginOptions, postcss: Postcss): CacheEntry {
let key = `${inputFile}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
if (cache.has(key)) return cache.get(key)!
let entry = {
Expand Down Expand Up @@ -69,7 +69,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {

{
postcssPlugin: 'tailwindcss',
async Once(root, { result }) {
async Once(root, { result, postcss }) {
using I = new Instrumentation()

let inputFile = result.opts.from ?? ''
Expand Down Expand Up @@ -100,7 +100,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
DEBUG && I.end('Quick bail check')
}

let context = getContextFromCache(inputFile, opts)
let context = getContextFromCache(inputFile, opts, postcss)
let inputBasePath = path.dirname(path.resolve(inputFile))

// Whether this is the first build or not, if it is, then we can
Expand Down Expand Up @@ -296,7 +296,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
} else {
// Convert our AST to a PostCSS AST
DEBUG && I.start('Transform Tailwind CSS AST into PostCSS AST')
context.cachedPostCssAst = cssAstToPostCssAst(tailwindCssAst, root.source)
context.cachedPostCssAst = cssAstToPostCssAst(tailwindCssAst, root.source, postcss)
DEBUG && I.end('Transform Tailwind CSS AST into PostCSS AST')
}
}
Expand Down