PostCSS is a tool that allows you to use modern CSS features like nesting and mixins, while supporting legacy browsers. Learn why this simple JavaScript library is one of the most popular tools in the web development industry. 

#css #webdev #100SecondsOfCode

🔗 Resources

PostCSS Docs https://postcss.org/
Sass in 100 Seconds https://youtu.be/akDIJa0AP5c

📚 Topics Covered

- PostCSS vs Sass
- What is PostCSS?
- How JavaScript plugins can transform CSS
- Modern CSS features like nesting and mixins

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:46:13.475Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ff18b131-d9b1-4dd4-b1d7-d7dd77986907
07da8c91d3b0405a8e79568c9524101caaac94cb396cfe8a3f2579175215ca92
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
PostCSS, a tool for transforming styles with JavaScript plugins.
When you build a website, the CSS code you write is rarely the code that you actually want to ship to the browser.
The developer wants to write code with modern features that maximize productivity, but end users want fast, minified code that supports legacy browsers.
PostCSS is a build tool that makes everybody happy.
It can take a CSS file out and convert it to an abstract syntax tree, then provides an API where plugins written in JavaScript can produce a different output.
For example, by using the auto prefixer plugin, you'll never have to worry about writing vendor prefixes on your styles ever again.
Or with the preset ENB plugin, you can write modern CSS while post CSS will automatically add the polyfills needed to support your targeted browsers.
Or you might drop in a a tool like StyleLint, to detect issues before they break your UI.
And there are tons of other useful plugins in the ecosystem to try out.
And if none of them meet your needs, you can always build your own.
You might use the plugin API to find all the color declarations in the code, then write some JavaScript to transform them to a different format.
You probably already use post CSS without even realizing it as it generates more npm downloads than TypeScript and Webpack combined.
It's used under the hood by frameworks like Vite and Next JS to provide a streamlined developer experience.
And it's also used by some of the world's most popular websites like Wikipedia and Twitter.
Now despite its name, it also handles preprocessing similar to frameworks like Sass, Less, and Stylus.
It can be used in conjunction with existing preprocessors or as an alternative to them altogether.
If you wanna write CSS with nesting or mixins, there are plugins that can enable those features in your code.
So it's like configuring your own CSS preprocessor by including your favorite features and avoiding the ones that tend to lead to bad practices.
On top of that, it tends to produce much faster build times.
Is to get started, install it into your project with NPM, then create a post CSS config file.
Inside of it, customize the array of plugins that you wanna use.
And finally, run it from the command line as part of your build process to make your styles production ready.
This has been post CSS in 100 seconds.
If you wanna see more short videos like this, hit the like button and subscribe.
Thanks for watching and I will see you in the next one.

Speaker 0: PostCSS, a tool for transforming styles with JavaScript plugins. When you build a website, the CSS code you write is rarely the code that you actually want to ship to the browser. The developer wants to write code with modern features that maximize productivity, but end users want fast, minified code that supports legacy browsers. PostCSS is a build tool that makes everybody happy. It can take a CSS file out and convert it to an abstract syntax tree, then provides an API where plugins written in JavaScript can produce a different output.

For example, by using the auto prefixer plugin, you'll never have to worry about writing vendor prefixes on your styles ever again. Or with the preset ENB plugin, you can write modern CSS while post CSS will automatically add the polyfills needed to support your targeted browsers. Or you might drop in a a tool like StyleLint, to detect issues before they break your UI. And there are tons of other useful plugins in the ecosystem to try out. And if none of them meet your needs, you can always build your own.

You might use the plugin API to find all the color declarations in the code, then write some JavaScript to transform them to a different format. You probably already use post CSS without even realizing it as it generates more npm downloads than TypeScript and Webpack combined. It's used under the hood by frameworks like Vite and Next JS to provide a streamlined developer experience. And it's also used by some of the world's most popular websites like Wikipedia and Twitter. Now despite its name, it also handles preprocessing similar to frameworks like Sass, Less, and Stylus.

