{"id":15683,"library":"lightningcss-linux-arm-gnueabihf","title":"LightningCSS: High-Performance CSS Toolchain for Linux ARM","description":"LightningCSS is an extremely fast CSS parser, transformer, minifier, and bundler written in Rust, designed for high-performance frontend build processes. The package `lightningcss-linux-arm-gnueabihf` specifically provides the native binary for ARMv7 Linux systems, enabling the core `lightningcss` library to execute its high-performance Rust logic on this architecture. The current stable version is 1.32.0, with frequent minor and patch releases. A key differentiator is its speed, often being over 100x faster than comparable JavaScript-based tools, capable of minifying millions of lines of code per second. It supports modern CSS features like nesting, container queries, view transitions, high gamut color spaces, and custom media queries, automatically transpiling them for specified browser targets using Browserslist configuration.","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-arm-gnueabihf","lang":"bash","label":"npm"},{"cmd":"yarn add lightningcss-linux-arm-gnueabihf","lang":"bash","label":"yarn"},{"cmd":"pnpm add lightningcss-linux-arm-gnueabihf","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"LightningCSS is primarily consumed as an ES Module. While Node.js has robust ESM support, explicit `import` statements are recommended. `require()` may work in some setups but can lead to issues with certain configurations or tools.","wrong":"const { transform } = require('lightningcss');","symbol":"transform","correct":"import { transform } from 'lightningcss';"},{"note":"`bundle` is a named export, not a default export. This function is used to process CSS `@import` rules and inline them, requiring filesystem access.","wrong":"import bundle from 'lightningcss';","symbol":"bundle","correct":"import { bundle } from 'lightningcss';"},{"note":"This helper function converts a browserslist query into the `targets` object required by LightningCSS for intelligent transpilation and prefixing. It's often used alongside the `browserslist` npm package.","symbol":"browserslistToTargets","correct":"import { browserslistToTargets } from 'lightningcss';"},{"note":"The `Features` enum allows selective inclusion or exclusion of specific CSS features during transformation, useful for fine-grained control over output compatibility.","symbol":"Features","correct":"import { Features } from 'lightningcss';"}],"quickstart":{"code":"import { transform, browserslistToTargets } from 'lightningcss';\nimport browserslist from 'browserslist';\nimport { Buffer } from 'node:buffer';\n\nconst cssInput = `\n  @media (width <= 600px) {\n    .card {\n      display: grid;\n      gap: 1rem;\n      color: oklab(59.686% 0.1009 0.1192);\n      @nest &::before {\n        content: 'Mobile view';\n      }\n    }\n  }\n  .container { width: clamp(200px, 50%, 800px); }\n`;\n\n// Define browser targets using browserslist\nconst targets = browserslistToTargets(browserslist('last 2 versions, > 0.2%'));\n\ntry {\n  const { code, map } = transform({\n    filename: 'input.css',\n    code: Buffer.from(cssInput),\n    minify: true,\n    sourceMap: true,\n    targets,\n    drafts: {\n      nesting: true,\n      customMedia: true\n    }\n  });\n\n  console.log('Transformed and minified CSS:\\n', code.toString());\n  // console.log('Source Map:\\n', map?.toString());\n\n  // Example for bundling (requires a file on disk)\n  // import { bundle } from 'lightningcss';\n  // const { code: bundledCode } = bundle({\n  //   filename: 'path/to/entry.css',\n  //   minify: true,\n  //   targets,\n  // });\n  // console.log('Bundled CSS:\\n', bundledCode.toString());\n\n} catch (error) {\n  console.error('Error transforming CSS:', error);\n}","lang":"typescript","description":"This quickstart demonstrates how to use LightningCSS to parse, minify, and transpile modern CSS syntax (like nesting, custom media queries, and OKLAB colors) for specified browser targets, including source map generation."},"warnings":[{"fix":"Review CSS code using relative color calculations, especially those involving percentages. Update `calc()` expressions and color values to conform to the updated spec, explicitly using numbers where appropriate.","message":"In version 1.30.0, the parsing for relative colors was updated to align with the latest CSS spec. This change now supports numbers in addition to percentages and ensures `calc()` expressions within colors are always treated as numbers. Code relying on previous relative color calculations with percentages may need updates to use numbers instead.","severity":"breaking","affected_versions":">=1.30.0"},{"message":"Version 1.30.0 also introduced updates to the CSS nesting implementation to adhere to the latest spec. This change allows for more flexible nesting patterns, including selectors with pseudo-elements and direct nesting of declarations and rules. While generally an improvement, existing CSS with complex nesting might behave differently or require adjustments.","severity":"breaking"},{"fix":"Upgrade LightningCSS to version 1.30.1 or newer to resolve the worker thread crash on Linux.","message":"Users employing Node.js worker threads on Linux experienced crashes with earlier versions of LightningCSS. This was addressed in v1.30.1. Ensure you are on a compatible version if running LightningCSS within worker threads to prevent unexpected process exits.","severity":"gotcha","affected_versions":"<1.30.1"},{"fix":"Consult the official LightningCSS documentation for updated guidance on custom resolvers and visitor API usage, especially if upgrading from older versions with custom plugins.","message":"Custom resolvers for bundling (`bundleAsync` API) and visitor functions for custom transforms received enhancements in v1.32.0 and v1.31.0, respectively. While these add powerful capabilities (e.g., marking imports as external, adding dependencies), users with existing custom logic should verify compatibility and consider leveraging new features for improved control.","severity":"gotcha","affected_versions":">=1.31.0"},{"fix":"Ensure `npm` cache is clean and try reinstalling `lightningcss`. Verify your Node.js version is compatible with the installed native binary. If issues persist, manually ensure the correct platform-specific package (e.g., `lightningcss-linux-arm-gnueabihf`) is correctly resolved and installed by the main `lightningcss` package, or address potential `browserslist` misconfigurations if using tools like TailwindCSS that rely on LightningCSS.","message":"As `lightningcss-linux-arm-gnueabihf` is a platform-specific native binding, incorrect environment setup or `npm` configuration can lead to runtime errors where the native module cannot be found. This is a common issue for native Node.js modules, especially on ARM platforms or when `npm` fails to install the correct binary.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"First, clear your `node_modules` and `package-lock.json` (or `yarn.lock`) and then reinstall: `rm -rf node_modules package-lock.json && npm install`. If the problem persists, verify your Node.js version is compatible and consider checking for specific OS dependencies like `VC_redist` on Windows.","cause":"The native binary for LightningCSS specific to your operating system and architecture was not found or correctly loaded, often due to an incomplete or incorrect `npm install` for native modules.","error":"Error: Cannot find module '../lightningcss.darwin-arm64.node' (or similar platform-specific .node file)"},{"fix":"Update your import statements from `const { transform } = require('lightningcss');` to `import { transform } from 'lightningcss';`. Ensure your project's `package.json` either specifies `\"type\": \"module\"` or uses `.mjs` file extensions for ESM.","cause":"You are attempting to use `require()` to import LightningCSS, but it is primarily an ES Module (ESM). CommonJS `require()` cannot directly load ESM modules.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module <path>/lightningcss/node/index.js not supported"}],"ecosystem":"npm"}