mirror of
https://github.com/hanzoai/autoprefixer.git
synced 2026-09-24 16:55:58 +00:00
Bogdan DolinandAndrey Sitnik
47d22297bf
* [grid-area] implement duplicate grid-areas * Adding tests for #1091 duplicate area names * small refactoring * typos in the test case output * fix typos in the test cases * remove duplicate selectors * fix the order of rules (now it is correct order) * change the selectors * Implement areas with duplicate selectors this needs refactoring, but overall it should work fine * fix incorrect duplicate selectors spawning * Implement warning if grid-template selector is not found * Add tests for warning * remoove unnecessary 'expect' function * Fix bug when -ms-grid-row/column-span wasn't added I forgot to fix this in the previous PR, so doing it now :) * refactor and add comments * warn user when grid is enabled and display: contents; is used * fix bug when last similar rule is undefined * fix areas to be inside @media with grid-template (only if areas above) * add more test cases * fix the previous test case (some rules is merged now) * merge rules inside test case * add the functionality to allow more rule merging * remove unnecessary conditions and refactor * small refactoring * Remove 'duplicate area names' warning functionality * Rewrite the implementation of insertArea function Hack API wasn't enough to implement grid-area rules with duplicate area names, so I moved the call of insertAreas function to processor.js and rewrote it from the start. * Update stylesheet test cases to fit the new duplicate rules feature As we have duplicate grid-area rules support, the order of rules is changed now. Before that the pack of duplicate rules with prefixes was inserted after the last grid-area rule, but now each duplicate rule is inserted right after the matched rule. We also preserve the order of prefixed grid-area rules and merge the rules with the same media parameters * Change the order of test case with media rules We should pay attention to this commit, I'm not sure if it's right, but the output order for grid-area rules inside media rule is changed. Can it break something? * Fix the warning test to match the changed css test case * Rename duplicate-grid-areas-above -> duplicate-grid-areas-complex I also added the additional complex test case as Dan showed [here](https://github.com/postcss/autoprefixer/pull/1095#issuecomment-412489115) * [refactor] add comments for clarity, move the piece of code to a different function * Change warning message (make it more informative) * Fix typos * Fix the bug when not found grid-area identifier crashed the compiler * Change the warning message a little * Improve warning function to show warnings only for selectors with duplicate area names * Change warning message * Add more test cases * Fix the bug when control comments were ignored for grid-area
270 lines
3.7 KiB
CSS
270 lines
3.7 KiB
CSS
.a {
|
|
grid-template: 10px repeat(4, 250px 10px) 20px / auto 1fr;
|
|
}
|
|
|
|
.b {
|
|
grid-template:
|
|
[header-left] "head head" 30px [header-right]
|
|
[main-left] "nav main" 1fr [main-right]
|
|
[footer-left] "nav foot" 30px [footer-right]
|
|
/ 120px repeat(4, 250px 10px);
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.b {
|
|
grid-template:
|
|
[header-left] "head" 30px [header-right]
|
|
[nav-left] "nav" auto [nav-right]
|
|
[main-left] "main" 1fr [main-right]
|
|
[footer-left] "foot" 30px [footer-right]
|
|
/ 1fr;
|
|
}
|
|
}
|
|
|
|
.c {
|
|
grid-template:
|
|
"hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
|
|
"sd sd sd mn mn mn mn mn mn" minmax(100px, auto)
|
|
"ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
|
|
/ 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
.d {
|
|
grid-template: 10px / 200px;
|
|
}
|
|
|
|
.e {
|
|
grid-template: 10px;
|
|
}
|
|
|
|
.f {
|
|
grid-template:
|
|
"head head"
|
|
"nav main" 20px
|
|
"nav foot"
|
|
/ 1fr 1fr;
|
|
}
|
|
|
|
.head {
|
|
grid-area: head;
|
|
}
|
|
|
|
.nav {
|
|
grid-area: nav;
|
|
}
|
|
|
|
.main {
|
|
grid-area: main;
|
|
}
|
|
|
|
.foot {
|
|
grid-area: foot;
|
|
}
|
|
|
|
.hd {
|
|
grid-area: hd;
|
|
}
|
|
|
|
.sd {
|
|
grid-area: sd;
|
|
}
|
|
|
|
.mn {
|
|
grid-area: mn;
|
|
}
|
|
|
|
.ft {
|
|
grid-area: ft;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"a b" 100px
|
|
"c d" 100px
|
|
"e f" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
@media (min-width: 600px){
|
|
.grid {
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"a b c" 100px
|
|
"d e f" 100px /
|
|
1fr 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.cell-A {
|
|
grid-area: a;
|
|
}
|
|
.cell-B {
|
|
grid-area: b;
|
|
}
|
|
.cell-C {
|
|
grid-area: c;
|
|
}
|
|
.cell-D {
|
|
grid-area: d;
|
|
}
|
|
.cell-E {
|
|
grid-area: e;
|
|
}
|
|
.cell-F {
|
|
grid-area: f;
|
|
}
|
|
|
|
.g {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"g g" 100px
|
|
"g g" 100px
|
|
"h h" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
/* Should trigger a warning */
|
|
.g-conflict {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"g g" 100px
|
|
"g g" 100px
|
|
"h h" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
/* This should *not* trigger a warning */
|
|
.g {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"g h" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
/* This *should* trigger a warning */
|
|
.g-conflict-2 {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"g h" 100px /
|
|
1fr 1fr;
|
|
}
|
|
}
|
|
|
|
/* comma list tests */
|
|
/* None of these should throw any warnings (unless specified) */
|
|
.i, .j {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"i j" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.i {
|
|
grid-template:
|
|
"i" 100px
|
|
"j" 100px /
|
|
1fr;
|
|
}
|
|
.j {
|
|
grid-template:
|
|
"i" 100px
|
|
"j" 100px /
|
|
1fr;
|
|
}
|
|
|
|
/* This one should throw a warning */
|
|
.k {
|
|
grid-template:
|
|
"i" 100px
|
|
"j" 100px /
|
|
1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.i, .j {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"i" 100px
|
|
"j" 100px /
|
|
1fr;
|
|
}
|
|
}
|
|
|
|
/* media query test */
|
|
@media (min-width: 601px) {
|
|
.l {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"l m" 100px /
|
|
1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.l {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"l m" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
/* this should display a warning */
|
|
.m {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
"m z" 100px /
|
|
1fr 1fr;
|
|
}
|
|
|
|
/* this should display a warning */
|
|
.z, .second-z {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template:
|
|
". z" 100px /
|
|
1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.k-1 {
|
|
grid-area: g;
|
|
}
|
|
|
|
.k-2 {
|
|
grid-area: h;
|
|
}
|
|
|
|
.k-3 {
|
|
grid-area: i;
|
|
}
|
|
|
|
.k-4 {
|
|
grid-area: j;
|
|
}
|
|
|
|
.k-5 {
|
|
grid-area: l;
|
|
}
|
|
|
|
.k-6, .k-7 {
|
|
grid-area: m;
|
|
}
|
|
|
|
.k-8, .k-9 {
|
|
grid-area: z;
|
|
}
|