Repository: styled-system/styled-system (js)

Issue:
Add `flexBasis` support in `@styled-system/css`

Pull request description:
styled-system/css add support for SVG properties and flexBasis
Fixes #675 system-ui/theme-ui#275

Patch:
diff --git a/packages/css/src/index.js b/packages/css/src/index.js
index c3225bc..2562b68 100644
--- a/packages/css/src/index.js
+++ b/packages/css/src/index.js
@@ -109,6 +109,10 @@ const scales = {
   height: 'sizes',
   minHeight: 'sizes',
   maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors',
 }
 
 const positiveOrNegative = (scale, value) => {


Test patch:
diff --git a/packages/css/test/index.js b/packages/css/test/index.js
index 2cb23da..9c14787 100644
--- a/packages/css/test/index.js
+++ b/packages/css/test/index.js
@@ -15,6 +15,9 @@ const theme = {
   fontWeights: {
     bold: 600,
   },
+  sizes: {
+    sidebar: 320,
+  },
   buttons: {
     primary: {
       p: 3,
@@ -348,4 +351,24 @@ test('returns individual border styles', () => {
     borderLeftWidth: 1,
     borderLeftStyle: 'solid',
   })
-})
\ No newline at end of file
+})
+
+test('flexBasis uses theme.sizes', () => {
+  const style = css({
+    flexBasis: 'sidebar',
+  })(theme)
+  expect(style).toEqual({
+    flexBasis: 320,
+  })
+})
+
+test('fill and stroke use theme.colors', () => {
+  const style = css({
+    fill: 'primary',
+    stroke: 'secondary',
+  })(theme)
+  expect(style).toEqual({
+    fill: 'tomato',
+    stroke: 'cyan',
+  })
+})