fmt

Author: wangzuo

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['swiftcarrot']
+  presets: ['swiftcarrot'],
 };

package.json

@@ -33,6 +33,7 @@
     "babel-jest": "^26.2.2",
     "babel-preset-swiftcarrot": "^1.1.0",
     "jest": "^26.2.2",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true,
+};

rollup.config.js

@@ -5,40 +5,40 @@ import pkg from './package.json';
 
 const input = './src/index.js';
 
-const external = id => !id.startsWith('.') && !id.startsWith('/');
+const external = (id) => !id.startsWith('.') && !id.startsWith('/');
 
 export default [
   {
     input,
     output: {
       file: pkg.main,
-      format: 'cjs'
+      format: 'cjs',
     },
     external,
     plugins: [
       babel({
         babelHelpers: 'runtime',
-        plugins: ['@babel/transform-runtime']
+        plugins: ['@babel/transform-runtime'],
       }),
       nodeResolve(),
-      commonjs()
-    ]
+      commonjs(),
+    ],
   },
 
   {
     input,
     output: {
       file: pkg.module,
-      format: 'esm'
+      format: 'esm',
     },
     external,
     plugins: [
       babel({
         babelHelpers: 'runtime',
-        plugins: [['@babel/transform-runtime', { useESModules: true }]]
+        plugins: [['@babel/transform-runtime', { useESModules: true }]],
       }),
       nodeResolve(),
-      commonjs()
-    ]
-  }
+      commonjs(),
+    ],
+  },
 ];

src/__tests__/breakpoints.js

