Improvements

philipp-spiess · adamwathan · commit fa25b2128652 · 2024-11-07T09:46:32.000-05:00
diff --git a/integrations/vite/other-transforms.test.ts b/integrations/vite/other-transforms.test.ts
@@ -1,3 +1,4 @@
+import dedent from 'dedent'
 import { describe, expect } from 'vitest'
 import { css, fetchStyles, html, retryAssertion, test, ts, txt } from '../utils'
 
@@ -30,7 +31,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
               name: 'recolor',
               transform(code, id) {
                 if (id.includes('.css')) {
-                  return code.replace(/red/g, 'blue')
+                  return code.replace(/red;/g, 'blue;')
                 }
               },
             },
@@ -42,7 +43,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
           <link rel="stylesheet" href="./src/index.css" />
         </head>
         <body>
-          <div class="foo">Hello, world!</div>
+          <div class="foo [background-color:red]">Hello, world!</div>
         </body>
       `,
       'src/index.css': css`
@@ -59,7 +60,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
 
 for (let transformer of ['postcss', 'lightningcss'] as const) {
   describe(transformer, () => {
-    test(`production build`, createSetup(transformer), async ({ fs, exec }) => {
+    test.only(`production build`, createSetup(transformer), async ({ fs, exec }) => {
       await exec('pnpm vite build')
 
       let files = await fs.glob('dist/**/*.css')
@@ -72,6 +73,12 @@ for (let transformer of ['postcss', 'lightningcss'] as const) {
             color: blue;
           }
         `,
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `,
       ])
     })
 
@@ -86,6 +93,12 @@ for (let transformer of ['postcss', 'lightningcss'] as const) {
             color: blue;
           }
         `)
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        expect(styles).toContain(dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `)
       })
 
       await retryAssertion(async () => {
@@ -123,6 +136,12 @@ for (let transformer of ['postcss', 'lightningcss'] as const) {
             color: blue;
           }
         `)
+        // Running the transforms on utilities generated by Tailwind might change in the future
+        expect(styles).toContain(dedent`
+          .\[background-color\:red\] {
+            background-color: blue;
+          }
+        `)
       })
 
       await retryAssertion(async () => {
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
@@ -71,7 +71,6 @@ test(
     expect(files).toHaveLength(1)
 
     await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
-
-    await fs.expectFileNotToContain(files[0][0], [':deep(.bar)'])
+    await fs.expectFileToContain(files[0][0], ['.bar{'])
   },
 )

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,6 @@ test(`
`71`	`71`	`expect(files).toHaveLength(1)`
`72`	`72`
`73`	`73`	await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
`74`		`-`
`75`		`- await fs.expectFileNotToContain(files[0][0], [':deep(.bar)'])`
	`74`	`+ await fs.expectFileToContain(files[0][0], ['.bar{'])`
`76`	`75`	`},`
`77`	`76`	`)`