Published on

Unleashing Lightning CSS⚡️

Authors

Welcome to the exciting world of Lightning CSS!

In this blog post, we’ll dive into the features and benefits of Lightning CSS, a highly performant CSS library that offers exceptional speed and optimization. Whether you’re a JavaScript or Rust developer, or someone looking for a standalone CLI solution, Lightning CSS has got you covered. Let’s get started and explore the power of Lightning CSS!

Lightning Fast Performance

One of the standout features of Lightning CSS is its extraordinary speed and performance. Built from the ground up using Rust, a native systems programming language, Lightning CSS outshines JavaScript-based alternatives by over 100 times. With the ability to minify over 2.7 million lines of code per second on a single thread, Lightning CSS sets a new benchmark for CSS processing speed.

Getting Started

Integrating Lightning CSS into your web development workflow is a breeze. You have multiple options for utilizing Lightning CSS:

  1. Using Lightning CSS as a library

    • From JavaScript: Start by installing Lightning CSS using npm or Yarn. Once installed, import the module and call the Lightning CSS APIs to perform tasks such as transforming and minifying CSS code.

    • From Rust: Similar to the JavaScript approach, you can use Lightning CSS as a library in your Rust projects. Import the necessary modules and leverage Lightning CSS’s APIs for CSS manipulation.

  2. Using Lightning CSS with a standalone CLI

    Lightning CSS also offers a standalone CLI, providing a convenient command-line interface to utilize its powerful capabilities. Install the CLI tool globally and unleash the potential of Lightning CSS directly from your terminal.

  3. Integration with build tools and Parcel

    Lightning CSS can be wrapped as a plugin in other build tools, allowing seamless integration into your existing development setup. Additionally, it is built into Parcel out of the box, making it effortless to leverage Lightning CSS in your Parcel-powered projects.

Transpilation and Browser Targets

Lightning CSS allows you to leverage modern CSS syntax and features, even for browsers that don’t fully support them. With automatic conversion based on your specified browser targets, Lightning CSS ensures optimal compatibility without sacrificing the power of modern CSS. You can define your browser targets using the targets option, making it easy to adapt the code to different browsers.

CSS Modules and Scoped Classes

To avoid naming clashes and create modular CSS code, Lightning CSS provides robust support for CSS modules. CSS modules allow you to locally scope classes, IDs, @keyframes, CSS variables, and more. Lightning CSS generates a mapping of original names to unique, hashed names, ensuring class names remain unique within each module. This eliminates the risk of unintended conflicts and facilitates clean and reusable CSS code.

Global Composition and Dependencies

Lightning CSS empowers you to compose classes, enabling a form of style mixins. With the composes property, you can reference and apply other classes whenever a composed class is used. This feature allows for easy reuse and enhances the maintainability of your CSS codebase. Lightning CSS also supports referencing class names defined in separate CSS files using the from keyword, enabling efficient management of dependencies.

Customization and Naming Patterns

To align with your project’s naming conventions or to add custom prefixes, Lightning CSS offers flexibility in defining naming patterns. By configuring the pattern option, you can tailor the naming convention for scoped classes and identifiers, adding your own unique touch to the generated CSS code.

Lightning CSS for Node

To use Lightning CSS in a Node.js environment, follow these steps:

  1. Start by installing Lightning CSS using a package manager like npm or Yarn. Open your terminal and run the following command:
npm install --save-dev lightningcss
  1. Once Lightning CSS is installed, you need to import the module and call one of the Lightning CSS APIs in your Node.js code. Here's an example that uses the transform function:
import { transform } from 'lightningcss'

let { code, map } = transform({
  filename: 'style.css',
  code: Buffer.from('.foo { color: red }'),
  minify: true,
  sourceMap: true,
})

In this example:

  • The transform function takes an object as an argument with various options.
  • filename: The name of the CSS file being transformed.
  • code: The CSS code as a Node Buffer object.
  • minify: A boolean flag to minify the CSS output.
  • sourceMap: A boolean flag to generate a source map for the compiled code.

The transform function returns an object with the compiled CSS code in the code property and the source map in the map property.

  1. If you need more control over which features are compiled, you can use feature flags with the include and exclude options. Here's an example:
import { transform, Features } from 'lightningcss'

let { code, map } = transform({
  // ...
  targets,
  // Always compile colors and CSS nesting, regardless of browser targets.
  include: Features.Colors | Features.Nesting,
  // Never add any vendor prefixes, regardless of targets.
  exclude: Features.VendorPrefixes,
})

In this example:

  • We're using the Features enum from lightningcss.
  • You can bitwise OR (|) multiple flags together to turn them on or off.
  • The available flags are listed in the code snippet you provided.

Happy coding! With its lightning-fast performance, support for modern CSS features, transpilation capabilities, CSS modules, and scoped classes, Lightning CSS equips you with a powerful CSS engine.

Discover more at:

If you have any further questions, feel free to ask!

Discuss on Twitter • View on GitHub