Improve PluginOptions types, JSDoc examples, and exports for Vite & PostCSS - #20522
abdelrhmanahmed255 wants to merge 5 commits into
Conversation
…onfiguration examples
…PostCSS entrypoints
… details in changelog
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| } | ||
|
|
||
| export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions> | ||
| export { tailwindcss } |
There was a problem hiding this comment.
In a CommonJS TypeScript project, import { tailwindcss } from '@tailwindcss/postcss' uses the package’s separate require entry. That entry exports only the function, not a tailwindcss property, so the new named import fails type-checking or resolves to undefined when required. The CommonJS entry needs to expose it too.
Knowledge Base Used: PostCSS plugin
| } | ||
|
|
||
| export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions> | ||
| export { tailwindcss } |
There was a problem hiding this comment.
The named and default exports refer to the same function at runtime, but only the default is typed as PluginCreator<PluginOptions>. The named export keeps the narrower function type, without the postcss: true marker, so TypeScript users cannot use it interchangeably with the default when registering a PostCSS plugin creator directly. Give both exports the same type.
Knowledge Base Used: PostCSS plugin
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. WalkthroughThe pull request expands Priority: ⬇️ Low Merge Risk: 🔵 Low · up to Development-mode Vite builds may optimize CSS despite the new documentation, and CommonJS PostCSS users cannot access the added named export. These are bounded inconsistencies with localized corrections. Security Architecture ReviewSecurity architecture risk: 🔵 Low · up to The named imports expose the existing plugin factories, with no identified change to their privileges or execution paths. The available security coverage does not establish safety beyond the reviewed changes. Retained concerns Security review detailsSecurity Blast Radius
Trust Boundaries and Controls
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Advanced
Run ID: ae2cb973-89c8-4cf2-8aac-b6d444c53f0d
📒 Files selected for processing (4)
CHANGELOG.mdpackages/@tailwindcss-postcss/src/index.tspackages/@tailwindcss-vite/README.mdpackages/@tailwindcss-vite/src/index.ts
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 4 remain after this review.
| export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions> | ||
| export { tailwindcss } |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🔎 Supported by static analysis
🏁 Script executed:
cat packages/@tailwindcss-postcss/src/index.cts
cat packages/@tailwindcss-postcss/package.json
rg -n 'require\\(|from .@tailwindcss/postcss.|tailwindcss.*export|named export|export =|export \\{ tailwindcss' packages/@tailwindcss-postcss packages --glob '*.{ts,tsx,cts,mts,js,md,json}'Repository: tailwindlabs/tailwindcss
Length of output: 1943
🏁 Script executed:
set -o pipefail
printf '%s\n' '--- PostCSS package files ---'
git ls-files packages/@tailwindcss-postcss
printf '%s\n' '--- PostCSS references and export expectations ---'
rg -n -F -e '@tailwindcss/postcss' -e 'tailwindcss' -e 'export =' -e 'export { tailwindcss }' packages/@tailwindcss-postcss packages --glob '*.{ts,tsx,cts,mts,js,md,json}' | head -240
printf '%s\n' '--- package entry patterns ---'
rg -n -F -e '"require"' -e '"import"' -e 'export =' packages --glob 'package.json' --glob '*.cts' --glob '*.ts' | head -240Repository: tailwindlabs/tailwindcss
Length of output: 34233
🏁 Script executed:
set -o pipefail
printf '%s\n' '--- PostCSS README API examples ---'
sed -n '40,115p' packages/@tailwindcss-postcss/README.md
printf '%s\n' '--- PostCSS test imports and entry usage ---'
sed -n '1,30p' packages/@tailwindcss-postcss/src/index.test.ts
printf '%s\n' '--- PostCSS source export area ---'
sed -n '100,116p' packages/@tailwindcss-postcss/src/index.ts
sed -n '406,416p' packages/@tailwindcss-postcss/src/index.ts
printf '%s\n' '--- analogous core package exports ---'
sed -n '1,35p' packages/tailwindcss/src/index.ts
sed -n '1,22p' packages/tailwindcss/src/index.cts
sed -n '15,60p' packages/tailwindcss/package.json
printf '%s\n' '--- analogous plugin exports ---'
cat packages/tailwindcss/src/plugin.ts
cat packages/tailwindcss/src/plugin.ctsRepository: tailwindlabs/tailwindcss
Length of output: 8376
🏁 Script executed:
set -o pipefail
printf '%s\n' '--- exact PR diff ---'
git diff --unified=8 fa81d697fe572a10ac150d18964a093a7a874081 823d99541b313d90ad59ae0f5a13a010753885fc -- packages/@tailwindcss-postcss/src/index.ts packages/@tailwindcss-postcss/src/index.cts packages/@tailwindcss-postcss/package.json
printf '%s\n' '--- core ESM exports and CJS bridge ---'
rg -n -F -e 'export default' -e 'export {' -e 'for (let key in tailwindcss)' -e 'postcssPlugin[key]' packages/tailwindcss/src/index.ts packages/tailwindcss/src/index.cts
sed -n '1,28p' packages/tailwindcss/src/index.ctsRepository: tailwindlabs/tailwindcss
Length of output: 2810
Preserve the named export in the CommonJS entry.
src/index.ts now exports tailwindcss, but src/index.cts imports only the default and exposes it with export =. Therefore, require('@tailwindcss/postcss').tailwindcss is unavailable at runtime and in the CommonJS declaration. Copy the named exports as the core package does.
Suggested fix
-import tailwindcss from './index.ts'
+import postcssPlugin, * as tailwindcss from './index.ts'
// This is used instead of `export default` to work around a bug in
// `postcss-load-config`
+for (let key in tailwindcss) {
+ if (key === 'default') continue
+ // @ts-ignore
+ postcssPlugin[key] = tailwindcss[key]
+}
+
// @ts-ignore
-export = tailwindcss
+export = postcssPlugin| * | ||
| * @default true in production build, false in development | ||
| * | ||
| * @example | ||
| * ```ts | ||
| * import tailwindcss from '@tailwindcss/vite' | ||
| * import { defineConfig } from 'vite' | ||
| * | ||
| * export default defineConfig({ | ||
| * plugins: [ | ||
| * tailwindcss({ | ||
| * optimize: { minify: true }, | ||
| * }), | ||
| * ], | ||
| * }) | ||
| * ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🔎 Supported by static analysis
🏁 Script executed:
rg -n 'shouldOptimize|optimize\\(|generateBundle|transform\\(|apply:|command|NODE_ENV|cssMinify' packages/@tailwindcss-vite/src/index.ts
sed -n '70,115p' packages/@tailwindcss-vite/src/index.ts
sed -n '175,225p' packages/@tailwindcss-vite/src/index.ts
sed -n '260,315p' packages/@tailwindcss-vite/src/index.tsRepository: tailwindlabs/tailwindcss
Length of output: 4959
Clarify the development default
The apply: 'serve' hook does not call optimize, but the apply: 'build' hook does. Since shouldOptimize remains true unless opts.optimize is set, a development-mode Vite build still optimizes CSS. The documentation should distinguish the development server from a development-mode build. The minify option controls minification separately.
Suggested fix
- * @default true in production build, false in development
+ * @default true during Vite builds, and false in the Vite development server📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| * | |
| * @default true in production build, false in development | |
| * | |
| * @example | |
| * ```ts | |
| * import tailwindcss from '@tailwindcss/vite' | |
| * import { defineConfig } from 'vite' | |
| * | |
| * export default defineConfig({ | |
| * plugins: [ | |
| * tailwindcss({ | |
| * optimize: { minify: true }, | |
| * }), | |
| * ], | |
| * }) | |
| * ``` | |
| * | |
| * @default true during Vite builds, and false in the Vite development server | |
| * | |
| * @example | |
| * ```ts | |
| * import tailwindcss from '@tailwindcss/vite' | |
| * import { defineConfig } from 'vite' | |
| * | |
| * export default defineConfig({ | |
| * plugins: [ | |
| * tailwindcss({ | |
| * optimize: { minify: true }, | |
| * }), | |
| * ], | |
| * }) | |
| * ``` |
1 participant
This PR improves the developer experience when configuring
@tailwindcss/viteand@tailwindcss/postcssin TypeScript:@defaulttags and@examplecode blocks toPluginOptionsso IDEs (VS Code) display helpful tooltips and code completions when configuring the plugin.tailwindcssalongside the default exports in both packages to support bothimport tailwindcssandimport { tailwindcss }.@tailwindcss/viteREADME.