fix(styled-system): specify unit for CSS custom property negation (#908)

* fix(styled-system): specify `0px` instead of `0` for CSS custom property negation in `calc()` * chore: add changeset `tonic-ui-907.md` * Update tonic-ui-907.md
trendmicro-frontend · Aug 10, 2024 · 272869f · 272869f
1 parent ae07539
commit 272869f
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 16 deletions.
diff --git a/.changeset/tonic-ui-907.md b/.changeset/tonic-ui-907.md
@@ -0,0 +1,5 @@
+---
+"@tonic-ui/styled-system": patch
+---
+
+fix(styled-system): specify unit for CSS custom property negation
diff --git a/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -132,7 +132,7 @@ exports[`Drawer should render correctly 1`] = `
 
 .emotion-12:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

diff --git a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
@@ -195,7 +195,7 @@ exports[`Menu should render correctly 1`] = `
 
 .emotion-16:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

diff --git a/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -132,7 +132,7 @@ exports[`Modal should render correctly 1`] = `
 
 .emotion-12:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

diff --git a/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -53,7 +53,7 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-4:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
@@ -106,7 +106,7 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-6:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
@@ -160,7 +160,7 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-8:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-disabled);

diff --git a/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap b/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
@@ -32,7 +32,7 @@ exports[`Tree should render correctly 1`] = `
 
 .emotion-4:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(0 - var(--tonic-space-1h));
+  outline-offset: calc(0px - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

diff --git a/packages/styled-system/src/config/__tests__/margin.test.js b/packages/styled-system/src/config/__tests__/margin.test.js
@@ -132,10 +132,10 @@ test('returns negative theme values using CSS variables', () => {
   });
   expect(style).toEqual({
     margin: 'var(--tonic-space-0)',
-    marginLeft: 'calc(0 - var(--tonic-space-2))',
-    marginRight: 'calc(0 - var(--tonic-space-2))',
-    marginTop: 'calc(0 - var(--tonic-space-1))',
-    marginBottom: 'calc(0 - var(--tonic-space-1))',
+    marginLeft: 'calc(0px - var(--tonic-space-2))',
+    marginRight: 'calc(0px - var(--tonic-space-2))',
+    marginTop: 'calc(0px - var(--tonic-space-1))',
+    marginBottom: 'calc(0px - var(--tonic-space-1))',
   });
 });
 

diff --git a/packages/styled-system/src/config/__tests__/position.test.js b/packages/styled-system/src/config/__tests__/position.test.js
@@ -103,10 +103,10 @@ test('returns negative theme values using CSS variables', () => {
     left: -4,
   });
   expect(style).toEqual({
-    top: 'calc(0 - var(--tonic-space-1))',
-    right: 'calc(0 - var(--tonic-space-2))',
-    bottom: 'calc(0 - var(--tonic-space-3))',
-    left: 'calc(0 - var(--tonic-space-4))',
+    top: 'calc(0px - var(--tonic-space-1))',
+    right: 'calc(0px - var(--tonic-space-2))',
+    bottom: 'calc(0px - var(--tonic-space-3))',
+    left: 'calc(0px - var(--tonic-space-4))',
   });
 });
 

diff --git a/packages/styled-system/src/utils/transforms.js b/packages/styled-system/src/utils/transforms.js
@@ -17,7 +17,7 @@ const toNegativeValue = (scale, absoluteValue, options) => {
   // Handle CSS variables for negative values
   if (useCSSVariables && isSimpleCSSVariable(n)) {
     // https://stackoverflow.com/questions/49469344/using-negative-css-custom-properties
-    return `calc(0 - ${n})`;
+    return `calc(0px - ${n})`;
   }
 
   // Handle numeric value