Skip to content

Commit ce5fc4c

Browse files
SassNinjaSassNinja
committed
init
0 parents  commit ce5fc4c

File tree

6 files changed

+226
-0
lines changed

6 files changed

+226
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# postcss-combine-media-query
2+
3+
If you are used to write the media queries of your components within those components (what you should do instead of maintaining a large global media query file) you might end up with CSS that contains the same media query rule multiple times.
4+
5+
```css
6+
.foo { color: red; }
7+
@media (min-width: 1024px) {
8+
.foo { color: green; }
9+
}
10+
.bar { font-size: 1rem; }
11+
@media (min-width: 1024px) {
12+
.bar { font-size: 2rem; }
13+
}
14+
```
15+
16+
While this is totally fine in development (and supports a modular structure in particular when using [Sass](https://sass-lang.com/)) it's not that good for production where you wanna keep your CSS as small as possible.
17+
18+
That's the use case this plugin is built for!
19+
It looks for equal media query rules and appends them combined.
20+
21+
```css
22+
.foo { color: red; }
23+
.bar { font-size: 1rem; }
24+
@media (min-width: 1024px) {
25+
.foo { color: green; }
26+
.bar { font-size: 2rem; }
27+
}
28+
```
29+
30+
## Installation
31+
32+
- npm
33+
```bash
34+
npm install postcss-combine-media-query --save-dev
35+
```
36+
37+
- yarn
38+
```bash
39+
yarn add postcss-combine-media-query --dev
40+
```
41+
42+
## Usage
43+
44+
Simply add the plugin to your PostCSS config.
45+
That's all – easy as pie :wink: (there are no options)
46+
47+
If you're not familiar with using PostCSS you should read the official [PostCSS documentation](https://github.com/postcss/postcss#usage) first.
48+
49+
## Side Effects
50+
51+
Since this plugin moves all media queries to end of the file it may introduce bugs if your CSS is not well structured. So keep that in mind!
52+
53+
Let's say you've got the following code which results in `.foo` being yellow on desktop.
54+
55+
```css
56+
.foo { color: red; }
57+
@media (min-width: 1024px) {
58+
.foo { color: green; }
59+
}
60+
.foo { color: yellow; }
61+
```
62+
63+
Once you use this plugin it will change into `green` because the media query has been moved.
64+
65+
```css
66+
.foo { color: red; }
67+
.foo { color: yellow; }
68+
@media (min-width: 1024px) {
69+
.foo { color: green; }
70+
}
71+
```
72+
73+
Therefore it's recommended to use this plugin in development as well to detect such side effects sooner.
74+
75+
## Credits
76+
77+
If this plugin is helpful to you it'll be great when you give me a star on github and share it. Keeps me motivated to continue the development.

‎index.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
const postcss = require('postcss');
3+
4+
module.exports = postcss.plugin('postcss-combine-media-query', opts => {
5+
6+
const atRules = {};
7+
8+
function addToAtRules(atRule) {
9+
const key = atRule.params;
10+
11+
if (!atRules[key]) {
12+
atRules[key] = postcss.atRule({ name: atRule.name, params: atRule.params });
13+
}
14+
atRule.nodes.forEach(node => {
15+
atRules[key].append(node.clone());
16+
});
17+
18+
atRule.remove();
19+
}
20+
21+
return root => {
22+
23+
root.walkAtRules('media', atRule => {
24+
addToAtRules(atRule);
25+
});
26+
27+
Object.keys(atRules).forEach(key => {
28+
root.append(atRules[key]);
29+
});
30+
};
31+
});

‎package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "postcss-combine-media-query",
3+
"version": "1.0.0",
4+
"description": "PostCSS plugin to combine equal media query rules.",
5+
"author": "Kai Falkowski",
6+
"license": "MIT",
7+
"main": "index.js",
8+
"scripts": {},
9+
"keywords": [
10+
"postcss",
11+
"plugin",
12+
"postcss-plugin",
13+
"css",
14+
"mediaquery",
15+
"mq",
16+
"combine",
17+
"optimization"
18+
],
19+
"peerDependencies": {
20+
"postcss": "^7.0.21"
21+
},
22+
"devDependencies": {},
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/SassNinja/postcss-combine-media-query.git"
26+
}
27+
}

‎yarn.lock

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
ansi-styles@^3.2.1:
6+
version "3.2.1"
7+
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
8+
integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
9+
dependencies:
10+
color-convert "^1.9.0"
11+
12+
chalk@^2.4.2:
13+
version "2.4.2"
14+
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
15+
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
16+
dependencies:
17+
ansi-styles "^3.2.1"
18+
escape-string-regexp "^1.0.5"
19+
supports-color "^5.3.0"
20+
21+
color-convert@^1.9.0:
22+
version "1.9.3"
23+
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
24+
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
25+
dependencies:
26+
color-name "1.1.3"
27+
28+
[email protected]:
29+
version "1.1.3"
30+
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
31+
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
32+
33+
escape-string-regexp@^1.0.5:
34+
version "1.0.5"
35+
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
36+
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
37+
38+
has-flag@^3.0.0:
39+
version "3.0.0"
40+
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
41+
integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
42+
43+
postcss@^7.0.21:
44+
version "7.0.21"
45+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
46+
integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==
47+
dependencies:
48+
chalk "^2.4.2"
49+
source-map "^0.6.1"
50+
supports-color "^6.1.0"
51+
52+
source-map@^0.6.1:
53+
version "0.6.1"
54+
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
55+
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
56+
57+
supports-color@^5.3.0:
58+
version "5.5.0"
59+
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
60+
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
61+
dependencies:
62+
has-flag "^3.0.0"
63+
64+
supports-color@^6.1.0:
65+
version "6.1.0"
66+
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
67+
integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
68+
dependencies:
69+
has-flag "^3.0.0"

0 commit comments

Comments
 (0)