(transformer: 'postcss' | 'lightningcss')
| 3 | import { css, fetchStyles, html, retryAssertion, test, ts, txt } from '../utils' |
| 4 | |
| 5 | function createSetup(transformer: 'postcss' | 'lightningcss') { |
| 6 | return { |
| 7 | fs: { |
| 8 | 'package.json': txt` |
| 9 | { |
| 10 | "type": "module", |
| 11 | "dependencies": { |
| 12 | "@tailwindcss/vite": "workspace:^", |
| 13 | "tailwindcss": "workspace:^" |
| 14 | }, |
| 15 | "devDependencies": { |
| 16 | ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''} |
| 17 | "vite": "^7" |
| 18 | } |
| 19 | } |
| 20 | `, |
| 21 | 'vite.config.ts': ts` |
| 22 | import tailwindcss from '@tailwindcss/vite' |
| 23 | import { defineConfig } from 'vite' |
| 24 | |
| 25 | export default defineConfig({ |
| 26 | css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"}, |
| 27 | build: { cssMinify: false }, |
| 28 | plugins: [ |
| 29 | tailwindcss(), |
| 30 | { |
| 31 | name: 'recolor', |
| 32 | transform(code, id) { |
| 33 | if (id.includes('.css')) { |
| 34 | return code.replace(/red;/g, 'blue;') |
| 35 | } |
| 36 | }, |
| 37 | }, |
| 38 | ], |
| 39 | }) |
| 40 | `, |
| 41 | 'index.html': html` |
| 42 | <head> |
| 43 | <link rel="stylesheet" href="./src/index.css" /> |
| 44 | </head> |
| 45 | <body> |
| 46 | <div class="foo [background-color:red]">Hello, world!</div> |
| 47 | </body> |
| 48 | `, |
| 49 | 'src/index.css': css` |
| 50 | @reference 'tailwindcss/theme'; |
| 51 | @import 'tailwindcss/utilities'; |
| 52 | |
| 53 | .foo { |
| 54 | color: red; |
| 55 | } |
| 56 | `, |
| 57 | }, |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | describe.each(['postcss', 'lightningcss'] as const)('%s', (transformer) => { |
| 62 | test(`production build`, createSetup(transformer), async ({ fs, exec, expect }) => { |
no outgoing calls
no test coverage detected