{"id":19566324,"url":"https://github.com/juliendargelos/nuxt-lightningcss","last_synced_at":"2025-04-22T12:31:09.521Z","repository":{"id":184992363,"uuid":"672836180","full_name":"juliendargelos/nuxt-lightningcss","owner":"juliendargelos","description":"Lightningcss for Nuxt","archived":false,"fork":false,"pushed_at":"2024-11-21T01:42:24.000Z","size":123,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T05:04:28.240Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juliendargelos.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-31T09:23:05.000Z","updated_at":"2025-04-12T11:05:16.000Z","dependencies_parsed_at":"2023-07-31T09:32:54.919Z","dependency_job_id":"e909e1b6-429c-41bd-a20e-75ad441ed4ee","html_url":"https://github.com/juliendargelos/nuxt-lightningcss","commit_stats":null,"previous_names":["juliendargelos/nuxt-lightningcss"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliendargelos%2Fnuxt-lightningcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliendargelos%2Fnuxt-lightningcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliendargelos%2Fnuxt-lightningcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliendargelos%2Fnuxt-lightningcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juliendargelos","download_url":"https://codeload.github.com/juliendargelos/nuxt-lightningcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250240786,"owners_count":21397866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T05:31:05.504Z","updated_at":"2025-04-22T12:31:09.496Z","avatar_url":"https://github.com/juliendargelos.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# nuxt-lightningcss\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nUse the built-in lightningcss preprocessor of Vite with Nuxt.\n\n- [📖 \u0026nbsp;Lightningcss documentation][lightningcss-documentation]\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n\n## Quick Setup\n\n1. Add `nuxt-lightningcss` dependency to your project\n\n```bash\npnpm add -D nuxt-lightningcss\n```\n\n2. Add `nuxt-lightningcss` to the `modules` section of `nuxt.config.ts`\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-lightningcss'\n  ]\n})\n```\n\n3. To get the proper syntax highlighting in your components, use `lang=\"postcss\"` in your style tags:\n\n```html\n\u003cstyle lang=\"postcss\"\u003e\n  .a {\n    color: black;\n\n    .b {\n      color: blue;\n    }\n  }\n\u003c/style\u003e\n```\n\nThat's it! You can now use lightningcss in your Nuxt app ✨\n\n## Configuration\n\nTo configure the module, add an options object either with the `lightningcss` key or in the `modules` array:\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-lightningcss'\n  ],\n\n  lightningcss: {\n    // Options\n  }\n})\n```\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\n    ['nuxt-lightningcss', {\n      // Options\n    }]\n  ]\n})\n```\n\n\n```typescript\ninterface ModuleOptions {\n  /**\n   * Paths to global stylesheets\n   * @default undefined\n   */\n  globals?: string[]\n\n  /**\n   * Wether to minify stylesheets\n   * @default true\n   */\n  minify?: boolean\n\n  /**\n   * Lightningcss configuration file or object\n   * @default '~~/lightningcss.config.ts'\n   */\n  config?: string | Config\n}\n```\n\n- `globals`: an array of stylesheet paths to import in all other stylesheets. This is especially useful when you want to transpile [custom media queries](#custom-media-queries).\n- `minify`: set to false to disable lightningcss minification (always disabled in development mode)\n- `config`: lightningcss [configuration](src/config.ts) file or object. By default, the module will look for a `lightningcss.config.ts` file in the root of your project.\n\n### Configuration file\n\nYou can create a file to set lightningcss [configuration][lightningcss-options]:\n\n```typescript\n// ~~/lightningcss.config.ts\n\nimport { defineLightningCSSConfig } from 'nuxt-lightningcss'\n\nexport default defineLightningCSSConfig({\n  // Lightningcss configuration\n})\n```\n\n\n### Targets\n\nThe [lightningcss `targets` option][lightningcss-targets] is automatically set from you project [browserslist configuration][browserslist-readme] (either in `.browserslistrc`, `browserslist`, `package.json` or in the `BROWSERSLIST` environment variable). If there isn't an explicit browserslist configuration in your project, the `defaults` preset will be used. This can also be overridden from the lightningcss configuration:\n\n```typescript\nimport { defineLightningCSSConfig } from 'nuxt-lightningcss'\nimport { browserslistToTargets } from 'lightningcss'\nimport browserslist from 'browserslist'\n\nexport default defineLightningCSSConfig({\n  targets: browserslistToTargets(browserslist('\u003e 0.5%, last 2 versions, Firefox ESR, not dead'))\n})\n```\n\n### Custom media queries\n\nCustom media queries can be transpiled using lightningcss, but since their actual definition is removed from the bundled stylesheets, they need to be imported in all stylesheets that use them. You can do that using the following configuration:\n\n```typescript\nimport { Features } from 'lightningcss'\n\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-lightningcss'\n  ],\n\n  lightningcss: {\n    globals: [\n      // Import your custom media queries in all stylesheets\n      '~/assets/stylesheets/media-queries.css'\n    ],\n    config: {\n      include: Features.CustomMediaQueries,\n      drafts: {\n        customMedia: true\n      }\n    }\n  }\n})\n```\n\n### Minify\n\nBy default, stylesheets are minified in production using lightningcss. You can disable minification using the following configuration (always disabled in development mode):\n\n```typescript\nimport { Features } from 'lightningcss'\n\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-lightningcss'\n  ],\n\n  lightningcss: {\n    minify: false\n  }\n})\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm dev:prepare\n\n# Develop with the playground\npnpm dev\n\n# Build the playground\npnpm dev:build\n\n# Run ESLint\npnpm lint\n\n# Run Vitest\npnpm test\npnpm test:watch\n\n# Release new version\npnpm release\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-lightningcss/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-lightningcss\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-lightningcss.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-lightningcss\n\n[license-src]: https://img.shields.io/npm/l/nuxt-lightningcss.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-lightningcss\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n\n\u003c!-- Lightningcss documentation --\u003e\n[lightningcss-documentation]: https://lightningcss.dev/docs.html\n[lightningcss-targets]: https://lightningcss.dev/transpilation.html#browser-targets\n[lightningcss-options]: https://github.com/parcel-bundler/lightningcss/blob/7ff93ca5c69ba9df415e1e2319d275e2cec249d7/node/index.d.ts#L8-L74\n[browserslist-readme]: https://github.com/browserslist/browserslist#readme\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliendargelos%2Fnuxt-lightningcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliendargelos%2Fnuxt-lightningcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliendargelos%2Fnuxt-lightningcss/lists"}