From 12df5a924fa80bc0794c3a5b066a2ade99c35883 Mon Sep 17 00:00:00 2001
From: AnnaRybkina <37986637+AnnaRybkina@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:39:45 +0200
Subject: [PATCH] fix: be able to use a one-off background image (#89)

---
 src/_rules/background.js | 3 +++
 test/background.js       | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/_rules/background.js b/src/_rules/background.js
index b9ac325..4f36b1b 100644
--- 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
index 4f2313f..03860bd 100644
--- 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);}"
+  `);
+});