{"id":23744958,"url":"https://github.com/wheeyls/postcss-only-directive","last_synced_at":"2025-07-15T12:42:12.742Z","repository":{"id":46925793,"uuid":"200310887","full_name":"wheeyls/postcss-only-directive","owner":"wheeyls","description":"Split CSS rules up into separate files","archived":false,"fork":false,"pushed_at":"2023-01-04T06:12:00.000Z","size":1042,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-01T02:56:59.250Z","etag":null,"topics":[],"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/wheeyls.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}},"created_at":"2019-08-02T23:52:09.000Z","updated_at":"2019-08-04T15:47:01.000Z","dependencies_parsed_at":"2023-02-02T00:31:54.992Z","dependency_job_id":null,"html_url":"https://github.com/wheeyls/postcss-only-directive","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/wheeyls/postcss-only-directive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Fpostcss-only-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Fpostcss-only-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Fpostcss-only-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Fpostcss-only-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wheeyls","download_url":"https://codeload.github.com/wheeyls/postcss-only-directive/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Fpostcss-only-directive/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437192,"owners_count":23765118,"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":[],"created_at":"2024-12-31T12:51:23.977Z","updated_at":"2025-07-15T12:42:12.689Z","avatar_url":"https://github.com/wheeyls.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Only Directive [![Build Status][ci-img]][ci]\n\nThis plugin is designed to help you write CSS for a component in one file, and then split the rules up into separate files based on your needs.\n\nA simple use case would be for creating separate IE stylesheets. Another good use case would be splitting up rules by\nmedia query.\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/wheeyls/postcss-only-directive.svg\n[ci]:      https://travis-ci.org/wheeyls/postcss-only-directive\n\n## Directive Syntax - Example\n\nWe start with a file that has been marked up with `@only` directives:\n\n```css\n/* _component.scss */\n\n.button {\n  background: blue;\n  @only(ie) { content: 'ie only'; }\n}\n\n@only(medium) {\n  @media(min-width: 500px) {\n    .button { background: green; }\n  }\n}\n\n@only(large) {\n  @media(min-width: 900px) {\n    .button { background: red; }\n  }\n}\n```\n\nThen we call the `@onlyRender` directive at the top of each file to specify what should be included.\n\n\n#### By name\n```css\n/* ie.scss */\n@onlyRender(ie);\n@import 'component'; // inlines the css\n```\n```css\n/* ie.css */\n.button { content: 'ie only'; }\n```\n\n#### Multiple names\n```css\n/* medium-and-up.scss */\n@onlyRender(medium, large);\n@import 'component'; // inlines the css\n```\n```css\n/* medium-and-up.css */\n@media(min-width: 500px) {\n  .button { background: green; }\n}\n\n@media(min-width: 900px) {\n  .button { background: red; }\n}\n```\n\n#### :root\n```css\n/* small.scss */\n@onlyRender(:root);\n@import 'component'; // inlines the css\n```\n```css\n/* small.css */\n.button { background: blue; }\n```\n\n#### :all\n```css\n/* app.scss */\n@onlyRender(:all);\n@import 'component'; // inlines the css\n```\n```css\n/* app.css */\n.button {\n  background: blue;\n  content: 'ie only';\n}\n\n@media(min-width: 500px) {\n  .button { background: green; }\n}\n\n@media(min-width: 900px) {\n  .button { background: red; }\n}\n```\n\n## Config\n\n```js\npostcss([ require('postcss-only-directive')({ whitelist: [] }) ])\n```\n\nSee [PostCSS] docs for examples for your environment.\n\n### Whitelist\n\nThe `whitelist` is a list of strings specifying which `@only` directives will be supported. Any rules not in a\nwhitelist will be rolled into `:root` by default.\n\n#### Example\n\nSuppose I'm splitting a file out for IE:\n\n```css\n/* button.css */\n.button { background: blue; }\n@only(ie11) { .button { background: green; } }\n\n/* main.css */\n@onlyRender(:root);\n@import 'button';\n```\n\n```\n/* ie11.css */\n@onlyRender(ie11);\n@import 'button';\n```\n\nNow pretend that someone comes along later and adds an `@only(ie10)` rule - not realizing that no one has created a\nmatching call to `@onlyRender(ie10)`. Their rules will be removed from our stylesheets silently!\n\nThe whitelist is here to save us from that. Any rules that aren't in the whitelist will be automatically rolled up into\nthe special `:root` keyword, avoiding lossy changes.\n\n## Motivation and inspiration\n\nThere has been a lot of talk about ways to accomplish this over on the sass project on github. There was a lot of\ndiscussion on https://github.com/sass/sass/issues/241, and then @meefox proposed the `@only` directive in\nhttps://github.com/sass/sass/issues/1187.\n\nThere are some other postcss plugins that do similar things:\n\n* https://www.npmjs.com/package/postcss-extract-media-query\n* https://www.npmjs.com/package/postcss-critical-split\n\nThese generally didn't fit my needs because they emit files outside of the normal build pipeline.  These files have to\nbe manually minified, gzipped, digested / etc.\n\nComplicating my pipeline like that wasn't an option for me, so I chose this approach. The tradeoff is that you must\nspecify the files ahead of time. Other media-query splitters can dynamically generate files based on the CSS itself -\nthis plugin does not give you that option.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheeyls%2Fpostcss-only-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwheeyls%2Fpostcss-only-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheeyls%2Fpostcss-only-directive/lists"}