Vite Plugin DLight Easy CSS

0.9.27 verified Fri May 01 auth: no javascript

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

Common errors

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

cause Missing installation or incorrect import path.

fix

npm install vite-plugin-dlight-easy-css

error ReferenceError: exports is not defined in ES module scope ↓

cause Using CommonJS require in an ESM context.

fix

Use import statement instead of require().

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

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

fix

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

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

cause Plugin not applied or misconfigured; babel transform not running.

fix

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

Warnings

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

fix Pin to exact version and review changelog on updates.

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

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

gotcha Plugin must be placed before @dlightjs/vite-plugin in the plugins array. ↓

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

gotcha Requires babel; ensure @babel/core is installed as a dev dependency. ↓

fix npm install -D @babel/core

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

fix Use // @ts-ignore as last resort.

Install

npm install vite-plugin-dlight-easy-css

yarn add vite-plugin-dlight-easy-css

pnpm add vite-plugin-dlight-easy-css

Imports

default (VitePluginDLightEasyCSS)

wrong

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

correct

import VitePluginDLightEasyCSS from '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)

wrong

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

correct

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

Use type import for TypeScript type declarations.

Quickstart

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' });
  }
}