{"id":13465,"library":"lightningcss-win32-x64-msvc","title":"Lightning CSS (Windows x64 MSVC Native Binding)","description":"lightningcss-win32-x64-msvc is a specific native binary package for Lightning CSS, compiled for `x86_64` Windows environments using the MSVC toolchain. It provides the high-performance CSS parsing, transformation, and minification capabilities of Lightning CSS, which is primarily written in Rust. End-users typically interact with the primary `lightningcss` npm package, which automatically selects and loads the appropriate platform-specific binding, such as this one. The core Lightning CSS library is currently at version 1.32.0 and maintains an active release cadence with frequent minor and patch updates, offering comprehensive support for modern CSS features like nesting, container queries, custom properties, and CSS Modules. Its primary differentiators are its Rust-based performance, deep integration with browser compatibility data for targeted transpilation, and advanced bundling features. It serves as a fast alternative to tools like PostCSS.","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-win32-x64-msvc","lang":"bash","label":"npm"},{"cmd":"yarn add lightningcss-win32-x64-msvc","lang":"bash","label":"yarn"},{"cmd":"pnpm add lightningcss-win32-x64-msvc","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Users import from the main `lightningcss` package, not directly from `lightningcss-win32-x64-msvc`. CommonJS `require` is also supported.","wrong":"const { transform } = require('lightningcss');","symbol":"transform","correct":"import { transform } from 'lightningcss';"},{"note":"The `bundle` function is for processing `@import` rules and is a named export from the main `lightningcss` package.","wrong":"import bundle from 'lightningcss/bundle';","symbol":"bundle","correct":"import { bundle } from 'lightningcss';"},{"note":"Various error types (e.g., `CustomError`) are also named exports for handling specific parsing or transformation issues.","symbol":"CustomError","correct":"import { CustomError } from 'lightningcss';"}],"quickstart":{"code":"import { transform } from 'lightningcss';\nimport { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';\nimport { join } from 'path';\n\nconst inputCSSContent = `\n  :root {\n    --primary-color: #3498db;\n  }\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--primary-color);\n  }\n  .button {\n    appearance: none;\n    -webkit-appearance: none;\n    background: linear-gradient(to right, red, blue);\n    transform: scale(1.1);\n    animation: fadeIn 1s ease-in-out;\n  }\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @container (min-width: 400px) {\n    .container {\n      padding: 20px;\n    }\n  }\n`;\n\nconst inputFilename = 'input.css';\nconst outputFilename = 'output.min.css';\nconst outputDir = join(__dirname, 'dist');\nconst inputPath = join(outputDir, inputFilename);\nconst outputPath = join(outputDir, outputFilename);\n\nif (!existsSync(outputDir)) {\n  mkdirSync(outputDir, { recursive: true });\n}\nwriteFileSync(inputPath, inputCSSContent);\n\ntry {\n  const { code, map } = transform({\n    filename: inputFilename,\n    code: Buffer.from(inputCSSContent),\n    minify: true,\n    targets: {\n      chrome: 1000000, // Chrome 100\n      firefox: 1000000, // Firefox 100\n      safari: 150000, // Safari 15\n    },\n    sourceMap: true,\n    drafts: {\n      nesting: true, // Enable CSS Nesting draft\n      customMedia: true, // Enable Custom Media Queries draft\n      scope: true // Enable CSS Scope draft\n    }\n  });\n\n  console.log('Transformed and minified CSS:');\n  console.log(code.toString());\n  writeFileSync(outputPath, code.toString());\n  if (map) {\n    console.log('\\nGenerated Source Map:');\n    console.log(map.toString());\n    writeFileSync(`${outputPath}.map`, map.toString());\n  }\n  console.log(`\\nSuccessfully processed CSS. Output saved to: ${outputPath}`);\n\n} catch (error: any) {\n  console.error('Error processing CSS with Lightning CSS:', error.message);\n}\n","lang":"typescript","description":"This example demonstrates how to use the `transform` function from `lightningcss` to minify CSS, add vendor prefixes based on target browsers, generate source maps, and enable experimental draft features like nesting and container queries. It writes the input CSS to a temporary file and outputs the processed CSS and its source map."},"warnings":[{"fix":"Install `lightningcss` directly: `npm install lightningcss`. Avoid installing platform-specific packages unless explicitly managing native dependencies.","message":"This package (`lightningcss-win32-x64-msvc`) is a native binary binding for a specific platform (Windows x64 with MSVC). End-users should typically install the main `lightningcss` npm package, which automatically detects the environment and installs the correct platform-specific native module.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review any existing CSS code using relative color calculations, especially those involving percentages. You may need to update them to use numbers where appropriate to match the new spec behavior.","message":"In v1.30.0, the parsing of relative colors was updated to align with the latest CSS Working Group specification. Colors now support numbers in addition to percentages, and `calc()` expressions within colors are always interpreted as numbers. This was a technical breaking change in the spec itself.","severity":"breaking","affected_versions":">=1.30.0"},{"fix":"Ensure you have the necessary build tools installed for your operating system (e.g., Python 3 and Visual Studio Build Tools for Windows, or `build-essential` for Linux). Node-gyp errors during installation often indicate missing build toolchains.","message":"While `lightningcss` is primarily written in Rust for performance, its JavaScript API uses Node.js native modules. This means that build tools (like MSVC on Windows, or `gcc`/`clang` on Unix-like systems) are sometimes required during `npm install` for compilation if prebuilt binaries are unavailable or incompatible with your specific environment.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Familiarize yourself with the latest CSS nesting specification and adjust your nested CSS accordingly. Existing valid nesting syntax should generally continue to work, but new possibilities are available.","message":"The behavior of CSS nesting was updated in v1.30.0 to reflect changes in the spec. It is now possible to nest selectors with pseudo elements more flexibly, and rules for mixed declarations and nested rules have evolved.","severity":"breaking","affected_versions":">=1.30.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"First, delete `node_modules` and `package-lock.json` (or `yarn.lock`). Then, reinstall the main `lightningcss` package: `npm install lightningcss`. If problems persist, ensure your system has the necessary build tools (e.g., Python 3 and Visual Studio Build Tools for Windows).","cause":"The native module for Lightning CSS could not be loaded. This often happens if the `lightningcss` package was installed incorrectly, the wrong platform-specific binary was chosen, or required build tools were missing during installation.","error":"Error: Cannot find module 'lightningcss-win32-x64-msvc/lightningcss.node' or its corresponding type declarations."},{"fix":"Review the problematic CSS snippet indicated by the error message. Ensure all parentheses, colons, and other syntax elements are correctly placed according to CSS specifications.","cause":"This is a common parsing error indicating a CSS syntax mistake, often related to invalid use of pseudo-elements or selectors where a function is expected.","error":"Error: Expected '(', found ':'"},{"fix":"Correct the browser target string to a valid format, e.g., `{ chrome: 100 }` for Chrome 100. Ensure the version number is realistic and follows `browserslist` conventions (e.g., `1000000` is usually interpreted as `100.0.0` or simply `100`).","cause":"The `targets` option passed to `transform` or `bundle` uses an invalid browser or version string, or the version is extremely high and not recognized by the underlying `browserslist` data.","error":"Error: BrowserslistError: Unknown browser 'chrome 1000000'"}],"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}