diff --git a/.all-contributorsrc b/.all-contributorsrc index 25804fba..417b7b53 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1,180 +1 @@ -{ - "projectName": "styled-breakpoints", - "projectOwner": "mg901", - "repoType": "github", - "repoHost": "https://github.com", - "files": [ - "README.md" - ], - "imageSize": 100, - "commit": true, - "contributors": [ - { - "login": "mg901", - "name": "Maxim", - "avatar_url": "https://avatars0.githubusercontent.com/u/7874664?v=4", - "profile": "https://github.com/mg901", - "contributions": [ - "code", - "design", - "doc", - "example", - "ideas", - "talk" - ] - }, - { - "login": "stuneak", - "name": "Abu Shamsutdinov", - "avatar_url": "https://avatars0.githubusercontent.com/u/22033385?v=4", - "profile": "https://github.com/stuneak", - "contributions": [ - "code", - "example", - "ideas", - "review", - "talk" - ] - }, - { - "login": "sergeysova", - "name": "Sergey Sova", - "avatar_url": "https://avatars0.githubusercontent.com/u/5620073?v=4", - "profile": "https://github.com/sergeysova", - "contributions": [ - "code", - "example", - "ideas", - "review", - "talk" - ] - }, - { - "login": "jussikinnula", - "name": "Jussi Kinnula", - "avatar_url": "https://avatars0.githubusercontent.com/u/7287118?v=4", - "profile": "https://github.com/jussikinnula", - "contributions": [ - "bug", - "code" - ] - }, - { - "login": "rafauke", - "name": "RafaΕ‚ Wyszomirski", - "avatar_url": "https://avatars1.githubusercontent.com/u/9576167?v=4", - "profile": "https://github.com/rafauke", - "contributions": [ - "doc" - ] - }, - { - "login": "GR34SE", - "name": "Adrian CelczyΕ„ski", - "avatar_url": "https://avatars1.githubusercontent.com/u/35396312?v=4", - "profile": "https://github.com/GR34SE", - "contributions": [ - "bug", - "code" - ] - }, - { - "login": "alexolefirenko", - "name": "Alexey Olefirenko", - "avatar_url": "https://avatars1.githubusercontent.com/u/7016947?v=4", - "profile": "https://github.com/alexolefirenko", - "contributions": [ - "code", - "ideas" - ] - }, - { - "login": "samholmes", - "name": "samholmes", - "avatar_url": "https://avatars2.githubusercontent.com/u/517469?v=4", - "profile": "https://github.com/samholmes", - "contributions": [ - "code", - "ideas" - ] - }, - { - "login": "Ontopic", - "name": "Ontopic", - "avatar_url": "https://avatars0.githubusercontent.com/u/1599991?v=4", - "profile": "https://github.com/Ontopic", - "contributions": [ - "ideas" - ] - }, - { - "login": "iRyanBell", - "name": "Ryan Bell", - "avatar_url": "https://avatars0.githubusercontent.com/u/25379378?v=4", - "profile": "https://iryanbell.com/", - "contributions": [ - "ideas" - ] - }, - { - "login": "tremby", - "name": "Bart Nagel", - "avatar_url": "https://avatars1.githubusercontent.com/u/199635?v=4", - "profile": "https://bartnagel.ca/", - "contributions": [ - "bug", - "code", - "example", - "ideas" - ] - }, - { - "login": "mckelveygreg", - "name": "Greg McKelvey", - "avatar_url": "https://avatars2.githubusercontent.com/u/16110122?v=4", - "profile": "https://mckelveygreg.github.io/", - "contributions": [ - "code" - ] - }, - { - "login": "bdefore", - "name": "Buck DeFore", - "avatar_url": "https://avatars.githubusercontent.com/u/142472?v=4", - "profile": "https://github.com/bdefore", - "contributions": [ - "ideas" - ] - }, - { - "login": "pierreburel", - "name": "Pierre Burel", - "avatar_url": "https://avatars.githubusercontent.com/u/37228?v=4", - "profile": "https://www.pierreburel.com/", - "contributions": [ - "bug" - ] - }, - { - "login": "oowliq", - "name": "Konstantin", - "avatar_url": "https://avatars.githubusercontent.com/u/47437822?v=4", - "profile": "https://oowl.dev/", - "contributions": [ - "bug", - "code" - ] - }, - { - "login": "flagoon", - "name": "Pawel Kochanek", - "avatar_url": "https://avatars.githubusercontent.com/u/20648154?v=4", - "profile": "https://github.com/flagoon", - "contributions": [ - "bug", - "code" - ] - } - ], - "commitConvention": "none" -} +undefined diff --git a/.size-limit.js b/.size-limit.js index 4d2dfbbb..6725ebd0 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -3,25 +3,25 @@ module.exports = [ name: 'breakpoints', path: './breakpoints/create-breakpoints-api.prod.js', import: '{ createBreakpointsApi }', - limit: '259 B', + limit: '254 B', }, { name: 'breakpoints.dev', path: './breakpoints/create-breakpoints-api.dev.js', import: '{ createBreakpointsApi }', - limit: '823 B', + limit: '804 B', }, { name: 'styled-breakpoints', path: './styled-breakpoints/create-styled-breakpoints-theme/index.js', import: '{ createStyledBreakpointsTheme }', - limit: '739 B', + limit: '722 B', }, { name: 'styled-breakpoints + useMediaQuery', path: './use-media-query/index.js', import: '{ useMediaQuery }', - limit: '323 B', + limit: '324 B', }, { name: 'styled-breakpoints + useMediaQuery', @@ -29,6 +29,6 @@ module.exports = [ './styled-breakpoints/index.js': '{ createStyledBreakpointsTheme }', './use-media-query/index.js': '{ useMediaQuery }', }, - limit: '998 B', + limit: '981 B', }, ]; diff --git a/README.md b/README.md index 158b2075..28bb3f8c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

