Compiling CSS With Vite And Lightning CSS

Suppose you comply with CSS function improvement as carefully as we do right here at CSS-Methods. In that case, you could be like me and keen to make use of many of those wonderful instruments however discover browser assist generally lagging behind what is perhaps thought of “trendy” CSS (whatever that means).

Even when browser distributors all have a sure function launched, customers may not have the most recent variations!

We are able to definitely plan for this a lot of methods:

• function detection with @helps
• progressively enhanced designs
• polyfills

For even additional assist, we flip to construct instruments. Likelihood is, you’re already utilizing some type of construct instrument in your initiatives at this time. CSS builders are most definitely acquainted with CSS pre-processors (resembling Sass or Less), however if you happen to don’t know, these are instruments able to compiling many CSS information into one stylesheet. CSS pre-processors assist make organizing CSS rather a lot simpler, as you may transfer elements of CSS into associated folders and import issues as wanted.

Pre-processors don’t simply present organizational superpowers, although. Sass gave us a loopy record of options to work with, together with:

• extends
• features
• loops
• mixins
• nesting
• variables
• …extra, in all probability!

For some time, this large function set offered a way of filling gaps lacking from CSS, making Sass (or no matter preprocessor you fancy) really feel like a necessity when beginning a brand new challenge. CSS has developed rather a lot because the launch of Sass — we now have so a lot of these options in CSS at this time — so it doesn’t fairly really feel that method anymore, particularly now that we now have native CSS nesting and custom properties.

Together with CSS pre-processors, there’s additionally the idea of put up-processing. The sort of instrument often helps remodel compiled CSS in several methods, like auto-prefixing properties for various browser distributors, code minification, and extra. PostCSS is the large one right here, providing you with tons of how to control and optimize your code, one other step within the construct pipeline.

In lots of implementations I’ve seen, the construct pipeline sometimes runs roughly like this:

1. Generate static property
2. Construct utility information
3. Bundle for deployment

CSS is often dealt with in that first half, which incorporates operating CSS pre- and post-processors (although post-processing may also occur after Step 2). As talked about, the continued evolution of CSS makes it much less vital for a instrument resembling Sass, so we’d have a chance to avoid wasting time.

Vite for CSS

Awarded “Most Adopted Know-how” and “Most Cherished Library” from the State of JavaScript 2024 survey, Vite definitely appears to be one of many extra well-liked construct instruments accessible. Vite is especially used to construct reactive JavaScript front-end frameworks, resembling Angular, React, Svelte, and Vue (made by the identical developer, in fact). Because the identify implies, Vite is loopy quick and may be as easy or advanced as you want it, and has change into considered one of my favourite instruments to work with.

Vite is generally considered a JavaScript instrument for JavaScript initiatives, however you need to use it with out writing any JavaScript in any respect. Vite works with Sass, although you continue to want to put in Sass as a dependency to incorporate it within the construct pipeline. Alternatively, Vite additionally robotically helps compiling CSS with no additional steps. We are able to set up our CSS code how we see match, with no or very minimal configuration vital. Let’s examine that out.

We will probably be utilizing Node and npm to put in Node packages, like Vite, in addition to instructions to run and construct the challenge. When you would not have node or npm put in, please take a look at the download page on their website.

Navigate a terminal to a protected place to create a brand new challenge, then run:

npm create vite@newest

The command line interface will ask a couple of questions, you may hold it so simple as doable by selecting Vanilla and JavaScript which is able to give you a starter template together with some no-frameworks-attached HTML, CSS, and JavaScript information to assist get you began.

Earlier than operating different instructions, open the folder in your IDE (built-in improvement setting, resembling VSCode) of alternative in order that we are able to examine the challenge information and folders.

If you need to comply with together with me, delete the next information which can be pointless for demonstration:

• property/
• public/
• src/
• .gitignore

We should always solely have the next information left in out challenge folder:

Let’s additionally exchange the contents of index.html with an empty HTML template:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
	
    <title>CSS Solely Vite Mission</title>
  </head>
  <physique>
    <!-- empty for now -->
  </physique>
</html>

One final piece to arrange is Vite’s dependencies, so let’s run the npm set up command:

npm set up

A brief sequence will happen within the terminal. Then we’ll see a brand new folder referred to as node_modules/ and a package-lock.json file added in our file viewer.

• node_modules is used to accommodate all bundle information put in by node bundle supervisor, and permits us to import and use put in packages all through our functions.
• package-lock.json is a file often used to ensure a improvement staff is all utilizing the identical variations of packages and dependencies.

We most definitely received’t want to the touch these items, however they’re vital for Node and Vite to course of our code throughout the construct. Contained in the challenge’s root folder, we are able to create a kinds/ folder to comprise the CSS we are going to write. Let’s create one file to start with, important.css, which we are able to use to check out Vite.

