Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit a30ba37

Browse files
romainmenkeromainmenke
committedMay 12, 2024··
postcss-browser-comments
1 parent ea0aa67 commit a30ba37

33 files changed

+1127
-530
lines changed
 

‎.github/ISSUE_TEMPLATE/css-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ body:
6969
- CSS Has Pseudo
7070
- CSS Prefers Color Scheme
7171
- PostCSS Attribute Case Insensitive
72+
- PostCSS Browser Comments
7273
- PostCSS Cascade Layers
7374
- PostCSS Color Function
7475
- PostCSS Color Functional Notation

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ body:
6666
- CSS Has Pseudo
6767
- CSS Prefers Color Scheme
6868
- PostCSS Attribute Case Insensitive
69+
- PostCSS Browser Comments
6970
- PostCSS Cascade Layers
7071
- PostCSS Color Function
7172
- PostCSS Color Functional Notation

‎.github/labeler.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@
7171
- plugins/postcss-attribute-case-insensitive/**
7272
- experimental/postcss-attribute-case-insensitive/**
7373

74+
"plugins/postcss-browser-comments":
75+
- changed-files:
76+
- any-glob-to-any-file:
77+
- plugins/postcss-browser-comments/**
78+
- experimental/postcss-browser-comments/**
79+
7480
"plugins/postcss-cascade-layers":
7581
- changed-files:
7682
- any-glob-to-any-file:

‎package-lock.json

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-browser-comments/.editorconfig

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎plugins/postcss-browser-comments/.gitignore

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
node_modules
2-
index.cjs*
3-
index.mjs*
42
package-lock.json
53
yarn.lock
6-
*.log*
74
*.result.css
8-
.*
9-
!.editorconfig
10-
!.gitignore
11-
!.rollup.js
12-
!.tape.js
13-
!.travis.yml
5+
*.result.css.map
6+
*.result.html

‎plugins/postcss-browser-comments/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20.2.0

‎plugins/postcss-browser-comments/.rollup.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎plugins/postcss-browser-comments/.tape.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎plugins/postcss-browser-comments/.travis.yml

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎plugins/postcss-browser-comments/CHANGELOG.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
# Changes to PostCSS Browser Comments
22

3-
### 4.0.0 (April 28, 2021)
3+
### Unreleased (major)
4+
5+
- Change license to `MIT-0` ([read more about this change in the blog post](https://preset-env.cssdb.org/blog/license-change/))
6+
- Updated: Node 14+ compatibility (major)
7+
8+
### 4.0.0
9+
10+
_April 28, 2021_
411

512
- Updated: PostCSS 8 compatibility (major)
613

7-
### 3.0.0 (May 24, 2019)
14+
### 3.0.0
15+
16+
_May 24, 2019_
817

918
- Updated: Node 8+ compatibility (major)
1019

11-
### 2.0.0 (September 6, 2018)
20+
### 2.0.0
21+
22+
_September 6, 2018_
1223

1324
- Update to PostCSS 7.0.2 (major)
1425
- Update to browserslist 4.1.1 (major)
1526

16-
### 1.0.0 (June 15, 2018)
27+
### 1.0.0
28+
29+
_June 15, 2018_
1730

1831
- Initial version

‎plugins/postcss-browser-comments/CONTRIBUTING.md

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎plugins/postcss-browser-comments/INSTALL.md

Lines changed: 135 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
# Installing PostCSS Browser Comments
22

3-
[PostCSS Browser Comments] runs in all Node environments, with special
4-
instructions for:
3+
[PostCSS Browser Comments] runs in all Node environments, with special instructions for:
4+
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Next.js](#nextjs)
10+
- [Gulp](#gulp)
11+
- [Grunt](#grunt)
12+
513

6-
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
7-
| --- | --- | --- | --- | --- | --- |
814

915
## Node
1016

@@ -14,22 +20,25 @@ Add [PostCSS Browser Comments] to your project:
1420
npm install postcss postcss-browser-comments --save-dev
1521
```
1622

17-
Use [PostCSS Browser Comments] to process your CSS:
23+
Use it as a [PostCSS] plugin:
1824

1925
```js
26+
// commonjs
27+
const postcss = require('postcss');
2028
const postcssBrowserComments = require('postcss-browser-comments');
2129

22-
postcssBrowserComments.process(YOUR_CSS /*, processOptions, pluginOptions */);
30+
postcss([
31+
postcssBrowserComments(/* pluginOptions */)
32+
]).process(YOUR_CSS /*, processOptions */);
2333
```
2434

25-
Or use it as a [PostCSS] plugin:
26-
2735
```js
28-
const postcss = require('postcss');
29-
const postcssBrowserComments = require('postcss-browser-comments');
36+
// esm
37+
import postcss from 'postcss';
38+
import postcssBrowserComments from 'postcss-browser-comments';
3039

3140
postcss([
32-
postcssBrowserComments(/* pluginOptions */)
41+
postcssBrowserComments(/* pluginOptions */)
3342
]).process(YOUR_CSS /*, processOptions */);
3443
```
3544

@@ -38,7 +47,7 @@ postcss([
3847
Add [PostCSS CLI] to your project:
3948

4049
```bash
41-
npm install postcss-cli --save-dev
50+
npm install postcss-cli postcss-browser-comments --save-dev
4251
```
4352

4453
Use [PostCSS Browser Comments] in your `postcss.config.js` configuration file:
@@ -47,74 +56,128 @@ Use [PostCSS Browser Comments] in your `postcss.config.js` configuration file:
4756
const postcssBrowserComments = require('postcss-browser-comments');
4857

4958
module.exports = {
50-
plugins: [
51-
postcssBrowserComments(/* pluginOptions */)
52-
]
59+
plugins: [
60+
postcssBrowserComments(/* pluginOptions */)
61+
]
62+
}
63+
```
64+
65+
## PostCSS Load Config
66+
67+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
68+
69+
```bash
70+
npm install postcss-browser-comments --save-dev
71+
```
72+
73+
`package.json`:
74+
75+
```json
76+
{
77+
"postcss": {
78+
"plugins": {
79+
"postcss-browser-comments": {}
80+
}
81+
}
5382
}
5483
```
5584

85+
`.postcssrc.json`:
86+
87+
```json
88+
{
89+
"plugins": {
90+
"postcss-browser-comments": {}
91+
}
92+
}
93+
```
94+
95+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
96+
5697
## Webpack
5798

99+
_Webpack version 5_
100+
58101
Add [PostCSS Loader] to your project:
59102

60103
```bash
61-
npm install postcss-loader --save-dev
104+
npm install postcss-loader postcss-browser-comments --save-dev
62105
```
63106

64107
Use [PostCSS Browser Comments] in your Webpack configuration:
65108

