At its core, PostCSS allows you to programmatically change or modify your style sheets using a JavaScript plugin. So you can think of it as a series of pipes, where you have all of these different JavaScript plugins that will manipulate your CSS in some specific way. So the first plugin will hit your CSS, it'll change a few things, and then pass it on to the next pipe, where that plugin will make some tweaks and then pass it on. So in effect, you are transforming your CSS through these JavaScript plugins that follow a specific API. Okay, so let's see how we might use that in our own projects. Now out of the box, we actually reference the AutoPrefixer plugin.

Yeah, sorts rules and at rules and sorts your properties. Okay, let's just try to get this to work. So we will pull this in, save it to my devDependencies list, and if it's called PostCSS Sorting, that is what we will require. So we'll switch over to our editor, and now if I want to add additional PostCSS plugins, I can do it through this options method. So think of this as where we will define an array of PostCSS plugins. So I will require that new one we pulled in, and yeah, think about it. What this code is saying is, I want to compile app.scss down to CSS. But then I want to filter that generated CSS through this array of PostCSS plugins, each

What this code is saying is, I want to compile app.scss down to CSS. But then I want to filter that generated CSS through this array of PostCSS plugins, each of which is going to modify that CSS in some way, and then finally we will output it to this location. But now I believe, let's switch over. The plugin has no default options, everything is disabled by default. Yeah, so right now this isn't going to do anything. Let's take a look. Here is our current file. It's blank.

Here is our current file. It's blank. Let's just say margin is 10 pixels. We'll put z-index at the top. Actually let's do it old school. It's going to be a million, and color, of course, is red. Okay, so right now if I were to compile all of this down, and switch back, yeah, you're not going to see anything at all. It's identical. However, right here we can see I can add an option for properties order.

As it turns out, PostCSS can reproduce anything you would get from a preprocessor, and anything and more. So some people decide, I don't even want to deal with the weight of something like Sass, I'm just going to do everything with PostCSS instead. All right, well, if we take a look into our IntelliSense palette, there is a mixed up PostCSS method exactly for this. So this is when you want to write vanilla CSS, but you still want PostCSS to operate upon it to some extent. Now like the other CSS methods, it's going to be the same API. So I could say, here's my source file, and why don't we say, css app.css, and let's tweak

Now like the other CSS methods, it's going to be the same API. So I could say, here's my source file, and why don't we say, css app.css, and let's tweak this. Okay, so this will now be a CSS directory, and within it, we'll have app.css. Okay, so this is what we're starting with. So now, if we take a look at the IntelliSense here, we give it a source, actually let's expand this. We give it a source location, an output path, and then as a third argument, any PostCSS plugins you want. Okay, so this just makes the API a little bit cleaner.

plugins you want. Okay, so this just makes the API a little bit cleaner. We could do something like this instead, and get rid of that, like so. Okay, let's give that one another run. Now we're going to get the exact same thing as before, and actually let's do this two up. So we started with this file, and this is what we ended up with. But now, yeah, maybe I want to opt in to certain things, like variables, I still might want to use. Okay, let's switch back, and let's just look for variables, see what we have here.

want to use. Okay, let's switch back, and let's just look for variables, see what we have here. Okay, looks like we could use PreCSS, contains plugins for Sass-like features. So that's kind of an all-in-one replacement for Sass, I assume. Let's see what else. There's also PostCSS Next, so this allows you to use future standardized CSS features that still aren't supported across all the browsers. So if we wanted to try that, let's look for usage, hmm, there it is. Okay, here we go. So we want to make sure that we pull in PostCSS Next, and then we can reference it.

Okay, here we go. So we want to make sure that we pull in PostCSS Next, and then we can reference it. Okay, let's go back to code, right here, and I will require it, like so. Okay, so now we're sending it through two different PostCSS plugins. Let's see some of the things we can do here. Go to Features, and it will actually take care of automatic vendor prefixes, so we'll probably have to turn that off by default in Mix. I'll show you how to do that. What else? How about Nesting?