{"id":26588,"library":"vite-plugin-dlight-easy-css","title":"Vite Plugin DLight Easy CSS","description":"A Vite plugin that transpiles DLight JSX/TSX components with inline CSS-in-JS syntax, version 0.9.27. It is designed for the DLight framework (dlight.js) and provides easy CSS handling via babel transpilation. This plugin is part of the DLight ecosystem and offers seamless integration with Vite's build pipeline. The release cadence appears to be irregular, and it ships TypeScript types. Key differentiators: optimized for DLight's reactive rendering and CSS scoping, minimal configuration required. Currently in early development (pre 1.0).","status":"active","version":"0.9.27","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","dlight.js","vite-plugin","easy-css","typescript"],"install":[{"cmd":"npm install vite-plugin-dlight-easy-css","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-dlight-easy-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-dlight-easy-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin is designed for Vite build tool.","package":"vite","optional":false}],"imports":[{"note":"ESM-only package; CommonJS require not supported.","wrong":"const VitePluginDLightEasyCSS = require('vite-plugin-dlight-easy-css')","symbol":"default (VitePluginDLightEasyCSS)","correct":"import VitePluginDLightEasyCSS from 'vite-plugin-dlight-easy-css'"},{"note":"Named export available for tree-shaking.","wrong":"","symbol":"VitePluginDLightEasyCSS (named export)","correct":"import { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'"},{"note":"Use type import for TypeScript type declarations.","wrong":"import { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'; type usage only","symbol":"VitePluginDLightEasyCSS (type import)","correct":"import type { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport VitePluginDLightEasyCSS from 'vite-plugin-dlight-easy-css';\n\nexport default defineConfig({\n  plugins: [\n    VitePluginDLightEasyCSS({\n      // Options (optional)\n    })\n  ]\n});\n\n// src/App.tsx\nimport { View } from '@dlightjs/dlight';\n\n@View\nclass App {\n  Body() {\n    div(\"Hello World\")\n      .style({ color: 'red', fontSize: '20px' });\n  }\n}","lang":"typescript","description":"Demonstrates configuring the Vite plugin in vite.config.ts and using inline CSS in a DLight component."},"warnings":[{"fix":"Pin to exact version and review changelog on updates.","message":"Version 0.x API may change without notice; breaking changes between minor versions.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Use .style() with JavaScript object for CSS properties.","message":"Some CSS syntax used in earlier alphas is deprecated; prefer .style() object notation.","severity":"deprecated","affected_versions":"<0.9.0"},{"fix":"Order plugins: [VitePluginDLightEasyCSS(), /* other DLight plugins */]","message":"Plugin must be placed before @dlightjs/vite-plugin in the plugins array.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"npm install -D @babel/core","message":"Requires babel; ensure @babel/core is installed as a dev dependency.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use // @ts-ignore as last resort.","message":"TypeScript types are included but may not cover all edge cases; ignore type errors if they arise.","severity":"gotcha","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install vite-plugin-dlight-easy-css","cause":"Missing installation or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-dlight-easy-css'"},{"fix":"Use import statement instead of require().","cause":"Using CommonJS require in an ESM context.","error":"ReferenceError: exports is not defined in ES module scope"},{"fix":"Change `.css('color: red')` to `.style({ color: 'red' })`","cause":"Using deprecated CSS string syntax instead of .style() object.","error":"SyntaxError: Unexpected token'.' - expected','"},{"fix":"Ensure VitePluginDLightEasyCSS is added to plugins array in vite.config.","cause":"Plugin not applied or misconfigured; babel transform not running.","error":"TypeError: Cannot read properties of undefined (reading 'style')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}