{"_id":"@arcmantle/vite-plugin-sass","_rev":"4-58d50d7beb537314df1c7556ca0b45c4","name":"@arcmantle/vite-plugin-sass","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@arcmantle/vite-plugin-sass","version":"1.0.0","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/vite-plugin-sass@1.0.0","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"e9811defb35f7f1de7fede9c5eba4a7b9910a672","tarball":"https://registry.npmjs.org/@arcmantle/vite-plugin-sass/-/vite-plugin-sass-1.0.0.tgz","fileCount":19,"integrity":"sha512-weX9tuOuDC/s8ZcLwvQKi5ARYWiyRLX/O9OpJYwqxJIyUDhQMExhG0I6m/TxeTUMUu3B8d+vHM2fZlXko9u9/g==","signatures":[{"sig":"MEUCIFab5mLUiBbuU4fwae5n8MzGc61feJXbIcxdFb40M/X5AiEAi0rXwZfqMzmv6AbatQplFXjQFlpDjUfYaGimM6NU+cM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30884},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-vite-plugin-sass-1.0.0.tgz","types":"./dist/index.d.ts","engines":{"node":">=22"},"exports":{".":"./dist/index.js"},"scripts":{"dev":"vite --config ./demo/vite.config.ts","build":"rimraf dist && tsc --project ./src/tsconfig.json"},"_npmUser":{"name":"roenlie","actor":{"name":"roenlie","type":"user","email":"kristofferroenlie@gmail.com"},"email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/8f5bda8f58d77a7611f4a8b04ba34651/arcmantle-vite-plugin-sass-1.0.0.tgz","_integrity":"sha512-weX9tuOuDC/s8ZcLwvQKi5ARYWiyRLX/O9OpJYwqxJIyUDhQMExhG0I6m/TxeTUMUu3B8d+vHM2fZlXko9u9/g==","_npmVersion":"11.4.2","description":"Applies SASS transformer to sass literals and allows importing sass files.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sass":"^1.86.3","oxc-walker":"^0.3.0","lightningcss":"^1.29.3","magic-string":"^0.30.17"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.0","vite":"^7.0.0","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.10","@arcmantle/tsconfig":"^1.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-sass_1.0.0_1751755243767_0.2680948731991386","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arcmantle/vite-plugin-sass","version":"1.0.1","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/vite-plugin-sass@1.0.1","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"bbb283c857e73535eee359721beecc962ae62333","tarball":"https://registry.npmjs.org/@arcmantle/vite-plugin-sass/-/vite-plugin-sass-1.0.1.tgz","fileCount":19,"integrity":"sha512-Pm3lDGKPeoJ0n+/aJAjOCPBsX6HwFQihueGbXmKHry7pAwglBw/pTGHYdiw45wCoJ4GNt93rUZ/KwlJH6ZMW4w==","signatures":[{"sig":"MEYCIQCzTZuBlGx52QI0Pk2xZ7/xYbforfzaJ1DCAFWviDm83wIhAJo04X2O1M+k+Qi9P8VyKFZIGhCd/ZKqpApYJ7xwu8IV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30866},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-vite-plugin-sass-1.0.1.tgz","types":"./dist/index.d.ts","engines":{"node":">=22"},"exports":{".":"./dist/index.js"},"scripts":{"dev":"vite --config ./demo/vite.config.ts","build":"rimraf dist && tsc --project ./src/tsconfig.json"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/c77ab306e65675b32d1b56e1f4d57af7/arcmantle-vite-plugin-sass-1.0.1.tgz","_integrity":"sha512-Pm3lDGKPeoJ0n+/aJAjOCPBsX6HwFQihueGbXmKHry7pAwglBw/pTGHYdiw45wCoJ4GNt93rUZ/KwlJH6ZMW4w==","_npmVersion":"11.4.2","description":"Applies SASS transformer to sass literals and allows importing sass files.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"sass":"^1.86.3","oxc-walker":"^0.3.0","lightningcss":"^1.29.3","magic-string":"^0.30.17"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.0","vite":"^7.0.0","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-sass_1.0.1_1752757866294_0.8281576133965849","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arcmantle/vite-plugin-sass","version":"1.0.2","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/vite-plugin-sass@1.0.2","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"homepage":"https://github.com/arcmantle/vite-plugin-sass#readme","bugs":{"url":"https://github.com/arcmantle/vite-plugin-sass/issues"},"dist":{"shasum":"6a9ecaaea83b3477cb29edb0306be18aabec404c","tarball":"https://registry.npmjs.org/@arcmantle/vite-plugin-sass/-/vite-plugin-sass-1.0.2.tgz","fileCount":19,"integrity":"sha512-bcy8R3dtI9dTjGb0pT/6Pxmi1w8eeu8WoPUEL3rqde30Qn7UAtIw/ujizec4wZX9OoRIHapwPTA2Y5xp97qbhg==","signatures":[{"sig":"MEUCIQCriCc2mTCnJdbOGFdrnlF67q4n5pggeiCBBbvZfAS2aAIgSusBM2GZYCvVhkVYwrRp06gtxg4EdT8PRHpZwGfccD4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30971},"main":"./dist/index.js","type":"module","_from":"file:arcmantle-vite-plugin-sass-1.0.2.tgz","types":"./dist/index.d.ts","engines":{"node":">=22"},"exports":{".":"./dist/index.js"},"scripts":{"dev":"vite --config ./demo/vite.config.ts","build":"rimraf dist && tsc --project ./src/tsconfig.json"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/b055e32e6c668af9f792fa3ce9309f7b/arcmantle-vite-plugin-sass-1.0.2.tgz","_integrity":"sha512-bcy8R3dtI9dTjGb0pT/6Pxmi1w8eeu8WoPUEL3rqde30Qn7UAtIw/ujizec4wZX9OoRIHapwPTA2Y5xp97qbhg==","repository":{"url":"git+https://github.com/arcmantle/vite-plugin-sass.git","type":"git"},"_npmVersion":"11.4.2","description":"Applies SASS transformer to sass literals and allows importing sass files.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"sass":"^1.86.3","oxc-walker":"^0.3.0","lightningcss":"^1.29.3","magic-string":"^0.30.17"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.0","vite":"^7.0.0","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.6"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-sass_1.0.2_1752781601233_0.6645499204822423","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@arcmantle/vite-plugin-sass","version":"1.0.3","description":"Applies SASS transformer to sass literals and allows importing sass files.","repository":{"type":"git","url":"git+https://github.com/arcmantle/vite-plugin-sass.git"},"license":"Apache-2.0","author":{"name":"Kristoffer Roen-Lie"},"type":"module","exports":{".":"./dist/index.js"},"main":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"lightningcss":"^1.29.3","magic-string":"^0.30.17","oxc-walker":"^0.3.0","sass":"^1.86.3"},"devDependencies":{"@arcmantle/tsconfig":"^1.0.9","@types/node":"^24.0.14","lit":"^3.3.0","rimraf":"^6.0.1","typescript":"^5.8.3","vite":"^7.0.0"},"engines":{"node":">=22"},"scripts":{"build":"rimraf dist && tsc --project ./src/tsconfig.json","dev":"vite --config ./demo/vite.config.ts"},"_id":"@arcmantle/vite-plugin-sass@1.0.3","bugs":{"url":"https://github.com/arcmantle/vite-plugin-sass/issues"},"homepage":"https://github.com/arcmantle/vite-plugin-sass#readme","_integrity":"sha512-2Iy8iUa6RjLzrau+nK7+3mIa4pLYlzhOcaegp2dJbneGKc4bE4zng6Cbsy+ld2eol+mlDsnpelvg1hkbkVjfKA==","_resolved":"/tmp/d0f099c030484d4ea1f8f6899d60d066/arcmantle-vite-plugin-sass-1.0.3.tgz","_from":"file:arcmantle-vite-plugin-sass-1.0.3.tgz","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-2Iy8iUa6RjLzrau+nK7+3mIa4pLYlzhOcaegp2dJbneGKc4bE4zng6Cbsy+ld2eol+mlDsnpelvg1hkbkVjfKA==","shasum":"2f758c5aa2d2ad8d696c6297846f7c7210240da5","tarball":"https://registry.npmjs.org/@arcmantle/vite-plugin-sass/-/vite-plugin-sass-1.0.3.tgz","fileCount":19,"unpackedSize":30971,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG4Zd01cxSNwz6tCGiqXxI/9ihE39A/04qOJJ1OAPKXiAiEAhzxFqLfnDIfiNMbgctDT4zZWh+Qy6Xltw5GGSAdQuCo="}]},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"directories":{},"maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-sass_1.0.3_1752792918947_0.747672200213878"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-05T22:40:43.576Z","modified":"2025-07-17T22:55:19.397Z","1.0.0":"2025-07-05T22:40:43.954Z","1.0.1":"2025-07-17T13:11:06.477Z","1.0.2":"2025-07-17T19:46:41.411Z","1.0.3":"2025-07-17T22:55:19.157Z"},"bugs":{"url":"https://github.com/arcmantle/vite-plugin-sass/issues"},"author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","homepage":"https://github.com/arcmantle/vite-plugin-sass#readme","repository":{"type":"git","url":"git+https://github.com/arcmantle/vite-plugin-sass.git"},"description":"Applies SASS transformer to sass literals and allows importing sass files.","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"readme":"# @arcmantle/vite-plugin-sass\n\nA Vite plugin that transforms SASS/SCSS code in tagged template literals and enables importing SASS/SCSS files with proper type assertions.\n\n## Features\n\n- 🎨 **Tagged Template Literals**: Transform `sass` and `scss` tagged template literals into compiled CSS\n- 📁 **File Imports**: Import `.scss` and `.sass` files with `with { type: 'scss' }` syntax\n- ⚡ **Lightning Fast**: Uses LightningCSS for minification and optimization\n- 🔧 **Configurable**: Customizable options for minification, root directory, and debug levels\n- 🧩 **Framework Agnostic**: Works with any JavaScript/TypeScript project using Vite\n- 📦 **Virtual Modules**: Efficiently handles SASS imports as virtual modules\n\n## Installation\n\n```bash\nnpm install @arcmantle/vite-plugin-sass\n# or\npnpm add @arcmantle/vite-plugin-sass\n# or\nyarn add @arcmantle/vite-plugin-sass\n```\n\n## Usage\n\n### Basic Setup\n\nAdd the plugin to your `vite.config.ts`:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport { sassTransformer } from '@arcmantle/vite-plugin-sass';\n\nexport default defineConfig({\n  plugins: [\n    sassTransformer({\n      rootDir: './src/styles', // Optional: Root directory for SASS imports\n      minify: true,            // Optional: Enable CSS minification (default: true)\n      debugLevel: 'silent',    // Optional: Debug level ('silent' | 'error')\n    }),\n  ],\n});\n```\n\n### Tagged Template Literals\n\nUse `sass` or `scss` tagged template literals in your TypeScript/JavaScript files:\n\n```typescript\nimport { css, LitElement } from 'lit';\n\nconst styles = sass`\n  $primary-color: #007bff;\n  $font-size: 16px;\n\n  .button {\n    background-color: $primary-color;\n    font-size: $font-size;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 4px;\n\n    &:hover {\n      background-color: darken($primary-color, 10%);\n    }\n  }\n`;\n\nclass MyElement extends LitElement {\n  static styles = [styles];\n  // ... rest of your component\n}\n```\n\n### File Imports\n\nImport SASS/SCSS files using the `with { type: 'scss' }` syntax:\n\n```typescript\n// Import a SCSS file\nimport styles from './styles.scss' with { type: 'scss' };\n\n// The imported styles will be a CSSStyleSheet object\ndocument.adoptedStyleSheets = [styles];\n```\n\n**styles.scss:**\n\n```scss\n$primary-color: #333;\n\nbody {\n  font-family: Arial, sans-serif;\n  color: $primary-color;\n}\n```\n\n### With Lit Elements\n\nPerfect for use with Lit components:\n\n```typescript\nimport { LitElement, html, css as sass } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport globalStyles from './global.scss' with { type: 'scss' };\n\n@customElement('my-component')\nexport class MyComponent extends LitElement {\n  static styles = [\n    globalStyles,  // Imported SCSS file\n    sass`          // Inline SASS\n      @use 'variables';\n\n      :host {\n        display: block;\n        padding: variables.$base-padding;\n      }\n\n      .content {\n        background: variables.$background-color;\n        border-radius: 8px;\n      }\n    `,\n  ];\n\n  render() {\n    return html`<div class=\"content\">Hello World!</div>`;\n  }\n}\n```\n\n## Configuration Options\n\n### `SASSTransformerOptions`\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `minify` | `boolean` | `true` | Enable CSS minification using LightningCSS |\n| `rootDir` | `string` | `''` | Root directory for resolving SASS imports |\n| `debugLevel` | `'error' \\| 'silent'` | `'silent'` | Debug output level |\n\n## How It Works\n\n1. **Detection**: The plugin scans TypeScript/JavaScript files for `sass` or `scss` tagged template literals\n2. **Compilation**: SASS code is compiled using the official Dart Sass compiler\n3. **Minification**: Compiled CSS is minified using LightningCSS (if enabled)\n4. **Transformation**: The tagged template literal is replaced with the compiled CSS string\n5. **Virtual Modules**: SASS file imports are handled as virtual modules, creating `CSSStyleSheet` objects\n\n## Supported File Types\n\n### Source Files (for transformation)\n\n- `.ts` - TypeScript files\n- `.mts` - TypeScript modules\n- `.js` - JavaScript files\n- `.mjs` - JavaScript modules\n\n### SASS Files (for imports)\n\n- `.scss` - SASS files with CSS-like syntax\n- `.sass` - SASS files with indented syntax\n\n## Example Project Structure\n\n```text\nsrc/\n├── styles/\n│   ├── _variables.scss\n│   ├── _mixins.scss\n│   └── base.scss\n├── components/\n│   ├── button.ts\n│   └── card.ts\n└── main.ts\n```\n\n## Requirements\n\n- Node.js >= 22\n- Vite >= 7.0.0\n\n## Dependencies\n\n- **sass**: Official Dart Sass compiler for SASS compilation\n- **lightningcss**: Fast CSS transformer and minifier\n- **magic-string**: Efficient string manipulation with source maps\n- **oxc-walker**: Fast JavaScript/TypeScript AST walker\n\n## License\n\nApache-2.0\n\n## Contributing\n\nThis package is part of the Arcmantle Weave monorepo. Contributions are welcome!\n","readmeFilename":"README.md"}