{"id":13451414,"url":"https://github.com/csstools/postcss-preset-env","last_synced_at":"2025-03-23T18:32:24.670Z","repository":{"id":43941663,"uuid":"105912444","full_name":"csstools/postcss-preset-env","owner":"csstools","description":"Convert modern CSS into something browsers understand","archived":true,"fork":false,"pushed_at":"2023-10-24T11:39:23.000Z","size":1247,"stargazers_count":2218,"open_issues_count":0,"forks_count":90,"subscribers_count":31,"default_branch":"main","last_synced_at":"2025-03-20T03:48:32.790Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","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,"governance":null}},"created_at":"2017-10-05T16:16:46.000Z","updated_at":"2025-03-13T11:01:20.000Z","dependencies_parsed_at":"2023-11-08T08:59:21.513Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-preset-env","commit_stats":{"total_commits":106,"total_committers":23,"mean_commits":4.608695652173913,"dds":"0.33018867924528306","last_synced_commit":"58856f07d1cd5b3796f019028bdacaf24ac5a570"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-preset-env","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-preset-env/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-preset-env/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-preset-env/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-preset-env/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244666583,"owners_count":20490287,"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-07-31T07:00:53.475Z","updated_at":"2025-03-23T18:32:19.653Z","avatar_url":"https://github.com/csstools.png","language":"CSS","readme":"\u003cdiv align=\"center\"\u003e⚠️ PostCSS Preset Env was moved to \u003ca href=\"https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env\"\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 Preset Env [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/postcss-preset-env.svg\" height=\"20\"\u003e][npm-url]\n[\u003cimg alt=\"build status\" src=\"https://github.com/csstools/postcss-preset-env/workflows/test/badge.svg\" height=\"20\"\u003e][cli-url]\n[\u003cimg alt=\"support chat\" src=\"https://img.shields.io/badge/support-chat-blue.svg\" height=\"20\"\u003e][git-url]\n\n[PostCSS Preset Env] lets you convert modern CSS into something most browsers\ncan understand, determining the polyfills you need based on your targeted\nbrowsers or runtime environments.\n\n```bash\nnpm install postcss-preset-env\n```\n\n```pcss\n@custom-media --viewport-medium (width \u003c= 50rem);\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\n:root {\n  --mainColor: #12345678;\n}\n\nbody {\n  color: var(--mainColor);\n  font-family: system-ui;\n  overflow-wrap: break-word;\n}\n\n:--heading {\n  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);\n\n  @media (--viewport-medium) {\n    margin-block: 0;\n  }\n}\n\na {\n  color: rgb(0 0 100% / 90%);\n\n  \u0026:hover {\n    color: rebeccapurple;\n  }\n}\n\n/* becomes */\n\n:root {\n  --mainColor: rgba(18, 52, 86, 0.47059);\n}\n\nbody {\n  color: rgba(18, 52, 86, 0.47059);\n  color: var(--mainColor);\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;\n  word-wrap: break-word;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  background-image: url(img/heading.png);\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  h1, h2, h3, h4, h5, h6 {\n    background-image: url(img/heading@2x.png)\n  }\n}\n\n@media (max-width: 50rem) {\n  h1, h2, h3, h4, h5, h6 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\na {\n  color: rgba(0, 0, 255, 0.9)\n}\n\na:hover {\n  color: #639;\n}\n```\n\nWithout any configuration options, [PostCSS Preset Env] enables **Stage 2**\nfeatures and supports **all** browsers.\n\n[![Transform with Preset Env][readme-transform-with-preset-env-img]][readme-transform-with-preset-env-url]\n[![Style with Preset Env][readme-style-with-preset-env-img]][readme-style-with-preset-env-url]\n\n## Usage\n\nAdd [PostCSS Preset Env] to your project:\n\n```bash\nnpm install postcss-preset-env --save-dev\n```\n\nUse [PostCSS Preset Env] to process your CSS:\n\n```js\nconst postcssPresetEnv = require('postcss-preset-env');\n\npostcssPresetEnv.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssPresetEnv = require('postcss-preset-env');\n\npostcss([\n  postcssPresetEnv(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Preset Env] 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) | [Rollup](INSTALL.md#rollup) |\n| --- | --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### stage\n\nThe `stage` option determines which CSS features to polyfill, based upon their\nstability in the process of becoming implemented web standards.\n\n```js\npostcssPresetEnv({ stage: 0 })\n```\n\nThe `stage` can be `0` (experimental) through `4` (stable), or `false`. Setting\n`stage` to `false` will disable every polyfill. Doing this would only be useful\nif you intended to exclusively use the [`features`](#features) option.\n\nWithout any configuration options, [PostCSS Preset Env] enables **Stage 2**\nfeatures.\n\n### features\n\nThe `features` option enables or disables specific polyfills by ID. Passing\n`true` to a specific feature ID will enable its polyfill, while passing `false`\nwill disable it. [List of IDs](https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L36)\n\n```js\npostcssPresetEnv({\n  /* use stage 3 features + css nesting rules */\n  stage: 3,\n  features: {\n    'nesting-rules': true\n  }\n})\n```\n\nPassing an object to a specific feature ID will both enable and configure it.\n\n```js\npostcssPresetEnv({\n  /* use stage 3 features + css color-mod (warning on unresolved) */\n  stage: 3,\n  features: {\n    'color-mod-function': { unresolved: 'warn' }\n  }\n})\n```\n\nAny polyfills not explicitly enabled or disabled through `features` are\ndetermined by the [`stage`](#stage) option.\n\n### browsers\n\nThe `browsers` option determines which polyfills are required based upon the\nbrowsers you are supporting.\n\n[PostCSS Preset Env] supports any standard [browserslist] configuration, which\ncan be a `.browserslistrc` file, a `browserslist` key in `package.json`, or\n`browserslist` environment variables.\n\nThe `browsers` option should only be used when a standard browserslist\nconfiguration is not available.\n\n```js\npostcssPresetEnv({ browsers: 'last 2 versions' })\n```\n\nIf not valid browserslist configuration is specified, the\n[default browserslist query](https://github.com/browserslist/browserslist#queries)\nwill be used.\n\n### insertBefore / insertAfter\n\nThe `insertBefore` and `insertAfter` keys allow you to insert other PostCSS\nplugins into the chain. This is only useful if you are also using sugary\nPostCSS plugins that must execute before or after certain polyfills.\nBoth `insertBefore` and `insertAfter` support chaining one or multiple plugins.\n\n```js\nimport postcssSimpleVars from 'postcss-simple-vars';\n\npostcssPresetEnv({\n  insertBefore: {\n    'all-property': postcssSimpleVars\n  }\n})\n```\n\n### autoprefixer\n\n[PostCSS Preset Env] includes [autoprefixer] and [`browsers`](#browsers) option\nwill be passed to it automatically.\n\nSpecifying the `autoprefixer` option enables passing\n[additional options](https://github.com/postcss/autoprefixer#options)\ninto [autoprefixer].\n\n```js\npostcssPresetEnv({\n  autoprefixer: { grid: true }\n})\n```\n\nPassing `autoprefixer: false` disables autoprefixer.\n\n### preserve\n\nThe `preserve` option determines whether all plugins should receive a\n`preserve` option, which may preserve or remove otherwise-polyfilled CSS. By\ndefault, this option is not configured.\n\n```js\npostcssPresetEnv({\n  preserve: false // instruct all plugins to omit pre-polyfilled CSS\n});\n```\n\n### importFrom\n\nThe `importFrom` option specifies sources where variables like Custom Media,\nCustom Properties, Custom Selectors, and Environment Variables can be imported\nfrom, which might be CSS, JS, and JSON files, functions, and directly passed\nobjects.\n\n```js\npostcssPresetEnv({\n  /*\n    @custom-media --small-viewport (max-width: 30em);\n    @custom-selector :--heading h1, h2, h3;\n    :root { --color: red; }\n  */\n  importFrom: 'path/to/file.css'\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 use different namespaces to import different kinds of variables.\n\n```js\npostcssPresetEnv({\n  importFrom: [\n    /*\n      @custom-media --small-viewport (max-width: 30em);\n      @custom-selector :--heading h1, h2, h3;\n      :root { --color: red; }\n    */\n    'path/to/file.css',\n\n    /* module.exports = {\n      customMedia: { '--small-viewport': '(max-width: 30em)' },\n      customProperties: { '--color': 'red' },\n      customSelectors: { ':--heading': 'h1, h2, h3' },\n      environmentVariables: { '--branding-padding': '20px' }\n    } */\n    'and/then/this.js',\n\n    /* {\n      \"custom-media\": { \"--small-viewport\": \"(max-width: 30em)\" }\n      \"custom-properties\": { \"--color\": \"red\" },\n      \"custom-selectors\": { \":--heading\": \"h1, h2, h3\" },\n      \"environment-variables\": { \"--branding-padding\": \"20px\" }\n    } */\n    'and/then/that.json',\n\n    {\n      customMedia: { '--small-viewport': '(max-width: 30em)' },\n      customProperties: { '--color': 'red' },\n      customSelectors: { ':--heading': 'h1, h2, h3' },\n      environmentVariables: { '--branding-padding': '20px' }\n    },\n    () =\u003e {\n      const customMedia = { '--small-viewport': '(max-width: 30em)' };\n      const customProperties = { '--color': 'red' };\n      const customSelectors = { ':--heading': 'h1, h2, h3' };\n      const environmentVariables = { '--branding-padding': '20px' };\n\n      return { customMedia, customProperties, customSelectors, environmentVariables };\n    }\n  ]\n});\n```\n\n### exportTo\n\nThe `exportTo` option specifies destinations where variables like Custom Media,\nCustom Properties, Custom Selectors, and Environment Variables can be exported\nto, which might be CSS, JS, and JSON files, functions, and directly passed\nobjects.\n\n```js\npostcssPresetEnv({\n  /*\n    @custom-media --small-viewport (max-width: 30em);\n    @custom-selector :--heading h1, h2, h3;\n    :root { --color: red; }\n  */\n  exportTo: 'path/to/file.css'\n});\n```\n\nMultiple destinations can be passed into this option as well, and they will be\nparsed in the order they are received. JavaScript files, JSON files, and\nobjects will use different namespaces to import different kinds of variables.\n\n```js\nconst cachedObject = {};\n\npostcssPresetEnv({\n  exportTo: [\n    /*\n      @custom-media --small-viewport (max-width: 30em);\n      @custom-selector :--heading h1, h2, h3;\n      :root { --color: red; }\n    */\n    'path/to/file.css',\n\n    /* module.exports = {\n      customMedia: { '--small-viewport': '(max-width: 30em)' },\n      customProperties: { '--color': 'red' },\n      customSelectors: { ':--heading': 'h1, h2, h3' },\n      environmentVariables: { '--branding-padding': '20px' }\n    } */\n    'and/then/this.js',\n\n    /* {\n      \"custom-media\": { \"--small-viewport\": \"(max-width: 30em)\" }\n      \"custom-properties\": { \"--color\": \"red\" },\n      \"custom-selectors\": { \":--heading\": \"h1, h2, h3\" },\n      \"environment-variables\": { \"--branding-padding\": \"20px\" }\n    } */\n    'and/then/that.json',\n\n    cachedObject,\n    variables =\u003e {\n      if ('customProperties' in variables) {\n        // do something special with customProperties\n      }\n\n      Object.assign(cachedObject, variables);\n    }\n  ]\n});\n```\n\n[cli-img]: https://github.com/postcss/postcss-preset-env/workflows/test/badge.svg\n[cli-url]: https://github.com/postcss/postcss-preset-env/actions/workflows/test.yml?query=workflow/test\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-preset-env.svg\n[npm-url]: https://www.npmjs.com/package/postcss-preset-env\n\n[autoprefixer]: https://github.com/postcss/autoprefixer\n[browserslist]: https://github.com/browserslist/browserslist#readme\n[caniuse]: https://caniuse.com/\n[cssdb]: https://cssdb.org/\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Preset Env]: https://github.com/csstools/postcss-preset-env\n[readme-style-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-style-with-preset-env.svg\n[readme-style-with-preset-env-url]: https://codepen.io/pen?template=OZRovK\n[readme-transform-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-transform-with-preset-env.svg\n[readme-transform-with-preset-env-url]: https://csstools.github.io/postcss-preset-env/\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-preset-env","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-preset-env","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-preset-env/lists"}