Registry / web-framework / vite-plugin-dlight-easy-css

vite-plugin-dlight-easy-css

library0.9.27jsnpmunverified

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).

web-framework serialization

npm install vite-plugin-dlight-easy-css

package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-DLIGHT

vite-plugin-dlight-easy-css

web-frameworkjavascriptv0.9.27

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (VitePluginDLightEasyCSS)

✓ import VitePluginDLightEasyCSS from 'vite-plugin-dlight-easy-css'

✗ const VitePluginDLightEasyCSS = require('vite-plugin-dlight-easy-css')

ESM-only package; CommonJS require not supported.

VitePluginDLightEasyCSS (named export)

✓ import { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'

Named export available for tree-shaking.

VitePluginDLightEasyCSS (type import)

✓ import type { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'

✗ import { VitePluginDLightEasyCSS } from 'vite-plugin-dlight-easy-css'; type usage only

Use type import for TypeScript type declarations.

Demonstrates configuring the Vite plugin in vite.config.ts and using inline CSS in a DLight component.

// vite.config.ts import { defineConfig } from 'vite'; import VitePluginDLightEasyCSS from 'vite-plugin-dlight-easy-css'; export default defineConfig({ plugins: [ VitePluginDLightEasyCSS({ // Options (optional) }) ] }); // src/App.tsx import { View } from '@dlightjs/dlight'; @View class App { Body() { div("Hello World") .style({ color: 'red', fontSize: '20px' }); } }

Debug

Known issues

breakingVersion 0.x API may change without notice; breaking changes between minor versions.

fix

Pin to exact version and review changelog on updates.

affects: <1.0.0

deprecatedSome CSS syntax used in earlier alphas is deprecated; prefer .style() object notation.

fix

Use .style() with JavaScript object for CSS properties.

affects: <0.9.0

gotchaPlugin must be placed before @dlightjs/vite-plugin in the plugins array.

fix

Order plugins: [VitePluginDLightEasyCSS(), /* other DLight plugins */]

affects: >=0.1.0

gotchaRequires babel; ensure @babel/core is installed as a dev dependency.

fix

npm install -D @babel/core

affects: >=0.1.0

gotchaTypeScript types are included but may not cover all edge cases; ignore type errors if they arise.

fix

Use // @ts-ignore as last resort.

affects: >=0.9.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-dlight-easy-css'

Missing installation or incorrect import path.

fix

npm install vite-plugin-dlight-easy-css

ReferenceError: exports is not defined in ES module scope

Using CommonJS require in an ESM context.

fix

Use import statement instead of require().

SyntaxError: Unexpected token'.' - expected','

Using deprecated CSS string syntax instead of .style() object.

fix

Change `.css('color: red')` to `.style({ color: 'red' })`

TypeError: Cannot read properties of undefined (reading 'style')

Plugin not applied or misconfigured; babel transform not running.

fix

Ensure VitePluginDLightEasyCSS is added to plugins array in vite.config.

Upgrade

Version history

0.9.27latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin is designed for Vite build tool.

Agent activity

10 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-dlight-easy-css ↗

homepagehttps://vite-plugin-dlight-easy-css.dlight.dev ↗