@@ -11,7 +11,7 @@ import {
   mediaBreakpointUp,
   mediaBreakpointDown,
   mediaBreakpointBetween,
-  mediaBreakpointOnly
+  mediaBreakpointOnly,
 } from '../';
 
 test('breakpointNext', () => {
@@ -85,11 +85,11 @@ test('render', () => {
       <div
         css={{
           [mediaBreakpointUp('xs')]: {
-            fontSize: 12
+            fontSize: 12,
           },
           [mediaBreakpointUp('sm')]: {
-            fontSize: 12
-          }
+            fontSize: 12,
+          },
         }}
       />
     )

src/__tests__/col.js

@@ -7,25 +7,25 @@ import { Col } from '../';
 
 test('col', () => {
   expect(renderToString(<Col>children</Col>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1ybbpqv-Col\\">.css-1ybbpqv-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-1ybbpqv-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1l4jq7d-Col\\">.css-1l4jq7d-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-1l4jq7d-Col\\">children</div>"`
   );
 });
 
 test('col lg', () => {
   expect(renderToString(<Col>children</Col>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1ybbpqv-Col\\">.css-1ybbpqv-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-1ybbpqv-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1l4jq7d-Col\\">.css-1l4jq7d-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-1l4jq7d-Col\\">children</div>"`
   );
 });
 
 test('col xs=auto', () => {
   expect(renderToString(<Col xs="auto">children</Col>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"15svstx-Col\\">.css-15svstx-Col{box-sizing:border-box;position:relative;width:auto;padding-right:15px;padding-left:15px;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-15svstx-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"19aen0-Col\\">.css-19aen0-Col{box-sizing:border-box;position:relative;width:auto;padding-right:15px;padding-left:15px;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;max-width:100%;}</style><div data-eg-col=\\"true\\" class=\\"css-19aen0-Col\\">children</div>"`
   );
 });
 
 test('col xs=2', () => {
   expect(renderToString(<Col xs={2}>children</Col>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1xu0dpm-Col\\">.css-1xu0dpm-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex:0 0 16.666667%;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%;}</style><div data-eg-col=\\"true\\" class=\\"css-1xu0dpm-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"bolud9-Col\\">.css-bolud9-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex:0 0 16.666667%;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%;}</style><div data-eg-col=\\"true\\" class=\\"css-bolud9-Col\\">children</div>"`
   );
 });
 
@@ -37,40 +37,40 @@ test('col xs lg=2', () => {
       </Col>
     )
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1yz5kk8-Col\\">.css-1yz5kk8-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-1yz5kk8-Col{-webkit-flex:0 0 16.666667%;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%;}}</style><div data-eg-col=\\"true\\" class=\\"css-1yz5kk8-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"8s72m2-Col\\">.css-8s72m2-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-8s72m2-Col{-webkit-flex:0 0 16.666667%;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%;}}</style><div data-eg-col=\\"true\\" class=\\"css-8s72m2-Col\\">children</div>"`
   );
 });
 
 test('col order', () => {
   expect(
     renderToString(<Col order={{ xs: 'first' }}>children</Col>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"r2for4-Col\\">.css-r2for4-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-order:-1;-ms-flex-order:-1;order:-1;}</style><div data-eg-col=\\"true\\" class=\\"css-r2for4-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"d3hto0-Col\\">.css-d3hto0-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-order:-1;-ms-flex-order:-1;order:-1;}</style><div data-eg-col=\\"true\\" class=\\"css-d3hto0-Col\\">children</div>"`
   );
 
   expect(
     renderToString(<Col order={{ md: 1 }}>children</Col>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"pjvwmc-Col\\">.css-pjvwmc-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:768px){.css-pjvwmc-Col{-webkit-order:1;-ms-flex-order:1;order:1;}}</style><div data-eg-col=\\"true\\" class=\\"css-pjvwmc-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1gsa1o0-Col\\">.css-1gsa1o0-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:768px){.css-1gsa1o0-Col{-webkit-order:1;-ms-flex-order:1;order:1;}}</style><div data-eg-col=\\"true\\" class=\\"css-1gsa1o0-Col\\">children</div>"`
   );
 
   expect(
     renderToString(<Col order={{ lg: 'last' }}>children</Col>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1v4et8q-Col\\">.css-1v4et8q-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-1v4et8q-Col{-webkit-order:13;-ms-flex-order:13;order:13;}}</style><div data-eg-col=\\"true\\" class=\\"css-1v4et8q-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1pz8uqe-Col\\">.css-1pz8uqe-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-1pz8uqe-Col{-webkit-order:13;-ms-flex-order:13;order:13;}}</style><div data-eg-col=\\"true\\" class=\\"css-1pz8uqe-Col\\">children</div>"`
   );
 });
 
 test('col offset', () => {
   expect(
     renderToString(<Col offset={{ xs: 2 }}>children</Col>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"uagtm8-Col\\">.css-uagtm8-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;margin-left:16.666667%;}</style><div data-eg-col=\\"true\\" class=\\"css-uagtm8-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1i0so4-Col\\">.css-1i0so4-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;margin-left:16.666667%;}</style><div data-eg-col=\\"true\\" class=\\"css-1i0so4-Col\\">children</div>"`
   );
 
   expect(
     renderToString(<Col offset={{ lg: 2 }}>children</Col>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"o214x2-Col\\">.css-o214x2-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-o214x2-Col{margin-left:16.666667%;}}</style><div data-eg-col=\\"true\\" class=\\"css-o214x2-Col\\">children</div>"`
+    `"<style data-emotion-css=\\"1v9xb5u-Col\\">.css-1v9xb5u-Col{box-sizing:border-box;position:relative;width:100%;padding-right:15px;padding-left:15px;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}@media(min-width:992px){.css-1v9xb5u-Col{margin-left:16.666667%;}}</style><div data-eg-col=\\"true\\" class=\\"css-1v9xb5u-Col\\">children</div>"`
   );
 });

src/__tests__/container.js

@@ -7,14 +7,14 @@ import { Container } from '../';
 
 test('container', () => {
   expect(renderToString(<Container>children</Container>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1atz3w2-Container\\">.css-1atz3w2-Container{box-sizing:border-box;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:576px){.css-1atz3w2-Container{max-width:540px;}}@media(min-width:768px){.css-1atz3w2-Container{max-width:720px;}}@media(min-width:992px){.css-1atz3w2-Container{max-width:960px;}}@media(min-width:1200px){.css-1atz3w2-Container{max-width:1140px;}}</style><div data-eg-container=\\"true\\" class=\\"css-1atz3w2-Container\\">children</div>"`
+    `"<style data-emotion-css=\\"2z7i4f-Container\\">.css-2z7i4f-Container{box-sizing:border-box;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:576px){.css-2z7i4f-Container{max-width:540px;}}@media(min-width:768px){.css-2z7i4f-Container{max-width:720px;}}@media(min-width:992px){.css-2z7i4f-Container{max-width:960px;}}@media(min-width:1200px){.css-2z7i4f-Container{max-width:1140px;}}</style><div data-eg-container=\\"true\\" class=\\"css-2z7i4f-Container\\">children</div>"`
   );
 });
 
 test('container fluid', () => {
   expect(
     renderToString(<Container fluid>children</Container>)
   ).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"1bkhhab-Container\\">.css-1bkhhab-Container{box-sizing:border-box;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}</style><div data-eg-container=\\"true\\" class=\\"css-1bkhhab-Container\\">children</div>"`
+    `"<style data-emotion-css=\\"1yb9s24-Container\\">.css-1yb9s24-Container{box-sizing:border-box;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}</style><div data-eg-container=\\"true\\" class=\\"css-1yb9s24-Container\\">children</div>"`
   );
 });

src/__tests__/row.js

@@ -7,12 +7,12 @@ import { Row } from '../';
 
 test('row', () => {
   expect(renderToString(<Row>children</Row>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"ecrkpz-Row\\">.css-ecrkpz-Row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}</style><div data-eg-row=\\"true\\" class=\\"css-ecrkpz-Row\\">children</div>"`
+    `"<style data-emotion-css=\\"1gqikdj-Row\\">.css-1gqikdj-Row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}</style><div data-eg-row=\\"true\\" class=\\"css-1gqikdj-Row\\">children</div>"`
   );
 });
 
 test('row noGutters', () => {
   expect(renderToString(<Row noGutters>children</Row>)).toMatchInlineSnapshot(
-    `"<style data-emotion-css=\\"19oau2f-Row\\">.css-19oau2f-Row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;margin-right:0;margin-left:0;}.css-19oau2f-Row > [data-eg-col]{padding-right:0;padding-left:0;}</style><div data-eg-row=\\"true\\" class=\\"css-19oau2f-Row\\">children</div>"`
+    `"<style data-emotion-css=\\"on7iaf-Row\\">.css-on7iaf-Row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;margin-right:0;margin-left:0;}.css-on7iaf-Row > [data-eg-col]{padding-right:0;padding-left:0;}</style><div data-eg-row=\\"true\\" class=\\"css-on7iaf-Row\\">children</div>"`
   );
 });

src/col.js

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/core';
 import { mediaBreakpointUp } from './breakpoints';
 import styles from './styles';
 
-export const percentage = x => `${(x * 100).toFixed(6)}%`;
+export const percentage = (x) => `${(x * 100).toFixed(6)}%`;
 
 export const makeCol = (
   { gutterWidth, columns, breakpoints },
@@ -14,23 +14,23 @@ export const makeCol = (
     position: 'relative',
     width: '100%',
     paddingRight: gutterWidth / 2,
-    paddingLeft: gutterWidth / 2
+    paddingLeft: gutterWidth / 2,
   };
 
-  Object.keys(breakpoints).forEach(breakpoint => {
+  Object.keys(breakpoints).forEach((breakpoint) => {
     const value = options[breakpoint];
     const media = mediaBreakpointUp(breakpoint, breakpoints);
 
     if (value === true) {
       const mediaStyles = {
         flexBasis: 0,
         flexGrow: 1,
-        maxWidth: '100%'
+        maxWidth: '100%',
       };
 
       if (media) {
         Object.assign(styles, {
-          [media]: mediaStyles
+          [media]: mediaStyles,
         });
       } else {
         Object.assign(styles, mediaStyles);
@@ -39,25 +39,25 @@ export const makeCol = (
       const mediaStyles = {
         flex: '0 0 auto',
         width: 'auto',
-        maxWidth: '100%'
+        maxWidth: '100%',
       };
 
       if (media) {
         Object.assign(styles, {
-          [media]: mediaStyles
+          [media]: mediaStyles,
         });
       } else {
         Object.assign(styles, mediaStyles);
       }
     } else if (value !== false && value > 0) {
       const mediaStyles = {
         flex: `0 0 ${percentage(value / columns)}`,
-        maxWidth: percentage(value / columns)
+        maxWidth: percentage(value / columns),
       };
 
       if (media) {
         Object.assign(styles, {
-          [media]: mediaStyles
+          [media]: mediaStyles,
         });
       } else {
         Object.assign(styles, mediaStyles);
@@ -70,16 +70,16 @@ export const makeCol = (
 
 export const makeColOffset = ({ breakpoints, columns }, offset) => {
   const styles = {};
-  Object.keys(offset).forEach(name => {
+  Object.keys(offset).forEach((name) => {
     const size = offset[name];
     const media = mediaBreakpointUp(name, breakpoints);
     const mediaStyles = {
-      marginLeft: percentage(size / columns)
+      marginLeft: percentage(size / columns),
     };
 
     if (media) {
       Object.assign(styles, {
-        [media]: mediaStyles
+        [media]: mediaStyles,
       });
     } else {
       Object.assign(styles, mediaStyles);
@@ -90,16 +90,16 @@ export const makeColOffset = ({ breakpoints, columns }, offset) => {
 
 export const makeColOrder = ({ breakpoints, columns }, order) => {
   const styles = {};
-  Object.keys(order).forEach(name => {
+  Object.keys(order).forEach((name) => {
     const size = order[name];
     const media = mediaBreakpointUp(name, breakpoints);
     const mediaStyles = {
-      order: size === 'first' ? -1 : size === 'last' ? columns + 1 : size
+      order: size === 'first' ? -1 : size === 'last' ? columns + 1 : size,
     };
 
     if (media) {
       Object.assign(styles, {
-        [media]: mediaStyles
+        [media]: mediaStyles,
       });
     } else {
       Object.assign(styles, mediaStyles);
@@ -138,7 +138,7 @@ const Col = ({
       css={[
         makeCol(styles, { xs, sm, md, lg, xl, auto }),
         offset && makeColOffset(styles, offset),
-        order && makeColOrder(styles, order)
+        order && makeColOrder(styles, order),
       ]}
     >
       {children}
@@ -153,7 +153,7 @@ Col.defaultProps = {
   sm: false,
   md: false,
   lg: false,
-  xl: false
+  xl: false,
 };
 
 export default Col;

src/container.js

@@ -9,25 +9,25 @@ export const makeContainer = ({ gutterWidth }) => ({
   paddingRight: gutterWidth / 2,
   paddingLeft: gutterWidth / 2,
   marginRight: 'auto',
-  marginLeft: 'auto'
+  marginLeft: 'auto',
 });
 
 export const makeContainerMaxWidths = ({
   containerMaxWidths: maxWidths,
-  breakpoints
+  breakpoints,
 }) => {
   const styles = {};
-  Object.keys(maxWidths).forEach(breakpoint => {
+  Object.keys(maxWidths).forEach((breakpoint) => {
     const maxWidth = maxWidths[breakpoint];
     const media = mediaBreakpointUp(breakpoint, breakpoints);
 
     const mediaStyles = {
-      maxWidth
+      maxWidth,
     };
 
     if (media) {
       Object.assign(styles, {
-        [media]: mediaStyles
+        [media]: mediaStyles,
       });
     } else {
       Object.assign(styles, mediaStyles);
@@ -50,7 +50,7 @@ const Container = ({ children, styles, fluid, ...props }) => {
 
 Container.defaultProps = {
   styles,
-  fluid: false
+  fluid: false,
 };
 
 export default Container;

src/index.js

@@ -8,5 +8,5 @@ export {
   mediaBreakpointUp,
   mediaBreakpointDown,
   mediaBreakpointBetween,
-  mediaBreakpointOnly
+  mediaBreakpointOnly,
 } from './breakpoints';