|
1 | | -import { candidate, css, html, json, test } from '../utils' |
| 1 | +import { candidate, css, html, json, test, ts } from '../utils' |
2 | 2 |
|
3 | 3 | test( |
4 | 4 | 'builds the `@tailwindcss/typography` plugin utilities', |
@@ -207,3 +207,88 @@ test( |
207 | 207 | ]) |
208 | 208 | }, |
209 | 209 | ) |
| 210 | + |
| 211 | +// https://github.com/tailwindlabs/tailwindcss/issues/15844 |
| 212 | +test( |
| 213 | + 'builds CSS with a custom plugin compiled from TypeScript', |
| 214 | + { |
| 215 | + fs: { |
| 216 | + 'package.json': json` |
| 217 | + { |
| 218 | + "type": "module", |
| 219 | + "dependencies": { |
| 220 | + "tailwindcss": "workspace:^", |
| 221 | + "@tailwindcss/cli": "workspace:^" |
| 222 | + }, |
| 223 | + "devDependencies": { |
| 224 | + "typescript": "^5.7.2" |
| 225 | + } |
| 226 | + } |
| 227 | + `, |
| 228 | + 'tsconfig.json': json` |
| 229 | + { |
| 230 | + "compilerOptions": { |
| 231 | + "target": "ES2022", |
| 232 | + "module": "NodeNext", |
| 233 | + "moduleResolution": "NodeNext", |
| 234 | + "declaration": true, |
| 235 | + "composite": true, |
| 236 | + "rootDir": "./src", |
| 237 | + "outDir": "./.build", |
| 238 | + "skipLibCheck": true |
| 239 | + }, |
| 240 | + "include": ["src/**/*.ts"] |
| 241 | + } |
| 242 | + `, |
| 243 | + 'index.html': html` |
| 244 | + <div class="test-red"></div> |
| 245 | + `, |
| 246 | + 'src/index.css': css` |
| 247 | + @import 'tailwindcss'; |
| 248 | + @plugin '../.build/plugin.js'; |
| 249 | + `, |
| 250 | + 'src/plugin.ts': ts` |
| 251 | + import plugin from 'tailwindcss/plugin' |
| 252 | +
|
| 253 | + export const typedPlugin = plugin(() => { |
| 254 | + return ({ matchComponents }) => { |
| 255 | + matchComponents( |
| 256 | + { |
| 257 | + test: (content: string) => ({ |
| 258 | + color: content, |
| 259 | + }), |
| 260 | + }, |
| 261 | + { |
| 262 | + values: { |
| 263 | + red: 'red', |
| 264 | + }, |
| 265 | + }, |
| 266 | + ) |
| 267 | + } |
| 268 | + }) |
| 269 | +
|
| 270 | + export default plugin(({ matchComponents }) => { |
| 271 | + matchComponents( |
| 272 | + { |
| 273 | + test: (content: string) => ({ |
| 274 | + color: content, |
| 275 | + }), |
| 276 | + }, |
| 277 | + { |
| 278 | + values: { |
| 279 | + red: 'red', |
| 280 | + }, |
| 281 | + }, |
| 282 | + ) |
| 283 | + }) |
| 284 | + `, |
| 285 | + }, |
| 286 | + }, |
| 287 | + async ({ fs, exec }) => { |
| 288 | + // We expect that these commands don't crash: |
| 289 | + await exec('pnpm tsc -b') |
| 290 | + await exec('pnpm tailwindcss --input src/index.css --output dist/out.css') |
| 291 | + |
| 292 | + await fs.expectFileToContain('dist/out.css', [candidate`test-red`]) |
| 293 | + }, |
| 294 | +) |
0 commit comments