TripSit
/
TripSit_Suite
Archived
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
This repository has been archived on 2020-11-02. You can view files and clone it, but cannot push or open issues or pull requests.
TripSit_Suite/node_modules/postcss-discard-overridden
History
cranberry ed23347e56 Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
..
dist Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
node_modules Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
src Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
CHANGELOG.md Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
LICENSE Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
README.md Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
metadata.toml Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
package.json Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
yarn.lock Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00

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.