Lightning CSS

Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust and compiled to WebAssembly. It supports modern CSS features and can transpile them for broader browser compatibility.

Usage

Lightning CSS is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, all CSS output is processed through Lightning CSS, which minifies the output and transpiles modern CSS features for browser compatibility.

Lightning CSS can be used alongside other processors. Multiple processors are applied in the order they appear in the style editor menu.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Lightning CSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified and transpiled CSS output.</p>\n  <div class=\"card\">CSS nesting example</div>\n  <div class=\"colors\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  & .title {\n    font-size: 1.2em;\n  }\n}\n\n.colors {\n  background: color(display-p3 0.5 0.2 0.7);\n  padding: 1em;\n  margin-top: 1em;\n}\n"
    },
    "processors": [
      "lightningcss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  };
</script>

Processor Info

Name

lightningcss

Editor

style

Processor

Lightning CSS

Version

lightningcss-wasm: v1.30.2

Custom Settings

Custom settings added to the property lightningcss are passed as transform options to Lightning CSS. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "lightningcss": {
    "minify": true,
    "sourceMap": true
  }
}

Links

• Lightning CSS
• Lightning CSS on GitHub
• CSS Processors in LiveCodes