v12.1.0

12.1.0 (2023-06-09)

Features

• add strict types for default and custom media queries (8794580), closes #1390

app.tsx

import styled from 'styled-components'; // or from '@emotion/react'
import { createStyledBreakpointsTheme, MediaQueries } from 'styled-breakpoints';

const breakpoints = {
  small: '0px',
  medium: '640px',
  large: '1024px',
  xLarge: '1200px',
  xxLarge: '1440px',
} as const;

type Min = keyof typeof breakpoints;

// For max values remove the first key.
type Max = Exclude<keyof typeof breakpoints, 'small'>;

export interface StyledBreakpointsTheme {
  breakpoints: MediaQueries<Min, Max>;
}

const theme = createStyledBreakpointsTheme({
  breakpoints,
}) as StyledBreakpointsTheme;

const App = () => (
  <ThemeProvider theme={theme}>
    <Block />
  </ThemeProvider>
);

styled.d.ts

import 'styled-components';
import { StyledBreakpointsTheme } from './app';

declare module 'styled-components' {
  export interface DefaultTheme extends StyledBreakpointsTheme {}
}

or

emotion.d.ts

import '@emotion/react';
import { StyledBreakpointsTheme } from './app';

declare module '@emotion/react' {
  export interface Theme extends StyledBreakpointsTheme {}
}