feat: Support arbitrary values for background position (#183)

warp-ds · Jan 4, 2024 · 6508312 · 6508312
1 parent d5e21a4
commit 6508312
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/_rules/background.js b/src/_rules/background.js
@@ -1,4 +1,4 @@
-import { positionMap, globalKeywords, makeGlobalStaticRules } from '#utils';
+import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues } from '#utils';
 
 export const backgrounds = [
   // size
@@ -16,6 +16,9 @@ export const backgrounds = [
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ 'background-position': positionMap[s] })],
   [/^bg-([-\w]{3,})-([-\w]{3,})$/, ([, first, second]) => ({ 'background-position': `${positionMap[first]} ${positionMap[second]}` })],
 
+  // arbitrary position
+  [/^bg-\[((?!var\(|--|url\().+)]$/, ([, value]) => ({ 'background-position': resolveArbitraryValues(value) })],
+
   // clip
   ['bg-clip-border', { '-webkit-background-clip': 'border-box', 'background-clip': 'border-box' }],
   ['bg-clip-content', { '-webkit-background-clip': 'content-box', 'background-clip': 'content-box' }],

diff --git a/test/__snapshots__/background.js.snap b/test/__snapshots__/background.js.snap
@@ -92,3 +92,10 @@ exports[`supports setting arbitrary background colors 1`] = `
 .bg-\\[--w-s-color-background\\],
 .bg-\\[var\\(--w-s-color-background\\)\\]{background-color:var(--w-s-color-background);}"
 `;
+
+exports[`supports setting arbitrary background positions 1`] = `
+"/* layer: default */
+.bg-\\[25\\%_75\\%\\]{background-position:25% 75%;}
+.bg-\\[center_top_1rem\\]{background-position:center top 1rem;}
+.bg-\\[right_3em_bottom_10px\\]{background-position:right 3em bottom 10px;}"
+`;
diff --git a/test/background.js b/test/background.js
@@ -69,16 +69,15 @@ test("supports setting arbitrary background colors", async ({ uno }) => {
   expect(css).toMatchSnapshot();
 });
 
-// TODO: Uncomment this once there is a fix for support arbitrary values for background-position:
-// test("supports setting arbitrary background positions", async ({ uno }) => {
-//   const classes = [
-//     "bg-[25%_75%]",
-//     "bg-[right_3em_bottom_10px]",
-//     "bg-[center_top_1rem]",
-//   ];
-//   const { css } = await uno.generate(classes);
-//   expect(css).toMatchSnapshot();
-// });
+test("supports setting arbitrary background positions", async ({ uno }) => {
+  const classes = [
+    "bg-[25%_75%]",
+    "bg-[right_3em_bottom_10px]",
+    "bg-[center_top_1rem]",
+  ];
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchSnapshot();
+});
 
 test('invalid background color classes', async({ uno }) => {
   const classes = ['bg-color', 'background-[--w-s-color-background]', 'background-[var(--w-s-color-background)]'];