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
69 lines
875 B
CSS
69 lines
875 B
CSS
.grid-template-sequence {
|
|
display: grid;
|
|
grid-template:
|
|
"foo foo"
|
|
"bar bar"
|
|
"baz baz"
|
|
/ 1fr 1fr;
|
|
}
|
|
|
|
@media (min-width: 300px) {
|
|
.grid-template-sequence {
|
|
grid-template:
|
|
"foo foo"
|
|
"bar bar" 20px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.grid-template-sequence {
|
|
grid-template:
|
|
"foo foo"
|
|
"bar bar" 20px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.grid-template-sequence {
|
|
grid-template:
|
|
"x x"
|
|
"foo foo"
|
|
"bar bar" 20px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.foo {
|
|
grid-area: foo;
|
|
}
|
|
|
|
.bar {
|
|
grid-area: bar;
|
|
}
|
|
|
|
.x {
|
|
grid-area: x;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.grid-2 {
|
|
grid-template:
|
|
"a a"
|
|
"a a"
|
|
"b b" 20px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.grid-2 {
|
|
grid-template:
|
|
"a a"
|
|
"a a"
|
|
"b b" 20px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|