Create React App PostCSS

Create React App PostCSS lets you use PostCSS plugins with Create React App 1.x.

npm install create-react-app-postcss

Once installed, Create React App PostCSS lets you require the PostCSS plugins you want to use right in the code itself.

@use postcss-preset-env { stage: 0 }
 
h1 {
  margin: 0;
 
  @media (min-width: 768px) {
    margin-top: 1.875rem;
  }
 
  & a {
    text-decoration: none;
  }
}
 
/* becomes */
 
h1 {
  margin: 0;
}
 
@media (min-width: 768px) {
  h1 {
    margin-top: 1.875rem;
  }
}
 
h1 a {
  text-decoration: none;
}

This is the same technique adopted by CodePen, which is powered by the PostCSS Use plugin.

How to use a plugin

Once Create React App PostCSS is installed, all you need to do is install a plugin and require it directly from your CSS.

For example, if we want to embed SVGs into our CSS, we install the PostCSS SVG plugin:

npm install postcss-svg

And then we require it from our CSS:

@use postcss-svg;
 
.icon--square {
  content: url("shared-sprites#square" param(--color #639));
}

And our CSS will become:

.icon--square {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='fill:#639' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

That’s it. Now, go forth and make great stuff!