fix: be able to use a one-off background image (#89)

warp-ds · Apr 26, 2023 · 12df5a9 · 12df5a9
1 parent af2b289
commit 12df5a9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/_rules/background.js b/src/_rules/background.js
@@ -36,4 +36,7 @@ export const backgrounds = [
   ['bg-origin-padding', { 'background-origin': 'padding-box' }],
   ['bg-origin-content', { 'background-origin': 'content-box' }],
   ...makeGlobalStaticRules('bg-origin', 'background-origin'),
+
+  //arbitrary
+  [/^bg-\[url\('(.+)'\)]/, ([, p]) => ({ 'background-image': `url(${p})` })],
 ];
diff --git a/test/background.js b/test/background.js
@@ -51,3 +51,12 @@ test('bg invalid', async ({ uno }) => {
   const { css } = await uno.generate(classes);
   expect(css).toMatchInlineSnapshot('""');
 });
+
+test('bg arbitrary url', async ({ uno }) => {
+  const classes = [`bg-[url('/img/hero-pattern.svg')]`];
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchInlineSnapshot(`
+    "/* layer: default */
+    .bg-\\\\[url\\\\(\\\\'\\\\/img\\\\/hero-pattern\\\\.svg\\\\'\\\\)\\\\]{background-image:url(/img/hero-pattern.svg);}"
+  `);
+});