Getting started with Parcel CSS

Nearly all frontend development workflows include a build tool, bundler, or transpiler to ensure that code syntaxes are bundled to fit the standards of modern web browsers.

Setting up these configurations isn’t always easy; it requires some expertise and familiarity with designing workflows. Parcel, a build tool, has grown exponentially due to its support for no-config code bundling, which addresses a crucial challenge faced by frontend developers when designing build workflows.

Despite Parcel’s popularity, its maintainers are continuously working on improvements, as evident by the release of Parcel CSS, a CSS parser, compiler, and minifier. In this tutorial, we’ll work through the fundamentals of Parcel CSS, including setting up and writing CSS that automatically minifies on the build. We’ll explore what makes Parcel CSS so performant, comparing its speed and minified output to that of its competitors.

Prerequisites

To follow along with this tutorial, you’ll need:

• Familiarity with CSS, HTML, and JavaScript ES6
• A web browser installed in your machine
• A code editor installed in your development machine

Fundamentals of Parcel CSS

Compared to other existing build tools, Parcel CSS was designed with performance in mind, focusing on reducing minified output and size when compiling CSS code.

Parcel can be used as an independent package via its JavaScript API, its Rust library, or by building it as a plugin in your preferred build tool. It also has target-specific configuration support, meaning you can specify the target browser you’d like to compile for. A basic configuration of Parcel CSS that compiles for Safari v13.2 looks like the snippet below:

const css = require('@parcel/css');

let {code, map} = css.transform({
  filename: 'style.css',
  code: Buffer.from('.foo { color: red }'),
  minify: true,
  sourceMap: true,
  targets: {
    // Semver versions are represented using a single 24-bit number, with one component per byte.
    // e.g. to represent 13.2.0, the following could be used.
    safari: (13 << 16) | (2 << 8)
  }
});

In the code snippet above:

• filename (string): A key for the output filename
• code (function): The actual CSS code
• minify (boolean): Determines whether or not the output should be minified
• target (object): The target browser, which can be a list of browsers to support

Our example is a very basic configuration to demonstrate how easy and straightforward it is to set up build a workflow for your CSS files using Parcel CSS. In the next section, we’ll go over a more complex workflow.

Parcel CSS Performance

As we mentioned earlier, Parcel CSS is built for performance optimization. According to the release note, Parcel CSS is 100 times faster than its counterpart cssnano in minification. The release also states that the tool can minify over 2.7 million lines of CSS code in a second within a single thread, making it the all-time fastest tool in CSS code minification at the time of writing.

Whether or not these promises are sustainable is really up to the users to decide. The screenshot below is the result of a test case performed by the maintainers of Parcel CSS when minifying Bootstrap 4 CSS:

Notice the benchmark in CSS minification time, implying that Parcel CSS is blazing fast. You could attribute Parcel CSS’s speed to the fact that it is written in a low-level language, Rust. However, the developers of Parcel CSS have disclosed that the tool was designed with performance in mind from the beginning, improving its performance outcomes in different uses cases.

Setup and initialization

Now that we’re aware of the benefits of using Parcel CSS, let’s set up a workflow and actually try things out ourselves. Before we begin, recall that in the overview section, we mentioned that there are three different ways to set up Parcel CSS. In this tutorial, we’ll use the Parcel CSS JavaScript API.

We’ll create our workflow with Node.js, navigate to our work directory, and follow the instructions below to set up. First, create a new folder in the root of your work directory and navigate to it:

mkdir parcel-app && cd parcel-app

Now, we’ll create a package.json file in the parcel-app folder:

npm init -y

In your preferred code editor, open the newly created parcel-app folder. In the Mac terminal or Windows command prompt, install Parcel CSS by running the following command in the parcel-app directory:

npm i @parcel/css

Create a new folder called dist, which will house the CSS generated after compilation and minification by Parcel CSS. When you’re configuring Parcel CSS transform options, the output file name is entirely up to you to decide.

Writing and compiling CSS with Parcel CSS

Next, in the root level of the parcel-app directory, create a new file called index.js and add the code below:

const css = require("@parcel/css");
const fs = require('fs');

const enc = new TextEncoder();
const dec = new TextDecoder();
let { code, map } = css.transform({
  filename: "./dist/app.css",
  code: enc.encode(`
  *{
    border-radius: 0;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
  }
  .foo { color: red }
  `),
  minify: true,
  sourceMap: true,
});
const compileCSS = (c) => {
  fs.writeFile("./dist/app.css", dec.decode(c), err => {
    if (err) throw new Error(`Error ${err}`);
    return;
  })
}
compileCSS(code);

In the code snippet above, we use the Parcel CSS package const css = require("@parcel/css"); to minify the CSS. We use the JavaScript text encoder and decoder class for encoding and decoding the CSS input. Finally, we utilize the Node.js built-in file system package fs to write the output to ./dist/app.css.

Our example is a basic use case with no configuration or build tools, allowing us to focus on how Parcel CSS works. To review a more complex setup for different use cases, feel free to read the JavaScript API documentation.

Now, run the code with the command below in your Mac terminal or Windows command prompt:

node index.js

You should see a new file called app.css added to the dist folder containing code similar to the following:

*{height:100%;box-sizing:border-box;width:100%;border-radius:0}.foo{color:red}

Notice that the CSS is automatically minified by Parcel CSS.

Conclusion

Given its performance and promises for optimization, I predict that the Parcel CSS parser and minifier will be a revolution in the frontend build workflow setup. In combination with Parcel as a build tool, it’s possible to set up complex and performant workflows within minutes. There’s a lot that you can do with this tool, and I definitely recommend checking out the documentation to learn more. Be sure to leave a comment if you have any questions, and happy coding!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.