Learn PostCSS In 15 Minutes
Vložit
- čas přidán 1. 05. 2024
- CSS keeps releasing new features that I want to use right away, but there is always at least one browser that doesn’t support the new features and I am forced to wait years to use them, or at least that used to be the case. Instead I now use PostCSS to transpile all my CSS to CSS that any browser can understand while still being able to use modern CSS features when I write my CSS. PostCSS is like the babel of CSS.
📚 Materials/References:
PostCSS Plugins: www.postcss.parts
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:42 - Starting Files
01:12 - Basic Setup
04:14 - Using Plugins
09:33 - Using PostCSS With Frameworks
13:09 - Pros of PostCSS
#PostCSS #WDS #CSS
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!
Damn, I've never gotten to look into postcss but it looks flipping amazing. Thanks for this introduction! 😎
Kyle, it is great to have you back and thank you a bunch for this wonderful video.
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 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
was working with postcss & watching your videos
Wow! It helps me a lot! Love it 🤘🤘
your videos are so good I watch all of them
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.
Thank you so much, Kyle.
Love your speed 👏
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!
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!
Killing it as usual! 👍
My favorite postcss plugin is autoprefixer.
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.
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.
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
This is good one, thnx
Yeah, I am totally using this.
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
You should make a tailwind setup tutorial
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
shots fired at Sass 🤣great video, thanks!
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"
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 🤔??
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.
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"
}
Hey, isn't css is the best styling sheet language?
Cool tutorial thanks!!
Scss is sufficient. if you want a prefixed, just use a vscode extension to handle that.
It's been on my mind for a while but postcss icon looks like dark magic circles.
Understandable. CSS is dark magic.
Great 👍
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.
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!
Best postcss plugin is Tailwindcss 😁
So to use this with React i have to run it on all 30 css files?
looks like it, Sass for the win :D
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
Cool!
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.
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
I can’t keep up with all these constant changes
it’s annoying at this point tbh
This isn't new it has been from years
PostCss has been around for a while
To add to this, PostCss helps with change fatigue. It will handle the changes for you behind the scenes so you don’t have to. It is an optional addition to your project that you can set and forget
That's an actual developer quality 😂😂
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?
Google Chrome Dev and Canary support CSS Nesting behind “Experimental Web Platform features” flag.
Why doing it when we have Sass?
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.
👍💯💯
so what make postcss better than scss ?
👍
after watching 70% of this videa i get to know,
is post css is all about installing some postcss nested files ?
Why do i feel that this video is more about promoting this vite thing rather than postcss?)))
I dont get Why shouod we do all these complications ?
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
Random guy searching for truth, how to bundle flask + tailwind in docker compose for dev and production... On to the next one.
waaaaaaw
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.
Why THE HELL did you name your out dir "dest" instead of the global conventions "build" or "dist"? :(
i still prefer sass it's just easier
Just stick to the well-supported features and you don't need to do any of this....
Hahha it looks like Illuminati tattoo
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.
umm whats wrong with css :/
Goodbye SASS
devs should stick to their real purpose of solving real problems that exists, not creating solutions to non existing problems
Sass > postcss
Sass is more handy..... Easy...
Looks like illuminati symbol
Why put satanic symbols on IT libraries? It looks funny for someone?
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