I also love how when he encounters all the errors in the second half of the video he solves them step by step and isn't ashamed of the fact it doesn't just work first try, very important practice in software development to not be afraid of errors!
I've been using tailwind in projects for over a year with postcss as part of the install instructions and had no clue what it is or what it does. Thanks, now I know 🙂
It's funny you chose nesting specifically to illustrate the power of PostCSS (Granted, it is the easiest thing to illustrate) and how in the future it will "just work", because the nesting syntax is very much up in the air. There are at least 4 different versions of the syntax that are being decided upon. Personally I wish the ampersand (&) was always required for 100% of all scenarios (Currently there's maybe a @nest at-rule, and maybe some fancy "requires a pseudo-selector" logic among a few other things). I do appreciate them taking the time to get this right though, so we don't end up with another `!important` that implies "not important", but actually means "very important" or "currentColor" being the only place in css with camelCase, or "nowrap" being a literal typo
Kyle, love your videos. 👏🎬 Have to disagree about SASS being a weird CSS-hybrid. I find writing SASS (not SCSS) incredibly simple and intuitive: Indentation SO much better than brackets, IMHO ... less visual clutter, far fewer lines. The complexity involved with PostCSS is, for me at least, complete overkill for the benefits, most of which are easily implemented with SASS.
The question is not about simplicity, it is more about the possibility to use some advanced features. No one was saying that it is better or simpler to use postcss instead of SASS or SCSS, but still, it is more advanced and you can use tones of its features just like it was shown. I think the thing that matters is the final build and how well it can be optimized.
postccss has autoprefixer, it is currently the fastest processor as well. Yes faster than SASS. And PostCSS can work with all kinds of CSS, not just your favorite flavor of CSS.
well, he only showed a few features, there are probably a lot of plugins that you can use with it that you can't with sass. You could probably use them together if you'd like as well so its not a have one or the other type thing
You’re the only one I know who uses dest folder for destination. I cannot tell if that is a personal preference of yours, but it’s usually called dist for distribution.
Interesting. Love your content...Would help to see something more in depth on vite-react-ts with postcss. common modules worked better than es6, installed postcss plugin to get rid of error highlighting which broke intelasense. Very little support that isn't specific to tailwindcss.
Indeed. I'm not sure if it's a reflecting "our product is so good, people call it sorcery" attitude, but the imagery remains very inappropriate for a tech tool.
@@lionheart4109 actually, that's the golden ratio. although it looks like sorcery as you said, but it's one of the most logical emblem so i don't think it's inappropriate.
Thanks for the video, currently having to struggle to config with bootstrap with vite to enable css module to enable hash class css. Maybe a video would help. Thanks
I guess if you're working on stage 2 and something from stage 2 gets removed completely it's gonna be a bit of a problem. Maybe that's just something you risk by using experimental features, idk
Hmm the syntax highlighting is kinda screwed up for me. Nested property names have same color as tag name selectors and this drives me nuts. I can't find the exact scope to customize it with textMate.
As always there's much more to PostCSS than this and the CLI won't run with an ESM config either out of the box. Real projects also have more than a single css file and that's the misleading part of videos like this: their simplified setup doesn't scale, but that's where things get complicated and complex. To let the POST-processer PostCSS also do PRE-processing work as well requires some rethinking of your CSS code structure. PostCSS is powerful but leveraging that power comes with a price: time. Lots of it. And most of it you'll spend to hunt down documentation for its gazillion features and possibilities. It's fun though if you have it all setup **eventually**. Even if you've decided all you need is indeed just preset-env (which it won't be) you might only be done as soon as you managed to understand its many "features", the stage level they're in by default, and wether you want to keep or loose them. You definitely need to keep your local bowserslist db up to date yourself as time passes. Finding and choosing the right plugins can become a time consuming nightmare. As you sift through the many available, you'll learn many are doing the same thing, or even many things, but with different configurations, prerequisites, or depend on another plugin. Not all of them are well written, too. If you enjoyed preprocessors before, preset-env alone won't get you as far either. It's still a post processor script after all and "feature" names are based off that infamous stages list, but often irritatingly differs from the actual plugin that eventually runs in the background to do the job. Some which you may need or want to configure. However, their documentation is then spread across different (archived) repositories that have been moved to a mono repo, there's the CSSDB project, the preset-env bundle, and all them individual plugins. Plugin order may be crucial and the wrong order may eventually break your "not dev" modes, or only that, when there's no monolithic single .css but many small ones that are "unaware" of each other's contents. Many other plugins that provide beloved preprocessor features like mixins or loops and conditions are either too old (pre PostCSS 8) and long abandoned by their creators or conflict with others, old and new, incl. some refurbished preset-env features. Several plugins even choke in the presence of perfectly valid regular CSS code like pseudo classes and selectors or selector lists, in particular many that introduce syntax sugar in the form of their own made up pseudo classes or at-rules. If you got used to organise you styles to work with preprocessors like Sass, Less, or Stylus, think again. This familiar setup and filename scheme likely won't do the trick anymore with PostCSS. You may need to translate and rewrite vanilla PRE-processor stuff into awkward JS code or JSON structures for plugins to consume at the right point in what is now a POST-processing chain. Good luck and happy coding.
New to this, but I can't run postcss without npx like everyone else. I need to type "npx postcss... ". Any specific reason for this? Is it a global thing? A Windows path thing? I saw you didn't install it globally, so I have no idea.
Hello Sir, I would like to use PostCSS to generate minified files from all the CSS files in a directory. Can you advice how can i achive it. I was trying the follwing NPM scripts and failed. Thanks in Advance! "scripts": { "postcss": "assets/css/*.css > assets/css/*.min.css" }
At 10:50, if you look at the scripts within his package.json, you will see "dev":"vite". When he built the project using vite, all of this came with it so he only had to type "npm run dev"
Hello this is irrelevant to this video but plzz if can anyone can help i want to run mongo command on my vs code terminal but its showing error , mongo command works in commandshell perfect but not in vs code terminal.
@@eotikurac PostCSS has been around for almost a decade (it's initial release dates back 2013, although it didn't really started getting traction until 4 years ago or so), so it's obviously not something new (I'll omit the "kid" part, which on itself speaks volumes about the quality of the answer). In any case, I'm asking about technical advantages, if there are any.
Sass offer some cool methods to use such as lighten() darken() opacity hue hex to rgba and many more... and nesting is much better in my opinion it's a preference at the end
@@18.j It probably all boils down to preference in the end. From what I read, there are PostCSS plugins that can achieve the same Sass nesting, and obtain the same results as the color functions. So taking into account that PostCSS is faster, I presume that it will come down to preference or workflow only in the end, and not to any technical advantages?
@@DiegoBM oh if postcss have all this plugin then yeah no technical advantages probably. For me i am too lazy to install plugins every time and setup a config file so thats why i choose sass 😅
Great. Yet another library cli based library to do the things you normally do even more tedious. Modern day developers are the gift that keeps on giving, aren't they.
postcss is older than babeljs. You might not notice but postcss is already being used by popular bundlers for autoprefixing and minifying css long time ago
I love how you explain each error and why we are doing what we are to resolve it instead of 'just do xyz and trust me'
I also love how when he encounters all the errors in the second half of the video he solves them step by step and isn't ashamed of the fact it doesn't just work first try, very important practice in software development to not be afraid of errors!
I've been using tailwind in projects for over a year with postcss as part of the install instructions and had no clue what it is or what it does. Thanks, now I know 🙂
Damn, I've never gotten to look into postcss but it looks flipping amazing. Thanks for this introduction! 😎
It's great that you show some mistakes! When I started, I had a big problem with the fact that the guide works, but not for me
Kyle, it is great to have you back and thank you a bunch for this wonderful video.
My favorite postcss plugin is autoprefixer.
was working with postcss & watching your videos
It's funny you chose nesting specifically to illustrate the power of PostCSS (Granted, it is the easiest thing to illustrate) and how in the future it will "just work", because the nesting syntax is very much up in the air. There are at least 4 different versions of the syntax that are being decided upon.
Personally I wish the ampersand (&) was always required for 100% of all scenarios (Currently there's maybe a @nest at-rule, and maybe some fancy "requires a pseudo-selector" logic among a few other things).
I do appreciate them taking the time to get this right though, so we don't end up with another `!important` that implies "not important", but actually means "very important" or "currentColor" being the only place in css with camelCase, or "nowrap" being a literal typo
You can vote for that!
Kyle, love your videos. 👏🎬 Have to disagree about SASS being a weird CSS-hybrid. I find writing SASS (not SCSS) incredibly simple and intuitive: Indentation SO much better than brackets, IMHO ... less visual clutter, far fewer lines. The complexity involved with PostCSS is, for me at least, complete overkill for the benefits, most of which are easily implemented with SASS.
The question is not about simplicity, it is more about the possibility to use some advanced features. No one was saying that it is better or simpler to use postcss instead of SASS or SCSS, but still, it is more advanced and you can use tones of its features just like it was shown. I think the thing that matters is the final build and how well it can be optimized.
Okay, sass doing the same with a single line config.. what is the big deal to use postcss?
Maybe it creates less overhead
postccss has autoprefixer, it is currently the fastest processor as well. Yes faster than SASS. And PostCSS can work with all kinds of CSS, not just your favorite flavor of CSS.
yeah, sass is just better
well, he only showed a few features, there are probably a lot of plugins that you can use with it that you can't with sass. You could probably use them together if you'd like as well so its not a have one or the other type thing
It's been on my mind for a while but postcss icon looks like dark magic circles.
Understandable. CSS is dark magic.
You’re the only one I know who uses dest folder for destination. I cannot tell if that is a personal preference of yours, but it’s usually called dist for distribution.
You should make a tailwind setup tutorial
Scss is sufficient. if you want a prefixed, just use a vscode extension to handle that.
Interesting. Love your content...Would help to see something more in depth on vite-react-ts with postcss. common modules worked better than es6, installed postcss plugin to get rid of error highlighting which broke intelasense. Very little support that isn't specific to tailwindcss.
the cover says: stop using logic, use witchcraft.
Indeed. I'm not sure if it's a reflecting "our product is so good, people call it sorcery" attitude, but the imagery remains very inappropriate for a tech tool.
@@lionheart4109 actually, that's the golden ratio. although it looks like sorcery as you said, but it's one of the most logical emblem so i don't think it's inappropriate.
your videos are so good I watch all of them
Thanks for the video, currently having to struggle to config with bootstrap with vite to enable css module to enable hash class css. Maybe a video would help. Thanks
Thank you so much, Kyle.
Wow! It helps me a lot! Love it 🤘🤘
great video as usual, a lot of thanks 🙏! how did you find all these information 🤔? I can't find any starting guide on their docs!
So, if nested css feature becomes stage 2, I have to change it in my config also or what if it is removed? Sounds like a hassle.
No by saying stage 1 you are saying I want everything from stage 1 up to stage 4.
I guess if you're working on stage 2 and something from stage 2 gets removed completely it's gonna be a bit of a problem. Maybe that's just something you risk by using experimental features, idk
Hmm the syntax highlighting is kinda screwed up for me. Nested property names have same color as tag name selectors and this drives me nuts. I can't find the exact scope to customize it with textMate.
Killing it as usual! 👍
Yeah, I am totally using this.
Cool tutorial!! One question, exists something like postcss but for scss??
scss outputs to a .css file, so wouldn’t you just run PostCSS on the outputted .css file? I’ve never tried but I’m sure it would work.
@@jshstuff And if you have multiple sass files?
There exist plugins for postcss to support sass features.
@@ChanyArpin which plugins 🤔??
Love your speed 👏
bro Tailwind is fine for me so thank u so much I don't want more headaches 🙂
Tailwind uses PostCSS , unless you use the Tailwind CLI. lol
shots fired at Sass 🤣great video, thanks!
Why doing it when we have Sass?
How would you get the css file you write in to stop highlighting the error with nesting, it's so annoying!
I got it, just add "css.validate": false to your user settings.json or your workspace settings.json!
As always there's much more to PostCSS than this and the CLI won't run with an ESM config either out of the box. Real projects also have more than a single css file and that's the misleading part of videos like this: their simplified setup doesn't scale, but that's where things get complicated and complex. To let the POST-processer PostCSS also do PRE-processing work as well requires some rethinking of your CSS code structure.
PostCSS is powerful but leveraging that power comes with a price: time. Lots of it. And most of it you'll spend to hunt down documentation for its gazillion features and possibilities. It's fun though if you have it all setup **eventually**.
Even if you've decided all you need is indeed just preset-env (which it won't be) you might only be done as soon as you managed to understand its many "features", the stage level they're in by default, and wether you want to keep or loose them. You definitely need to keep your local bowserslist db up to date yourself as time passes.
Finding and choosing the right plugins can become a time consuming nightmare. As you sift through the many available, you'll learn many are doing the same thing, or even many things, but with different configurations, prerequisites, or depend on another plugin. Not all of them are well written, too.
If you enjoyed preprocessors before, preset-env alone won't get you as far either. It's still a post processor script after all and "feature" names are based off that infamous stages list, but often irritatingly differs from the actual plugin that eventually runs in the background to do the job. Some which you may need or want to configure. However, their documentation is then spread across different (archived) repositories that have been moved to a mono repo, there's the CSSDB project, the preset-env bundle, and all them individual plugins.
Plugin order may be crucial and the wrong order may eventually break your "not dev" modes, or only that, when there's no monolithic single .css but many small ones that are "unaware" of each other's contents.
Many other plugins that provide beloved preprocessor features like mixins or loops and conditions are either too old (pre PostCSS 8) and long abandoned by their creators or conflict with others, old and new, incl. some refurbished preset-env features. Several plugins even choke in the presence of perfectly valid regular CSS code like pseudo classes and selectors or selector lists, in particular many that introduce syntax sugar in the form of their own made up pseudo classes or at-rules.
If you got used to organise you styles to work with preprocessors like Sass, Less, or Stylus, think again. This familiar setup and filename scheme likely won't do the trick anymore with PostCSS. You may need to translate and rewrite vanilla PRE-processor stuff into awkward JS code or JSON structures for plugins to consume at the right point in what is now a POST-processing chain.
Good luck and happy coding.
This is good one, thnx
New to this, but I can't run postcss without npx like everyone else. I need to type "npx postcss... ". Any specific reason for this? Is it a global thing? A Windows path thing? I saw you didn't install it globally, so I have no idea.
Google Chrome Dev and Canary support CSS Nesting behind “Experimental Web Platform features” flag.
Best postcss plugin is Tailwindcss 😁
Hello Sir, I would like to use PostCSS to generate minified files from all the CSS files in a directory. Can you advice how can i achive it. I was trying the follwing NPM scripts and failed. Thanks in Advance!
"scripts": {
"postcss": "assets/css/*.css > assets/css/*.min.css"
}
Thanks man, can you print please tell me how did you run the server ?
At 10:50, if you look at the scripts within his package.json, you will see "dev":"vite". When he built the project using vite, all of this came with it so he only had to type "npm run dev"
Hey, isn't css is the best styling sheet language?
Random guy searching for truth, how to bundle flask + tailwind in docker compose for dev and production... On to the next one.
so what make postcss better than scss ?
Hello this is irrelevant to this video but plzz if can anyone can help i want to run mongo command on my vs code terminal but its showing error , mongo command works in commandshell perfect but not in vs code terminal.
Change terminal from powershell to command prompt. You can find it in the top right of the terminal section, there's a plus sign with a dropdown.
could be related to your environment variables on your pc and the path. Try googling these keywords + vscode + mongo command
Actually it got solved by just restarting my vs code . Nothing was working but when i closed my vs code and then reopened it it worked.
@@jaysolanki6923 why didn't you tried that first?
Cool tutorial thanks!!
🔥
So to use this with React i have to run it on all 30 css files?
looks like it, Sass for the win :D
Why do i feel that this video is more about promoting this vite thing rather than postcss?)))
Why should i not use sass? There is no single word in the video and this is not very useful. I can use nesting and normal css as well.
after watching 70% of this videa i get to know,
is post css is all about installing some postcss nested files ?
I dont get Why shouod we do all these complications ?
Why THE HELL did you name your out dir "dest" instead of the global conventions "build" or "dist"? :(
In your opinion, is there any reason to use sass in 2022/3 having PostCSS?
@@eotikurac PostCSS has been around for almost a decade (it's initial release dates back 2013, although it didn't really started getting traction until 4 years ago or so), so it's obviously not something new (I'll omit the "kid" part, which on itself speaks volumes about the quality of the answer). In any case, I'm asking about technical advantages, if there are any.
Sass offer some cool methods to use such as lighten() darken() opacity hue hex to rgba and many more... and nesting is much better in my opinion it's a preference at the end
@@18.j It probably all boils down to preference in the end. From what I read, there are PostCSS plugins that can achieve the same Sass nesting, and obtain the same results as the color functions. So taking into account that PostCSS is faster, I presume that it will come down to preference or workflow only in the end, and not to any technical advantages?
@@DiegoBM oh if postcss have all this plugin then yeah no technical advantages probably. For me i am too lazy to install plugins every time and setup a config file so thats why i choose sass 😅
@@18.j hahaha it sounds like a hassle indeed. Not a big fan of setting up projects either, fortunately just needs to be done once-ish
Great 👍
Cool!
Just stick to the well-supported features and you don't need to do any of this....
Hello there
👍
Looks a good feature if you are using some frameworks, not so much if you like to code in vanilla with your own custom backend serving the page
They really need a non satanic logo
noooo, satanic logo is just right
Well, it fits pretty well.
As it cures satanic aspects, that come with CSS.
Sass > postcss
i still prefer sass it's just easier
Hahha it looks like Illuminati tattoo
umm whats wrong with css :/
👍💯💯
Goodbye SASS
waaaaaaw
Sass is more handy..... Easy...
devs should stick to their real purpose of solving real problems that exists, not creating solutions to non existing problems
Looks like illuminati symbol
Nah I'll stick with normal CSS or SCSS
How terrible 😣
Extremely late but sure bruv. The only things annoying are those thumbnails. Irrelevant and cringy.
Great. Yet another library cli based library to do the things you normally do even more tedious. Modern day developers are the gift that keeps on giving, aren't they.
postcss is older than babeljs. You might not notice but postcss is already being used by popular bundlers for autoprefixing and minifying css long time ago