66109
```js
67-
const postcssBrowserComments = require('postcss-browser-comments');
68-
69110
module.exports = {
70-
module: {
71-
rules: [
72-
{
73-
test: /\.css$/,
74-
use: [
75-
'style-loader',
76-
{ loader: 'css-loader', options: { importLoaders: 1 } },
77-
{ loader: 'postcss-loader', options: {
78-
ident: 'postcss',
79-
plugins: () => [
80-
postcssBrowserComments(/* pluginOptions */)
81-
]
82-
} }
83-
]
84-
}
85-
]
86-
}
87-
}
111+
module: {
112+
rules: [
113+
{
114+
test: /\.css$/i,
115+
use: [
116+
"style-loader",
117+
{
118+
loader: "css-loader",
119+
options: { importLoaders: 1 },
120+
},
121+
{
122+
loader: "postcss-loader",
123+
options: {
124+
postcssOptions: {
125+
plugins: [
126+
// Other plugins,
127+
[
128+
"postcss-browser-comments",
129+
{
130+
// Options
131+
},
132+
],
133+
],
134+
},
135+
},
136+
},
137+
],
138+
},
139+
],
140+
},
141+
};
88142
```
89143

90-
## Create React App
144+
## Next.js
91145

92-
Add [React App Rewired] and [React App Rewire PostCSS] to your project:
146+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
93147

94148
```bash
95-
npm install react-app-rewired react-app-rewire-postcss --save-dev
149+
npm install postcss-browser-comments --save-dev
96150
```
97151

98-
Use [React App Rewire PostCSS] and [PostCSS Browser Comments] in your
99-
`config-overrides.js` file:
152+
Use [PostCSS Browser Comments] in your `postcss.config.json` file:
100153

101-
```js
102-
const reactAppRewirePostcss = require('react-app-rewire-postcss');
103-
const postcssBrowserComments = require('postcss-browser-comments');
154+
```json
155+
{
156+
"plugins": [
157+
"postcss-browser-comments"
158+
]
159+
}
160+
```
104161

105-
export default config => reactAppRewirePostcss(config, {
106-
plugins: () => [
107-
postcssBrowserComments(/* pluginOptions */)
108-
]
109-
});
162+
```json5
163+
{
164+
"plugins": [
165+
[
166+
"postcss-browser-comments",
167+
{
168+
// Optionally add plugin options
169+
}
170+
]
171+
]
172+
}
110173
```
111174

112175
## Gulp
113176

114177
Add [Gulp PostCSS] to your project:
115178

116179
```bash
117-
npm install gulp-postcss --save-dev
180+
npm install gulp-postcss postcss-browser-comments --save-dev
118181
```
119182

120183
Use [PostCSS Browser Comments] in your Gulpfile:
@@ -123,21 +186,23 @@ Use [PostCSS Browser Comments] in your Gulpfile:
123186
const postcss = require('gulp-postcss');
124187
const postcssBrowserComments = require('postcss-browser-comments');
125188

126-
gulp.task('css', () => gulp.src('./src/*.css').pipe(
127-
postcss([
128-
postcssBrowserComments(/* pluginOptions */)
129-
])
130-
).pipe(
131-
gulp.dest('.')
132-
));
189+
gulp.task('css', function () {
190+
var plugins = [
191+
postcssBrowserComments(/* pluginOptions */)
192+
];
193+
194+
return gulp.src('./src/*.css')
195+
.pipe(postcss(plugins))
196+
.pipe(gulp.dest('.'));
197+
});
133198
```
134199

135200
## Grunt
136201

137202
Add [Grunt PostCSS] to your project:
138203

139204
```bash
140-
npm install grunt-postcss --save-dev
205+
npm install grunt-postcss postcss-browser-comments --save-dev
141206
```
142207

143208
Use [PostCSS Browser Comments] in your Gruntfile:
@@ -148,24 +213,23 @@ const postcssBrowserComments = require('postcss-browser-comments');
148213
grunt.loadNpmTasks('grunt-postcss');
149214

