115 lines
3.0 KiB
Markdown
115 lines
3.0 KiB
Markdown
|
# PostCSS Browser Comments [<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]
|
|||
|
|
|
|||
|
|
[PostCSS Browser Comments] lets you keep only the CSS you need based on
|
|||
|
|
comments and your [browserslist].
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/**
|
|||
|
|
* Prevent adjustments of font size after orientation changes in IE and iOS.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
-ms-text-size-adjust: 100%;
|
|||
|
|
-webkit-text-size-adjust: 100%;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
The comment and rule above would be removed with the following browserslist:
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
last 2 chrome versions
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
The rule below would be more carefully altered:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/**
|
|||
|
|
* 1. Add the correct box sizing in Firefox.
|
|||
|
|
* 2. Show the overflow in Edge and IE.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
hr {
|
|||
|
|
box-sizing: content-box; /* 1 */
|
|||
|
|
height: 0; /* 1 */
|
|||
|
|
overflow: visible; /* 2 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* with a `last 2 firefox versions` browserslist becomes */
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 1. Add the correct box sizing in Firefox.
|
|||
|
|
* 2. Show the overflow in Edge and IE.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
hr {
|
|||
|
|
box-sizing: content-box; /* 1 */
|
|||
|
|
height: 0; /* 1 */
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
[PostCSS Browser Comments] can remove rules based upon the comment above them,
|
|||
|
|
or it can remove declarations using numbered comments that reference the rule
|
|||
|
|
above them. In the later case, when all of the numbered comments are removed,
|
|||
|
|
then the entire rule and comment are also removed.
|
|||
|
|
|
|||
|
|
## Usage
|
|||
|
|
|
|||
|
|
Add [PostCSS Browser Comments] to your project:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install postcss postcss-browser-comments --save-dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Use [PostCSS Browser Comments] to process your CSS:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const postcssBrowserComments = require('postcss-browser-comments');
|
|||
|
|
|
|||
|
|
postcssBrowserComments.process(YOUR_CSS /*, processOptions, pluginOptions */);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Or use it as a [PostCSS] plugin:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const postcss = require('postcss');
|
|||
|
|
const postcssBrowserComments = require('postcss-browser-comments');
|
|||
|
|
|
|||
|
|
postcss([
|
|||
|
|
postcssBrowserComments(/* pluginOptions */)
|
|||
|
|
]).process(YOUR_CSS /*, processOptions */);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
[PostCSS Browser Comments] runs in all Node environments, with special instructions for:
|
|||
|
|
|
|||
|
|
| [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) |
|
|||
|
|
| --- | --- | --- | --- | --- | --- |
|
|||
|
|
|
|||
|
|
## Options
|
|||
|
|
|
|||
|
|
### browsers
|
|||
|
|
|
|||
|
|
The `browsers` option overrides of the project’s browserslist.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
postcssBrowserComments({
|
|||
|
|
browsers: 'last 2 versions'
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
[cli-img]: https://img.shields.io/travis/csstools/postcss-browser-comments/main.svg
|
|||
|
|
[cli-url]: https://travis-ci.org/csstools/postcss-browser-comments
|
|||
|
|
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
|
|||
|
|
[git-url]: https://gitter.im/postcss/postcss
|
|||
|
|
[npm-img]: https://img.shields.io/npm/v/postcss-browser-comments.svg
|
|||
|
|
[npm-url]: https://www.npmjs.com/package/postcss-browser-comments
|
|||
|
|
|
|||
|
|
[browserslist]: https://github.com/browserslist/browserslist
|
|||
|
|
[PostCSS]: https://github.com/postcss/postcss
|
|||
|
|
[PostCSS Browser Comments]: https://github.com/csstools/postcss-browser-comments
|