🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

postcss-preset-env

Package Overview
Dependencies
Maintainers
2
Versions
130
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-preset-env - npm Package Compare versions

Comparing version

6.7.1
to
7.8.3

CHANGELOG.md
dist/index.cjs
dist/index.mjs

217

package.json
{
"name": "postcss-preset-env",
"version": "6.7.1",
"description": "Convert modern CSS into something browsers understand",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"license": "CC0-1.0",
"repository": "csstools/postcss-preset-env",
"homepage": "https://github.com/csstools/postcss-preset-env#readme",
"bugs": "https://github.com/csstools/postcss-preset-env/issues",
"main": "index.js",
"module": "index.mjs",
"files": [
"index.js",
"index.js.map",
"index.mjs",
"index.mjs.map"
],
"scripts": {
"build": "rollup -c .rollup.js --silent",
"pretest:tape": "npm run build",
"test": "npm run test:js && npm run test:tape",
"test:js": "eslint src/*.js src/lib/*.js src/patch/*.js --cache --ignore-path .gitignore --quiet",
"test:tape": "postcss-tape"
},
"engines": {
"node": ">=6.0.0"
},
"dependencies": {
"autoprefixer": "^9.6.1",
"browserslist": "^4.6.4",
"caniuse-lite": "^1.0.30000981",
"css-blank-pseudo": "^0.1.4",
"css-has-pseudo": "^0.10.0",
"css-prefers-color-scheme": "^3.1.1",
"cssdb": "^4.4.0",
"postcss": "^7.0.17",
"postcss-attribute-case-insensitive": "^4.0.1",
"postcss-color-functional-notation": "^2.0.1",
"postcss-color-gray": "^5.0.0",
"postcss-color-hex-alpha": "^5.0.3",
"postcss-color-mod-function": "^3.0.3",
"postcss-color-rebeccapurple": "^4.0.1",
"postcss-custom-media": "^7.0.8",
"postcss-custom-properties": "^8.0.11",
"postcss-custom-selectors": "^5.1.2",
"postcss-dir-pseudo-class": "^5.0.0",
"postcss-double-position-gradients": "^1.0.0",
"postcss-env-function": "^2.0.2",
"postcss-focus-visible": "^4.0.0",
"postcss-focus-within": "^3.0.0",
"postcss-font-variant": "^4.0.0",
"postcss-gap-properties": "^2.0.0",
"postcss-image-set-function": "^3.0.1",
"postcss-initial": "^3.0.0",
"postcss-lab-function": "^2.0.1",
"postcss-logical": "^3.0.0",
"postcss-media-minmax": "^4.0.0",
"postcss-nesting": "^7.0.0",
"postcss-overflow-shorthand": "^2.0.0",
"postcss-page-break": "^2.0.0",
"postcss-place": "^4.0.1",
"postcss-pseudo-class-any-link": "^6.0.0",
"postcss-replace-overflow-wrap": "^3.0.0",
"postcss-selector-matches": "^4.0.0",
"postcss-selector-not": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.5.0",
"@babel/preset-env": "^7.5.2",
"babel-eslint": "^10.0.2",
"eslint": "^5.16.0",
"eslint-config-dev": "^2.0.0",
"postcss-simple-vars": "^5.0.2",
"postcss-tape": "^4.0.0",
"pre-commit": "^1.2.2",
"rollup": "^1.16.6",
"rollup-plugin-babel": "^4.3.3"
},
"eslintConfig": {
"extends": "dev",
"parser": "babel-eslint"
},
"keywords": [
"postcss",
"css",
"postcss-plugin",
"specifications",
"specs",
"features",
"lists",
"stages",
"w3c",
"csswg",
"future",
"next"
]
"name": "postcss-preset-env",
"description": "Convert modern CSS into something browsers understand",
"version": "7.8.3",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"license": "CC0-1.0",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/csstools"
},
"engines": {
"node": "^12 || ^14 || >=16"
},
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs",
"default": "./dist/index.mjs"
}
},
"files": [
"CHANGELOG.md",
"LICENSE.md",
"README.md",
"dist"
],
"dependencies": {
"@csstools/postcss-cascade-layers": "^1.1.1",
"@csstools/postcss-color-function": "^1.1.1",
"@csstools/postcss-font-format-keywords": "^1.0.1",
"@csstools/postcss-hwb-function": "^1.0.2",
"@csstools/postcss-ic-unit": "^1.0.1",
"@csstools/postcss-is-pseudo-class": "^2.0.7",
"@csstools/postcss-nested-calc": "^1.0.0",
"@csstools/postcss-normalize-display-values": "^1.0.1",
"@csstools/postcss-oklab-function": "^1.1.1",
"@csstools/postcss-progressive-custom-properties": "^1.3.0",
"@csstools/postcss-stepped-value-functions": "^1.0.1",
"@csstools/postcss-text-decoration-shorthand": "^1.0.0",
"@csstools/postcss-trigonometric-functions": "^1.0.2",
"@csstools/postcss-unset-value": "^1.0.2",
"autoprefixer": "^10.4.13",
"browserslist": "^4.21.4",
"css-blank-pseudo": "^3.0.3",
"css-has-pseudo": "^3.0.4",
"css-prefers-color-scheme": "^6.0.3",
"cssdb": "^7.1.0",
"postcss-attribute-case-insensitive": "^5.0.2",
"postcss-clamp": "^4.1.0",
"postcss-color-functional-notation": "^4.2.4",
"postcss-color-hex-alpha": "^8.0.4",
"postcss-color-rebeccapurple": "^7.1.1",
"postcss-custom-media": "^8.0.2",
"postcss-custom-properties": "^12.1.10",
"postcss-custom-selectors": "^6.0.3",
"postcss-dir-pseudo-class": "^6.0.5",
"postcss-double-position-gradients": "^3.1.2",
"postcss-env-function": "^4.0.6",
"postcss-focus-visible": "^6.0.4",
"postcss-focus-within": "^5.0.4",
"postcss-font-variant": "^5.0.0",
"postcss-gap-properties": "^3.0.5",
"postcss-image-set-function": "^4.0.7",
"postcss-initial": "^4.0.1",
"postcss-lab-function": "^4.2.1",
"postcss-logical": "^5.0.4",
"postcss-media-minmax": "^5.0.0",
"postcss-nesting": "^10.2.0",
"postcss-opacity-percentage": "^1.1.2",
"postcss-overflow-shorthand": "^3.0.4",
"postcss-page-break": "^3.0.4",
"postcss-place": "^7.0.5",
"postcss-pseudo-class-any-link": "^7.1.6",
"postcss-replace-overflow-wrap": "^4.0.0",
"postcss-selector-not": "^6.0.1",
"postcss-value-parser": "^4.2.0"
},
"peerDependencies": {
"postcss": "^8.2"
},
"devDependencies": {
"postcss-simple-vars": "^7.0.0"
},
"scripts": {
"prebuild": "node ./scripts/generate-plugins-data.mjs && eslint --fix ./src/plugins/*.mjs",
"build": "rollup -c ../../rollup/default.js",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
"docs": "node ./docs/generate.mjs",
"lint": "npm run lint:eslint && npm run lint:package-json",
"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
"prepublishOnly": "npm run clean && npm run build && npm run test",
"stryker": "stryker run --logLevel error",
"test": "node .tape.mjs && node ./src/test/test.mjs && npm run test:exports",
"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
},
"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#readme",
"repository": {
"type": "git",
"url": "https://github.com/csstools/postcss-plugins.git",
"directory": "plugin-packs/postcss-preset-env"
},
"bugs": "https://github.com/csstools/postcss-plugins/issues",
"keywords": [
"css",
"csswg",
"features",
"future",
"lists",
"next",
"postcss",
"postcss-plugin",
"specifications",
"specs",
"stages",
"w3c"
],
"volta": {
"extends": "../../package.json"
}
}

