Using NPM and PostCSS scripts (2023)

I wrote a new article about NPMalthough I recommend limiting its use to specific projects. Start simple before adding complexity to projects.

NPM scripts are a powerful tool that can speed up your workflow without adding the complexity of a new tool like Gulp or Grunt. You can create scripts to meet your basic needs: asset management, concatenation, minification, image optimization or SVG. It was just a first step thank youPost-CSS, NPM scripts create a modern front-end workflow.

I covered the basic functions of NPM scripts in a previous article "NPM as a build tool for front-end workflow”

What is PostCSS

With PostCSS you can create scripts that allow you to develop modern functions without preprocessors.PostCSS brings an ecosystem of JavaScript pluginss that can convert CSS with a compilation process.

The plugin ecosystem offers many opportunities for custom modifications. You can even use the PostCSS API to develop your plugin. Apart from that,PostCSS is language independentFormat. It can be integrated into all types of projects, even with preprocessors like Sass or Less.PostCSS behaves like post processors.

In this guide, we will usePostCSS com scripts NPMbut you can also use it with Gulp or Grunt. I adopted this approach due to the simplicity of using a unique tool:NPM.

The project folder structure

We will use this specific folder structure to create your build system. Of course, it is possible to adapt this structure to your project.

(Video) Convert PX to REM with NPM Script & postcss-pxtorem Package

Package.json
README.md
Financial assets/
css/
 1-reset.css
2-main.css
3-header.css
4-content.css
5-footer.css
6-services.css
7-404.css
8-Utilities.css
9-print.css
10-decorative.cssTyping error/
js/
favorite/
Photo/
*.html *.xml *.txt *.jsondist/public/
css/
bundle.min.cssTyping error/
js/
favorite/
Photo/
*.html *.xml *.txt *.json

Ofinancial assetsFolders are your original unconverted files. Odist/public/Folders are the production files. Let's focus on optimizing the CSS files into a single file.

You can create the package.json with the following command:

npm-Init

First we need to install the dependencies as the project's devDependencies.

CSS configuration and concatenation

With the concatenation feature, we can use modular CSS and create a specific CSS file for pages or components. It depends on your method. I usually create a specific CSS file for the reset, the utilities class, the main file (typing errors, global rules, global layout) and the printable version. I also add files for the common structure of the project (header, content, footer, specific page, decorative class).

Here is an example:

/* My CSS reset and my shared class */
1-reset.css/* Common theme class like specific font, font scale, layout class */
2-main.css3-header.css
4-content.css
5-footer.css
(Video) Setting up tailwind and postcss | postcss
/* A specific page that requires specific CSS objects */
6-services.css7–404.css/* Common utility classes not associated with the topic, such as B. Accessibility Classes */
8-Utilities.css9-print.css/* Class that only adds visual effects associated with the theme */
10-decorative.css

The first command merges all CSS files without distinction. The numbers at the beginning of the files indicate the merge order.

cat Assets/css/*.css > Assets/css/bundle.css

to generate theBundle.cssFile you can run it with

npm run css:concat

I choose the cat command over the rework-npm function because concat is less forgiving. This means you can easily use CSS4 functions or other CSS syntax during scripting.

You can always further subdivide your CSS with Atomic Design and create CSS classes per component. It's customizable for your workflow. But for this case rework-npm and die@matterare a better option. The cat method is sufficient for a small project.

The Magic Command: CSSnext

With CSSnext you can use many functions and replace many postCSS plugins. CSSnext will automatically prefix your class (with autoprefixer), add pixel fallbacks to rem units, and make writing pure CSS a pleasure.

Use tomorrow's CSS syntax today.
–CSSnext baseline

Com CSSnextYou can use CSS4 resources, they are converted to compatible CSS. then you can useNative CSS variable,custom properties,custom media queries. The list is too longenjoy it.

Another thing you can usenested cssfor! Now, writing CSS as Sass or Less becomes enjoyable without having to learn a new syntax. "Less is more" no less special.

Execute npm cssnext

He will analyze yourBundle.cssand let the magic happen insidebundle.next.css.

(Video) Using different npm scripts

Just for the style: CSScomb

Writing CSS is now cool again, but it's hard to follow the guidelines, keep the order right, and use the right spaces. The number of potential errors increases with project size.

CSScombGenericNameis here to organize your CSS and fix this error. It deletes unnecessary spaces, adds necessary spaces, manages semicolons and organizes your CSS declarations. You just need a script:

"css:comb": "csscomb-Assets/css/bundle.next.css",

You can configure it with a csscomb.json file. You can find more informationim CSScomb-Repository.

Run it normally with the following command:

npm execute css:comb

UnCSS, it's optimization time

Now it's time to remove all unnecessary classes.UnCSSCompare your HTML to your final CSS files. This plugin excludes all classes that are not used in production. It's especially useful when using frameworks like Bootstrap or Zurb Foundation.

This task can really make your CSS file easier with one command:

"css:uncss": "cat dist/public/*.html | uncss -s assets/css/bundle.next.css > assets/css/bundle.clean.css",

He analyzes thebundle.next.cssand create a clean css file calledbundle.clean.css.

Minification and Final CSS

The Last Commandnpm execute css:minifymakes a decrease ofbundle.clean.cssEmbundle.min.css. This final file is sent to the dist folder for production. Package files under Assets are excluded.

Critical CSS, a little bonus for perfection

Critical is an important concept in web performance. The goal is to add inline CSS directly into your HTML code so that the browser can load the CSS above the fold. This avoids using a link request to render the first byte of your page.

It is used with a CLI command. I had a problem running it as an NPM script. I will update this tutorial if I find a solution. Install it as a global dependency with this command:

(Video) How to use PostCSS (the ultimate CSS Tool!)

npm install -g critical

You must use this command for each page. You can use a bash script to automate the process. For example, for the index.html page

kritisch dist/public/index.html — inline — minify > dist/public/index.tmp — css dist/public/css/bundle.min.css && mv dist/public/index.tmp dist/public/index.html

You can test your site atGoogle page speedorWebseitetest.org, you will see a good improvement.

You can run this entire command with one command:

npm starte build:css

You can test your optimized CSS directly after every resource change. I just advise you to do the critical command before the final production file.

a small solution

Copying the CSS file to the dist folder causes a problem with the URL path in the CSS. I use onesedCommand at the end of the build:css script to update the path. I have this problem with url to fonts. the way goes../../../assets/cssor do i need a path like../Type error.

The fix script:

„fix:path“: „sed -i -e ‘s|../../../assets/css|../typo|g’ dist/public/css/bundle.min.css“,

And the update in the build:css script:

"build:css": "echo '=> build:css' && npm run css:concat && npm run cssnext && npm run css:comb && npm run css:uncss && npm run css:minify && npm run fix:path" ,

You can use this kind of trick to fix this kind of issue.

NPM scripting and PostCSS are perfect for streamlining small projects without the complexity of new tools. There are many customization options. You can adapt to many projects. The JSON format is not the most common way to organize the various scripts. But with a good naming convention, it's easy to keep track of all your scripts.

You can visit thisGithub-RepositoryNamewhich contains a boilerplate with these scripts.

(Video) PostCSS Crash Course

This post is part of a series on NPM as a build. If you're interested in some background on me as a front-end developer, check out myLinkedIn account. You are also welcome to contact us.Twitterfor questions or suggestions.

Thanks for reading!