You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Björn
b963b3396c
|
5 years ago | |
---|---|---|
.. | ||
dist | 5 years ago | |
src | 5 years ago | |
CHANGELOG.md | 5 years ago | |
LICENSE | 5 years ago | |
README.md | 5 years ago | |
metadata.toml | 5 years ago | |
package.json | 5 years ago | |
yarn.lock | 5 years ago |
README.md
PostCSS Discard Overridden
PostCSS plugin to discard overridden @keyframes
or @counter-style
.
@keyframes
or @counter-style
will be overridden by those who share the same identifiers and appear later in stylesheets. So we can discard all of them except the last one. When defined inside a @media
or @supports
rule, @keyframes
and @counter-style
rules only override global rules in some of the client browsers so they need handled separately. This plugin has taken care of this and transforms the PostCss AST safely.
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@media (max-width: 500px) {
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@supports (display: flex) {
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (max-width: 500px) {
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@supports (display: flex) {
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Usage
See the PostCSS documentation for examples for your environment.
Contributors
See CONTRIBUTORS.md.