-
+
styled-breakpoints
@@ -9,11 +9,11 @@ styled-breakpoints
-coverage status +coverage status -npm bundle size +npm bundle size npm downloads @@ -65,14 +65,13 @@ For **third party** components. ```tsx const Layout = () => { - const theme = useTheme(); - const isMd = useMediaQuery(theme.breakpoints.up('md')); + const isMd = useMediaQuery(useTheme()?.breakpoints.up('md')); return <>{isMd && }; }; ``` -
+
## Examples @@ -104,9 +103,9 @@ From largest to smallest

-
+
-
+
## Documentation @@ -121,10 +120,10 @@ From largest to smallest - [between breakpoints](#between-breakpoints) - [useMediaQuery hook](#usemediaquery-hook) - [customization](#customization) - - [breakpoints](#breakpoints) + - [strict typed breakpoints](#strict-typed-breakpoints) - [merge with another theme](#merge-with-another-theme) -
+
## Quick start @@ -155,9 +154,9 @@ declare module 'styled-components' { ```tsx import styled { ThemeProvider } from 'styled-components'; -import { createStyledBreakpointsTheme } from 'styled-breakpoints'; +import { createStyledBreakpointsTheme, StyledBreakpointsTheme } from 'styled-breakpoints'; -const Block = styled.div` +const Box = styled.div` display: none; ${({ theme }) => theme.breakpoints.up('sm')} { @@ -165,11 +164,11 @@ const Block = styled.div` } ` -const theme = createStyledBreakpointsTheme(); +const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme; const App = () => ( - + ) ``` @@ -204,7 +203,11 @@ declare module '@emotion/react' { ```tsx import styled from '@emotion/styled'; import { ThemeProvider } from '@emotion/react'; -import { createStyledBreakpointsTheme } from 'styled-breakpoints'; + +import { + createStyledBreakpointsTheme, + StyledBreakpointsTheme, +} from 'styled-breakpoints'; const Block = styled.div` display: none; @@ -214,7 +217,7 @@ const Block = styled.div` } `; -const theme = createStyledBreakpointsTheme(); +const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme; const App = () => ( @@ -225,7 +228,7 @@ const App = () => ( -
+
## Migration from v11 @@ -245,7 +248,7 @@ The `createTheme` function has been replaced with `createStyledBreakpointsTheme` + const theme = createStyledBreakpointsTheme(); ``` -### Media Queries +### Breakpoint Functions Additionally, the functions `up`, `down`, `between`, and `only` have been moved to the theme object. This means that you no longer need to import them individually each time you want to use them. @@ -285,14 +288,13 @@ or + import { useMediaQuery } from 'styled-breakpoints/use-media-query'; + const Example = () => { -+ const theme = useTheme(); -+ const isMd = useMediaQuery(theme.breakpoints.only('md')); ++ const isMd = useMediaQuery(useTheme()?.breakpoints.only('md')); + + return {isMd && } + } ``` -
+
## Core concepts @@ -302,7 +304,7 @@ or - **The objective is mobile-first, responsive design**. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience. -
+
## Available breakpoints @@ -321,10 +323,12 @@ const breakpoints = { }; ``` -
+
## Media queries +- πŸš€ Caching is implemented in all functions to optimize performance. + ### Min-width
Type declaration @@ -358,7 +362,7 @@ const Block = styled.div`
-
+
### Max-width @@ -398,7 +402,7 @@ const Block = styled.div` > Why subtract .02px? Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [min- and max- prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
-
+
### Single breakpoint @@ -435,7 +439,7 @@ const Block = styled.div`
-
+
### Between breakpoints @@ -473,7 +477,7 @@ const Block = styled.div`
-
+
### useMediaQuery hook @@ -481,56 +485,60 @@ features: - 🧐 optimal performance by dynamically monitoring document changes in media queries. - βš™οΈ It supports SSR (server-side rendering). -- πŸ“¦ Minified and gzipped size 323b. +- πŸ“¦ Minified and gzipped size 324b.
Type declaration ```ts - declare function useMediaQuery(query: string) => boolean + declare function useMediaQuery(query?: string) => boolean ```
```tsx -import { useTheme } from 'styled-components'; // or '@emotion/react' +import { useTheme } from 'styled-components'; // or from '@emotion/react' import { useMediaQuery } from 'styled-breakpoints/use-media-query'; import { Box } from 'third-party-library'; const SomeComponent = () => { - const theme = useTheme(); - const isMd = useMediaQuery(theme.breakpoints.only('md')); + const isMd = useMediaQuery(useTheme()?.breakpoints.only('md')); return {isMd && }; }; ``` -
+
## Customization -### Breakpoints +### Strict Typed Breakpoints + +`app.tsx` ```tsx -import styled from 'styled-components'; +import styled from 'styled-components'; // or from '@emotion/react' import { createStyledBreakpointsTheme } from 'styled-breakpoints'; -const theme = createStyledBreakpointsTheme({ - breakpoints: { - small: '0px', - medium: '640px', - large: '1024px', - xLarge: '1200px', - xxLarge: '1440px', - }, -}); +const breakpoints = { + small: '0px', + medium: '640px', + large: '1024px', + xLarge: '1200px', + xxLarge: '1440px', +} as const; -const Block = styled.div` - background-color: pink; +type Min = keyof typeof breakpoints; - ${({ theme }) => theme.breakpoints.up('medium')} { - background-color: hotpink; - } -`; +// For max values remove the first key. +type Max = Exclude; + +export interface StyledBreakpointsTheme { + breakpoints: MediaQueries; +} + +const theme = createStyledBreakpointsTheme({ + breakpoints, +}) as StyledBreakpointsTheme; const App = () => ( @@ -539,17 +547,43 @@ const App = () => ( ); ``` -
+

Styled Components

 -### Merge with another theme +`styled.d.ts` -

Styled Components

 +```ts +import 'styled-components'; +import { StyledBreakpointsTheme } from './app'; + +declare module 'styled-components' { + export interface DefaultTheme extends StyledBreakpointsTheme {} +} +``` + +
+ +

Emotion

 + +`styled.d.ts` + +```ts +import '@emotion/react'; +import { StyledBreakpointsTheme } from './app'; + +declare module '@emotion/react' { + export interface Theme extends StyledBreakpointsTheme {} +} +``` + +
+ +### Merge with another theme `app.tsx` ```tsx -import { ThemeProvider } from 'styled-components'; -import { createStyledBreakpointsTheme } from 'styled-breakpoints'; +import { ThemeProvider } from 'styled-components'; // or from '@emotion/react'; +import { createStyledBreakpointsTheme, StyledBreakpointsTheme } from 'styled-breakpoints'; export const primaryTheme = { fonts: ['sans-serif', 'Roboto'], @@ -562,7 +596,7 @@ export const primaryTheme = { const const theme = { ...primaryTheme, - ...createStyledBreakpointsTheme(), + ...createStyledBreakpointsTheme() as StyledBreakpointsTheme, } const App = () => ( @@ -572,6 +606,8 @@ const App = () => ( ); ``` +

Styled Components

 + Create file `styled.d.ts` ```ts @@ -582,7 +618,7 @@ import { primaryTheme } from './app'; type PrimaryTheme = typeof primaryTheme; declare module 'styled-components' { - export interface DefaultTheme extends PrimaryTheme, StyledBreakpointsTheme {} + export interface DefaultTheme extends StyledBreakpointsTheme, PrimaryTheme {} } ``` @@ -590,33 +626,6 @@ declare module 'styled-components' {

Emotion

 -`app.tsx` - -```tsx -import { ThemeProvider } from '@emotion/react'; -import { createStyledBreakpointsTheme } from 'styled-breakpoints'; - -export const primaryTheme = { - fonts: ['sans-serif', 'Roboto'], - fontSizes: { - small: '1em', - medium: '2em', - large: '3em', - }, -} as const; - -const const theme = { - ...primaryTheme, - ...styledBreakpointsTheme(), -} - -const App = () => ( - - - -); -``` - `emotion.d.ts` ```ts @@ -649,28 +658,31 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/all-contri - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Maxim
πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸ“’
Abu Shamsutdinov
πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’
Sergey Sova
πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’
Jussi Kinnula
πŸ› πŸ’»
RafaΕ‚ Wyszomirski
πŸ“–
Adrian CelczyΕ„ski
πŸ› πŸ’»
Alexey Olefirenko
πŸ’» πŸ€”

samholmes
πŸ’» πŸ€”
Ontopic
πŸ€”
Ryan Bell
πŸ€”
Bart Nagel
πŸ› πŸ’» πŸ’‘ πŸ€”
Greg McKelvey
πŸ’»
Buck DeFore
πŸ€”
Pierre Burel
πŸ›

Konstantin
πŸ› πŸ’»
Pawel Kochanek
πŸ› πŸ’»
Maxim
Maxim
πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸ“’		Abu Shamsutdinov
Abu Shamsutdinov
πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’		Sergey Sova
Sergey Sova
πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’		Jussi Kinnula
Jussi Kinnula
πŸ› πŸ’»		RafaΕ‚ Wyszomirski
RafaΕ‚ Wyszomirski
πŸ“–		Adrian CelczyΕ„ski
Adrian CelczyΕ„ski
πŸ› πŸ’»		Alexey Olefirenko
Alexey Olefirenko
πŸ’» πŸ€”
samholmes
samholmes
πŸ’» πŸ€”		Ontopic
Ontopic
πŸ€”		Ryan Bell
Ryan Bell
πŸ€”		Bart Nagel
Bart Nagel
πŸ› πŸ’» πŸ’‘ πŸ€”		Greg McKelvey
Greg McKelvey
πŸ’»		Buck DeFore
Buck DeFore
πŸ€”		Pierre Burel
Pierre Burel
πŸ›
Konstantin
Konstantin
πŸ› πŸ’»		Pawel Kochanek
Pawel Kochanek
πŸ› πŸ’»		Ian Christopher B. de Jesus
Ian Christopher B. de Jesus
πŸ›
diff --git a/breakpoints/create-breakpoints-api.dev.js b/breakpoints/create-breakpoints-api.dev.js index 84ecce48..448fa463 100644 --- a/breakpoints/create-breakpoints-api.dev.js +++ b/breakpoints/create-breakpoints-api.dev.js @@ -8,36 +8,37 @@ exports.createBreakpointsApi = ({ breakpoints, errorPrefix }) => { breakpoints, }); - validation.throwIfInvalidBreakpoints(); + validation.validateBreakpoints(); + const breakpointsApi = createBreakpointsApi({ breakpoints, }); const up = (min) => { - validation.throwIsInvalidName(min); + validation.validateKey(min); return breakpointsApi.up(min); }; const down = (max) => { - validation.throwIsInvalidName(max); - validation.throwIsValueIsZero(max); + validation.validateKey(max); + validation.validateNonZeroValue(max); return breakpointsApi.down(max); }; const between = (min, max) => { - validation.throwIsInvalidName(min); - validation.throwIsInvalidName(max); - validation.throwIsMaxValueLessThanMin(min, max); + validation.validateKey(min); + validation.validateKey(max); + validation.validateMaxGreaterThanMin(min, max); return breakpointsApi.between(min, max); }; - const only = (name) => { - validation.throwIsInvalidName(name); + const only = (key) => { + validation.validateKey(key); - return breakpointsApi.only(name); + return breakpointsApi.only(key); }; return { @@ -52,19 +53,19 @@ exports.createBreakpointsApi = ({ breakpoints, errorPrefix }) => { }; function createValidation({ invariant, breakpoints }) { - const names = Object.keys(Object(breakpoints)); + const keys = Object.keys(Object(breakpoints)); return { - throwIfInvalidBreakpoints, - throwIsInvalidName, - throwIsValueIsZero, - throwIsMaxValueLessThanMin, + validateBreakpoints, + validateKey, + validateNonZeroValue, + validateMaxGreaterThanMin, }; - function throwIfInvalidBreakpoints() { - const invalidBreakpoints = names.reduce((acc, name) => { - if (!/^\d+px$/.test(breakpoints[name].trim())) { - acc.push(`${name}: ${breakpoints[name]}`); + function validateBreakpoints() { + const invalidBreakpoints = keys.reduce((acc, key) => { + if (!/^\d+px$/.test(breakpoints[key].trim())) { + acc.push(`${key}: ${breakpoints[key]}`); } return acc; @@ -78,23 +79,23 @@ function createValidation({ invariant, breakpoints }) { ); } - function throwIsInvalidName(name) { + function validateKey(key) { invariant( - breakpoints[name], - `breakpoint \`${name}\` not found in ${names.join(', ')}.` + breakpoints[key], + `breakpoint \`${key}\` not found in ${keys.join(', ')}.` ); } - function throwIsValueIsZero(name) { - const value = breakpoints[name]; + function validateNonZeroValue(key) { + const value = breakpoints[key]; invariant( removeUnits(value) !== 0, - `\`${name}: ${value}\` cannot be assigned as minimum breakpoint.` + `\`${key}: ${value}\` cannot be assigned as minimum breakpoint.` ); } - function throwIsMaxValueLessThanMin(min, max) { + function validateMaxGreaterThanMin(min, max) { const diff = removeUnits(breakpoints[max]) - removeUnits(breakpoints[min]); invariant(diff >= 0, 'The `max` value cannot be less than the `min`.'); diff --git a/breakpoints/create-breakpoints-api.prod.js b/breakpoints/create-breakpoints-api.prod.js index 9ad10db8..f1863e67 100644 --- a/breakpoints/create-breakpoints-api.prod.js +++ b/breakpoints/create-breakpoints-api.prod.js @@ -16,12 +16,12 @@ exports.createBreakpointsApi = ({ breakpoints }) => { const only = (key) => key === keys.at(-1) ? up(key) : between(key, getNextKey(key)); - return Object.freeze({ + return { keys, getNextKey, up, down, between, only, - }); + }; }; diff --git a/breakpoints/index.d.ts b/breakpoints/index.d.ts index 1ce784f2..f07a8b4b 100644 --- a/breakpoints/index.d.ts +++ b/breakpoints/index.d.ts @@ -17,7 +17,7 @@ type BreakpointsApi = Readonly<{ min: string; max: string; }; - only: (name: string) => + only: (key: string) => | { min: string; max: string; diff --git a/breakpoints/index.spec.js b/breakpoints/index.spec.js index 71373742..e6b828b1 100644 --- a/breakpoints/index.spec.js +++ b/breakpoints/index.spec.js @@ -97,7 +97,7 @@ describe('createBreakpoints function in production', () => { }); describe('only', () => { - it('should return correct min and max values for given breakpoint name', () => { + it('should return correct min and max values for given breakpoint key', () => { const { calcMaxWidth } = require('./calc-max-width'); keys.slice(0, -1).forEach((key, index) => { @@ -114,7 +114,7 @@ describe('createBreakpoints function in production', () => { describe('createBreakpoints function in development', () => { let breakpointsApi = null; - let INVALID_BREAKPOINT_NAME = null; + let INVALID_BREAKPOINT_KEY = null; let ERROR_PREFIX = null; let DEFAULT_BREAKPOINTS = null; @@ -127,7 +127,7 @@ describe('createBreakpoints function in development', () => { errorPrefix: ERROR_PREFIX, }); - INVALID_BREAKPOINT_NAME = 'invalid'; + INVALID_BREAKPOINT_KEY = 'invalid'; ERROR_PREFIX = '[breakpoints]: '; DEFAULT_BREAKPOINTS = { xs: '0px', @@ -192,17 +192,17 @@ describe('createBreakpoints function in development', () => { }); describe('up', () => { - it('should throw an error for an invalid breakpoint name', () => { - expect(() => breakpointsApi.up(INVALID_BREAKPOINT_NAME)).toThrowError( - `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.` + it('should throw an error for an invalid breakpoint key', () => { + expect(() => breakpointsApi.up(INVALID_BREAKPOINT_KEY)).toThrowError( + `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_KEY}\` not found in xs, sm, md, lg, xl, xxl.` ); }); }); describe('down', () => { - it('should throw an error for an invalid breakpoint name', () => { - expect(() => breakpointsApi.down(INVALID_BREAKPOINT_NAME)).toThrowError( - `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.` + it('should throw an error for an invalid breakpoint key', () => { + expect(() => breakpointsApi.down(INVALID_BREAKPOINT_KEY)).toThrowError( + `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_KEY}\` not found in xs, sm, md, lg, xl, xxl.` ); }); @@ -214,17 +214,17 @@ describe('createBreakpoints function in development', () => { }); describe('between', () => { - it('should throw an error for invalid breakpoint names', () => { + it('should throw an error for invalid breakpoint keys', () => { expect(() => - breakpointsApi.between(INVALID_BREAKPOINT_NAME, 'sm') + breakpointsApi.between(INVALID_BREAKPOINT_KEY, 'sm') ).toThrowError( - `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.` + `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_KEY}\` not found in xs, sm, md, lg, xl, xxl.` ); expect(() => - breakpointsApi.between('sm', INVALID_BREAKPOINT_NAME) + breakpointsApi.between('sm', INVALID_BREAKPOINT_KEY) ).toThrowError( - `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.` + `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_KEY}\` not found in xs, sm, md, lg, xl, xxl.` ); }); @@ -242,9 +242,9 @@ describe('createBreakpoints function in development', () => { }); describe('only method', () => { - it('should throw an error for an invalid breakpoint name', () => { - expect(() => breakpointsApi.only(INVALID_BREAKPOINT_NAME)).toThrowError( - `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.` + it('should throw an error for an invalid breakpoint key', () => { + expect(() => breakpointsApi.only(INVALID_BREAKPOINT_KEY)).toThrowError( + `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_KEY}\` not found in xs, sm, md, lg, xl, xxl.` ); }); }); diff --git a/docs/v11.x.x-README.md b/docs/v11.x.x-README.md index 6611eb1f..6cf9a094 100644 --- a/docs/v11.x.x-README.md +++ b/docs/v11.x.x-README.md @@ -331,7 +331,7 @@ css` ```ts declare function only( - name: string, + key: string, orientation?: 'portrait' | 'landscape' ) => any ``` diff --git a/package.json b/package.json index 4d26d558..f3b4c4b7 100644 --- a/package.json +++ b/package.json @@ -50,13 +50,9 @@ "access": "public" }, "peerDependencies": { - "react": "^18.x.x", - "styled-components": "^5.0.0" + "react": "^18.x.x" }, "peerDependenciesMeta": { - "styled-components": { - "optional": true - }, "react": { "optional": true } diff --git a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts index 545e6d13..aa6f09f9 100644 --- a/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts +++ b/styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts @@ -1,32 +1,30 @@ -type Orientation = 'portrait' | 'landscape'; +declare module 'styled-breakpoints' { + type Orientation = 'portrait' | 'landscape'; -export type Up = (min: string, orientation?: Orientation) => string; -export type Down = (max: string, orientation?: Orientation) => string; + type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; + type Min = BreakpointKeys; + type Max = Exclude; -export type Between = ( - min: string, - max: string, - orientation?: Orientation -) => string; + type Up = (min: Min, orientation?: Orientation) => string; + type Down = (max: Max, orientation?: Orientation) => string; + type Between = (min: Min, max: Max, orientation?: Orientation) => string; + type Only = (key: BreakpointKeys, orientation?: Orientation) => string; -export type Only = (key: string, orientation?: Orientation) => string; + interface Options { + breakpoints?: Record; + errorPrefix?: string; + } -export interface StyledBreakpoints { - up: Up; - down: Down; - between: Between; - only: Only; -} + export interface MediaQueries { + up: (min: T, orientation?: Orientation) => string; + down: (max: U, orientation?: Orientation) => string; + between: (min: T, max: U, orientation?: Orientation) => string; + only: (key: T, orientation?: Orientation) => string; + } -export interface StyledBreakpointsTheme { - breakpoints: StyledBreakpoints; -} + export interface StyledBreakpointsTheme { + breakpoints: T; + } -interface Options { - breakpoints?: Record; - errorPrefix?: string; + export function createStyledBreakpointsTheme(options?: Options): any; } - -declare function createStyledBreakpointsTheme( - options?: Options -): StyledBreakpointsTheme; diff --git a/use-media-query/index.d.ts b/use-media-query/index.d.ts index a5c3965b..845a4653 100644 --- a/use-media-query/index.d.ts +++ b/use-media-query/index.d.ts @@ -1 +1,3 @@ -export declare function useMediaQuery(query: string): boolean; +declare module 'styled-breakpoints/use-media-query' { + export function useMediaQuery(query?: string): boolean; +} diff --git a/use-media-query/use-media-query/use-media-query.js b/use-media-query/use-media-query/use-media-query.js index 0dde9268..645c0e80 100644 --- a/use-media-query/use-media-query/use-media-query.js +++ b/use-media-query/use-media-query/use-media-query.js @@ -4,7 +4,7 @@ const { getMatches } = require('../get-matches'); const isBrowser = typeof window !== 'undefined'; const useEnhancedEffect = isBrowser ? useLayoutEffect : useEffect; -const useMediaQuery = (query) => { +const useMediaQuery = (query = '') => { const [isMatch, setIsMatch] = useState(getMatches(query)); useEnhancedEffect(() => {