test: add inject-url test for lightningcss as well

Co-authored-by: Jeremiasz Major <jrh.mjr@gmail.com>

Author: sapphi-red

playground/css/__tests__/tests.ts

@@ -82,15 +82,13 @@ export const tests = (isLightningCSS: boolean) => {
     await untilUpdated(() => getColor(imported), 'red')
   })
 
-  if (!isLightningCSS) {
-    test('postcss plugin that injects url()', async () => {
-      const imported = await page.$('.postcss-inject-url')
-      // alias should be resolved
-      expect(await getBg(imported)).toMatch(
-        /localhost(?::\d+)?\/(?:assets\/)?ok.*\.png/,
-      )
-    })
-  }
+  test('postcss plugin that injects url()', async () => {
+    const imported = await page.$('.inject-url')
+    // alias should be resolved
+    expect(await getBg(imported)).toMatch(
+      /localhost(?::\d+)?\/(?:assets\/)?ok.*\.png/,
+    )
+  })
 
   sassTest()
 

playground/css/index.html

@@ -23,9 +23,7 @@ <h1>CSS</h1>
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>
   </p>
-  <p class="postcss-inject-url">
-    PostCSS plugin: this should have a background image
-  </p>
+  <p class="inject-url">PostCSS plugin: this should have a background image</p>
 
   <p class="sass">SASS: This should be orange</p>
   <p class="sass-at-import">

playground/css/lightningcss-plugins.js

@@ -171,3 +171,40 @@ export function nestedLikePlugin() {
     },
   }
 }
+
+/** @returns {import('lightningcss').Visitor} */
+export function testInjectUrl() {
+  return {
+    Rule: {
+      unknown: {
+        'inject-url': (rule) => {
+          return [
+            {
+              type: 'style',
+              value: {
+                selectors: [[{ type: 'class', name: 'inject-url' }]],
+                declarations: {
+                  declarations: [
+                    {
+                      property: 'background-image',
+                      value: [
+                        {
+                          type: 'url',
+                          value: {
+                            url: '=/ok.png',
+                            loc: rule.loc,
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                loc: rule.loc,
+              },
+            },
+          ]
+        },
+      },
+    },
+  }
+}

playground/css/postcss.config.js

@@ -68,7 +68,7 @@ function testInjectUrl() {
     Once(root, { Rule }) {
       root.walkAtRules('inject-url', (atRule) => {
         const rule = new Rule({
-          selector: '.postcss-inject-url',
+          selector: '.inject-url',
           source: atRule.source,
         })
         rule.append({

playground/css/vite.config-lightningcss.js

@@ -4,6 +4,7 @@ import baseConfig from './vite.config.js'
 import {
   nestedLikePlugin,
   testDirDep,
+  testInjectUrl,
   testSourceInput,
 } from './lightningcss-plugins'
 
@@ -20,6 +21,7 @@ export default defineConfig({
         nestedLikePlugin(),
         testDirDep(),
         testSourceInput(),
+        testInjectUrl(),
       ]),
     },
   },