Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

postcss-preset-env : more documentation and a few fixes #313

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2020,
"ecmaVersion": 2022,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint was nagging about top level async await.

"sourceType": "module"
},
"rules": {
Expand Down
940 changes: 396 additions & 544 deletions package-lock.json

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions plugin-packs/postcss-preset-env/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# Changes to PostCSS Preset Env

### Unreleased (patch)

- Fix manually enabling a feature that doesn't meet the required vendor implementations. [#310](https://github.com/csstools/postcss-plugins/issues/310)
- Updated `postcss-clamp` to `4.1.0` (minor)
- Remove internal patch for `postcss-clamp`
- Document all features. [https://github.com/csstools/postcss-preset-env/issues/156](https://github.com/csstools/postcss-preset-env/issues/156)

[see the list of features](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md)

### 7.4.2 (March 2, 2022)

- Adding internal patch for `postcss-clamp` to fix issue when `clamp` was being used with any other values along. [#274](https://github.com/csstools/postcss-plugins/issues/274)
Expand Down
80 changes: 80 additions & 0 deletions plugin-packs/postcss-preset-env/FEATURES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# List of features in PostCSS Preset Env

The `ID` listed is the key for PostCSS Preset Env configuration in your project.

| ID | Feature | example | docs |
|:--- |:--- |:--- |:--- |
| `all-property` | `all` Property | [example](https://preset-env.cssdb.org/features/#all-property) | [docs](https://github.com/maximkoretskiy/postcss-initial#readme) |
| `any-link-pseudo-class` | `:any-link` Hyperlink Pseudo-Class | [example](https://preset-env.cssdb.org/features/#any-link-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link#readme) |
| `blank-pseudo-class` | `:blank` Empty-Value Pseudo-Class | [example](https://preset-env.cssdb.org/features/#blank-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo#readme) |
| `break-properties` | Break Properties | [example](https://preset-env.cssdb.org/features/#break-properties) | [docs](https://github.com/shrpne/postcss-page-break#readme) |
| `case-insensitive-attributes` | Case-Insensitive Attributes | [example](https://preset-env.cssdb.org/features/#case-insensitive-attributes) | [docs](https://github.com/Semigradsky/postcss-attribute-case-insensitive#readme) |
| `clamp` | `clamp` Function | [example](https://preset-env.cssdb.org/features/#clamp) | [docs](https://github.com/polemius/postcss-clamp#readme) |
| `color-function` | `color()` Function | [example](https://preset-env.cssdb.org/features/#color-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function#readme) |
| `color-functional-notation` | Color Functional Notation | [example](https://preset-env.cssdb.org/features/#color-functional-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation#readme) |
| `custom-media-queries` | Custom Media Queries | [example](https://preset-env.cssdb.org/features/#custom-media-queries) | [docs](https://github.com/postcss/postcss-custom-media#readme) |
| `custom-properties` | Custom Properties | [example](https://preset-env.cssdb.org/features/#custom-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#readme) |
| `custom-selectors` | Custom Selectors | [example](https://preset-env.cssdb.org/features/#custom-selectors) | [docs](https://github.com/postcss/postcss-custom-selectors#readme) |
| `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) |
| `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) |
| `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) |
| `environment-variables` | Custom Environment Variables | [example](https://preset-env.cssdb.org/features/#environment-variables) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function#readme) |
| `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) |
| `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) |
| `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) |
| `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) |
| `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) |
| `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) |
| `hexadecimal-alpha-notation` | Hexadecimal Alpha Notation | [example](https://preset-env.cssdb.org/features/#hexadecimal-alpha-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha#readme) |
| `hwb-function` | `hwb()` Function | [example](https://preset-env.cssdb.org/features/#hwb-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme) |
| `ic-unit` | `ic` length unit | [example](https://preset-env.cssdb.org/features/#ic-unit) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit#readme) |
| `image-set-function` | `image-set()` Function | [example](https://preset-env.cssdb.org/features/#image-set-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function#readme) |
| `is-pseudo-class` | `:is()` Matches-Any Pseudo-Class | [example](https://preset-env.cssdb.org/features/#is-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class#readme) |
| `lab-function` | `lab()` Function | [example](https://preset-env.cssdb.org/features/#lab-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#readme) |
| `logical-properties-and-values` | Logical Properties and Values | [example](https://preset-env.cssdb.org/features/#logical-properties-and-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) |
| `media-query-ranges` | Media Query Ranges | [example](https://preset-env.cssdb.org/features/#media-query-ranges) | [docs](https://github.com/postcss/postcss-media-minmax#readme) |
| `nesting-rules` | Nesting Rules | [example](https://preset-env.cssdb.org/features/#nesting-rules) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme) |
| `not-pseudo-class` | `:not()` Negation List Pseudo-Class | [example](https://preset-env.cssdb.org/features/#not-pseudo-class) | [docs](https://github.com/postcss/postcss-selector-not#readme) |
| `oklab-function` | `oklab` and `oklch` color functions | [example](https://preset-env.cssdb.org/features/#oklab-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function#readme) |
| `opacity-percentage` | Support for percentages for `opacity` | [example](https://preset-env.cssdb.org/features/#opacity-percentage) | [docs](https://github.com/mrcgrtz/postcss-opacity-percentage#readme) |
| `overflow-property` | `overflow` Shorthand Property | [example](https://preset-env.cssdb.org/features/#overflow-property) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand#readme) |
| `overflow-wrap-property` | `overflow-wrap` Property | [example](https://preset-env.cssdb.org/features/#overflow-wrap-property) | [docs](https://github.com/mattdimu/postcss-replace-overflow-wrap#readme) |
| `place-properties` | Place Properties | [example](https://preset-env.cssdb.org/features/#place-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place#readme) |
| `prefers-color-scheme-query` | `prefers-color-scheme` Media Query | [example](https://preset-env.cssdb.org/features/#prefers-color-scheme-query) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme) |
| `rebeccapurple-color` | `rebeccapurple` Color | [example](https://preset-env.cssdb.org/features/#rebeccapurple-color) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple#readme) |
| `system-ui-font-family` | `system-ui` Font Family | [example](https://preset-env.cssdb.org/features/#system-ui-font-family) | [docs](https://github.com/JLHwung/postcss-font-family-system-ui#readme) |


-------

Manually enable a feature :

```js
postcssPresetEnv({
features: {
'<ID>': true
}
})
```

Or disable one :

```js
postcssPresetEnv({
features: {
'<ID>': false
}
})
```

Set feature options :

```js
postcssPresetEnv({
features: {
'<ID>': {
preserve: false
}
}
})
```
24 changes: 22 additions & 2 deletions plugin-packs/postcss-preset-env/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,26 @@
can understand, determining the polyfills you need based on your targeted
browsers or runtime environments.

## 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.
Expand All @@ -19,7 +39,7 @@ By providing a list of browser targets for your project, plugins that aren't nee

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:
### 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.
Expand Down Expand Up @@ -179,7 +199,7 @@ Having 2 independent implementations is [a critical step in proposals becoming s

The `features` option enables or disables specific polyfills by ID. Passing
`true` to a specific feature ID will enable its polyfill, while passing `false`
will disable it. [List of IDs](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs)
will disable it. [List of Features](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md)

```js
postcssPresetEnv({
Expand Down
39 changes: 39 additions & 0 deletions plugin-packs/postcss-preset-env/docs/FEATURES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# List of features in PostCSS Preset Env

The `ID` listed is the key for PostCSS Preset Env configuration in your project.

<featuresTable>

-------

Manually enable a feature :

```js
postcssPresetEnv({
features: {
'<ID>': true
}
})
```

Or disable one :

```js
postcssPresetEnv({
features: {
'<ID>': false
}
})
```

Set feature options :

```js
postcssPresetEnv({
features: {
'<ID>': {
preserve: false
}
}
})
```
37 changes: 37 additions & 0 deletions plugin-packs/postcss-preset-env/docs/generate.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { packageNamesToIds } from '../src/plugins/plugins-map.mjs';
import cssdb from 'cssdb';
import { promises as fsp } from 'fs';

let featuresTable = '';

featuresTable = featuresTable + '| ID | Feature | example | docs |\n';
featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n';

const ids = Array.from(Object.values(packageNamesToIds));
ids.sort();

for (const id of ids) {
const cssdbFeature = cssdb.find(feature => feature.id === id);
const cssdbPlugins = cssdbFeature.polyfills.filter(polyfill => polyfill.type === 'PostCSS Plugin');
cssdbPlugins.sort((a) => {
if (a.link.includes('https://github.com/csstools')) {
return -1;
}

if (a.link.includes('https://github.com/postcss')) {
return -1;
}

return 1;
});

featuresTable = featuresTable + `| \`${id}\` `;
featuresTable = featuresTable + `| ${cssdbFeature.title} `;
featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${id}) `;
featuresTable = featuresTable + `| [docs](${cssdbPlugins[0].link}#readme) |\n`;
}

let featuresDoc = (await fsp.readFile('./docs/FEATURES.md', 'utf8')).toString();
featuresDoc = featuresDoc.replaceAll('<featuresTable>', featuresTable);

fsp.writeFile('FEATURES.md', featuresDoc, 'utf8');
2 changes: 2 additions & 0 deletions plugin-packs/postcss-preset-env/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"css-prefers-color-scheme": "^6.0.3",
"cssdb": "^6.4.0",
"postcss-attribute-case-insensitive": "^5.0.0",
"postcss-clamp": "^4.1.0",
"postcss-color-functional-notation": "^4.2.2",
"postcss-color-hex-alpha": "^8.0.3",
"postcss-color-rebeccapurple": "^7.0.2",
Expand Down Expand Up @@ -75,6 +76,7 @@
"scripts": {
"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",
Expand Down
8 changes: 7 additions & 1 deletion plugin-packs/postcss-preset-env/src/lib/list-features.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) {
return true;
}

if (features[feature.id]) {
// feature is explicitly enabled
logger.log(` ${feature.id} does not meet the required vendor implementations but has been enabled by options`);
return true;
}

logger.log(` ${feature.id} with ${feature.vendors_implementations} vendor implementations has been disabled`);
return false;
});
Expand All @@ -78,7 +84,7 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) {
logger.log(` ${feature.id} has been disabled by options`);
} else if (!isAllowedStage) {
if (isAllowedFeature) {
logger.log(` ${feature.id} has been enabled by options`);
logger.log(` ${feature.id} does not meet the required stage but has been enabled by options`);
} else {
logger.log(` ${feature.id} with stage ${feature.stage} has been disabled`);
}
Expand Down
126 changes: 0 additions & 126 deletions plugin-packs/postcss-preset-env/src/patch/postcss-clamp.mjs

This file was deleted.

Loading