{"id":27892763,"url":"https://github.com/ryo-manba/stylelint-plugin-use-baseline","last_synced_at":"2026-04-02T14:54:40.000Z","repository":{"id":282428063,"uuid":"939983729","full_name":"ryo-manba/stylelint-plugin-use-baseline","owner":"ryo-manba","description":"A Stylelint plugin that enforces Baseline CSS features.","archived":false,"fork":false,"pushed_at":"2026-03-16T21:56:57.000Z","size":374,"stargazers_count":27,"open_issues_count":4,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-17T08:32:55.274Z","etag":null,"topics":["baseline","css","linter","stylelint","stylelint-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/stylelint-plugin-use-baseline","language":"JavaScript","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/ryo-manba.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"notice":"NOTICE.txt","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"ryo-manba"}},"created_at":"2025-02-27T12:32:22.000Z","updated_at":"2026-03-09T13:20:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f5ff7c1-42b2-41e1-bfd4-921c6b54151b","html_url":"https://github.com/ryo-manba/stylelint-plugin-use-baseline","commit_stats":null,"previous_names":["ryo-manba/stylelint-plugin-require-baseline"],"tags_count":45,"template":false,"template_full_name":null,"purl":"pkg:github/ryo-manba/stylelint-plugin-use-baseline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryo-manba%2Fstylelint-plugin-use-baseline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryo-manba%2Fstylelint-plugin-use-baseline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryo-manba%2Fstylelint-plugin-use-baseline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryo-manba%2Fstylelint-plugin-use-baseline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryo-manba","download_url":"https://codeload.github.com/ryo-manba/stylelint-plugin-use-baseline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryo-manba%2Fstylelint-plugin-use-baseline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31308448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["baseline","css","linter","stylelint","stylelint-plugin"],"created_at":"2025-05-05T13:32:39.360Z","updated_at":"2026-04-02T14:54:39.993Z","avatar_url":"https://github.com/ryo-manba.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryo-manba"],"categories":[],"sub_categories":[],"readme":"# stylelint-plugin-use-baseline\n\n[![npm version][npm-version-img]][npm] [![npm downloads last month][npm-downloads-img]][npm]\n\nDisallow CSS features not in [Baseline](https://web.dev/baseline).\n\n![Example output](https://github.com/user-attachments/assets/42906e27-aba1-473c-bf63-461620870662)\n\n## Installation\n\n```shell\nnpm install stylelint-plugin-use-baseline --save-dev\n```\n\n\u003e Note: stylelint is a peer dependency, so you need to install it as well.\n\n## Usage\n\n1. Create or update your Stylelint configuration file, for example `stylelint.config.js`.\n2. Add `\"stylelint-plugin-use-baseline\"` to the `plugins` array.\n3. Enable the rule by adding `\"plugin/use-baseline\"` to your `rules`.\n\nThis is a good rule to use with \"warning\"-level severity, because its primary purpose is help you [narrow down the features that you'll need to use with more care](https://github.com/web-platform-dx/web-features/issues/2758#issuecomment-2712607492).\n\nA minimal `stylelint.config.js` might look like this:\n\n```js\n/** @type {import(\"stylelint\").Config} */\nexport default {\n  plugins: [\"stylelint-plugin-use-baseline\"],\n  rules: {\n    \"plugin/use-baseline\": [\n      true,\n      {\n        severity: \"warning\",\n      },\n    ],\n  },\n};\n```\n\nRun Stylelint in your project (e.g., `npx stylelint \"**/*.css\"`).\n\n## Rule Details\n\nThis rule reports the following cases:\n\n- CSS properties not in Baseline, unless enclosed in a `@supports` block.\n- At-rules that aren't widely available.\n- Media conditions inside `@media` that aren't widely available.\n- CSS property values that aren't widely available or aren't enclosed in a `@supports` block (currently limited to identifiers only).\n- CSS functions that aren't widely available.\n- CSS units that aren't widely available (e.g., `svh`, `dvh`, `lvh`, `cqw`).\n- CSS pseudo-elements and pseudo-classes that aren't widely available.\n- Unnecessary `@supports` blocks when all checked features are already available at the configured baseline level.\n\nThe data is sourced from [`web-features`](https://npmjs.com/package/web-features).\n\n**Note:** Although `cursor` is not yet labeled as Baseline, it has broad support. By default, **this plugin does not flag `cursor`** because it is [expected to be added to Baseline soon](https://github.com/web-platform-dx/web-features/issues/1038).\n\n## Options\n\n### `true`\n\n```json\n{\n  \"plugin/use-baseline\": true\n}\n```\n\nThe following patterns are considered problems:\n\n```css\n/* accent-color is not widely available */\na {\n  accent-color: red;\n}\n```\n\n```css\n/* abs() is not widely available */\n.box {\n  width: abs(20% - 100px);\n}\n```\n\n```css\n/* :has() is not widely available */\nh1:has(+ h2) {\n  margin: 0;\n}\n```\n\n```css\n/* property value doesn't match @supports indicator */\n@supports (accent-color: auto) {\n  a {\n    accent-color: abs(20% - 10px);\n  }\n}\n```\n\n```css\n/* device-posture is not widely available */\n@media (device-posture: folded) {\n  a {\n    color: red;\n  }\n}\n```\n\n```css\n/* unnecessary @supports - display property and flex value are both widely available */\n@supports (display: flex) {\n  .container {\n    display: flex;\n  }\n}\n```\n\n```css\n/* unnecessary @supports - :hover selector is widely available */\n@supports selector(:hover) {\n  a:hover {\n    color: red;\n  }\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\n/* using @supports for accent-color */\n@supports (accent-color: auto) {\n  a {\n    accent-color: auto;\n  }\n}\n```\n\n```css\n/* @supports indicates limited availability */\n@supports selector(:has()) {\n  h1:has(+ h2) {\n    margin: 0;\n  }\n}\n```\n\n```css\n/* widely supported properties */\na {\n  color: red;\n  background-color: blue;\n  transition: none;\n}\n```\n\n## Optional secondary options\n\n### `available`\n\nSpecify which level of Baseline availability to enforce.\n\n- `\"widely\"` (default) – Allows features supported in all Baseline browsers for at least 30 months.\n- `\"newly\"` – Allows features supported in all Baseline browsers for less than 30 months. Limited availability features still trigger warnings.\n- `YYYY` – Allows features that became Baseline newly available that year, or earlier. For example, `2023`.\n\n#### `\"widely\"` (default)\n\nAllows features supported in all Baseline browsers for at least 30 months.\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"available\": \"widely\" }]\n}\n```\n\n#### `\"newly\"`\n\nAllows features supported in all Baseline browsers for less than 30 months. Limited availability features still trigger warnings.\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"available\": \"newly\" }]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\nh1:has(+ h2) {\n  margin: 0;\n}\n```\n\n#### `YYYY`\n\nAllows features that became Baseline newly available that year, or earlier. For example, `2023`.\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"available\": 2023 }]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\ndiv {\n  @starting-style {\n    opacity: 0;\n  }\n}\n```\n\n### `ignoreSelectors`\n\n```json\n{ \"ignoreSelectors\": [\"array\", \"of\", \"selectors\", \"/regex/\"] }\n```\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"ignoreSelectors\": [\"nesting\", \"/^has/\"] }]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\na {\n  img {\n    width: 100%;\n  }\n}\n```\n\n```css\nh1:has(+ h2) {\n  margin: 0;\n}\n```\n\n```css\nh1:has-slotted {\n  color: red;\n}\n```\n\n### `ignoreProperties`\n\n```json\n{\n  \"ignoreProperties\": { \"property-name\": [\"array\", \"of\", \"values\", \"/regex/\"] }\n}\n```\n\nIgnore the specified property and value pairs. Keys in the object indicate property names.\n\n- Empty array `[]`: Skip property baseline check only (values are still checked)\n- Array with values: Ignore only those specific values\n- Use `/^.+$/` to ignore all values\n\nYou can specify a regex for a property name, such as `{ \"/^animation-/\": [] }`.\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [\n    true,\n    {\n      \"ignoreProperties\": {\n        \"accent-color\": [],\n        \"user-select\": [\"none\", \"auto\"],\n        \"/^animation-/\": [],\n        \"clip-path\": [\"/^fill-/\"],\n        \"backdrop-filter\": [\"/^.+$/\"]\n      }\n    }\n  ]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\na {\n  accent-color: red;\n}\n```\n\n```css\na {\n  user-select: none;\n}\n```\n\n```css\na {\n  animation-timing-function: linear;\n}\n```\n\n```css\na {\n  clip-path: fill-box;\n}\n```\n\n```css\na {\n  backdrop-filter: blur(10px);\n}\n```\n\n### `ignoreAtRules`\n\n```json\n{ \"ignoreAtRules\": [\"array\", \"of\", \"at-rules\", \"/regex/\"] }\n```\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [\n    true,\n    { \"ignoreAtRules\": [\"view-transition\", \"/^font-/\"] }\n  ]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\n@view-transition {\n  navigation: auto;\n}\n```\n\n```css\n@font-feature-values Font One {\n  @styleset {\n    nice-style: 12;\n  }\n}\n```\n\n```css\n@font-palette-values --foo {\n  font-family: Bixa;\n  override-colors:\n    0 red,\n    1 blue;\n}\n```\n\n### `ignoreFunctions`\n\n```json\n{ \"ignoreFunctions\": [\"array\", \"of\", \"functions\", \"/regex/\"] }\n```\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"ignoreFunctions\": [\"oklch\", \"/^light-/\"] }]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\na {\n  color: oklch(0.5 0.2 120);\n}\n```\n\n```css\na {\n  color: light-dark(black, white);\n}\n```\n\n### `ignoreUnits`\n\n```json\n{ \"ignoreUnits\": [\"array\", \"of\", \"units\", \"/regex/\"] }\n```\n\nGiven:\n\n```json\n{\n  \"plugin/use-baseline\": [true, { \"available\": 2021, \"ignoreUnits\": [\"svh\", \"/^dv/\"] }]\n}\n```\n\nThe following patterns are _not_ considered problems:\n\n```css\na {\n  height: 100svh;\n}\n```\n\n```css\na {\n  height: 100dvh;\n}\n```\n\n## Prior art\n\n[eslint/css use-baseline](https://github.com/eslint/css/blob/main/docs/rules/use-baseline.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://www.npmjs.com/package/stylelint-plugin-use-baseline\n[npm-version-img]: https://img.shields.io/npm/v/stylelint-plugin-use-baseline.svg\n[npm-downloads-img]: https://img.shields.io/npm/dm/stylelint-plugin-use-baseline.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryo-manba%2Fstylelint-plugin-use-baseline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryo-manba%2Fstylelint-plugin-use-baseline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryo-manba%2Fstylelint-plugin-use-baseline/lists"}