File tree 6 files changed +3580
-29
lines changed
6 files changed +3580
-29
lines changed Original file line number Diff line number Diff line change
1
+ language : node_js
2
+ node_js :
3
+ - " lts/*"
Original file line number Diff line number Diff line change 1
1
# postcss-combine-media-query
2
2
3
+ [ ![ Build Status] ( https://travis-ci.com/SassNinja/postcss-combine-media-query.svg?branch=master )] ( https://travis-ci.com/SassNinja/postcss-combine-media-query )
4
+
3
5
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
6
5
7
``` css
Original file line number Diff line number Diff line change 5
5
"author" : " Kai Falkowski" ,
6
6
"license" : " MIT" ,
7
7
"main" : " index.js" ,
8
- "scripts" : {},
8
+ "scripts" : {
9
+ "test" : " jest"
10
+ },
9
11
"keywords" : [
10
12
" postcss" ,
11
13
" plugin" ,
16
18
" combine" ,
17
19
" optimization"
18
20
],
19
- "peerDependencies " : {
21
+ "dependencies " : {
20
22
"postcss" : " ^7.0.21"
21
23
},
22
- "devDependencies" : {},
24
+ "devDependencies" : {
25
+ "jest" : " ^24.9.0"
26
+ },
23
27
"repository" : {
24
28
"type" : " git" ,
25
29
"url" : " https://github.com/SassNinja/postcss-combine-media-query.git"
Original file line number Diff line number Diff line change
1
+
2
+ module . exports = `
3
+ .foo {
4
+ color: red;
5
+ }
6
+ @media (min-width: 1024px) {
7
+ .foo {
8
+ color: green;
9
+ }
10
+ }
11
+ @media (min-width: 1200px) {
12
+ .foo {
13
+ color: blue;
14
+ }
15
+ }
16
+ .bar {
17
+ font-size: 1rem;
18
+ @supports (display: grid) {
19
+ display: block;
20
+ }
21
+ }
22
+ @media (min-width: 1024px) {
23
+ .bar {
24
+ font-size: 2rem;
25
+ @supports (display: grid) {
26
+ display: grid;
27
+ }
28
+ }
29
+ }
30
+ @media screen and (min-width: 1024px) {
31
+ .bar {
32
+ content: 'similar but different query'
33
+ }
34
+ }
35
+ ` ;
Original file line number Diff line number Diff line change
1
+
2
+ const postcss = require ( 'postcss' ) ;
3
+ const plugin = require ( '../index' ) ;
4
+ const data = require ( './default.data' ) ;
5
+
6
+ let root ;
7
+
8
+ beforeAll ( ( ) => {
9
+ root = postcss ( [ plugin ( ) ] ) . process ( data ) . root ;
10
+ } ) ;
11
+
12
+ test ( 'should combine equal media rules' , ( ) => {
13
+ let count = 0 ;
14
+
15
+ root . walkAtRules ( 'media' , rule => {
16
+ count ++ ;
17
+ } ) ;
18
+ expect ( count ) . toBe ( 3 ) ;
19
+ } ) ;
20
+
21
+ test ( 'should move all media rules to the end' , ( ) => {
22
+ let endsWithMedia = true ;
23
+ let hasMedia = false ;
24
+
25
+ root . nodes . forEach ( node => {
26
+ if ( node . name === 'media' ) {
27
+ hasMedia = true ;
28
+ }
29
+ if ( hasMedia && node . name !== 'media' ) {
30
+ endsWithMedia = false ;
31
+ }
32
+ expect ( endsWithMedia ) . toBe ( true ) ;
33
+ } ) ;
34
+ } ) ;
You can’t perform that action at this time.
0 commit comments