{"id":13563822,"url":"https://github.com/csstools/postcss-custom-media","last_synced_at":"2025-04-03T20:31:46.741Z","repository":{"id":19139145,"uuid":"22369158","full_name":"csstools/postcss-custom-media","owner":"csstools","description":"Use Custom Media Queries in CSS, following the CSS Media Queries specification","archived":true,"fork":false,"pushed_at":"2022-06-06T06:37:15.000Z","size":277,"stargazers_count":436,"open_issues_count":0,"forks_count":26,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-14T05:31:40.975Z","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/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-29T05:51:21.000Z","updated_at":"2024-03-27T19:11:06.000Z","dependencies_parsed_at":"2022-07-14T18:30:43.218Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-custom-media","commit_stats":null,"previous_names":["postcss/postcss-custom-media"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-custom-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246436333,"owners_count":20776987,"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-08-01T13:01:23.620Z","updated_at":"2025-04-03T20:31:46.719Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e⚠️ PostCSS Custom Media was moved to \u003ca href=\"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media\"\u003e@csstools/postcss-plugins\u003c/a\u003e. ⚠️ \u003cbr\u003e\n\u003ca href=\"https://github.com/csstools/postcss-plugins/discussions/75\"\u003eRead the announcement\u003c/a\u003e\u003c/div\u003e\n\n# PostCSS Custom Media [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![CSS Standard Status][css-img]][css-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Custom Media] lets you use Custom Media Queries in CSS, following the\n[CSS Media Queries] specification.\n\n```pcss\n@custom-media --small-viewport (max-width: 30em);\n\n@media (--small-viewport) {\n  /* styles for small viewport */\n}\n\n/* becomes */\n\n@media (max-width: 30em) {\n  /* styles for small viewport */\n}\n```\n\n## Usage\n\nAdd [PostCSS Custom Media] to your project:\n\n```bash\nnpm install postcss-custom-media --save-dev\n```\n\nUse [PostCSS Custom Media] to process your CSS:\n\n```js\nconst postcssCustomMedia = require('postcss-custom-media');\n\npostcssCustomMedia.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssCustomMedia = require('postcss-custom-media');\n\npostcss([\n  postcssCustomMedia(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Custom Media] runs in all Node environments, with special instructions for:\n\n| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether custom media and atrules using custom\nmedia should be preserved in their original form.\n\n```pcss\n@custom-media --small-viewport (max-width: 30em);\n\n@media (--small-viewport) {\n  /* styles for small viewport */\n}\n\n/* becomes */\n\n@custom-media --small-viewport (max-width: 30em);\n\n@media (max-width: 30em) {\n  /* styles for small viewport */\n}\n\n@media (--small-viewport) {\n  /* styles for small viewport */\n}\n```\n\n### importFrom\n\nThe `importFrom` option specifies sources where custom media can be imported\nfrom, which might be CSS, JS, and JSON files, functions, and directly passed\nobjects.\n\n```js\npostcssCustomMedia({\n  importFrom: 'path/to/file.css' // =\u003e @custom-selector --small-viewport (max-width: 30em);\n});\n```\n\n```pcss\n@media (max-width: 30em) {\n  /* styles for small viewport */\n}\n\n@media (--small-viewport) {\n  /* styles for small viewport */\n}\n```\n\nMultiple sources can be passed into this option, and they will be parsed in the\norder they are received. JavaScript files, JSON files, functions, and objects\nwill need to namespace custom media using the `customMedia` or\n`custom-media` key.\n\n```js\npostcssCustomMedia({\n  importFrom: [\n    'path/to/file.css',\n    'and/then/this.js',\n    'and/then/that.json',\n    {\n      customMedia: { '--small-viewport': '(max-width: 30em)' }\n    },\n    () =\u003e {\n      const customMedia = { '--small-viewport': '(max-width: 30em)' };\n\n      return { customMedia };\n    }\n  ]\n});\n```\n\n### exportTo\n\nThe `exportTo` option specifies destinations where custom media can be exported\nto, which might be CSS, JS, and JSON files, functions, and directly passed\nobjects.\n\n```js\npostcssCustomMedia({\n  exportTo: 'path/to/file.css' // @custom-media --small-viewport (max-width: 30em);\n});\n```\n\nMultiple destinations can be passed into this option, and they will be parsed\nin the order they are received. JavaScript files, JSON files, and objects will\nneed to namespace custom media using the `customMedia` or\n`custom-media` key.\n\n```js\nconst cachedObject = { customMedia: {} };\n\npostcssCustomMedia({\n  exportTo: [\n    'path/to/file.css',   // @custom-media --small-viewport (max-width: 30em);\n    'and/then/this.js',   // module.exports = { customMedia: { '--small-viewport': '(max-width: 30em)' } }\n    'and/then/this.mjs',  // export const customMedia = { '--small-viewport': '(max-width: 30em)' } }\n    'and/then/that.json', // { \"custom-media\": { \"--small-viewport\": \"(max-width: 30em)\" } }\n    cachedObject,\n    customMedia =\u003e {\n      customMedia    // { '--small-viewport': '(max-width: 30em)' }\n    }\n  ]\n});\n```\n\nSee example exports written to [CSS](test/export-media.css),\n[JS](test/export-media.js), [MJS](test/export-media.mjs), and\n[JSON](test/export-media.json).\n\n[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-media/master.svg\n[cli-url]: https://travis-ci.org/postcss/postcss-custom-media\n[css-img]: https://cssdb.org/badge/custom-media-queries.svg\n[css-url]: https://cssdb.org/#custom-media-queries\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-custom-media.svg\n[npm-url]: https://www.npmjs.com/package/postcss-custom-media\n\n[CSS Media Queries]: https://drafts.csswg.org/mediaqueries-5/#custom-mq\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Custom Media]: https://github.com/postcss/postcss-custom-media\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-custom-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-custom-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-custom-media/lists"}