[WIP]postcss-split-prefers-reduced-motion

split prefers-reduced-motion rules into external file

input

.animation {
  display: block;
  background-color: #000;
  color: #fff;
  animation: foo 1s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

@keyframes foo {
   0% {
     transform: translate(0);
   }
   50% {
     transform: translate(0, 1rem);
   }
   100% {
     transform: translate(0);
   }
 }

Output

.animation {
  display: block;
  background-color: #000;
  color: #fff;
  animation: foo 1s linear infinite both;
}

@keyframes foo {
   0% {
     transform: translate(0);
   }
   50% {
     transform: translate(0, 1rem);
   }
   100% {
     transform: translate(0);
   }
 }

Export

.animation {
  animation: none;
}

Load file with link element.

<link rel="stylesheet" href="export.css" media="(prefers-reduced-motion: reduce)">

Install

clone this repository

Usage

module.exports = ctx => ({
  plugins: [
    require('postcss-split-prefers-reduced-motion')({
      value: 'reduce', // reduce|no-preference
      exportTo: 'split.css'
    })
  ]
});

Options

value

string. see prefers-reduced-motion - CSS: Cascading Style Sheets | MDN