{"id":14673,"library":"lightningcss-linux-arm64-musl","title":"LightningCSS (Linux ARM64 Musl Native Build)","description":"LightningCSS is a high-performance CSS parser, transformer, minifier, and bundler written in Rust, offering significant speed advantages over JavaScript-based alternatives. This particular package, `lightningcss-linux-arm64-musl`, provides the native compiled binary for Linux systems using the ARM64 architecture and Musl C library. It is an optional dependency of the main `lightningcss` package, which automatically installs the correct platform-specific binding. LightningCSS is currently at a stable `1.32.0` release and follows a rapid release cadence, frequently incorporating new CSS features and spec updates. Key differentiators include its Rust-based performance, comprehensive support for modern CSS features like nesting, custom media queries, container queries, relative color syntax, and CSS Modules, as well as robust browser compatibility targeting via Browserslist. While often associated with the Parcel bundler, it is designed for standalone use, making it a versatile tool for optimizing and transpiling CSS in various build workflows. It provides a robust API for programmatic CSS manipulation, including custom resolvers and visitor patterns.","status":"active","version":"1.32.0","language":"javascript","source_language":"en","source_url":"https://github.com/parcel-bundler/lightningcss","tags":["javascript"],"install":[{"cmd":"npm install lightningcss-linux-arm64-musl","lang":"bash","label":"npm"},{"cmd":"yarn add lightningcss-linux-arm64-musl","lang":"bash","label":"yarn"},{"cmd":"pnpm add lightningcss-linux-arm64-musl","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Main function for single-file CSS processing, minification, and transpilation. Primarily ESM, though CommonJS is also available.","wrong":"const { transform } = require('lightningcss')","symbol":"transform","correct":"import { transform } from 'lightningcss'"},{"note":"Used for bundling multiple CSS files, resolving @import statements. Requires a resolver function for custom import handling.","wrong":"const bundle = require('lightningcss').bundle","symbol":"bundle","correct":"import { bundle } from 'lightningcss'"},{"note":"Utility to convert a Browserslist query array into the target format expected by `transform` and `bundle`.","wrong":"import browserslistToTargets from 'lightningcss/browserslistToTargets'","symbol":"browserslistToTargets","correct":"import { browserslistToTargets } from 'lightningcss'"}],"quickstart":{"code":"import { transform, browserslistToTargets } from 'lightningcss';\n\nasync function processCss() {\n  const cssCode = `\n    :root {\n      --primary-color: #3498db;\n    }\n    .container {\n      background-color: var(--primary-color);\n      display: flex;\n      gap: 10px;\n      @media (min-width: 768px) {\n        flex-direction: row;\n      }\n    }\n    .button {\n      padding: 10px 20px;\n      color: white;\n      background-color: var(--primary-color);\n      transition: background-color 0.3s ease-in-out;\n      &:hover {\n        /* Example of nested selector and a CSS function */\n        background-color: color-mix(in srgb, var(--primary-color) 80%, black);\n      }\n    }\n  `;\n\n  // Define target browsers using a Browserslist query\n  const targets = browserslistToTargets(['last 2 Chrome versions', 'last 2 Firefox versions', 'Safari >= 15']);\n\n  try {\n    const { code, map } = transform({\n      filename: 'input.css',\n      code: Buffer.from(cssCode),\n      minify: true,\n      targets,\n      // Enable draft features like nesting and custom media queries\n      drafts: {\n        nesting: true,\n        customMedia: true,\n      },\n      // Uncomment to generate source map\n      // sourceMap: true,\n      // cssModules: { /* ... options for CSS Modules */ },\n    });\n\n    console.log('Minified and Transformed CSS:');\n    console.log(code.toString());\n    // if (map) {\n    //   console.log('\\nSource Map:');\n    //   console.log(map.toString());\n    // }\n  } catch (error) {\n    console.error('Error processing CSS:', error);\n  }\n}\n\nprocessCss();","lang":"typescript","description":"Demonstrates how to use `lightningcss` to transform, minify, and transpile CSS code with browser targeting and draft feature enablement."},"warnings":[{"fix":"Review CSS code using relative color functions (e.g., `color-mix`, `color-contrast`) and adjust percentage values to numbers where the spec now requires it.","message":"Version 1.30.0 introduced a breaking change by updating relative color parsing to the latest CSS specification. Code relying on previous interpretations of percentages in relative color calculations may need to be updated to use numbers instead.","severity":"breaking","affected_versions":">=1.30.0"},{"fix":"Ensure you `npm install lightningcss` rather than direct platform packages. If issues persist in containerized environments, verify the base image's architecture and C library (e.g., glibc vs. musl) match the installed binding, or explicitly specify the correct native package in your `package.json` overrides.","message":"This package (`lightningcss-linux-arm64-musl`) is a platform-specific native binary. While `lightningcss` itself handles installing the correct binary for your system, direct installation or misconfiguration (e.g., deploying on a different architecture/libc than compiled for) can lead to runtime errors due to missing or incompatible native modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Regularly check the `lightningcss` release notes for updates on spec changes and how they affect implemented features. Be mindful when using `drafts` options, as their behavior is subject to change.","message":"LightningCSS tracks the latest CSS specifications closely. This means that features still in draft or undergoing changes in the W3C spec might behave differently between minor versions, especially when enabling draft features. This can occasionally lead to unexpected output or parsing errors if your CSS relies on an older draft behavior.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"First, try reinstalling `lightningcss` to ensure the correct native module is fetched: `npm rebuild lightningcss`. If using Docker/containers, ensure the Node.js version and base image architecture (e.g., `arm64` vs `amd64`, `musl` vs `glibc`) are consistent.","cause":"The native binary for your specific platform/architecture could not be found or loaded. This usually happens if the main `lightningcss` package failed to install the correct optional dependency, or if the environment's architecture/libc changed after installation.","error":"Error: Cannot find module 'lightningcss-linux-arm64-musl/lightningcss.node' (or similar path for other platforms)"},{"fix":"Upgrade your Node.js runtime to version 12.0.0 or higher. The latest LTS release is generally recommended.","cause":"The installed Node.js version does not meet the minimum requirement specified in the package's `engines` field.","error":"The 'lightningcss' package requires Node.js version >= 12.0.0."},{"fix":"Review the CSS code at the indicated line and column for syntax errors. If using experimental or very new CSS features, ensure you have enabled the relevant `drafts` option (e.g., `drafts: { nesting: true }`) in the `transform` or `bundle` configuration.","cause":"The input CSS contains syntax errors or uses features not yet understood by LightningCSS without enabling specific draft flags.","error":"Error: Failed to parse CSS: Expected a declaration, found 'something-unexpected' (at input.css:X:Y)"}],"ecosystem":"npm"}