It can be used in conjunction with existing preprocessors or as an alternative to them altogether. If you wanna write CSS with nesting or mixins, there are plugins that can enable those features in your code. So it's like configuring your own CSS preprocessor by including your favorite features and avoiding the ones that tend to lead to bad practices. On top of that, it tends to produce much faster build times. Is to get started, install it into your project with NPM, then create a post CSS config file.

Inside of it, customize the array of plugins that you wanna use. And finally, run it from the command line as part of your build process to make your styles production ready. This has been post CSS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
PostCSS, a tool for transforming styles with JavaScript plugins. When you build a website, the CSS code you write is rarely the code that you actually want to ship to the browser. The developer wants to write code with modern features that maximize productivity, but end users want fast, minified code that supports legacy browsers.
blogging
PostCSS is a build tool that makes everybody happy. It can take a CSS file out and convert it to an abstract syntax tree, then provides an API where plugins written in JavaScript can produce a different output. For example, by using the auto prefixer plugin, you'll never have to worry about writing vendor prefixes on your styles ever again. Or with the preset ENB plugin, you can write modern CSS while post CSS will automatically add the polyfills needed to support your targeted browsers. Or you might drop in a a tool like StyleLint, to detect issues before they break your UI. And there are tons of other useful plugins in the ecosystem to try out. And if none of them meet your needs, you can always build your own. You might use the plugin API to find all the color declarations in the code, then write some JavaScript to transform them to a different format.
You probably already use post CSS without even realizing it as it generates more npm downloads than TypeScript and Webpack combined. It's used under the hood by frameworks like Vite and Next JS to provide a streamlined developer experience. And it's also used by some of the world's most popular websites like Wikipedia and Twitter. Now despite its name, it also handles preprocessing similar to frameworks like Sass, Less, and Stylus. It can be used in conjunction with existing preprocessors or as an alternative to them altogether. If you wanna write CSS with nesting or mixins, there are plugins that can enable those features in your code. So it's like configuring your own CSS preprocessor by including your favorite features and avoiding the ones that tend to lead to bad practices.
programming
blogging
On top of that, it tends to produce much faster build times.
Is to get started, install it into your project with NPM, then create a post CSS config file. Inside of it, customize the array of plugins that you wanna use. And finally, run it from the command line as part of your build process to make your styles production ready. This has been post CSS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
software development
youtube
video gaming
graphic design
streaming
programming
PostCSS, a tool for transforming styles with JavaScript plugins. When you build a website, the CSS code you write is rarely the code that you actually want to ship to the browser. The developer wants to write code with modern features that maximize productivity, but end users want fast, minified code that supports legacy browsers. PostCSS is a build tool that makes everybody happy. It can take a CSS file out and convert it to an abstract syntax tree, then provides an API where plugins written in JavaScript can produce a different output. For example, by using the auto prefixer plugin, you'll never have to worry about writing vendor prefixes on your styles ever again. Or with the preset ENB plugin, you can write modern CSS while post CSS will automatically add the polyfills needed to support your targeted browsers. Or you might drop in a a tool like StyleLint, to detect issues before they break your UI. And there are tons of other useful plugins in the ecosystem to try out. And if none of them meet your needs, you can always build your own. You might use the plugin API to find all the color declarations in the code, then write some JavaScript to transform them to a different format. You probably already use post CSS without even realizing it as it generates more npm downloads than TypeScript and Webpack combined. It's used under the hood by frameworks like Vite and Next JS to provide a streamlined developer experience. And it's also used by some of the world's most popular websites like Wikipedia and Twitter. Now despite its name, it also handles preprocessing similar to frameworks like Sass, Less, and Stylus. It can be used in conjunction with existing preprocessors or as an alternative to them altogether. If you wanna write CSS with nesting or mixins, there are plugins that can enable those features in your code. So it's like configuring your own CSS preprocessor by including your favorite features and avoiding the ones that tend to lead to bad practices. On top of that, it tends to produce much faster build times. Is to get started, install it into your project with NPM, then create a post CSS config file. Inside of it, customize the array of plugins that you wanna use. And finally, run it from the command line as part of your build process to make your styles production ready. This has been post CSS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
PostCSS,
postcss
a
a
tool
tool
for
for
transforming
transforming
styles
styles
with
with
JavaScript
javascript
plugins.
plugins
When
when
you
you
build
build
a
a
website,
website
the
the
CSS
css
code
code
you
you
write
write
is
is
rarely
rarely
the
the
code
code
that
that
you
you
actually
actually
want
want
to
to
ship
ship
to
to
the
the
browser.
browser
The
the
developer
developer
wants
wants
to
to
write
write
code
code
with
with
modern
modern
features
features
that
that
maximize
maximize
productivity,
productivity
but
but
end
end
users
users
want
want
fast,
fast
minified
minified
code
code
that
that
supports
supports
legacy
legacy
browsers.
browsers
PostCSS
postcss
is
is
a
a
build
build
tool
tool
that
that
makes
makes
everybody
everybody
happy.
happy
It
it
can
can
take
take
a
a
CSS
css
file
file
out
out
and
and
convert
convert
it
it
to
to
an
an
abstract
abstract
syntax
syntax
tree,
tree
then
then
provides
provides
an
an
API
api
where
where
plugins
plugins
written
written
in
in
JavaScript
javascript
can
can
produce
produce
a
a
different
different
output.
output
For
for
example,
example
by
by
using
using
the
the
auto
auto
prefixer
prefixer
plugin,
plugin
you'll
you'll
never
never
have
have
to
to
worry
worry
about
about
writing
writing
vendor
vendor
prefixes
prefixes
on
on
your
your
styles
styles
ever
ever
again.
again
Or
or
with
with
the
the
preset
preset
ENB
enb
plugin,
plugin
you
you
can
can
write
write
modern
modern
CSS
css
while
while
post
post
CSS
css
will
will
automatically
automatically
add
add
the
the
polyfills
polyfills
needed
needed
to
to
support
support
your
your
targeted
targeted
browsers.
browsers
Or
or
you
you
might
might
drop
drop
in
in
a
a
a
a
tool
tool
like
like
StyleLint,
stylelint
to
to
detect
detect
issues
issues
before
before
they
they
break
break
your
your
UI.
ui
And
and
there
there
are
are
tons
tons
of
of
other
other
useful
useful
plugins
plugins
in
in
the
the
ecosystem
ecosystem
to
to
try
try
out.
out
And
and
if
if
none
none
of
of
them
them
meet
meet
your
your
needs,
needs
you
you
can
can
always
always
build
build
your
your
own.
own
You
you
might
might
use
use
the
the
plugin
plugin
API
api
to
to
find
find
all
all
the
the
color
color
declarations
declarations
in
in
the
the
code,
code
then
then
write
write
some
some
JavaScript
javascript
to
to
transform
transform
them
them
to
to
a
a
different
different
format.
format
You
you
probably
probably
already
already
use
use
post
post
CSS
css
without
without
even
even
realizing
realizing
it
it
as
as
it
it
generates
generates
more
more
npm
npm
downloads
downloads
than
than
TypeScript
typescript
and
and
Webpack
webpack
combined.
combined
It's
it's
used
used
under
under
the
the
hood
hood
by
by
frameworks
frameworks
like
like
Vite
vite
and
and
Next
next
JS
js
to
to
provide
provide
a
a
streamlined
streamlined
developer
developer
experience.
experience
And
and
it's
it's
also
also
used
used
by
by
some
some
of
of
the
the
world's
world's
most
most
popular
popular
websites
websites
like
like
Wikipedia
wikipedia
and
and
Twitter.
twitter
Now
now
despite
despite
its
its
name,
name
it
it
also
also
handles
handles
preprocessing
preprocessing
similar
similar
to
to
frameworks
frameworks
like
like
Sass,
sass
Less,
less
and
and
Stylus.
stylus
It
it
can
can
be
be
used
used
in
in
conjunction
conjunction
with
with
existing
existing
preprocessors
preprocessors
or
or
as
as
an
an
alternative
alternative
to
to
them
them
altogether.
altogether
If
if
you
you
wanna
wanna
write
write
CSS
css
with
with
nesting
nesting
or
or
mixins,
mixins
there
there
are
are
plugins
plugins
that
that
can
can
enable
enable
those
those
features
features
in
in
your
your
code.
code
So
so
it's
it's
like
like
configuring
configuring
your
your
own
own
CSS
css
preprocessor
preprocessor
by
by
including
including
your
your
favorite
favorite
features
features
and
and
avoiding
avoiding
the
the
ones
ones
that
that
tend
tend
to
to
lead
lead
to
to
bad
bad
practices.
practices
On
on
top
top
of
of
that,
that
it
it
tends
tends
to
to
produce
produce
much
much
faster
faster
build
build
times.
times
Is
is
to
to
get
get
started,
started
install
install
it
it
into
into
your
your
project
project
with
with
NPM,
npm
then
then
create
create
a
a
post
post
CSS
css
config
config
file.
file
Inside
inside
of
of
it,
it
customize
customize
the
the
array
array
of
of
plugins
plugins
that
that
you
you
wanna
wanna
use.
use
And
and
finally,
finally
run
run
it
it
from
from
the
the
command
command
line
line
as
as
part
part
of
of
your
your
build
build
process
process
to
to
make
make
your
your
styles
styles
production
production
ready.
ready
This
this
has
has
been
been
post
post
CSS
css
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker discusses a tool called PostGeneration, which is designed to transform styles with JavaScript plugins. PostGeneration can create a network of plugins that can be used to support various browsers and color declarations, and can be installed in a project using NPM. It is also an option for developers to try out other plugins or build their own style files.
PostCSS in 100 Seconds
PostCSS, a tool for transforming styles with JavaScript plugins. When you build a website, the CSS code you write is rarely the code that you actually want to ship to the browser. The developer wants to write code with modern features that maximize productivity, but end users want fast, minified code that supports legacy browsers. PostCSS is a build tool that makes everybody happy. It can take a CSS file out and convert it to an abstract syntax tree, then provides an API where plugins written in JavaScript can produce a different output. For example, by using the auto prefixer plugin, you'll never have to worry about writing vendor prefixes on your styles ever again. Or with the preset ENB plugin, you can write modern CSS while post CSS will automatically add the polyfills needed to support your targeted browsers. Or you might drop in a a tool like StyleLint, to detect issues before they break your UI. And there are tons of other useful plugins in the ecosystem to try out. And if none of them meet your needs, you can always build your own. You might use the plugin API to find all the color declarations in the code, then write some JavaScript to transform them to a different format. You probably already use post CSS without even realizing it as it generates more npm downloads than TypeScript and Webpack combined. It's used under the hood by frameworks like Vite and Next JS to provide a streamlined developer experience. And it's also used by some of the world's most popular websites like Wikipedia and Twitter. Now despite its name, it also handles preprocessing similar to frameworks like Sass, Less, and Stylus. It can be used in conjunction with existing preprocessors or as an alternative to them altogether. If you wanna write CSS with nesting or mixins, there are plugins that can enable those features in your code. So it's like configuring your own CSS preprocessor by including your favorite features and avoiding the ones that tend to lead to bad practices. On top of that, it tends to produce much faster build times. Is to get started, install it into your project with NPM, then create a post CSS config file. Inside of it, customize the array of plugins that you wanna use. And finally, run it from the command line as part of your build process to make your styles production ready. This has been post CSS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. Thanks for watching and I will see you in the next one.
The speaker discusses a tool called PostGeneration, which is designed to transform styles with JavaScript plugins. PostGeneration can create a network of plugins that can be used to support various browsers and color declarations, and can be installed in a project using NPM. It is also an option for developers to try out other plugins or build their own style files.