├── public/
├── kinds/
|   └── important.css
└──index.html

In our index.html file, contained in the <head> part, we are able to embrace a <hyperlink> tag pointing to the CSS file:

<head>
  <meta charset="UTF-8" />
  <hyperlink rel="icon" kind="picture/svg+xml" href="https://css-tricks.com/vite.svg" />
  <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
	
  <title>CSS Solely Vite Mission</title>

  <!-- Fundamental CSS -->
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/important.css">
</head>

Let’s add a little bit of CSS to important.css:

physique {
  background: inexperienced;
}

It’s not a lot, but it surely’s all we’ll want for the time being! In our terminal, we are able to now run the Vite construct command utilizing npm:

npm run construct

With every part linked up correctly, Vite will construct issues based mostly on what is accessible throughout the index.html file, together with our linked CSS information. The construct will probably be very quick, and also you’ll be returned to your terminal immediate.

The newly generated dist/ folder is Vite’s default output listing, which we are able to open and see our processed information. Trying out property/index.css (the filename will embrace a singular hash for cache busting), and also you’ll see the code we wrote, minified right here.

Now that we all know the right way to make Vite conscious of our CSS, we are going to in all probability need to begin writing extra CSS for it to compile.

As fast as Vite is with our code, continuously re-running the construct command would nonetheless get very tedious. Fortunately, Vite supplies its personal improvement server, which features a dwell setting with scorching module reloading, making modifications seem immediately within the browser. We are able to begin the Vite improvement server by operating the next terminal command:

npm run dev

Vite makes use of the default community port 5173 for the event server. Opening the http://localhost:5137/ deal with in your browser will show a clean display with a inexperienced background.

Including any HTML to the index.html or CSS to important.css, Vite will reload the web page to show modifications. To cease the event server, use the keyboard shortcut CTRL+C or shut the terminal to kill the method.

At this level, you just about know all you have to learn about the right way to compile CSS information with Vite. Any CSS file you hyperlink up will probably be included within the constructed file.

Organizing CSS into Cascade Layers

One of many gadgets on my 2025 CSS Wishlist is the power to apply a cascade layer to a hyperlink tag. To me, this is perhaps useful to arrange CSS in a significant methods, in addition to high quality management over the cascade, with the advantages cascade layers present. Sadly, this can be a moderately troublesome ask when contemplating the way in which browsers paint kinds within the viewport. The sort of performance is being mentioned between the CSS Working Group and TAG, but it surely’s unclear if it’ll transfer ahead.

With Vite as our construct instrument, we are able to replicate the idea as a strategy to set up our constructed CSS. Contained in the important.css file, let’s add the @layer at-rule to set the cascade order of our layers. I’ll use a few layers right here for this demo, however be happy to customise this setup to your wants.

/* kinds/important.css */
@layer reset, layouts;

That is all we’ll want inside our important.css, let’s create one other file for our reset. I’m a fan of my pal Mayank‘s trendy CSS reset, which is accessible as a Node package. We are able to set up the reset by operating the next terminal command:

npm set up @acab/reset.css

Now, we are able to import Mayank’s reset into our newly created reset.css file, as a cascade layer:

/* kinds/reset.css */
@import '@acab/reset.css' layer(reset);

If there are another reset layer stylings we need to embrace, we are able to open up one other @layer reset block inside this file as properly.

/* kinds/reset.css */
@import '@acab/reset.css' layer(reset);

@layer reset {
  /* customized reset kinds */
}

This @import assertion is used to drag packages from the node_modules folder. This folder will not be usually accessible within the constructed, public model of a web site or utility, so referencing this would possibly trigger issues if not dealt with correctly.

Now that we now have two information (important.css and reset.css), let’s hyperlink them up in our index.html file. Contained in the <head> tag, let’s add them after <title>:

<head>
  <meta charset="UTF-8" />
  <hyperlink rel="icon" kind="picture/svg+xml" href="https://css-tricks.com/vite.svg" />
  <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
	
  <title>CSS Solely Vite Mission</title>
	
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/important.css">
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/reset.css">
</head>

The thought right here is we are able to add every CSS file, within the order we want them parsed. On this case, I’m planning to drag in every file named after the cascade layers setup in the principle.css file. This will likely not work for each setup, however it’s a useful method to remember the priority of how cascade layers have an effect on computed kinds when rendered in a browser, in addition to grouping equally related information.

Since we’re within the index.html file, we’ll add a 3rd CSS <hyperlink> for kinds/layouts.css.

