{"id":24804951,"url":"https://github.com/baraqkamsani/postcss-fluid-style","last_synced_at":"2026-02-12T10:32:29.262Z","repository":{"id":274850218,"uuid":"924291427","full_name":"baraqkamsani/postcss-fluid-style","owner":"baraqkamsani","description":"Build fluid text and style in CSS","archived":false,"fork":false,"pushed_at":"2025-02-08T06:46:39.000Z","size":47,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-21T07:01:53.734Z","etag":null,"topics":["css","postcss"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/postcss-fluid-style","language":"TypeScript","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/baraqkamsani.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-29T18:41:04.000Z","updated_at":"2025-03-20T09:40:34.000Z","dependencies_parsed_at":"2025-04-11T11:38:36.060Z","dependency_job_id":"a6f11442-10e7-453e-8553-97c8d965cff2","html_url":"https://github.com/baraqkamsani/postcss-fluid-style","commit_stats":null,"previous_names":["baraqkamsani/postcss-fluid-style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/baraqkamsani/postcss-fluid-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baraqkamsani%2Fpostcss-fluid-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baraqkamsani%2Fpostcss-fluid-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baraqkamsani%2Fpostcss-fluid-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baraqkamsani%2Fpostcss-fluid-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baraqkamsani","download_url":"https://codeload.github.com/baraqkamsani/postcss-fluid-style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baraqkamsani%2Fpostcss-fluid-style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29363153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T08:51:36.827Z","status":"ssl_error","status_checked_at":"2026-02-12T08:51:26.849Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","postcss"],"created_at":"2025-01-30T07:16:04.149Z","updated_at":"2026-02-12T10:32:29.257Z","avatar_url":"https://github.com/baraqkamsani.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Fluid Style\n\n[![npm version](https://img.shields.io/npm/v/postcss-fluid-style.svg)](https://www.npmjs.com/package/postcss-fluid-style)\n[![Build Status](https://github.com/baraqkamsani/postcss-fluid-style/actions/workflows/test.yaml/badge.svg)](https://github.com/baraqkamsani/postcss-fluid-style)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![PostCSS](https://img.shields.io/badge/PostCSS-8.0-blue.svg)](https://github.com/postcss/postcss)\n[![Minified Size](https://img.shields.io/bundlephobia/min/postcss-fluid-style)](https://bundlephobia.com/package/postcss-fluid-style)\n[![Types](https://img.shields.io/npm/types/postcss-fluid-style)](https://www.npmjs.com/package/postcss-fluid-style)\n\n[PostCSS Fluid Style] lets you build fluid text and size while maintaining WCAG compliance.\n\nThis plugin is adapted from [barvian/fluid.style]. \\\nIf you are using Tailwind, check out [barvian/fluid-tailwind].\n\n## Usage\n\nAdd [PostCSS Fluid Style] to your project:\n\n```sh\nnpm install --save-dev postcss postcss-fluid-style\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\n// postcss.config.mjs\nimport postcssFluidStyle from \"postcss-fluid-style\";\n\nconst config = {\n  plugins: [\n    postcssFluidStyle(/* pluginOptions */),\n  ]\n};\n\nexport default config;\n```\n\n## Options\n\n### baseSize\n\nSets the base font size in pixels for rem calculations.\n\n```js\npostcssFluidStyle({ baseSize: 16 }) // Default: 16\n```\n\n### breakpointUnit\n\nSpecifies the unit to use for fluid scaling.\n\nSupported length units:\n\n- standard  viewport units: `vw`, `vh`, `vi`, `vb`\n- dynamic   viewport units: `dvw`, `dvh`, `dvi`, `dvb`\n- small     viewport units: `svw`, `svh`, `svi`, `svb`\n- large     viewport units: `lvw`, `lvh`, `lvi`, `lvb`\n- container query    units: `cqw`, `cqh`, `cqi`, `cqb`\n\n```js\npostcssFluidStyle({ breakpointUnit: 'vw' }) // Default: 'vw'\n```\n\n### injectComment\n\nControls the placement of explanatory comments.\n\nAccepted values:\n\n- `'before'`\n- `'after'`\n- `''` (don't inject comment)\n\n```js\npostcssFluidStyle({ injectComment: '' }) // Default: ''\n```\n\n### ignoreWCAG\n\nDisables WCAG compliance checks for text scaling.\n\nAccepted values:\n\n- `true`\n- `false`\n\n```js\npostcssFluidStyle({ ignoreWCAG: true }) // Default: true\n```\n\n\n## Syntax\n\n```scss\nfluid-style(\u003cmin-size\u003epx, \u003cmax-size\u003epx, \u003cmin-viewport\u003epx, \u003cmax-viewport\u003epx, { /* options */ })\n```\n\n- `\u003cmin-size\u003epx`:  Minimum size at smallest viewport\n- `\u003cmax-size\u003epx`:  Maximum size at largest viewport\n- `\u003cmin-viewport\u003epx`:  Minimum viewport width\n- `\u003cmax-viewport\u003epx`:  Maximum viewport width\n\nOptions in `fluid-style()` will override options from postcss.config.mjs.\n\n\n## Examples\n\n### Basic Usage\n\n```js\n/* postcss.config.mjs */\npostcssFluidStyle()\n```\n\n```css\n/* style.css */\n\nh1 {\n  font-size: fluid-style(36px, 72px, 320px, 1240px);\n}\n\n/* Outputs ------------------------------------ */\nh1 {\n  font-size: clamp(2.25rem, 1.467rem + 3.913vw, 4.5rem);\n}\n```\n\n### Specifying breakpointUnit\n\nYou can configure the breakpointUnit within the `fluid-style()` call:\n\n```css\nhtml {\n  container-type: inline-size;\n}\n\nbody {\n  font-size: fluid-style(36px, 72px, 320px, 1240px, { breakpointUnit: 'cqi' });\n}\n\n/* Outputs ------------------------------------ */\nhtml {\n  container-type: inline-size;\n}\n\nbody {\n  font-size: clamp(2.25rem, 1.467rem + 3.913cqi, 4.5rem);\n}\n```\n\nAlternatively, you can specify it in your PostCSS config file:\n\n```js\n/* postcss.config.mjs */\npostcssFluidStyle({ breakpointUnit: 'cqi' }) // Default: 'vw'\n```\n\n```diff\nhtml {\n  container-type: inline-size;\n}\n\nbody {\n-  font-size: fluid-style(36px, 72px, 320px, 1240px, { breakpointUnit: 'cqi' });\n+  font-size: fluid-style(36px, 72px, 320px, 1240px);\n}\n\n/* Outputs ------------------------------------ */\nhtml {\n  container-type: inline-size;\n}\n\nbody {\n  font-size: clamp(2.25rem, 1.467rem + 3.913cqi, 4.5rem);\n}\n```\n\n### Specifying injectComment\n\nA comment showing the original pixel values will be inserted before/after the declaration.\nThis is useful if you want to preserve them at an intermediate processing stage,\nor for demonstration purposes.\n\n#### Before\n\n```js\npostcssFluidStyle({ injectComment: 'before' })\n```\n\n```css\nh1 {\n  font-size: fluid-style(36px, 72px, 320px, 1240px);\n}\n/* Outputs ------------------------------------ */\nh1 {\n  /* 1240px -\u003e 320px | Scale 72px -\u003e 36px */ font-size: clamp(1rem, 0.636rem + 1.818vw, 2rem);\n}\n```\n\n#### After\n\n```js\npostcssFluidStyle({ injectComment: 'after' })\n```\n\n```css\nh1 {\n  font-size: fluid-style(36px, 72px, 320px, 1240px);\n}\n/* Outputs ------------------------------------ */\nh1 {\n  font-size: clamp(1rem, 0.636rem + 1.818vw, 2rem);/* 1240px -\u003e 320px | Scale 72px -\u003e 36px */\n}\n```\n\n\n### Specifying ignoreWCAG\n\nSuppressing the WCAG check is useful when you are using fluid-style for sizing,\nsuch as `margin`, `border-width`, or `padding`.\n\n```css\n.wrapper {\n  --padding: fluid-style(36px, 148px, 320px, 1240px, { ignoreWCAG: true });\n}\n/* Outputs ------------------------------------ */\n.wrapper {\n  --padding: clamp(2.25rem, -0.185rem + 12.174vw, 9.25rem);\n}\n```\n\n### Specifying baseSize\n\nComputing px to rem is as follows: `36px / 16 = 2.25rem`\n\nWhere 16 is the base size.\nImplicitly,\nit's 16px because browsers set this value as the default font-size for the HTML document.\n\nThis plugin does not check for declarations in `html{}` or `:root{}`,\nyou'll have to add a `font-size` declaration there if you want to set a new base size.\n\n\u003e [!NOTE]\n\u003e This will override the user's browser settings and system preferences. \\\n\u003e Though the default is 16px, users **can** set a different font-size.\n\u003e\n\u003e Chromium Example, from `chrome://settings/appearance`:\n\u003e\n\u003e - 9px – Very Small\n\u003e - 12px – Small\n\u003e - 16px – Medium (Default)\n\u003e - 20px – Large\n\u003e - 24px – Very Large\n\n```js\npostcssFluidStyle({ baseSize: 10 }) // 36px / 10 = 3.6rem\n```\n\n```css\nhtml {\n  font-size: 10px;\n}\n\nh1 {\n  font-size: fluid-style(36px, 72px, 320px, 1240px);\n}\n\n/* Outputs ------------------------------------ */\nhtml {\n  font-size: 10px;\n}\n\nh1 {\n  font-size: clamp(3.6rem, 2.348rem + 3.913vw, 7.2rem);\n}\n```\n\n\n## Motivation\n\nI really like [fluid.style](https://fluid.style),\nbut I wanted some convenience in building a fluid type system directly from PostCSS, like so:\n\n```css\nbody {\n  --text-xs:   fluid-style(12px, 14px, 640px, 1240px);\n  --text-sm:   fluid-style(14px, 16px, 640px, 1240px);\n  --text-base: fluid-style(16px, 18px, 640px, 1240px);\n  --text-lg:   fluid-style(18px, 20px, 640px, 1240px);\n  --text-h1:   fluid-style(32px, 48px, 640px, 1240px);\n}\n\n/* Outputs ------------------------------------ */\nbody {\n  --text-xs:   clamp(0.75rem,  0.617rem + 0.333vw, 0.875rem);\n  --text-sm:   clamp(0.875rem, 0.742rem + 0.333vw, 1rem);\n  --text-base: clamp(1rem,     0.867rem + 0.333vw, 1.125rem);\n  --text-lg:   clamp(1.125rem, 0.992rem + 0.333vw, 1.25rem);\n  --text-h1:   clamp(2rem,     0.933rem + 2.667vw, 3rem);\n}\n```\n\n\n## Acknowledgements\n\nCredit goes to the following people for their prior work and research:\n\n- Maxwell Barvian: [Addressing Accessibility Concerns With Using Fluid Type]\n- Adrian Roselli: [Responsive Type and Zoom]\n- Accessibility Guidelines Working Group: [Success Criterion 1.4.4 Resize Text]\n- [csstools/postcss-plugins] for PostCSS plugin development patterns and practices\n\n[//]: # (Links)\n\n[PostCSS Fluid Style]: https://github.com/baraqkamsani/postcss-fluid-style\n[PostCSS]: https://github.com/postcss/postcss\n[barvian/fluid.style]: https://github.com/barvian/fluid.style\n[barvian/fluid-tailwind]: https://github.com/barvian/fluid-tailwind\n[Addressing Accessibility Concerns With Using Fluid Type]: https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/\n[Responsive Type and Zoom]: https://adrianroselli.com/2019/12/responsive-type-and-zoom.html\n[Success Criterion 1.4.4 Resize Text]: https://www.w3.org/TR/WCAG21/#resize-text\n[csstools/postcss-plugins]: https://github.com/csstools/postcss-plugins\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaraqkamsani%2Fpostcss-fluid-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaraqkamsani%2Fpostcss-fluid-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaraqkamsani%2Fpostcss-fluid-style/lists"}