{"id":19226463,"url":"https://github.com/jasonraimondi/postcss-custom-media-generator","last_synced_at":"2025-08-28T04:49:02.403Z","repository":{"id":65288548,"uuid":"589114691","full_name":"jasonraimondi/postcss-custom-media-generator","owner":"jasonraimondi","description":"Generates mobile first `@custom-media` rules from a configuration object.","archived":false,"fork":false,"pushed_at":"2023-01-18T03:08:53.000Z","size":179,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-03T01:34:50.242Z","etag":null,"topics":["custom-media","mobile-first","mobile-first-css","postcss","postcss-custom-media","postcss-custom-media-generator","postcss-plugin"],"latest_commit_sha":null,"homepage":"","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/jasonraimondi.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":"2023-01-15T05:05:37.000Z","updated_at":"2025-03-05T12:28:10.000Z","dependencies_parsed_at":"2023-02-10T13:00:26.350Z","dependency_job_id":null,"html_url":"https://github.com/jasonraimondi/postcss-custom-media-generator","commit_stats":null,"previous_names":["allmyfutures/postcss-custom-media-generator"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jasonraimondi/postcss-custom-media-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonraimondi%2Fpostcss-custom-media-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonraimondi%2Fpostcss-custom-media-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonraimondi%2Fpostcss-custom-media-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonraimondi%2Fpostcss-custom-media-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasonraimondi","download_url":"https://codeload.github.com/jasonraimondi/postcss-custom-media-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonraimondi%2Fpostcss-custom-media-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272440393,"owners_count":24935426,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["custom-media","mobile-first","mobile-first-css","postcss","postcss-custom-media","postcss-custom-media-generator","postcss-plugin"],"created_at":"2024-11-09T15:18:52.298Z","updated_at":"2025-08-28T04:49:02.381Z","avatar_url":"https://github.com/jasonraimondi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-custom-media-generator\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/allmyfutures/postcss-custom-media-generator/test.yml?branch=main\u0026label=Unit%20Tests\u0026style=flat-square)](https://github.com/allmyfutures/postcss-custom-media-generator)\n[![Test Coverage](https://img.shields.io/codeclimate/coverage/allmyfutures/postcss-custom-media-generator?style=flat-square)](https://codeclimate.com/github/allmyfutures/postcss-custom-media-generator/test_coverage)\n[![GitHub package.json version](https://img.shields.io/github/package-json/v/allmyfutures/postcss-custom-media-generator?style=flat-square)](https://github.com/allmyfutures/postcss-custom-media-generator/releases/latest)\n[![NPM Downloads](https://img.shields.io/npm/dt/postcss-custom-media-generator?label=npm%20downloads\u0026style=flat-square)](https://www.npmjs.com/package/postcss-custom-media-generator)\n\nGenerates mobile first `@custom-media` rules from a configuration object.\n\n## Install\n\n```shell\npnpm add -D postcss-custom-media-generator\n```\n\nThis plugin depends on further processing using one of the following methods:\n\n- If you use [postcss-preset-env], just make sure this plugin is loaded before postcss-preset-env, and you should be good to go.\n- [postcss-custom-media] and [postcss-media-minmax].\n\n## Usage\n\n**Note: This plugin should be run first in your PostCSS pipeline.**\n\nPass in a configuration of desired global media queries.\n\nYou can pass in a key of any arbitrary string, and a value of either a string or a number.\n\n- Strings should be valid CSS media queries\n- Numbers will be turned into mobile-first queries.\n\n```js\nmodule.exports = {\n  plugins: {\n    \"postcss-custom-media-generator\": {\n      // you can pass in any arbitrary key, and any valid CSS media query value\n      \"--light\": \"prefers-color-scheme: light\",\n      \"--dark\": \"prefers-color-scheme: dark\",\n      sm: 600,\n      md: 800,\n      lg: 1000\n    },\n    \"postcss-preset-env\": {},\n  }\n};\n```\n\nBecomes:\n\n```postcss\n@custom-media --light (prefers-color-scheme: light);\n@custom-media --dark (prefers-color-scheme: dark);\n@custom-media --sm-only (600px \u003c= width \u003c 800px);\n@custom-media --sm (600px \u003c= width);\n@custom-media --md-only (800px \u003c= width \u003c 1000px);\n@custom-media --md (800px \u003c= width);\n@custom-media --lg (1000px \u003c= width);\n```\n\nWrite your css like this:\n\n```postcss\n@media (--md) {\n  /* styles for medium viewport */\n}\n\n/* becomes */\n\n@media (min-width: 800px) {\n  /* styles for medium viewport */\n}\n```\n\n[postcss-media-minmax]: https://github.com/postcss/postcss-media-minmax\n[postcss-custom-media]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media\n[postcss-preset-env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonraimondi%2Fpostcss-custom-media-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonraimondi%2Fpostcss-custom-media-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonraimondi%2Fpostcss-custom-media-generator/lists"}