150215
grunt.initConfig({
151-
postcss: {
152-
options: {
153-
use: [
154-
postcssBrowserComments(/* pluginOptions */)
155-
]
156-
},
157-
dist: {
158-
src: '*.css'
159-
}
160-
}
216+
postcss: {
217+
options: {
218+
processors: [
219+
postcssBrowserComments(/* pluginOptions */)
220+
]
221+
},
222+
dist: {
223+
src: '*.css'
224+
}
225+
}
161226
});
162227
```
163228

164229
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
165230
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
166231
[PostCSS]: https://github.com/postcss/postcss
167-
[PostCSS Browser Comments]: https://github.com/csstools/postcss-browser-comments
168232
[PostCSS CLI]: https://github.com/postcss/postcss-cli
169233
[PostCSS Loader]: https://github.com/postcss/postcss-loader
170-
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
171-
[React App Rewired]: https://github.com/timarney/react-app-rewired
234+
[PostCSS Browser Comments]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-browser-comments
235+
[Next.js]: https://nextjs.org

‎plugins/postcss-browser-comments/LICENSE.md

Lines changed: 18 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,18 @@
1-
# CC0 1.0 Universal
2-
3-
## Statement of Purpose
4-
5-
The laws of most jurisdictions throughout the world automatically confer
6-
exclusive Copyright and Related Rights (defined below) upon the creator and
7-
subsequent owner(s) (each and all, an “owner”) of an original work of
8-
authorship and/or a database (each, a “Work”).
9-
10-
Certain owners wish to permanently relinquish those rights to a Work for the
11-
purpose of contributing to a commons of creative, cultural and scientific works
12-
(“Commons”) that the public can reliably and without fear of later claims of
13-
infringement build upon, modify, incorporate in other works, reuse and
14-
redistribute as freely as possible in any form whatsoever and for any purposes,
15-
including without limitation commercial purposes. These owners may contribute
16-
to the Commons to promote the ideal of a free culture and the further
17-
production of creative, cultural and scientific works, or to gain reputation or
18-
greater distribution for their Work in part through the use and efforts of
19-
others.
20-
21-
For these and/or other purposes and motivations, and without any expectation of
22-
additional consideration or compensation, the person associating CC0 with a
23-
Work (the “Affirmer”), to the extent that he or she is an owner of Copyright
24-
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and
25-
publicly distribute the Work under its terms, with knowledge of his or her
26-
Copyright and Related Rights in the Work and the meaning and intended legal
27-
effect of CC0 on those rights.
28-
29-
1. Copyright and Related Rights. A Work made available under CC0 may be
30-
protected by copyright and related or neighboring rights (“Copyright and
31-
Related Rights”). Copyright and Related Rights include, but are not limited
32-
to, the following:
33-
1. the right to reproduce, adapt, distribute, perform, display, communicate,
34-
and translate a Work;
35-
2. moral rights retained by the original author(s) and/or performer(s);
36-
3. publicity and privacy rights pertaining to a person’s image or likeness
37-
depicted in a Work;
38-
4. rights protecting against unfair competition in regards to a Work,
39-
subject to the limitations in paragraph 4(i), below;
40-
5. rights protecting the extraction, dissemination, use and reuse of data in
41-
a Work;
42-
6. database rights (such as those arising under Directive 96/9/EC of the
43-
European Parliament and of the Council of 11 March 1996 on the legal
44-
protection of databases, and under any national implementation thereof,
45-
including any amended or successor version of such directive); and
46-
7. other similar, equivalent or corresponding rights throughout the world
47-
based on applicable law or treaty, and any national implementations
48-
thereof.
49-
50-
2. Waiver. To the greatest extent permitted by, but not in contravention of,
51-
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
52-
unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright
53-
and Related Rights and associated claims and causes of action, whether now
54-
known or unknown (including existing as well as future claims and causes of
55-
action), in the Work (i) in all territories worldwide, (ii) for the maximum
56-
duration provided by applicable law or treaty (including future time
57-
extensions), (iii) in any current or future medium and for any number of
58-
copies, and (iv) for any purpose whatsoever, including without limitation
59-
commercial, advertising or promotional purposes (the “Waiver”). Affirmer
60-
makes the Waiver for the benefit of each member of the public at large and
61-
to the detriment of Affirmer’s heirs and successors, fully intending that
62-
such Waiver shall not be subject to revocation, rescission, cancellation,
63-
termination, or any other legal or equitable action to disrupt the quiet
64-
enjoyment of the Work by the public as contemplated by Affirmer’s express
65-
Statement of Purpose.
66-
67-
3. Public License Fallback. Should any part of the Waiver for any reason be
68-
judged legally invalid or ineffective under applicable law, then the Waiver
69-
shall be preserved to the maximum extent permitted taking into account
70-
Affirmer’s express Statement of Purpose. In addition, to the extent the
71-
Waiver is so judged Affirmer hereby grants to each affected person a
72-
royalty-free, non transferable, non sublicensable, non exclusive,
73-
irrevocable and unconditional license to exercise Affirmer’s Copyright and
74-
Related Rights in the Work (i) in all territories worldwide, (ii) for the
75-
maximum duration provided by applicable law or treaty (including future time
76-
extensions), (iii) in any current or future medium and for any number of
77-
copies, and (iv) for any purpose whatsoever, including without limitation
78-
commercial, advertising or promotional purposes (the “License”). The License
79-
shall be deemed effective as of the date CC0 was applied by Affirmer to the
80-
Work. Should any part of the License for any reason be judged legally
81-
invalid or ineffective under applicable law, such partial invalidity or
82-
ineffectiveness shall not invalidate the remainder of the License, and in
83-
such case Affirmer hereby affirms that he or she will not (i) exercise any
84-
of his or her remaining Copyright and Related Rights in the Work or (ii)
85-
assert any associated claims and causes of action with respect to the Work,
86-
in either case contrary to Affirmer’s express Statement of Purpose.
87-
88-
4. Limitations and Disclaimers.
89-
1. No trademark or patent rights held by Affirmer are waived, abandoned,
90-
surrendered, licensed or otherwise affected by this document.
91-
2. Affirmer offers the Work as-is and makes no representations or warranties
92-
of any kind concerning the Work, express, implied, statutory or
93-
otherwise, including without limitation warranties of title,
94-
merchantability, fitness for a particular purpose, non infringement, or
95-
the absence of latent or other defects, accuracy, or the present or
96-
absence of errors, whether or not discoverable, all to the greatest
97-
extent permissible under applicable law.
98-
3. Affirmer disclaims responsibility for clearing rights of other persons
99-
that may apply to the Work or any use thereof, including without
100-
limitation any person’s Copyright and Related Rights in the Work.
101-
Further, Affirmer disclaims responsibility for obtaining any necessary
102-
consents, permissions or other rights required for any use of the Work.
103-
4. Affirmer understands and acknowledges that Creative Commons is not a
104-
party to this document and has no duty or obligation with respect to this
105-
CC0 or use of the Work.
106-
107-
For more information, please see
108-
http://creativecommons.org/publicdomain/zero/1.0/.
1+
MIT No Attribution (MIT-0)
2+
3+
Copyright © CSSTools Contributors
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the “Software”), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9+
of the Software, and to permit persons to whom the Software is furnished to do
10+
so.
11+
12+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.

‎plugins/postcss-browser-comments/README.md

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
# PostCSS Browser Comments [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
1+
# PostCSS Browser Comments [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
22

3-
[![NPM Version][npm-img]][npm-url]
4-
[![Build Status][cli-img]][cli-url]
5-
[![Support Chat][git-img]][git-url]
3+
[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-browser-comments.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
4+
5+
```bash
6+
npm install postcss-browser-comments --save-dev
7+
```
68

79
[PostCSS Browser Comments] lets you keep only the CSS you need based on
8-
comments and your [browserslist].
10+
comments and your [browserslist](https://github.com/browserslist/browserslist).
11+
912

10-
```css
13+
```pcss
1114
/**
1215
* Prevent adjustments of font size after orientation changes in IE and iOS.
1316
*/
@@ -16,6 +19,10 @@ html {
1619
-ms-text-size-adjust: 100%;
1720
-webkit-text-size-adjust: 100%;
1821
}
22+
23+
/* becomes */
24+
25+
1926
```
2027

2128
The comment and rule above would be removed with the following browserslist:
@@ -26,7 +33,7 @@ last 2 chrome versions
2633

2734
The rule below would be more carefully altered:
2835

29-
```css
36+
```pcss
3037
/**
3138
* 1. Add the correct box sizing in Firefox.
3239
* 2. Show the overflow in Edge and IE.
@@ -51,13 +58,6 @@ hr {
5158
}
5259
```
5360

54-
---
55-
56-
[PostCSS Browser Comments] can remove rules based upon the comment above them,
57-
or it can remove declarations using numbered comments that reference the rule
58-
above them. In the later case, when all of the numbered comments are removed,
59-
then the entire rule and comment are also removed.
60-
6161
## Usage
6262

6363
Add [PostCSS Browser Comments] to your project:
@@ -66,29 +66,27 @@ Add [PostCSS Browser Comments] to your project:
6666
npm install postcss postcss-browser-comments --save-dev
6767
```
6868

69-
Use [PostCSS Browser Comments] to process your CSS:
70-
71-
```js
72-
const postcssBrowserComments = require('postcss-browser-comments');
73-
74-
postcssBrowserComments.process(YOUR_CSS /*, processOptions, pluginOptions */);
75-
```
76-
77-
Or use it as a [PostCSS] plugin:
69+
Use it as a [PostCSS] plugin:
7870

7971
```js
8072
const postcss = require('postcss');
8173
const postcssBrowserComments = require('postcss-browser-comments');
8274

