{"id":13460,"library":"lightningcss-darwin-arm64","title":"LightningCSS (macOS ARM64 Native)","description":"LightningCSS (version 1.32.0) is a high-performance CSS parser, transformer, and minifier primarily written in Rust. This `lightningcss-darwin-arm64` package specifically provides the native bindings compiled for macOS on Apple Silicon (ARM64) architectures. While users typically interact with the main `lightningcss` package, this package is automatically installed as a platform-specific dependency to provide the underlying Rust-powered functionalities. It is known for its exceptional speed, making it a robust alternative to JavaScript-based CSS processors, and is a core component of the Parcel bundler. The project maintains an active development cycle, evidenced by frequent updates (e.g., v1.32.0, v1.31.0) introducing support for the latest CSS specifications like container queries, `@property` at-rule enhancements, view transitions, and continuous performance optimizations and bug fixes. Its differentiators include Rust-native performance, comprehensive and up-to-date CSS spec support, and advanced features like CSS Modules hashing and browser compatibility targeting.","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-darwin-arm64","lang":"bash","label":"npm"},{"cmd":"yarn add lightningcss-darwin-arm64","lang":"bash","label":"yarn"},{"cmd":"pnpm add lightningcss-darwin-arm64","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `lightningcss` package automatically loads the correct platform-specific native binding (like `lightningcss-darwin-arm64`). Always import from 'lightningcss', not the specific binding. ESM is the recommended import style.","wrong":"const { transform } = require('lightningcss');","symbol":"transform","correct":"import { transform } from 'lightningcss';"},{"note":"Used for bundling multiple CSS files, resolving `@import` rules, and handling CSS Modules.","wrong":"const { bundle } = require('lightningcss');","symbol":"bundle","correct":"import { bundle } from 'lightningcss';"},{"note":"Type import for configuration options when using TypeScript.","symbol":"CSSOptions","correct":"import type { CSSOptions } from 'lightningcss';"}],"quickstart":{"code":"import { transform } from 'lightningcss';\nimport fs from 'node:fs/promises';\n\nasync function processCss() {\n  const inputCss = `\n    :root {\n      --primary-color: #3498db;\n    }\n    .container {\n      display: flex;\n      background-color: var(--primary-color);\n      padding: 20px;\n      border-radius: 8px;\n      @media (min-width: 768px) {\n        padding: 40px;\n      }\n    }\n    .button {\n      color: white;\n      background: var(--primary-color);\n      &:hover { background: darken(var(--primary-color), 10%); }\n    }\n  `;\n\n  try {\n    const { code, map } = transform({\n      filename: 'input.css',\n      code: Buffer.from(inputCss),\n      minify: true,\n      sourceMap: true,\n      targets: { chrome: 100 },\n      drafts: { nesting: true, customMedia: true }\n    });\n\n    console.log('Minified CSS:\\n', code.toString());\n    // console.log('Source Map:\\n', map?.toString());\n\n    await fs.writeFile('output.min.css', code);\n    console.log('Output written to output.min.css');\n  } catch (error) {\n    console.error('Error processing CSS:', error);\n  }\n}\n\nprocessCss();","lang":"typescript","description":"Demonstrates how to use `lightningcss` to transform and minify CSS, including features like nesting and browser targeting. This code processes an input string, minifies it, generates a sourcemap, and saves the output to a file."},"warnings":[{"fix":"Review CSS code using relative color calculations (e.g., `rgb(from red r 10% 20%)`) and update percentage values to numbers where the spec now requires it. Refer to the `lightningcss` release notes and CSS Color Module Level 5 for details.","message":"In v1.30.0, relative color parsing was updated to the latest CSS specification. This change affects calculations involving percentages in relative colors, which now often require numbers instead. Code utilizing older relative color calculations with percentages may need updates.","severity":"breaking","affected_versions":">=1.30.0"},{"fix":"Always install and import from the `lightningcss` package, which handles the selection and loading of the correct native binary for your environment.","message":"This package (`lightningcss-darwin-arm64`) is a platform-specific native binary. It is typically installed automatically as a dependency of the main `lightningcss` package. Direct installation or importing from this specific package is generally not recommended or necessary for most users.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your Node.js environment is version 12.0.0 or newer. Upgrade Node.js using `nvm` or your preferred method.","message":"The `lightningcss` package, and by extension its native bindings, requires Node.js version 12.0.0 or higher. Running with older Node.js versions will lead to errors.","severity":"gotcha","affected_versions":"<12.0.0 (Node.js)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade or downgrade your Node.js version to match the expected version for the installed `lightningcss` package, or try reinstalling `lightningcss` after updating Node.js to ensure native bindings are rebuilt for the current environment. A `rm -rf node_modules && npm install` (or `yarn install`) often resolves this.","cause":"The installed native module (lightningcss-darwin-arm64) was compiled for a different Node-API version than the currently running Node.js runtime.","error":"Error: NAPI_VERSION_MISMATCH"},{"fix":"Ensure `npm install` (or `yarn install`) completed successfully. Verify that your system architecture (e.g., `arm64` vs `x64`) matches the expected binary. Try clearing your `node_modules` and `package-lock.json` (or `yarn.lock`) and reinstalling: `rm -rf node_modules package-lock.json && npm install`.","cause":"The native binary for your operating system or architecture could not be found or loaded, often due to an incomplete installation, incorrect platform detection, or a corrupted `node_modules`.","error":"Error: Cannot find module 'lightningcss-darwin-arm64'"},{"fix":"Ensure you are using named ESM imports: `import { transform } from 'lightningcss';`. If in a CommonJS context, verify your transpiler configuration or try `const { transform } = await import('lightningcss');` for async CJS interop, or ensure your bundler is configured to correctly handle ESM exports.","cause":"This error typically occurs in a bundled environment (like Webpack or Rollup) or with incorrect CommonJS `require()` usage when `lightningcss` is primarily an ESM module, leading to a default import being accessed as a named import.","error":"TypeError: (0 , lightningcss__WEBPACK_IMPORTED_MODULE_0__.transform) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}