191

README.md
# PostCSS Preset Env [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-preset-env.svg" height="20">][npm-url]
[<img alt="build status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
[![install size][package-phobia-badge]][package-phobia]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

@@ -11,6 +12,43 @@ [PostCSS Preset Env] lets you convert modern CSS into something most browsers

```bash
npm install postcss-preset-env
## Quick start
[PostCSS Preset Env] is a [PostCSS] plugin.<br>
If you are already using [PostCSS] to build your CSS, you can simply add [PostCSS Preset Env] to your configuration.
- Install `postcss-preset-env` from npm.
- Add `postcss-preset-env` to your configuration:
```js
const postcssPresetEnv = require('postcss-preset-env');
const yourConfig = {
plugins: [
postcssPresetEnv(/* pluginOptions */)
]
}
```
_[Read more on how to use and install PostCSS Preset Env.](#usage)_
## How does it work?
[PostCSS Preset Env] is a Plugin Pack for [PostCSS]. It leverages the list of the features we keep an eye from [CSSDB][cssdb] and applies plugins, so you can use those new features without having to worry about browser support.
CSSDB exposes the browser support that each feature has which can come from [Can I Use](https://caniuse.com/css-all) or from [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/all) (through [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)).
By providing a list of browser targets for your project, plugins that aren't needed will be skipped. Over time your targets might change and by updating the settings your CSS bundle will only ever contain the needed fallbacks.
What [PostCSS Preset Env] does is to take the support data that comes from MDN and Can I Use and determine from a [browserlist](https://github.com/browserslist/browserslist) whether those transformations are needed. It also packs [Autoprefixer](https://github.com/postcss/autoprefixer) within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.
### Glossary:
* **Browser list option**: [Browserlist](https://github.com/browserslist/browserslist) is a package that gives you a list of browsers for a given query. For example, `chrome < 42` will give you a list of every Chrome version that has been released up to, but not including, 42.
* **Browser support stats**: Features get introduced on browsers at certain versions. They're often visible on [MDN](https://developer.mozilla.org/en-US/) and [Can I Use](https://caniuse.com/). Comparing these stats with the needed _support_ for your project tells you if it's safe to use a feature or not.
* **CSS Feature**: A CSS feature is often part of some spec that enables a specific feature. For example, `hwb` functional notation lets you express a given color according to its hue, whiteness, and blackness. This is part of the CSS Color 4 Spec.
* **CSS Spec**: A Spec is a document that collects new features, what problems are they trying to solve and how it's intended to be solved (generally). This is usually an evolving document that goes over lengthy discussions between several people from different companies.
* **Plugin**: A plugin is package that's intended (usually) to enable a new CSS Feature by leveraging PostCSS. This doesn't need to be part of any spec. An example of the latter is [PostCSS Mixins](https://github.com/postcss/postcss-mixins), a concept that existed on Less or Sass, but it's not part of any spec. This plugin plack **only** packs plugins that enable features acknowledged by the World Wide Web Consortium (W3C) which will then be implemented by browsers later.
* **Polyfill**: A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. A polyfill _should_ be indistinguishable from the native behaviour.
Here's a quick example of the syntax you can leverage by using [PostCSS Preset Env].
```pcss

@@ -91,2 +129,8 @@ @custom-media --viewport-medium (width <= 50rem);

⚠️ Please note that some features need a companion library that makes
the feature work. While we try to avoid this requirement, there are instances
in which this isn't possible to polyfill a new behaviour with _just_ CSS.
[See the list below](#plugins-that-need-client-library).
## Usage

@@ -100,13 +144,5 @@

Use [PostCSS Preset Env] to process your CSS:
Use [PostCSS Preset Env] as a [PostCSS] plugin:
```js
const postcssPresetEnv = require('postcss-preset-env');
postcssPresetEnv.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
Or use it as a [PostCSS] plugin:
```js
const postcss = require('postcss');

@@ -122,4 +158,4 @@ const postcssPresetEnv = require('postcss-preset-env');

| [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) |
| --- | --- | --- | --- | --- | --- |
| [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) |
| --- | --- | --- | --- | --- | --- | --- |

@@ -141,5 +177,27 @@ ## Options

Without any configuration options, [PostCSS Preset Env] enables **Stage 2**
features.
Default: `2`
### minimumVendorImplementations
The `minimumVendorImplementations` option determines which CSS features to polyfill, based their implementation status.
This can be used to enable plugins that are available in browsers regardless of the [spec status](#stage).
```js
postcssPresetEnv({ minimumVendorImplementations: 2 })
```
`minimumVendorImplementations` can be `0` (no vendor has implemented it) through `3` (all major vendors).<br>
Default: `0`
**Note:**
When a feature has not yet been implemented by any vendor it can be considered experimental.<br>
Even with a single implementation it might still change in the future.<br>
Sometimes issues with a feature/specification are only discovered after it becomes available.
A value of `2` is recommended when you want to use only those features that should be [stable](#stability-and-portability).
Having 2 independent implementations is [a critical step in proposals becoming standards](https://www.w3.org/2021/Process-20211102/#implementation-experience) and a good indicator of a feature's stability.
### features

@@ -149,3 +207,3 @@

`true` to a specific feature ID will enable its polyfill, while passing `false`
will disable it.
will disable it. [List of Features](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md)

@@ -193,3 +251,3 @@ ```js

If not valid browserslist configuration is specified, the
If no valid browserslist configuration is specified, the
[default browserslist query](https://github.com/browserslist/browserslist#queries)

@@ -232,2 +290,36 @@ will be used.

⚠️ [autoprefixer] has [complex logic to fix CSS Grid in IE and older Edge](https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie).
This can have unexpected results with certain features and when [`preserve: true`](#preserve) is used. (defaults to `true`)
```pcss
:root {
--grid-gap: 15px;
}
.test-grid {
grid-gap: var(--grid-gap);
grid-template-columns: repeat(2, 1fr);
}
```
Becomes :
```
.test-grid {
grid-gap: 15px;
grid-gap: var(--grid-gap);
-ms-grid-columns: 1fr var(--grid-gap) 1fr;
grid-template-columns: repeat(2, 1fr);
}
```
The prefixed `-ms-grid-columns` still has a custom property: `1fr var(--grid-gap) 1fr;` which won't work.<br />
This example shows issues with custom properties but other transforms might have similar issues.
If you target IE or older Edge it is best to avoid using other modern features in grid property values.<br />
As a last resort you can set [`preserve: false`](#preserve), we do not advice this as doing so purely to fix issues with CSS grid.
_older Edge is any version before chromium (<79)_
### preserve

@@ -373,8 +465,57 @@

[cli-img]: https://img.shields.io/travis/csstools/postcss-preset-env/master.svg
[cli-url]: https://travis-ci.org/csstools/postcss-preset-env
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
### debug
The `debug` option enables debugging messages to stdout which should be useful to help you debug which features have been enabled/disabled and why.
### enableClientSidePolyfills
The `enableClientSidePolyfills` enables any feature that would need an extra browser library to be loaded into the page for it to work. Defaults to `true`.
Note that manually enabling/disabling features via the "feature" option overrides this flag.
## Stability and Portability
[PostCSS Preset Env] will often include very modern CSS features that are not fully ready yet.
This gives users the chance to play around with these features and provide feedback.
If the specification changes or is abandoned a new major version of the plugin will be released.
This will require you to update your source code so that everything works as expected.
To have more stability between updates of [PostCSS Preset Env] you may set `stage: 3` and/or `minimumVendorImplementations: 2`.
A side effect of staying close to the standard is that you can more easily migrate your project to other tooling all together.
## Plugins list
### Plugins that need client library
This is the current list of features that need a client library with a link
to the polyfill's library.
* `blank-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md)
* `focus-visible-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible) / [Polyfill](https://github.com/WICG/focus-visible)
* `focus-within-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within) / [Library](https://github.com/jsxtools/focus-within) / [Polyfill](https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md)
* `has-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md)
* `prefers-color-scheme-query`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md)
If you want to disable these types of features, please check the [`enableClientSidePolyfills` option](#enableclientsidepolyfills).
### Plugins not affected by Browser Support
Given they have no support they will always be enabled if they match by Stage:
* `blank-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md)
* `custom-media-queries`: [Plugin](https://github.com/postcss/postcss-custom-media)
* `has-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md)
* `image-set-function`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function)
* `media-query-ranges`: [Plugin](https://github.com/postcss/postcss-media-minmax)
* `nesting-rules`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[discord]: https://discord.gg/bUadyRwkJS
[npm-img]: https://img.shields.io/npm/v/postcss-preset-env.svg
[npm-url]: https://www.npmjs.com/package/postcss-preset-env
[package-phobia-badge]: https://packagephobia.com/badge?p=postcss-preset-env
[package-phobia]: https://packagephobia.com/result?p=postcss-preset-env

@@ -386,3 +527,3 @@ [autoprefixer]: https://github.com/postcss/autoprefixer

[PostCSS]: https://github.com/postcss/postcss
[PostCSS Preset Env]: https://github.com/csstools/postcss-preset-env
[PostCSS Preset Env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
[readme-style-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-style-with-preset-env.svg

@@ -389,0 +530,0 @@ [readme-style-with-preset-env-url]: https://codepen.io/pen?template=OZRovK

index.js
index.js.map
index.mjs
index.mjs.map