fix: imrove arbitrary bg rule

warp-ds · May 31, 2023 · bfceba1 · bfceba1
1 parent 712432d
commit bfceba1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/_rules/background.js b/src/_rules/background.js
@@ -38,5 +38,12 @@ export const backgrounds = [
   ...makeGlobalStaticRules('bg-origin', 'background-origin'),
 
   //arbitrary
-  [/^bg-\[(.+)\]/, ([, p]) => ({ 'background-image': p })],
+  [/^bg-\[(.+)\]/, ([, p]) => {
+    if (p.startsWith('url')) {
+      return { 'background-image': p };
+    } else if (p.startsWith('var')) {
+      return { 'background-color': p };
+    }
+    return { 'background-color': `var(${p})` };
+  }],
 ];
diff --git a/test/background.js b/test/background.js
@@ -52,15 +52,19 @@ test('bg invalid', async ({ uno }) => {
   expect(css).toMatchInlineSnapshot('""');
 });
 
-test('bg arbitrary url', async ({ uno }) => {
+test('bg arbitrary', async ({ uno }) => {
   const classes = [
     `bg-[url('/img/hero-pattern.svg')]`,
     `bg-[url("/img/hero-pattern.svg")]`,
+    `bg-[var(--w-color)]`,
+    `bg-[--w-color]`,
     `peer-checked:before:bg-[url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 8L7 11L12.5 5" stroke="%2371717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')]`,
     `bg-[url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")]`];
   const { css } = await uno.generate(classes);
   expect(css).toMatchInlineSnapshot(`
     "/* layer: default */
+    .bg-\\\\[--w-color\\\\],
+    .bg-\\\\[var\\\\(--w-color\\\\)\\\\]{background-color:var(--w-color);}
     .bg-\\\\[url\\\\(\\\\'\\\\/img\\\\/hero-pattern\\\\.svg\\\\'\\\\)\\\\]{background-image:url('/img/hero-pattern.svg');}
     .bg-\\\\[url\\\\(\\\\\\"\\\\/img\\\\/hero-pattern\\\\.svg\\\\\\"\\\\)\\\\]{background-image:url(\\"/img/hero-pattern.svg\\");}
     .bg-\\\\[url\\\\(\\\\\\"data\\\\:image\\\\/svg\\\\+xml\\\\,\\\\%3csvg\\\\ xmlns\\\\=\\\\'http\\\\:\\\\/\\\\/www\\\\.w3\\\\.org\\\\/2000\\\\/svg\\\\'\\\\ viewBox\\\\=\\\\'0\\\\ 0\\\\ 16\\\\ 16\\\\'\\\\ fill\\\\=\\\\'white\\\\'\\\\%3e\\\\%3cpath\\\\ d\\\\=\\\\'M12\\\\.207\\\\ 4\\\\.793a1\\\\ 1\\\\ 0\\\\ 010\\\\ 1\\\\.414l-5\\\\ 5a1\\\\ 1\\\\ 0\\\\ 01-1\\\\.414\\\\ 0l-2-2a1\\\\ 1\\\\ 0\\\\ 011\\\\.414-1\\\\.414L6\\\\.5\\\\ 9\\\\.086l4\\\\.293-4\\\\.293a1\\\\ 1\\\\ 0\\\\ 011\\\\.414\\\\ 0z\\\\'\\\\/\\\\%3e\\\\%3c\\\\/svg\\\\%3e\\\\\\"\\\\)\\\\]{background-image:url(\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\\");}