A PostCSS plugin that inserts CSS properties from one class into another, like Sass' @extend only better!
Alright, if you've used Sass before you know about
@extend the concept is pretty simple: you take one classes properties and add them to another class in a simple way. In theory,
@extend is awesome, but it doesn't work the way you expect. See this to see how Sass handles extend.
Mixins with Sass work better, you create a bunch of properties in a mixin and you just
@include them wherever you want. But, you now have this extra thing...the mixin itself, it feels kinda dirty to me. This really should be a solved problem, but it's not for some reason.
What I wanted was a way to have the simplicity of
@extend with the behavior of a
Funny thing is I wasn't the only one thinking of it. Adam Wathen was thinking about this when he created Tailwinds. Adam created a PostCSS plugin called
@apply which did almost everything I wanted it to do...except it was part of a framework. Now, Tailwinds is great, I have no issue with it, but I wanted this without needing a framework. Also, I didn't like the name
@apply because that name was being used with custom properties in CSS. I think its been deprecated, but there's a chance it will be taken up again in the future. To me,
@apply is a great name, but it comes with some potential baggage that I'd have to deal with later on, also I feel like
@insert is more descriptive of what the plugin is doing.
$ npm install postcss-insert`
Alright, so how do we use this thing? Take a look below:
Obviously this is a pretty contrived example, but you can see what we're doing here. A better example may be extending a button class:
All props come over, even
!important...unless you disable it
@insert will not strip
!important, but there's an option
stripImportant that you can set to
true and it will...well strip the
stripImportant: true you'd get the following:
This works inside of media queries...unless you disable it
General Plugin Usage
I recommend that this plugin run last in your PostCSS stack. If you're doing any sort of transforms where a class doesn't exist
@insert would fail because it can't find the class. If you run this last (or second-to-last right before something like mqpacker) you'll ensure that all classes are there and ready to go. I may eventually add some sort of silent fail option if it can't find a class, but right now that is not the case. Happy coding!
See PostCSS docs for examples for your environment.