Unlock the Power of Fast and Efficient CSS Builds with Parcel CSS
What Makes Parcel CSS So Special?
Designed with performance in mind, Parcel CSS focuses on reducing minified output and size when compiling CSS code. Its target-specific configuration support allows you to specify the target browser you’d like to compile for, making it a versatile tool for any project. Plus, its JavaScript API, Rust library, and plugin capabilities make it easy to integrate into your existing workflow.
A Basic Configuration to Get You Started
Let’s take a look at a basic configuration that compiles for Safari v13.2:
{
filename: 'output.css', // (string): A key for the output filename
code: '/* your CSS code here */', // (function): The actual CSS code
minify: true, // (boolean): Determines whether or not the output should be minified
target: { // (object): The target browser, which can be a list of browsers to support
browser: 'afari',
version: '13.2'
}
}
This simple setup demonstrates how easy it is to set up a build workflow for your CSS files using Parcel CSS.
Blazing Fast Performance
But what really sets Parcel CSS apart is its incredible speed. According to the release notes, it’s 100 times faster than its counterpart, cssnano, in minification. In fact, it can minify over 2.7 million lines of CSS code in just one second within a single thread!
Setting Up a Workflow with Parcel CSS
Ready to try it out? Let’s set up a workflow using the Parcel CSS JavaScript API.
- Create a new folder and navigate to it.
- Create a
package.json
file and install Parcel CSS using the following command:
npm install @parcel/css
- Create a new file called
index.js
and add the code to minify your CSS. - Finally, run the code and watch as Parcel CSS automatically minifies your CSS output.
The Future of Frontend Build Workflows
With its impressive performance and promises of optimization, Parcel CSS is poised to revolutionize the way we set up frontend build workflows. By combining it with Parcel as a build tool, you can create complex and performant workflows in no time. So why not give it a try and see what you can achieve?