fix: fix readme (#854)

* fix: fix readme

* feat(default-breakpoints): add xs

* build: increase the limit

README.md

@@ -103,6 +103,7 @@ yarn styled-breakpoints
 
 ```js
 {
+  xs: '0px',
   sm: '576px',
   md: '768px',
   lg: '992px',

core/index.js

@@ -6,6 +6,7 @@ exports.makeStyledBreakpoints = (options) => {
     pathToMediaQueries: _options.pathToMediaQueries || ['breakpoints'],
     errorPrefix: _options.errorPrefix || '[styled-breakpoints]: ',
     defaultMediaQueries: _options.defaultMediaQueries || {
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',

package.json

@@ -52,15 +52,15 @@
       "import": {
         "index.js": "{ up, dow, between, only }"
       },
-      "limit": "1020 B"
+      "limit": "1080 B"
     },
     {
       "name": "core + react-styled",
       "import": {
         "index.js": "{ up, dow, between, only }",
         "react-styled/index.js": "{ useBreakpoint }"
       },
-      "limit": "1.15 KB",
+      "limit": "1.18 KB",
       "ignore": [
         "react",
         "styled-components"
@@ -72,7 +72,7 @@
         "index.js": "{ up, dow, between, only }",
         "react-emotion/index.js": "{ useBreakpoint }"
       },
-      "limit": "1.15 KB",
+      "limit": "1.18 KB",
       "ignore": [
         "react",
         "@emotion/react"

test/index.spec.js

@@ -56,7 +56,7 @@ describe('throwIsInvalidBreakName', () => {
       expect(true).toEqual(false);
     } catch (e) {
       expect(e.message).toEqual(
-        "[styled-breakpoints]: 'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+        "[styled-breakpoints]: 'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
       );
     }
   });
@@ -73,7 +73,7 @@ describe('custom error prefix', () => {
       expect(true).toEqual(false);
     } catch (e) {
       expect(e.message).toEqual(
-        "[typographist]: 'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+        "[typographist]: 'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
       );
     }
   });
@@ -132,6 +132,7 @@ describe('toEm', () => {
 describe('getBreakpointsFromTheme', () => {
   it('return  breakpoints from custom theme', () => {
     expect(getBreakpointsFromTheme(CUSTOM_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
@@ -140,7 +141,8 @@ describe('getBreakpointsFromTheme', () => {
   });
 
   it('return  default breakpoints', () => {
-    expect(getBreakpointsFromTheme(EMPTY_THEME)).toMatchObject({
+    expect(getBreakpointsFromTheme(EMPTY_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',

test/library.spec.js

@@ -24,6 +24,7 @@ describe('type', () => {
 describe('get', () => {
   it('return value stored at the specified path', () => {
     expect(get(['theme', 'breakpoints'], PROPS_WITH_CUSTOM_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
@@ -47,7 +48,7 @@ describe('withMinAndMaxMedia', () => {
 describe('makeErrorMessage', () => {
   it('build error message', () => {
     expect(makeErrorMessage('blabla', BREAKPOINTS)).toEqual(
-      "'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+      "'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
     );
   });
 });

test/mocks.js

@@ -10,6 +10,7 @@ const INVALID_BREAKPOINTS = {
 const PROPS_WITH_CUSTOM_THEME = {
   theme: {
     breakpoints: {
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',