<head>
  <meta charset="UTF-8" />
  <hyperlink rel="icon" kind="picture/svg+xml" href="https://css-tricks.com/vite.svg" />
  <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
	
  <title>CSS Solely Vite Mission</title>
	
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/important.css">
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/reset.css">
  <hyperlink rel="stylesheet" href="https://css-tricks.com/compiling-css-with-vite-and-lightning-css/kinds/layouts.css">
</head>

Create the kinds/layouts.css file with the brand new @layer layouts declaration block, the place we are able to add layout-specific stylings.

/* kinds/layouts.css */
@layer layouts {
  /* layouts kinds */
}

For some fast, straightforward, and superior CSS snippets, I are inclined to check with Stephanie Eckles‘ SmolCSS challenge. Let’s seize the “Smol intrinsic container” code and embrace it throughout the layouts cascade layer:

/* kinds/layouts.css */
@layer layouts {
  .smol-container {
    width: min(100% - 3rem, var(--container-max, 60ch));
    margin-inline: auto;
  }
}

This highly effective little, two-line container makes use of the CSS min() perform to supply a responsive width, with margin-inline: auto; set to horizontally heart itself and comprise its youngster components. We are able to additionally dynamically alter the width utilizing the --container-max customized property.

Now if we re-run the construct command npm run construct and examine the dist/ folder, our compiled CSS file ought to comprise:

• Our cascade layer declarations from important.css
• Mayank’s CSS reset absolutely imported from reset.css
• The .smol-container class added from layouts.csss

As you may see, we are able to get fairly far with Vite as our construct instrument with out writing any JavaScript. Nevertheless, if we select to, we are able to lengthen our construct’s capabilities even additional by writing only a little bit of JavaScript.

Submit-processing with LightningCSS

Lightning CSS is a CSS parser and post-processing instrument that has numerous good options baked into it to assist with cross-compatibility amongst browsers and browser variations. Lightning CSS can remodel numerous trendy CSS into backward-compatible kinds for you.

We are able to set up Lightning CSS in our challenge with npm:

npm set up --save-dev lightningcss

The --save-dev flag means the bundle will probably be put in as a improvement dependency, because it received’t be included with our constructed challenge. We are able to embrace it inside our Vite construct course of, however first, we might want to write a tiny little bit of JavaScript, a configuration file for Vite. Create a brand new file referred to as: vite.config.mjs and inside add the next code:

// vite.config.mjs
export default {
  css: {
    transformer: 'lightningcss'
  },
  construct: {
    cssMinify: 'lightningcss'
  }
};

Vite will now use LightningCSS to rework and minify CSS information. Now, let’s give it a take a look at run utilizing an oklch coloration. Inside important.css let’s add the next code:

/* important.css */
physique {
  background-color: oklch(51.98% 0.1768 142.5);
}

Then re-running the Vite construct command, we are able to see the background-color property added within the compiled CSS:

/* dist/index.css */
physique {
  background-color: inexperienced;
  background-color: coloration(display-p3 0.216141 0.494224 0.131781);
  background-color: lab(46.2829% -47.5413 48.5542);
}

Lightning CSS converts the colour white offering fallbacks accessible for browsers which could not assist newer coloration varieties. Following the Lightning CSS documentation for using it with Vite, we are able to additionally specify browser versions to target by putting in the browserslist bundle.

Browserslist will give us a strategy to specify browsers by matching sure situations (try it out online!)

npm set up -D browserslist

Inside our vite.config.mjs file, we are able to configure Lightning CSS additional. Let’s import the browserslist bundle into the Vite configuration, in addition to a module from the Lightning CSS bundle to assist us use browserlist in our config:

// vite.config.mjs
import browserslist from 'browserslist';
import { browserslistToTargets } from 'lightningcss';

We are able to add configuration settings for lightningcss, containing the browser targets based mostly on specified browser variations to Vite’s css configuration:

// vite.config.mjs
import browserslist from 'browserslist';
import { browserslistToTargets } from 'lightningcss';

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%')),
    }
  },
  construct: {
    cssMinify: 'lightningcss'
  }
};

There are many methods to increase Lightning CSS with Vite, resembling enabling particular options, excluding options we received’t want, or writing our personal customized transforms.

// vite.config.mjs
import browserslist from 'browserslist';
import { browserslistToTargets, Options } from 'lightningcss';

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss:  Options.Colours,
    
  },
  construct: {
    cssMinify: 'lightningcss'
  }
};

For a full record of the Lightning CSS options, take a look at their documentation on feature flags.

Is any of this vital?

Studying by all this, you could be asking your self if all of that is actually vital. The reply: completely not! However I feel you may see the advantages of gaining access to partialized information that we are able to compile into unified stylesheets.

I doubt I’d go to those lengths for smaller initiatives, nevertheless, if constructing one thing with extra complexity, resembling a design system, I would attain for these instruments for organizing code, cross-browser compatibility, and completely optimizing compiled CSS.