{"id":19568338,"url":"https://github.com/martinsbicudo/styled-container-queries","last_synced_at":"2026-05-08T05:07:18.821Z","repository":{"id":196164886,"uuid":"694740465","full_name":"martinsbicudo/styled-container-queries","owner":"martinsbicudo","description":"Simple lib to use container queries with styled-components :nail_care:","archived":false,"fork":false,"pushed_at":"2024-04-03T14:29:13.000Z","size":3050,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T18:46:53.436Z","etag":null,"topics":["container","container-queries","container-query","containers","css-in-js","css-in-react","javascript","query","react","styled","styled-components","styled-container-query","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/styled-container-queries","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martinsbicudo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-09-21T15:40:43.000Z","updated_at":"2023-09-26T19:49:50.000Z","dependencies_parsed_at":"2024-04-03T15:53:06.263Z","dependency_job_id":null,"html_url":"https://github.com/martinsbicudo/styled-container-queries","commit_stats":null,"previous_names":["martinsbicudo/styled-container-queries"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsbicudo%2Fstyled-container-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsbicudo%2Fstyled-container-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsbicudo%2Fstyled-container-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsbicudo%2Fstyled-container-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinsbicudo","download_url":"https://codeload.github.com/martinsbicudo/styled-container-queries/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240831380,"owners_count":19864718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["container","container-queries","container-query","containers","css-in-js","css-in-react","javascript","query","react","styled","styled-components","styled-container-query","typescript"],"created_at":"2024-11-11T06:03:38.601Z","updated_at":"2026-05-08T05:07:18.773Z","avatar_url":"https://github.com/martinsbicudo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg title=\"styled-container-queries\" alt=\"styled-container-queries\" src=\"https://github.com/martinsbicudo/styled-container-queries/blob/0c232caf216f73caddfe1868fc49e8bd4f1af179/public/logo.png\" width=\"225px\"\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/martinsbicudo/styled-container-queries/pr_build_check.yml)\n![minified size](https://img.shields.io/bundlephobia/min/styled-container-queries)\n![npm](https://img.shields.io/npm/v/styled-container-queries)\n\n\u003cp\u003eSimple lib to use container queries with \u003ca href=\"https://styled-components.com\" target=\"_blank\"\u003estyled-components\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n# Inspiration\n\nInspired by [styled-breakpoints](https://github.com/mg901/styled-breakpoints)\n\n# Compatibility\n\n- Styled Components \u003e= `6.0.0`\n- Browsers: [check here](https://caniuse.com/css-container-queries)\n\n# Bundle Analyzer\n\n- [main](https://htmlpreview.github.io/?https://github.com/martinsbicudo/styled-container-queries/blob/main/parcel-bundle-reports/main.html)\n- [types](https://htmlpreview.github.io/?https://github.com/martinsbicudo/styled-container-queries/blob/main/parcel-bundle-reports/types.html)\n\n# Quick Menu\n\n- [how to use](#how-to-use)\n- [documentation](#documentation)\n- [how to contribute](#how-to-contribute)\n- [license](#license)\n\n# How to use\n\n### Install\n\n```shell\nnpm i styled-container-queries\n\n#or\n\nyarn add styled-container-queries\n\n#or\n\npnpm add styled-container-queries\n```\n\n### Simple example\n\n`theme.ts`\n\n```tsx\nimport { createStyledContainerQueries } from \"styled-container-queries\";\n\nconst breakpoints = {\n  sm: \"500px\",\n  md: \"700px\",\n  lg: \"900px\",\n} as const;\n\nconst containerTheme = createStyledContainerQueries(breakpoints);\n\nconst theme = {\n  ...containerTheme,\n  ...styledTheme,\n};\n\nexport { theme };\n```\n\n`styled.ts`\n\n```tsx\nimport styled from \"styled-components\";\n\nexport const Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"sm\")} {\n    \u0026 \u003e p {\n      background-color: red;\n    }\n  }\n\n  ${({ theme }) =\u003e theme.container.inline.down(\"sm\")} {\n    \u0026 \u003e p {\n      background-color: yellow;\n    }\n  }\n`;\n```\n\n`styled.d.ts`\n\n\u003e This is the current way to solve types\n\n```tsx\nimport \"styled-components\";\nimport { theme } from \"./theme\";\n\ndeclare module \"styled-components\" {\n  export interface DefaultTheme {\n    container: typeof theme.container;\n  }\n}\n```\n\n`main.tsx`\n\n```tsx\nimport { ThemeProvider } from \"styled-components\";\nimport { theme } from \"./theme\";\nimport * as S from \"./styled.ts\";\n\nconst Main = () =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cS.Container\u003e\n      \u003cp\u003eexample text\u003c/p\u003e\n    \u003c/S.Container\u003e\n  \u003c/ThemeProvider\u003e\n);\n\nexport { Main };\n```\n\n# Documentation\n\n- [theme structure](#theme-structure)\n- [container types](#container-types)\n  - [inline-size](#inline-size)\n  - [size](#size)\n  - [normal](#normal)\n  - [query without type](#query-without-type)\n- [container queries](#container-queries)\n  - [min-width](#min-width)\n  - [max-width](#max-width)\n  - [exact breakpoint](#exact-breakpoint)\n  - [between breakpoint](#between-breakpoint)\n- [only-attrs](#only-attrs)\n- [only-query](#only-query)\n- [named container](#named-container)\n  - [name](#container-name)\n  - [context](#container-context)\n  - [both](#container-name-and-context)\n\n## Theme structure\n\nCreate theme\n\n```ts\nimport { createStyledContainerQueries } from \"styled-container-queries\";\n\nconst breakpoints = {\n  sm: \"200px\",\n} as const;\n\nconst containerTheme = createStyledContainerQueries(breakpoints);\n```\n\n```ts\nconst containerTheme = {\n  //return query and container-type: inline-size\n  inline: {\n    up,\n    down,\n    only,\n    between,\n    attrs,\n  },\n  //return query and container-type: size\n  size: {\n    up,\n    down,\n    only,\n    between,\n    attrs,\n  },\n  //return query and container-type: normal\n  normal: {\n    up,\n    down,\n    only,\n    between,\n    attrs,\n  },\n  //return only query without `container-type`\n  query: {\n    up,\n    down,\n    only,\n    between,\n    attrs,\n  },\n};\n```\n\n## Container types\n\n### Inline Size\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Size\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.size.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: size;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Normal\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.normal.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: normal;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Query without type\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.query.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\n## Container queries\n\n### Min-width\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Max-width\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.down(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n\n@container (max-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Exact breakpoint\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.only(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\nWhether find next largest size\n\n```css\ncontainer-type: inline-size;\n\n@container (min-width: $MD_SIZE) and (max-width: $NEXT_SIZE - 0.2) {\n  background-color: red;\n}\n```\n\nElse\n\n```css\ncontainer-type: inline-size;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Between breakpoint\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.between([\"sm\", \"md\"])} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n\n@container (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\n## Only Attrs\n\n\u003e With this method you get only container attrs\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.attrs()}\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.size.attrs()}\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.attrs(\"name\")}\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.size.attrs(\"name\")}\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.query.attrs(\"name\")}\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResults\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n```\n\n```css\ncontainer-type: size;\n```\n\n```css\ncontainer-type: inline-size;\ncontainer-name: name;\n```\n\n```css\ncontainer-type: size;\ncontainer-name: name;\n```\n\n```css\ncontainer-name: name;\n```\n\n\u003c/details\u003e\n\n## Only Query\n\n\u003e With this method you get queries without type (ex: `up`, `down`, `only` and `between`)\n\n\u003e `Attrs` method also can be used)\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.query.up(\"md\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n```css\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\n## Named container\n\n### Container name\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\", \"name\")} {\n    background-color: red;\n  }\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.between([\"sm\", \"md\"], \"name\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResults\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\ncontainer-name: name;\n\n@container (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n```css\ncontainer-type: inline-size;\ncontainer-name: name;\n\n@container (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Container context\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\", \".context\")} {\n    background-color: red;\n  }\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.between([\"sm\", \"md\"], \".context\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResults\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\n\n@container context (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n```css\ncontainer-type: inline-size;\n\n@container context (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n### Container name and context\n\n#### 1. Simple example\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\", \"name.context\")} {\n    background-color: red;\n  }\n`;\n```\n\n```tsx\nconst Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e\n    theme.container.inline.between([\"sm\", \"md\"], \"name.context\")} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResults\u003c/strong\u003e\u003c/summary\u003e\n\n```css\ncontainer-type: inline-size;\ncontainer-nane: name;\n\n@container context (min-width: $MD_SIZE) {\n  background-color: red;\n}\n```\n\n```css\ncontainer-type: inline-size;\ncontainer-name: name;\n\n@container context (min-width: $SM_SIZE) and (max-width: $MD_SIZE - 0.2) {\n  background-color: red;\n}\n```\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n#### 2. Complex example\n\n`styled.ts`\n\n```tsx\nimport styled from \"styled-components\";\n\nexport const Container = styled.div`\n  width: 100%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\")} {\n    p {\n      background-color: red;\n    }\n  }\n`;\n\nexport const SubContainer = styled.div`\n  width: 50%;\n\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\", \"container\")} {\n    background-color: pink;\n  }\n`;\n\nexport const SubSubContainer = styled.div`\n  ${({ theme }) =\u003e theme.container.inline.up(\"md\", \".container\")} {\n    background-color: yellow;\n  }\n`;\n```\n\n`component.tsx`\n\n```tsx\nimport * as S from \"./styled.ts\";\n\nconst Component = () =\u003e (\n  \u003cS.Container\u003e\n    \u003cp\u003econtainer\u003c/p\u003e\n    \u003cS.SubContainer\u003e\n      \u003cS.SubSubContainer\u003e\n        \u003cp\u003esub-sub-container\u003c/p\u003e\n      \u003c/S.SubSubContainer\u003e\n    \u003c/S.SubContainer\u003e\n  \u003c/S.Container\u003e\n);\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eResult\u003c/strong\u003e\u003c/summary\u003e\n\n\u003cimg title=\"container-name-and-context-example\" alt=\"container-name-and-context-example\" src=\"https://github.com/martinsbicudo/styled-container-queries/blob/0c232caf216f73caddfe1868fc49e8bd4f1af179/public/example.gif\"/\u003e\n\n\u003c/details\u003e\n\n# How to contribute\n\nTo contribute, make sure to follow the steps bellow:\n\n1. Create a new branch:\n\n   ```shell\n    git checkout -b feat/your-new-feature\n   ```\n\n2. Make your changes, add unit tests (with `jest`) and test with `npm link`\n\n   On styled-container-queries project:\n\n   ```shell\n    npm link\n   ```\n\n   On your app/project:\n\n   ```shell\n    npm link styled-container-queries\n   ```\n\n   This will create a symlink into your `node_modules` app, and you can test iteratively. You can check more about npm-link [here](https://docs.npmjs.com/cli/v9/commands/npm-link)\n\n3. Before to push your changes to origin, open your pull request and fill all required fields.\n   1. Make sure to fill the **Release** section with what your pull request changes. **This section is required to merge pull request.**\n4. Set a _required_ `semver` label according to your change:\n   1. `semver:patch`: used when you submit a fix to a bug, enhance performance, etc;\n   2. `semver:minor`: used when you submit a new component, new feature, etc;\n   3. `semver:major`: used when you submit some breaking change, etc;\n   4. `semver:prerelease`: used when you submit a prerelease (ex: `1.0.0-beta.1`);\n   5. `semver:bypass`: used to update docs, or something that doesn’t affect the build.\n\n\u003e Info: Once you have merged your pull request, with all required fields, GitHub Actions will be responsible to create a new build and publish.\n\n# License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinsbicudo%2Fstyled-container-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinsbicudo%2Fstyled-container-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinsbicudo%2Fstyled-container-queries/lists"}