8375
postcss([
84-
postcssBrowserComments(/* pluginOptions */)
76+
postcssBrowserComments(/* pluginOptions */)
8577
]).process(YOUR_CSS /*, processOptions */);
8678
```
8779

88-
[PostCSS Browser Comments] runs in all Node environments, with special instructions for:
80+
[PostCSS Browser Comments] runs in all Node environments, with special
81+
instructions for:
8982

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-
| --- | --- | --- | --- | --- | --- |
83+
- [Node](INSTALL.md#node)
84+
- [PostCSS CLI](INSTALL.md#postcss-cli)
85+
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
86+
- [Webpack](INSTALL.md#webpack)
87+
- [Next.js](INSTALL.md#nextjs)
88+
- [Gulp](INSTALL.md#gulp)
89+
- [Grunt](INSTALL.md#grunt)
9290

9391
## Options
9492

@@ -97,18 +95,13 @@ postcss([
9795
The `browsers` option overrides of the project’s browserslist.
9896

9997
```js
100-
postcssBrowserComments({
101-
browsers: 'last 2 versions'
102-
});
98+
postcssBrowserComments({ browsers: 'last 2 versions' })
10399
```
104100

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
101+
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
102+
103+
[discord]: https://discord.gg/bUadyRwkJS
110104
[npm-url]: https://www.npmjs.com/package/postcss-browser-comments
111105

112-
[browserslist]: https://github.com/browserslist/browserslist
113106
[PostCSS]: https://github.com/postcss/postcss
114-
[PostCSS Browser Comments]: https://github.com/csstools/postcss-browser-comments
107+
[PostCSS Browser Comments]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-browser-comments

‎plugins/postcss-browser-comments/api-extractor.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3+
"extends": "../../api-extractor.json"
4+
}

‎plugins/postcss-browser-comments/dist/index.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"use strict";var e=require("browserslist");const creator=s=>({postcssPlugin:"postcss-browser-comments",prepare(t){console.log("result",t.root?.source?.input.file);const r=new Set(e(Object(s).browsers||null,{path:t.root?.source?.input.file}));return{postcssPlugin:"postcss-browser-comments",Once(s){const t=s.nodes.slice(0);for(const s of t){if(!isBrowserCommentNode(s))continue;const t=s.next();if(!t||"rule"!==t.type)continue;const o=getBrowserData(s.text);o.isNumbered?(t.nodes.filter(isBrowserReferenceCommentNode).map((s=>{const t=parseFloat(s.text)-1,n=e(o.browserslist[t]);browserslistsOverlap(r,n)||(s.prev()?.remove(),s.remove())})),t.nodes.length||(t.remove(),s.remove())):browserslistsOverlap(r,e(o.browserslist))||(t.remove(),s.remove())}}}}});function isBrowserCommentNode(e){return"comment"===e.type&&(!!s.test(e.text)&&"rule"===e.next()?.type)}creator.postcss=!0;const s=/^\*\n * /;function isBrowserReferenceCommentNode(e){return"comment"===e.type&&t.test(e.text)}const t=/^\d+$/;function getBrowserData(e){const s=e.match(r);return s?{browserslist:s.map((e=>getBrowsersList(e.replace(n,"$1")))),isNumbered:!0}:{browserslist:getBrowsersList(e.replace(o,"")),isNumbered:!1}}const r=/(\n \* \d+\. (?:[^\n]+|\n \* {4,})+)/g,o=/^\*\n \* ?|\n \*/g,n=/\n \* (?:( )\s*)?/g;function getBrowsersList(e){return e.split(c).slice(1).map((e=>e.split(i).filter((e=>e)))).reduce(((e,s)=>e.concat(s)),[]).map((e=>e.replace(l,((e,s,t)=>"all"===s?"> 0%":`${s}${t?/^((?:\d*\.)?\d+)-$/.test(t)?` <= ${t.slice(0,-1)}`:` ${t}`:" > 0"}`)).toLowerCase()))}const c=/\s+in\s+/,i=/(?: and|, and|,)/,l=/^\s*(\w+)(?: ((?:(?:\d*\.)?\d+-)?(?:\d*\.)?\d+[+-]?))?.*$/;function browserslistsOverlap(e,s){return s.some((s=>e.has(s)))}module.exports=creator;

‎plugins/postcss-browser-comments/dist/index.d.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { PluginCreator } from 'postcss';
2+
3+
declare const creator: PluginCreator<pluginOptions>;
4+
export default creator;
5+
6+
/** postcss-browser-comments plugin options */
7+
export declare type pluginOptions = {
8+
/** The browserslist queries */
9+
browsers?: string | Array<string> | null | undefined;
10+
};
11+
12+
export { }

‎plugins/postcss-browser-comments/dist/index.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import e from"browserslist";const creator=s=>({postcssPlugin:"postcss-browser-comments",prepare(t){console.log("result",t.root?.source?.input.file);const r=new Set(e(Object(s).browsers||null,{path:t.root?.source?.input.file}));return{postcssPlugin:"postcss-browser-comments",Once(s){const t=s.nodes.slice(0);for(const s of t){if(!isBrowserCommentNode(s))continue;const t=s.next();if(!t||"rule"!==t.type)continue;const o=getBrowserData(s.text);o.isNumbered?(t.nodes.filter(isBrowserReferenceCommentNode).map((s=>{const t=parseFloat(s.text)-1,n=e(o.browserslist[t]);browserslistsOverlap(r,n)||(s.prev()?.remove(),s.remove())})),t.nodes.length||(t.remove(),s.remove())):browserslistsOverlap(r,e(o.browserslist))||(t.remove(),s.remove())}}}}});function isBrowserCommentNode(e){return"comment"===e.type&&(!!s.test(e.text)&&"rule"===e.next()?.type)}creator.postcss=!0;const s=/^\*\n * /;function isBrowserReferenceCommentNode(e){return"comment"===e.type&&t.test(e.text)}const t=/^\d+$/;function getBrowserData(e){const s=e.match(r);return s?{browserslist:s.map((e=>getBrowsersList(e.replace(n,"$1")))),isNumbered:!0}:{browserslist:getBrowsersList(e.replace(o,"")),isNumbered:!1}}const r=/(\n \* \d+\. (?:[^\n]+|\n \* {4,})+)/g,o=/^\*\n \* ?|\n \*/g,n=/\n \* (?:( )\s*)?/g;function getBrowsersList(e){return e.split(c).slice(1).map((e=>e.split(i).filter((e=>e)))).reduce(((e,s)=>e.concat(s)),[]).map((e=>e.replace(l,((e,s,t)=>"all"===s?"> 0%":`${s}${t?/^((?:\d*\.)?\d+)-$/.test(t)?` <= ${t.slice(0,-1)}`:` ${t}`:" > 0"}`)).toLowerCase()))}const c=/\s+in\s+/,i=/(?: and|, and|,)/,l=/^\s*(\w+)(?: ((?:(?:\d*\.)?\d+-)?(?:\d*\.)?\d+[+-]?))?.*$/;function browserslistsOverlap(e,s){return s.some((s=>e.has(s)))}export{creator as default};

‎plugins/postcss-browser-comments/docs/README.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!-- Available Variables: -->
2+
<!-- <humanReadableName> PostCSS Your Plugin -->
3+
<!-- <exportName> postcssYourPlugin -->
4+
<!-- <packageName> @csstools/postcss-your-plugin -->
5+
<!-- <packageVersion> 1.0.0 -->
6+
<!-- <packagePath> plugins/postcss-your-plugin -->
7+
<!-- <cssdbId> your-feature -->
8+
<!-- <specUrl> https://www.w3.org/TR/css-color-4/#funcdef-color -->
9+
<!-- <example.css> file contents for examples/example.css -->
10+
<!-- <header> -->
11+
<!-- <usage> usage instructions -->
12+
<!-- <envSupport> -->
13+
<!-- <corsWarning> -->
14+
<!-- <linkList> -->
15+
<!-- <parallelBuildsNotice> -->
16+
<!-- to generate : npm run docs -->
17+
18+
<header>
19+
20+
[<humanReadableName>] lets you keep only the CSS you need based on
21+
comments and your [browserslist](https://github.com/browserslist/browserslist).
22+
23+
24+
```pcss
25+
<example-1.css>
26+
27+
/* becomes */
28+
29+
<example-1.expect.css>
30+
```
31+
32+
The comment and rule above would be removed with the following browserslist:
33+
34+
```yml
35+
last 2 chrome versions
36+
```
37+
38+
The rule below would be more carefully altered:
39+
40+
```pcss
41+
<example-2.css>
42+
43+
/* with a `last 2 firefox versions` browserslist becomes */
44+
45+
<example-2.expect.css>
46+
```
47+
48+
<usage>
49+
50+
<envSupport>
51+
52+
## Options
53+
54+
### browsers
55+
56+
The `browsers` option overrides of the project’s browserslist.
57+
58+
```js
59+
<exportName>({ browsers: 'last 2 versions' })
60+
```
61+
62+
<linkList>

‎plugins/postcss-browser-comments/index.js

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎plugins/postcss-browser-comments/package.json

Lines changed: 94 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,96 @@
11
{
2-
"name": "postcss-browser-comments",
3-
"version": "4.0.0",
4-
"description": "Keep only the CSS you need based on comments and your browserslist",
5-
"author": "Jonathan Neal <csstools@hotmail.com>",
6-
"license": "CC0-1.0",
7-
"repository": "csstools/postcss-browser-comments",
8-
"homepage": "https://github.com/csstools/postcss-browser-comments#readme",
9-
"bugs": "https://github.com/csstools/postcss-browser-comments/issues",
10-
"main": "index.cjs",
11-
"module": "index.mjs",
12-
"files": [
13-
"index.cjs",
14-
"index.cjs.map",
15-
"index.mjs",
16-
"index.mjs.map"
17-
],
18-
"scripts": {
19-
"prepublishOnly": "npm test",
20-
"build": "rollup --config .rollup.js --silent",
21-
"lint": "eslint *.js --cache --ignore-path .gitignore --quiet",
22-
"test": "npm run lint && npm run build && npm run tape",
23-
"tape": "postcss-tape"
24-
},
25-
"engines": {
26-
"node": ">=8"
27-
},
28-
"peerDependencies": {
29-
"browserslist": ">=4",
30-
"postcss": ">=8"
31-
},
32-
"devDependencies": {
33-
"@babel/core": "7.13.16",
34-
"@babel/preset-env": "7.13.15",
35-
"browserslist": "4.1.1",
36-
"eslint": "7.25.0",
37-
"postcss": "8.2.13",
38-
"postcss-tape": "6.0.1",
39-
"pre-commit": "1.2.2",
40-
"rollup": "2.46.0",
41-
"rollup-plugin-babel": "4.3.2"
42-
},
43-
"eslintConfig": {
44-
"extends": "eslint:recommended",
45-
"parserOptions": {
46-
"ecmaVersion": 12,
47-
"sourceType": "module",
48-
"ecmaFeatures": {
49-
"modules": true
50-
}
51-
},
52-
"rules": {
53-
"semi": [
54-
"error",
55-
"never"
56-
]
57-
}
58-
},
59-
"keywords": [
60-
"postcss",
61-
"css",
62-
"postcss-plugin",
63-
"browserslists",
64-
"browserlists",
65-
"browsers",
66-
"lists",
67-
"support",
68-
"caniuse",
69-
"target"
70-
]
2+
"name": "postcss-browser-comments",
3+
"description": "Keep only the CSS you need based on comments and your browserslist",
4+
"version": "4.0.0",
5+
"contributors": [
6+
{
7+
"name": "Antonio Laguna",
8+
"email": "antonio@laguna.es",
9+
"url": "https://antonio.laguna.es"
10+
},
11+
{
12+
"name": "Jonathan Neal",
13+
"email": "csstools@hotmail.com"
14+
},
15+
{
16+
"name": "Romain Menke",
17+
"email": "romainmenke@gmail.com"
18+
}
19+
],
20+
"license": "MIT-0",
21+
"funding": [
22+
{
23+
"type": "github",
24+
"url": "https://github.com/sponsors/csstools"
25+
},
26+
{
27+
"type": "opencollective",
28+
"url": "https://opencollective.com/csstools"
29+
}
30+
],
31+
"engines": {
32+
"node": "^14 || ^16 || >=18"
33+
},
34+
"type": "module",
35+
"main": "dist/index.cjs",
36+
"module": "dist/index.mjs",
37+
"exports": {
38+
".": {
39+
"import": {
40+
"types": "./dist/index.d.ts",
41+
"default": "./dist/index.mjs"
42+
},
43+
"require": {
44+
"default": "./dist/index.cjs"
45+
}
46+
}
47+
},
48+
"files": [
49+
"CHANGELOG.md",
50+
"LICENSE.md",
51+
"README.md",
52+
"dist"
53+
],
54+
"peerDependencies": {
55+
"browserslist": "^4.23.0",
56+
"postcss": "^8.4"
57+
},
58+
"devDependencies": {
59+
"@csstools/postcss-tape": "*",
60+
"browserslist": "^4.23.0"
61+
},
62+
"scripts": {
63+
"build": "rollup -c ../../rollup/default.mjs",
64+
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
65+
"lint": "node ../../.github/bin/format-package-json.mjs",
66+
"prepublishOnly": "npm run build && npm run test",
67+
"test": "node --test",
68+
"test:rewrite-expects": "REWRITE_EXPECTS=true node --test"
69+
},
70+
"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-browser-comments#readme",
71+
"repository": {
72+
"type": "git",
73+
"url": "git+https://github.com/csstools/postcss-plugins.git",
74+
"directory": "plugins/postcss-browser-comments"
75+
},
76+
"bugs": "https://github.com/csstools/postcss-plugins/issues",
77+
"keywords": [
78+
"browserlists",
79+
"browsers",
80+
"browserslists",
81+
"caniuse",
82+
"css",
83+
"lists",
84+
"postcss",
85+
"postcss-plugin",
86+
"support",
87+
"target"
88+
],
89+
"csstools": {
90+
"exportName": "postcssBrowserComments",
91+
"humanReadableName": "PostCSS Browser Comments"
92+
},
93+
"volta": {
94+
"extends": "../../package.json"
95+
}
7196
}

‎plugins/postcss-browser-comments/src/index.ts

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import type { Comment, Node, Plugin, PluginCreator } from 'postcss';
2+
import browserslist from 'browserslist';
3+
4+
/** postcss-browser-comments plugin options */
5+
export type pluginOptions = {
6+
/** The browserslist queries */
7+
browsers?: string | Array<string> | null | undefined,
8+
};
9+
10+
const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
11+
return {
12+
postcssPlugin: 'postcss-browser-comments',
13+
prepare(result): Plugin {
14+
console.log('result', result.root?.source?.input.file);
15+
16+
const clientBrowserList = new Set(browserslist(
17+
Object(opts).browsers || null,
18+
{
19+
path: result.root?.source?.input.file,
20+
},
21+
));
22+
23+
return {
24+
postcssPlugin: 'postcss-browser-comments',
25+
Once(root): void {
26+
// root children references
27+
const references = root.nodes.slice(0);
28+
29+
// for each child node of the root children references
30+
for (const node of references) {
31+
// if the node is a comment browser comment node
32+
if (!isBrowserCommentNode(node)) {
33+
continue;
34+
}
35+
36+
// rule following the browser comment
37+
const rule = node.next();
38+
if (!rule || rule.type !== 'rule') {
39+
continue;
40+
}
41+
42+
// browser data
43+
const browserdata = getBrowserData(node.text);
44+
45+
if (!browserdata.isNumbered) {
46+
if (!browserslistsOverlap(clientBrowserList, browserslist(browserdata.browserslist))) {
47+
rule.remove();
48+
node.remove();
49+
}
50+
51+
continue;
52+
}
53+
54+
rule.nodes.filter(isBrowserReferenceCommentNode).map((comment) => {
55+
const browserdataIndex = parseFloat(comment.text) - 1;
56+
const browserslistPart = browserslist(browserdata.browserslist[browserdataIndex]);
57+
58+
// conditionally remove the declaration and reference comment
59+
if (!browserslistsOverlap(clientBrowserList, browserslistPart)) {
60+
comment.prev()?.remove();
61+
comment.remove();
62+
}
63+
});
64+
65+
// conditionally remove the empty rule and comment
66+
if (!rule.nodes.length) {
67+
rule.remove();
68+
node.remove();
69+
}
70+
}
71+
},
72+
};
73+
},
74+
};
75+
};
76+
77+
creator.postcss = true;
78+
79+
export default creator;
80+
81+
// returns whether a node is a browser comment
82+
function isBrowserCommentNode(node: Node): node is Comment {
83+
if (node.type !== 'comment') {
84+
return false;
85+
}
86+
87+
if (!IS_BROWSER_COMMENT_NODE_REGEX.test((node as Comment).text)) {
88+
return false;
89+
}
90+
91+
return node.next()?.type === 'rule';
92+
}
93+
94+
const IS_BROWSER_COMMENT_NODE_REGEX = /^\*\n * /;
95+
96+
// returns whether a node is a browser reference comment
97+
function isBrowserReferenceCommentNode(node: Node): node is Comment {
98+
if (node.type !== 'comment') {
99+
return false;
100+
}
101+
102+
return IS_BROWSER_REFERENCE_COMMENT_NODE_REGEX.test((node as Comment).text);
103+
}
104+
105+
const IS_BROWSER_REFERENCE_COMMENT_NODE_REGEX = /^\d+$/;
106+
107+
// returns browser data from comment text
108+
function getBrowserData(text: string): { browserslist: Array<string>, isNumbered: false } | { browserslist: Array<Array<string>>, isNumbered: true } {
109+
const browserDataNumbered = text.match(BROWSER_DATA_MULTI_REGEX);
110+
if (!browserDataNumbered) {
111+
return {
112+
browserslist: getBrowsersList(text.replace(BROWSER_DATA_NEWLINE_REGEX, '')),
113+
isNumbered: false,
114+
};
115+
}
116+
117+
return {
118+
browserslist: browserDataNumbered.map(
119+
browserslistPart => getBrowsersList(browserslistPart.replace(BROWSER_DATA_NUMBERED_NEWLINE_REGEX, '$1')),
120+
),
121+
isNumbered: true,
122+
};
123+
}
124+
125+
const BROWSER_DATA_MULTI_REGEX = /(\n \* \d+\. (?:[^\n]+|\n \* {4,})+)/g;
126+
const BROWSER_DATA_NEWLINE_REGEX = /^\*\n \* ?|\n \*/g;
127+
const BROWSER_DATA_NUMBERED_NEWLINE_REGEX = /\n \* (?:( )\s*)?/g;
128+
129+
// returns a browserlist from comment text
130+
function getBrowsersList(text: string): Array<string> {
131+
return text.split(GET_BROWSERSLIST_IN_SPLIT_REGEX).slice(1).map(
132+
part => part.split(GET_BROWSERSLIST_AND_SPLIT_REGEX).filter(part2 => part2),
133+
).reduce(
134+
(acc, val) => acc.concat(val), [])
135+
.map(
136+
part => part.replace(
137+
GET_BROWSERSLIST_QUERY_REGEX,
138+
($0, browser, query) => browser === 'all'
139+
? '> 0%'
140+
: `${browser}${query
141+
? /^((?:\d*\.)?\d+)-$/.test(query)
142+
? ` <= ${query.slice(0, -1)}`
143+
: ` ${query}`
144+
: ' > 0'
145+
}`,
146+
).toLowerCase(),
147+
);
148+
}
149+
150+
const GET_BROWSERSLIST_IN_SPLIT_REGEX = /\s+in\s+/;
151+
const GET_BROWSERSLIST_AND_SPLIT_REGEX = /(?: and|, and|,)/;
152+
const GET_BROWSERSLIST_QUERY_REGEX = /^\s*(\w+)(?: ((?:(?:\d*\.)?\d+-)?(?:\d*\.)?\d+[+-]?))?.*$/;
153+
154+
function browserslistsOverlap(clientBrowserList: Set<string>, commentBrowsersList: Array<string>): boolean {
155+
return commentBrowsersList.some(commentBrowser => clientBrowserList.has(commentBrowser));
156+
}

‎plugins/postcss-browser-comments/test/_import.mjs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import assert from 'node:assert/strict';
2+
import test from 'node:test';
3+
import plugin from 'postcss-browser-comments';
4+
5+
test('import', () => {
6+
plugin();
7+
assert.ok(plugin.postcss, 'should have "postcss flag"');
8+
assert.equal(typeof plugin, 'function', 'should return a function');
9+
});
10+

‎plugins/postcss-browser-comments/test/_require.cjs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const assert = require('node:assert/strict');
2+
const test = require('node:test');
3+
const plugin = require('postcss-browser-comments');
4+
5+
test('require', () => {
6+
plugin();
7+
assert.ok(plugin.postcss, 'should have "postcss flag"');
8+
assert.equal(typeof plugin, 'function', 'should return a function');
9+
});

‎plugins/postcss-browser-comments/test/_tape.mjs

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { postcssTape } from '@csstools/postcss-tape';
2+
import plugin from 'postcss-browser-comments';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: 'supports basic usage',
7+
options: {
8+
browsers: ['IE 11', 'Safari >= 8', 'Firefox >= 50', 'Chrome >= 50'],
9+
},
10+
},
11+
'basic:ie': {
12+
message: 'supports IE',
13+
options: {
14+
browsers: ['IE > 0'],
15+
},
16+
},
17+
'basic:ie-10': {
18+
message: 'supports IE 10',
19+
options: {
20+
browsers: ['IE 10'],
21+
},
22+
},
23+
'examples/example-1': {
24+
message: 'minimal example',
25+
options: {
26+
browsers: ['last 2 Chrome versions'],
27+
},
28+
},
29+
'examples/example-2': {
30+
message: 'minimal example',
31+
options: {
32+
browsers: ['last 2 Firefox versions'],
33+
},
34+
},
35+
});

‎plugins/postcss-browser-comments/test/basic.ie-10.expect.css

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
/*! normalize.css v8.0.0 | MIT License | github.com/csstools/normalize.css */
2+
3+
/* Document
4+
* ========================================================================== */
5+
6+
/**
7+
* 1. Correct the line height in all browsers.
8+
* 2. Prevent adjustments of font size after orientation changes in
9+
* IE on Windows Phone and in iOS.
10+
*/
11+
12+
html {
13+
-ms-text-size-adjust: 100%; /* 2 */
14+
-webkit-text-size-adjust: 100%; /* 2 */
15+
}
16+
17+
/* Sections
18+
* ========================================================================== */
19+
20+
/* Grouping content
21+
* ========================================================================== */
22+
23+
/**
24+
* 1. Add the correct box sizing in Firefox.
25+
* 2. Show the overflow in Edge and IE.
26+
*/
27+
28+
hr {
29+
overflow: visible; /* 2 */
30+
}
31+
32+
/**
33+
* Add the correct display in IE.
34+
*/
35+
36+
main {
37+
display: block;
38+
}
39+
40+
/* Text-level semantics
41+
* ========================================================================== */
42+
43+
/**
44+
* Remove the gray background on active links in IE 10.
45+
*/
46+
47+
a {
48+
background-color: transparent; /* 1 */
49+
}
50+
51+
/**
52+
* Add the correct text decoration in Edge, IE, Opera, and Safari.
53+
*/
54+
55+
abbr[title] {
56+
text-decoration: underline;
57+
text-decoration: underline dotted;
58+
}
59+
60+
/* Embedded content
61+
* ========================================================================== */
62+
63+
/**
64+
* Remove the border on images inside links in IE 10-.
65+
*/
66+
67+
img {
68+
border-style: none;
69+
}
70+
71+
/**
72+
* Hide the overflow in IE.
73+
*/
74+
75+
svg:not(:root) {
76+
overflow: hidden;
77+
}
78+
79+
/* Forms
80+
* ========================================================================== */
81+
82+
/**
83+
* 1. Show the overflow in IE.
84+
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
85+
*/
86+
87+
button {
88+
overflow: visible; /* 1 */
89+
text-transform: none; /* 2 */
90+
}
91+
92+
/**
93+
* Show the overflow in Edge and IE.
94+
*/
95+
96+
input {
97+
overflow: visible;
98+
}
99+
100+
/**
101+
* 1. Correct the text wrapping in Edge and IE.
102+
* 2. Correct the color inheritance from `fieldset` elements in IE.
103+
* 3. Remove the padding so developers are not caught out when they zero out
104+
* `fieldset` elements in all browsers.
105+
*/
106+
107+
legend {
108+
box-sizing: border-box; /* 1 */
109+
color: inherit; /* 2 */
110+
display: table; /* 1 */
111+
max-width: 100%; /* 1 */
112+
white-space: normal; /* 1 */
113+
}
114+
115+
/**
116+
* 1. Add the correct display in Edge and IE.
117+
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
118+
*/
119+
120+
progress {
121+
display: inline-block; /* 1 */
122+
}
123+
124+
/**
125+
* Remove the default vertical scrollbar in IE.
126+
*/
127+
128+
textarea {
129+
overflow: auto;
130+
}
131+
132+
/**
133+
* 1. Add the correct box sizing in IE 10-.
134+
* 2. Remove the padding in IE 10-.
135+
*/
136+
137+
[type="checkbox"],
138+
[type="radio"] {
139+
box-sizing: border-box; /* 1 */
140+
padding: 0; /* 2 */
141+
}
142+
143+
/* Interactive
144+
* ========================================================================== */
145+
146+
/*
147+
* Add the correct display in Edge and IE.
148+
*/
149+
150+
details {
151+
display: block;
152+
}
153+
154+
/*
155+
* Add the correct styles in Edge, IE, and Safari.
156+
*/
157+
158+
dialog {
159+
background-color: white;
160+
border: solid;
161+
color: black;
162+
display: block;
163+
height: -moz-fit-content;
164+
height: -webkit-fit-content;
165+
height: fit-content;
166+
left: 0;
167+
margin: auto;
168+
padding: 1em;
169+
position: absolute;
170+
right: 0;
171+
width: -moz-fit-content;
172+
width: -webkit-fit-content;
173+
width: fit-content;
174+
}
175+
176+
dialog:not([open]) {
177+
display: none;
178+
}
179+
180+
/*
181+
* Add the correct display in all browsers.
182+
*/
183+
184+
summary {
185+
display: list-item;
186+
}
187+
188+
/* Scripting
189+
* ========================================================================== */
190+
191+
/**
192+
* Add the correct display in IE.
193+
*/
194+
195+
template {
196+
display: none;
197+
}
198+
199+
/* User interaction
200+
* ========================================================================== */
201+
202+
/**
203+
* Add the correct display in IE 10-.
204+
*/
205+
206+
[hidden] {
207+
display: none;
208+
}

‎plugins/postcss-browser-comments/test/basic.ie.expect.css

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
/*! normalize.css v8.0.0 | MIT License | github.com/csstools/normalize.css */
2+
3+
/* Document
4+
* ========================================================================== */
5+
6+
/**
7+
* 1. Correct the line height in all browsers.
8+
* 2. Prevent adjustments of font size after orientation changes in
9+
* IE on Windows Phone and in iOS.
10+
*/
11+
12+
html {
13+
line-height: 1.15; /* 1 */
14+
-ms-text-size-adjust: 100%; /* 2 */
15+
-webkit-text-size-adjust: 100%; /* 2 */
16+
}
17+
18+
/* Sections
19+
* ========================================================================== */
20+
21+
/* Grouping content
22+
* ========================================================================== */
23+
24+
/**
25+
* 1. Add the correct box sizing in Firefox.
26+
* 2. Show the overflow in Edge and IE.
27+
*/
28+
29+
hr {
30+
overflow: visible; /* 2 */
31+
}
32+
33+
/**
34+
* Add the correct display in IE.
35+
*/
36+
37+
main {
38+
display: block;
39+
}
40+
41+
/**
42+
* 1. Correct the inheritance and scaling of font size in all browsers.
43+
* 2. Correct the odd `em` font sizing in all browsers.
44+
*/
45+
46+
pre {
47+
font-family: monospace, monospace; /* 1 */
48+
font-size: 1em; /* 2 */
49+
}
50+
51+
/* Text-level semantics
52+
* ========================================================================== */
53+
54+
/**
55+
* Remove the gray background on active links in IE 10.
56+
*/
57+
58+
a {
59+
background-color: transparent; /* 1 */
60+
}
61+
62+
/**
63+
* Add the correct text decoration in Edge, IE, Opera, and Safari.
64+
*/
65+
66+
abbr[title] {
67+
text-decoration: underline;
68+
text-decoration: underline dotted;
69+
}
70+
71+
/**
72+
* 1. Correct the inheritance and scaling of font size in all browsers.
73+
* 2. Correct the odd `em` font sizing in all browsers.
74+
*/
75+
76+
code,
77+
kbd,
78+
samp {
79+
font-family: monospace, monospace; /* 1 */
80+
font-size: 1em; /* 2 */
81+
}
82+
83+
/**
84+
* Add the correct font size in all browsers.
85+
*/
86+
87+
small {
88+
font-size: 80%;
89+
}
90+
91+
/* Embedded content
92+
* ========================================================================== */
93+
94+
/**
95+
* Add the correct display in IE 9-.
96+
*/
97+
98+
audio,
99+
video {
100+
display: inline-block;
101+
}
102+
103+
/**
104+
* Remove the border on images inside links in IE 10-.
105+
*/
106+
107+
img {
108+
border-style: none;
109+
}
110+
111+
/**
112+
* Hide the overflow in IE.
113+
*/
114+
115+
svg:not(:root) {
116+
overflow: hidden;
117+
}
118+
119+
/* Forms
120+
* ========================================================================== */
121+
122+
/**
123+
* 1. Show the overflow in IE.
124+
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
125+
*/
126+
127+
button {
128+
overflow: visible; /* 1 */
129+
text-transform: none; /* 2 */
130+
}
131+
132+
/**
133+
* Show the overflow in Edge and IE.
134+
*/
135+
136+
input {
137+
overflow: visible;
138+
}
139+
140+
/**
141+
* 1. Correct the text wrapping in Edge and IE.
142+
* 2. Correct the color inheritance from `fieldset` elements in IE.
143+
* 3. Remove the padding so developers are not caught out when they zero out
144+
* `fieldset` elements in all browsers.
145+
*/
146+
147+
legend {
148+
box-sizing: border-box; /* 1 */
149+
color: inherit; /* 2 */
150+
display: table; /* 1 */
151+
max-width: 100%; /* 1 */
152+
padding: 0; /* 3 */
153+
white-space: normal; /* 1 */
154+
}
155+
156+
/**
157+
* 1. Add the correct display in Edge and IE.
158+
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
159+
*/
160+
161+
progress {
162+
display: inline-block; /* 1 */
163+
}
164+
165+
/**
166+
* Remove the default vertical scrollbar in IE.
167+
*/
168+
169+
textarea {
170+
overflow: auto;
171+
}
172+
173+
/**
174+
* 1. Add the correct box sizing in IE 10-.
175+
* 2. Remove the padding in IE 10-.
176+
*/
177+
178+
[type="checkbox"],
179+
[type="radio"] {
180+
box-sizing: border-box; /* 1 */
181+
padding: 0; /* 2 */
182+
}
183+
184+
/* Interactive
185+
* ========================================================================== */
186+
187+
/*
188+
* Add the correct display in Edge and IE.
189+
*/
190+
191+
details {
192+
display: block;
193+
}
194+
195+
/*
196+
* Add the correct styles in Edge, IE, and Safari.
197+
*/
198+
199+
dialog {
200+
background-color: white;
201+
border: solid;
202+
color: black;
203+
display: block;
204+
height: -moz-fit-content;
205+
height: -webkit-fit-content;
206+
height: fit-content;
207+
left: 0;
208+
margin: auto;
209+
padding: 1em;
210+
position: absolute;
211+
right: 0;
212+
width: -moz-fit-content;
213+
width: -webkit-fit-content;
214+
width: fit-content;
215+
}
216+
217+
dialog:not([open]) {
218+
display: none;
219+
}
220+
221+
/*
222+
* Add the correct display in all browsers.
223+
*/
224+
225+
summary {
226+
display: list-item;
227+
}
228+
229+
/* Scripting
230+
* ========================================================================== */
231+
232+
/**
233+
* Add the correct display in IE 9-.
234+
*/
235+
236+
canvas {
237+
display: inline-block;
238+
}
239+
240+
/**
241+
* Add the correct display in IE.
242+
*/
243+
244+
template {
245+
display: none;
246+
}
247+
248+
/* User interaction
249+
* ========================================================================== */
250+
251+
/**
252+
* Add the correct display in IE 10-.
253+
*/
254+
255+
[hidden] {
256+
display: none;
257+
}

‎plugins/postcss-browser-comments/test/examples/example-1.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Prevent adjustments of font size after orientation changes in IE and iOS.
3+
*/
4+
5+
html {
6+
-ms-text-size-adjust: 100%;
7+
-webkit-text-size-adjust: 100%;
8+
}

‎plugins/postcss-browser-comments/test/examples/example-1.expect.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎plugins/postcss-browser-comments/test/examples/example-2.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* 1. Add the correct box sizing in Firefox.
3+
* 2. Show the overflow in Edge and IE.
4+
*/
5+
6+
hr {
7+
box-sizing: content-box; /* 1 */
8+
height: 0; /* 1 */
9+
overflow: visible; /* 2 */
10+
}

‎plugins/postcss-browser-comments/test/examples/example-2.expect.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* 1. Add the correct box sizing in Firefox.
3+
* 2. Show the overflow in Edge and IE.
4+
*/
5+
6+
hr {
7+
box-sizing: content-box; /* 1 */
8+
height: 0; /* 1 */
9+
}

‎plugins/postcss-browser-comments/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "dist",
5+
"declarationDir": ".",
6+
"strict": true
7+
},
8+
"include": ["./src/**/*"],
9+
"exclude": ["dist"]
10+
}

0 commit comments

Comments
 (0)
Please sign in to comment.