fix(styled-system): correct handling of negative margin where `calc(…

…)` was erroneously included (#869)

* fix(styled-system): correct handling of negative margin where `calc()` was erroneously included

* test: update test snapshots

* refactor(styled-system): enhance `positiveOrNegative` transform

* refactor(styled-system): update `positiveOrNegative` transform

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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap

@@ -194,7 +194,7 @@ exports[`Menu should render correctly 1`] = `
 
 .emotion-16:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

packages/react/src/popover/__tests__/__snapshots__/Popover.test.js.snap

@@ -124,7 +124,7 @@ exports[`Popover should render correctly 1`] = `
   -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  bottom: calc(8px * -1);
+  bottom: -8px;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
@@ -144,7 +144,7 @@ exports[`Popover should render correctly 1`] = `
   -webkit-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  top: calc(8px * -1);
+  top: -8px;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
@@ -164,7 +164,7 @@ exports[`Popover should render correctly 1`] = `
   -webkit-filter: drop-shadow(1px 0px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(1px 0px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  right: calc(8px * -1);
+  right: -8px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
@@ -184,7 +184,7 @@ exports[`Popover should render correctly 1`] = `
   -webkit-filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  left: calc(8px * -1);
+  left: -8px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);

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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - 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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - 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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-disabled);

packages/react/src/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap

@@ -118,7 +118,7 @@ exports[`Tooltip should render correctly 1`] = `
   -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  bottom: calc(4px * -1);
+  bottom: -4px;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
@@ -138,7 +138,7 @@ exports[`Tooltip should render correctly 1`] = `
   -webkit-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  top: calc(4px * -1);
+  top: -4px;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
@@ -158,7 +158,7 @@ exports[`Tooltip should render correctly 1`] = `
   -webkit-filter: drop-shadow(1px 0px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(1px 0px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  right: calc(4px * -1);
+  right: -4px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
@@ -178,7 +178,7 @@ exports[`Tooltip should render correctly 1`] = `
   -webkit-filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.16));
   filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.16));
   position: absolute;
-  left: calc(4px * -1);
+  left: -4px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);

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(var(--tonic-space-1h) * -1);
+  outline-offset: calc(0 - var(--tonic-space-1h));
   outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }

packages/styled-system/src/config/__tests__/margin.test.js

@@ -5,6 +5,28 @@ const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 };
 
+const defaultThemeWithCSSVariables = {
+  ...defaultTheme,
+  config: {
+    prefix: 'tonic',
+    useCSSVariables: true,
+  },
+  __cssVariableMap: {
+    '--tonic-breakpoints-0': '40em',
+    '--tonic-breakpoints-1': '52em',
+    '--tonic-breakpoints-2': '64em',
+    '--tonic-space-0': 0,
+    '--tonic-space-1': 4,
+    '--tonic-space-2': 8,
+    '--tonic-space-3': 16,
+    '--tonic-space-4': 32,
+    '--tonic-space-5': 64,
+    '--tonic-space-6': 128,
+    '--tonic-space-7': 256,
+    '--tonic-space-8': 512,
+  },
+};
+
 test('returns style objects', () => {
   const styles = margin({
     theme: { ...defaultTheme },
@@ -21,6 +43,14 @@ test('returns 0 values', () => {
   expect(styles).toEqual({ margin: 0 });
 });
 
+test('returns positive pixel values', () => {
+  const styles = margin({
+    theme: { ...defaultTheme },
+    m: 2,
+  });
+  expect(styles).toEqual({ margin: 8 });
+});
+
 test('returns negative pixel values', () => {
   const styles = margin({
     theme: { ...defaultTheme },
@@ -29,34 +59,84 @@ test('returns negative pixel values', () => {
   expect(styles).toEqual({ margin: -8 });
 });
 
-test('returns negative em values', () => {
+test('returns positive em values', () => {
   const styles = margin({
     theme: { ...defaultTheme },
-    m: 'calc(16em * -1)',
+    m: '16em',
   });
-  expect(styles).toEqual({ margin: 'calc(16em * -1)' });
+  expect(styles).toEqual({ margin: '16em' });
 });
 
-test('returns negative theme values', () => {
+test('returns negative em values', () => {
   const styles = margin({
-    theme: {
-      ...defaultTheme,
-      space: [0, 4, 8],
-    },
-    m: -2,
+    theme: { ...defaultTheme },
+    m: '-16em',
   });
-  expect(styles).toEqual({ margin: -8 });
+  expect(styles).toEqual({ margin: '-16em' });
 });
 
 test('returns positive theme values', () => {
   const styles = margin({
-    theme: {
-      ...defaultTheme,
-      space: [0, '1em', '2em'],
-    },
-    m: 2,
+    theme: { ...defaultTheme },
+    m: 0,
+    mx: 2,
+    my: 1,
+  });
+  expect(styles).toEqual({
+    margin: 0,
+    marginLeft: 8,
+    marginRight: 8,
+    marginTop: 4,
+    marginBottom: 4,
+  });
+});
+
+test('returns negative theme values', () => {
+  const styles = margin({
+    theme: { ...defaultTheme },
+    m: 0,
+    mx: -2,
+    my: -1,
+  });
+  expect(styles).toEqual({
+    margin: 0,
+    marginLeft: -8,
+    marginRight: -8,
+    marginTop: -4,
+    marginBottom: -4,
+  });
+});
+
+test('returns positive theme values using CSS variables', () => {
+  const style = margin({
+    theme: { ...defaultThemeWithCSSVariables },
+    m: 0,
+    mx: 2,
+    my: 1,
+  });
+  expect(style).toEqual({
+    margin: 'var(--tonic-space-0)',
+    marginLeft: 'var(--tonic-space-2)',
+    marginRight: 'var(--tonic-space-2)',
+    marginTop: 'var(--tonic-space-1)',
+    marginBottom: 'var(--tonic-space-1)',
+  });
+});
+
+test('returns negative theme values using CSS variables', () => {
+  const style = margin({
+    theme: { ...defaultThemeWithCSSVariables },
+    m: 0,
+    mx: -2,
+    my: -1,
+  });
+  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))',
   });
-  expect(styles).toEqual({ margin: '2em' });
 });
 
 test('returns responsive values', () => {
@@ -79,7 +159,7 @@ test('returns negative string values from theme', () => {
     },
     margin: -1,
   });
-  expect(styles).toEqual({ margin: 'calc(1em * -1)' });
+  expect(styles).toEqual({ margin: '-1em' });
 });
 
 test('returns values from theme object', () => {

packages/styled-system/src/config/__tests__/position.test.js

@@ -4,6 +4,25 @@ const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
 };
 
+const defaultThemeWithCSSVariables = {
+  ...defaultTheme,
+  config: {
+    prefix: 'tonic',
+    useCSSVariables: true,
+  },
+  __cssVariableMap: {
+    '--tonic-space-0': 0,
+    '--tonic-space-1': 4,
+    '--tonic-space-2': 8,
+    '--tonic-space-3': 16,
+    '--tonic-space-4': 32,
+    '--tonic-space-5': 64,
+    '--tonic-space-6': 128,
+    '--tonic-space-7': 256,
+    '--tonic-space-8': 512,
+  },
+};
+
 test('returns position styles', () => {
   const style = position({
     inset: '4px 8px',
@@ -59,6 +78,38 @@ test('returns negative theme values', () => {
   expect(style).toEqual({ top: -4, right: -8, bottom: -16, left: -32 });
 });
 
+test('returns positive theme values using CSS variables', () => {
+  const style = position({
+    theme: { ...defaultThemeWithCSSVariables },
+    top: 1,
+    right: 2,
+    bottom: 3,
+    left: 4,
+  });
+  expect(style).toEqual({
+    top: 'var(--tonic-space-1)',
+    right: 'var(--tonic-space-2)',
+    bottom: 'var(--tonic-space-3)',
+    left: 'var(--tonic-space-4)',
+  });
+});
+
+test('returns negative theme values using CSS variables', () => {
+  const style = position({
+    theme: { ...defaultThemeWithCSSVariables },
+    top: -1,
+    right: -2,
+    bottom: -3,
+    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))',
+  });
+});
+
 test('returns positive pixel values', () => {
   const style = position({
     top: '1px',
@@ -82,9 +133,9 @@ test('returns negative pixel values', () => {
     left: '-4px',
   });
   expect(style).toEqual({
-    top: 'calc(1px * -1)',
-    right: 'calc(2px * -1)',
-    bottom: 'calc(3px * -1)',
-    left: 'calc(4px * -1)',
+    top: '-1px',
+    right: '-2px',
+    bottom: '-3px',
+    left: '-4px',
   });
 });