{"id":39701010,"url":"https://github.com/soluml/at-rule-packer","last_synced_at":"2026-01-18T10:24:33.144Z","repository":{"id":57185974,"uuid":"408607419","full_name":"soluml/at-rule-packer","owner":"soluml","description":"Merge media queries (@media), @supports, and other duplicate At-rules together under a single block.","archived":false,"fork":false,"pushed_at":"2025-08-25T16:09:48.000Z","size":1443,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-25T18:12:09.412Z","etag":null,"topics":["at-rule","css","mediaqueries","mediaquery","postcss","postcss-plugin","postcss-plugins"],"latest_commit_sha":null,"homepage":"","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/soluml.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-20T21:36:22.000Z","updated_at":"2025-08-25T16:09:51.000Z","dependencies_parsed_at":"2025-06-18T22:19:28.434Z","dependency_job_id":"78589bb1-d9a6-4b69-98bf-08615d6ef39c","html_url":"https://github.com/soluml/at-rule-packer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/soluml/at-rule-packer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soluml%2Fat-rule-packer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soluml%2Fat-rule-packer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soluml%2Fat-rule-packer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soluml%2Fat-rule-packer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soluml","download_url":"https://codeload.github.com/soluml/at-rule-packer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soluml%2Fat-rule-packer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28534339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T10:13:46.436Z","status":"ssl_error","status_checked_at":"2026-01-18T10:13:11.045Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["at-rule","css","mediaqueries","mediaquery","postcss","postcss-plugin","postcss-plugins"],"created_at":"2026-01-18T10:24:28.933Z","updated_at":"2026-01-18T10:24:33.132Z","avatar_url":"https://github.com/soluml.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# At-rule Packer\n\nA tool to Merge duplicate CSS media query and other At-rule rules together. Supports any At-rule that [PostCSS](https://postcss.org/) can handle including: `@media`, `@container`, `@supports`, and even newer at-rule's such as `@view-transition`, `@starting-style`, and `@scope`! If PostCSS supports the At-rule, so should this tool.\n\nIt should be noted that this tool does _NOT_ apply to natively nested at-rules. To get the most out of this plugin, you should leverage the the [postcss-nesting](https://www.npmjs.com/package/postcss-nesting) PostCSS plugin or be using a preprocessor like [Sass](https://sass-lang.com/).\n\n```\nnpm install -D at-rule-packer\n```\n\n[![npm version](https://badge.fury.io/js/at-rule-packer.svg)](http://badge.fury.io/js/at-rule-packer)\n[![Build Status](https://travis-ci.org/soluml/at-rule-packer.svg?branch=master)](https://travis-ci.org/soluml/at-rule-packer)\n\nBy default, this package exports the PostCSS plugin. The standalone tool can be found under `dist/tool`.\n\n## SYNOPSIS\n\nWith CSS Preprocessors, it's very common to nest media queries. It keeps related styles contextual for future developers:\n\n```scss\n.hello {\n  color: black;\n\n  @media (prefers-color-scheme: dark) {\n    color: white;\n  }\n}\n\n.world {\n  color: #111;\n\n  @media (prefers-color-scheme: dark) {\n    color: #efefef;\n  }\n}\n```\n\nHowever, this can result in inefficient CSS for the browser:\n\n```css\n.hello {\n  color: black;\n}\n@media (prefers-color-scheme: dark) {\n  .hello {\n    color: white;\n  }\n}\n\n.world {\n  color: #111;\n}\n@media (prefers-color-scheme: dark) {\n  .world {\n    color: #efefef;\n  }\n}\n```\n\nThe goal of this tool is the help eliminate these efficiencies when possible by changing the cascade and merging all duplicate At-rule's into the last At-rule block.\n\n```css\n.hello {\n  color: black;\n}\n\n.world {\n  color: #111;\n}\n\n@media (prefers-color-scheme: dark) {\n  .hello {\n    color: white;\n  }\n\n  .world {\n    color: #efefef;\n  }\n}\n```\n\nHowever, this is _NOT_ a safe optimization and can result in CSS that works differently than intended:\n\n### source\n\n```html\n\u003cdiv class=\"mydiv font-size--medium\"\u003eHello World\u003c/div\u003e\n```\n\n```css\n.mydiv {\n  color: blue;\n  font-size: 1em;\n  font-weight: bold;\n}\n\n@media (min-width: 64em) {\n  .mydiv {\n    font-size: 1.25em;\n  }\n}\n\n/* Utilities */\n.font-size--medium {\n  font-size: 1em;\n}\n\n.aspect-ratio--video {\n  aspect-ratio: 16 / 9;\n}\n\n@media (min-width: 64em) {\n  .aspect-ratio--video {\n    aspect-ratio: 4 / 3;\n  }\n}\n```\n\n### result\n\n```css\n.mydiv {\n  color: blue;\n  font-size: 1em;\n  font-weight: bold;\n}\n\n/* Utilities */\n.font-size--medium {\n  font-size: 1em;\n}\n\n.aspect-ratio--video {\n  aspect-ratio: 16/9;\n}\n\n@media (min-width: 64em) {\n  .mydiv {\n    font-size: 1.25em;\n  }\n  .aspect-ratio--video {\n    aspect-ratio: 4/3;\n  }\n}\n```\n\nTherefore, it's important to ensure that this tool is used in CSS architectures that manage the cascade in a way that it doesn't matter where the rules end up in the stylesheet. It's also recommended that if you're going to use this tool, you do so early in development so that you can catch errors such as the above during development.\n\n## USAGE\n\n### As a PostCSS Plugin\n\nThe default export for this package is the PostCSS plugin. There are no configuration options so it can be used simply like so:\n\n```js\npostcss([require('at-rule-packer')({})]);\n```\n\n### As standard Node.js package\n\nThis package is a Node.js module. It takes in a single string (that should be a valid CSS string) and returns a css process css string minified and with comments removed:\n\n```javascript\nconst atp = require('at-rule-packer/dist/tool');\n\n// @supports not (display:grid){main{float:right}.grid{display:flex}}\nconsole.log(\n  atp(`\n    @supports not (display: grid) {\n      main {\n        float: right;\n      }\n    }\n\n    @supports not (display: grid) {\n      .grid {\n        display: flex;\n      }\n    }\n  `)\n);\n```\n\n## NOTES\n\nA few considerations when determining whether or not you want to use this tool:\n\n### CSS Cascading Order\n\nAs noted above, this tool will change the CSS Cascade Order! Vulnerable CSS architectures should **NOT** use this tool.\n\n### Source Maps\n\nAs nodes are moving and shuffling around, Source Maps may not always be 100% accurate.\n\n### Native CSS Nesting\n\nSince the initial release of this tool, the Web Platform has introduced native [CSS Nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting). This plugin does not identify duplicated at-rules within nested rules.\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoluml%2Fat-rule-packer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoluml%2Fat-rule-packer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoluml%2Fat-rule-packer/lists"}