Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-container-queries) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple lib to use container queries with styled-components

Inspiration

Inspired by styled-breakpoints

Compatibility

Styled Components >= 6.0.0
Browsers: check here

Bundle Analyzer

main
types

How to use

Install

npm i styled-container-queries

#or

yarn add styled-container-queries

#or

pnpm add styled-container-queries

Simple example

theme.ts

import { createStyledContainerQueries } from "styled-container-queries";

const breakpoints = {
  sm: "500px",
  md: "700px",
  lg: "900px",
} as const;

const containerTheme = createStyledContainerQueries(breakpoints);

const theme = {
  ...containerTheme,
  ...styledTheme,
};

export { theme };

styled.ts

import styled from "styled-components";

export const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("sm")} {
    & > p {
      background-color: red;
    }
  }

  ${({ theme }) => theme.container.inline.down("sm")} {
    & > p {
      background-color: yellow;
    }
  }
`;

main.tsx

import { ThemeProvider } from "styled-components";
import { theme } from "./theme";
import * as S from "./styled.ts";

const Main = () => (
  <ThemeProvider theme={theme}>
    <S.Container>
      <p>example text</p>
    </S.Container>
  </ThemeProvider>
);

export { Main };

Documentation

theme structure
container types
- inline-size
- size
container queries
named container
- name
- context
- both

Theme structure

Create theme

import { createStyledContainerQueries } from "styled-container-queries";

const breakpoints = {
  sm: "200px",
} as const;

const containerTheme = createStyledContainerQueries(breakpoints);

const containerTheme = {
  //return query and container-type: inline-size
  inline: {
    up,
    down,
    only,
    between,
    attrs,
  },
  //return query and container-type: size
  size: {
    up,
    down,
    only,
    between,
    attrs,
  },
  //return only query without `container-type` and `container-name`
  query: {
    up,
    down,
    only,
    between,
  },
};

Container types

Inline Size

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md")} {
    background-color: red;
  }
`;

Result

container-type: inline-size;

@container (min-width: $MD_SIZE) {
  background-color: red;
}

Size

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.size.up("md")} {
    background-color: red;
  }
`;

Result

container-type: size;

@container (min-width: $MD_SIZE) {
  background-color: red;
}

Container queries

Min-width

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md")} {
    background-color: red;
  }
`;

Result

container-type: inline-size;

@container (min-width: $MD_SIZE) {
  background-color: red;
}

Max-width

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.down("md")} {
    background-color: red;
  }
`;

Result

container-type: inline-size;

@container (max-width: $MD_SIZE) {
  background-color: red;
}

Exact breakpoint

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.only("md")} {
    background-color: red;
  }
`;

Result

Whether find next largest size

container-type: inline-size;

@container (min-width: $MD_SIZE) and (max-width: $NEXT_SIZE - 0.2) {
  background-color: red;
}

Else

container-type: inline-size;

@container (min-width: $MD_SIZE) {
  background-color: red;
}

Between breakpoint

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.between(["sm", "md"])} {
    background-color: red;
  }
`;

Result

container-type: inline-size;

@container (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {
  background-color: red;
}

Named container

Container name

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md", "name")} {
    background-color: red;
  }
`;

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.between(["sm", "md"], "name")} {
    background-color: red;
  }
`;

Results

container-type: inline-size;
container-name: name;

@container (min-width: $MD_SIZE) {
  background-color: red;
}

container-type: inline-size;
container-name: name;

@container (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {
  background-color: red;
}

Container context

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md", ".context")} {
    background-color: red;
  }
`;

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.between(["sm", "md"], ".context")} {
    background-color: red;
  }
`;

Results

container-type: inline-size;

@container context (min-width: $MD_SIZE) {
  background-color: red;
}

container-type: inline-size;

@container context (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {
  background-color: red;
}

Container name and context

1. Simple example

const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md", "name.context")} {
    background-color: red;
  }
`;

const Container = styled.div`
  width: 100%;

  ${({ theme }) =>
    theme.container.inline.between(["sm", "md"], "name.context")} {
    background-color: red;
  }
`;

Results

container-type: inline-size;
container-nane: name;

@container context (min-width: $MD_SIZE) {
  background-color: red;
}

container-type: inline-size;
container-name: name;

@container context (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {
  background-color: red;
}

2. Complex example

styled.ts

import styled from "styled-components";

export const Container = styled.div`
  width: 100%;

  ${({ theme }) => theme.container.inline.up("md")} {
    p {
      background-color: red;
    }
  }
`;

export const SubContainer = styled.div`
  width: 50%;

  ${({ theme }) => theme.container.inline.up("md", "container")} {
    background-color: pink;
  }
`;

export const SubSubContainer = styled.div`
  ${({ theme }) => theme.container.inline.up("md", ".container")} {
    background-color: yellow;
  }
`;

component.tsx

import * as S from "./styled.ts";

const Component = () => (
  <S.Container>
    <p>container</p>
    <S.SubContainer>
      <S.SubSubContainer>
        <p>sub-sub-container</p>
      </S.SubSubContainer>
    </S.SubContainer>
  </S.Container>
);

Result

License

MIT License