source: frontend/node_modules/postcss-browser-comments/README.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 3.0 KB
Line 
1# PostCSS Browser Comments [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![Build Status][cli-img]][cli-url]
5[![Support Chat][git-img]][git-url]
6
7[PostCSS Browser Comments] lets you keep only the CSS you need based on
8comments and your [browserslist].
9
10```css
11/**
12 * Prevent adjustments of font size after orientation changes in IE and iOS.
13 */
14
15html {
16 -ms-text-size-adjust: 100%;
17 -webkit-text-size-adjust: 100%;
18}
19```
20
21The comment and rule above would be removed with the following browserslist:
22
23```yml
24last 2 chrome versions
25```
26
27The rule below would be more carefully altered:
28
29```css
30/**
31 * 1. Add the correct box sizing in Firefox.
32 * 2. Show the overflow in Edge and IE.
33 */
34
35hr {
36 box-sizing: content-box; /* 1 */
37 height: 0; /* 1 */
38 overflow: visible; /* 2 */
39}
40
41/* with a `last 2 firefox versions` browserslist becomes */
42
43/**
44 * 1. Add the correct box sizing in Firefox.
45 * 2. Show the overflow in Edge and IE.
46 */
47
48hr {
49 box-sizing: content-box; /* 1 */
50 height: 0; /* 1 */
51}
52```
53
54---
55
56[PostCSS Browser Comments] can remove rules based upon the comment above them,
57or it can remove declarations using numbered comments that reference the rule
58above them. In the later case, when all of the numbered comments are removed,
59then the entire rule and comment are also removed.
60
61## Usage
62
63Add [PostCSS Browser Comments] to your project:
64
65```bash
66npm install postcss postcss-browser-comments --save-dev
67```
68
69Use [PostCSS Browser Comments] to process your CSS:
70
71```js
72const postcssBrowserComments = require('postcss-browser-comments');
73
74postcssBrowserComments.process(YOUR_CSS /*, processOptions, pluginOptions */);
75```
76
77Or use it as a [PostCSS] plugin:
78
79```js
80const postcss = require('postcss');
81const postcssBrowserComments = require('postcss-browser-comments');
82
83postcss([
84 postcssBrowserComments(/* pluginOptions */)
85]).process(YOUR_CSS /*, processOptions */);
86```
87
88[PostCSS Browser Comments] runs in all Node environments, with special instructions for:
89
90| [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) |
91| --- | --- | --- | --- | --- | --- |
92
93## Options
94
95### browsers
96
97The `browsers` option overrides of the project’s browserslist.
98
99```js
100postcssBrowserComments({
101 browsers: 'last 2 versions'
102});
103```
104
105[cli-img]: https://img.shields.io/travis/csstools/postcss-browser-comments/main.svg
106[cli-url]: https://travis-ci.org/csstools/postcss-browser-comments
107[git-img]: https://img.shields.io/badge/support-chat-blue.svg
108[git-url]: https://gitter.im/postcss/postcss
109[npm-img]: https://img.shields.io/npm/v/postcss-browser-comments.svg
110[npm-url]: https://www.npmjs.com/package/postcss-browser-comments
111
112[browserslist]: https://github.com/browserslist/browserslist
113[PostCSS]: https://github.com/postcss/postcss
114[PostCSS Browser Comments]: https://github.com/csstools/postcss-browser-comments
Note: See TracBrowser for help on using the repository browser.