Registry / devops / livestylesync-vite-plugin

livestylesync-vite-plugin

library1.1.0jsnpmunverified

Vite plugin for LiveStyleSync – a real-time CSS patching tool that writes style changes directly to source files via a WebSocket server. Current stable version is 1.1.0. Requires Vite >=4 and the complementary livestylesync-overlay package. Unlike traditional CSS-in-JS or hot-reload mechanisms, LiveStyleSync modifies source files (CSS, SCSS, CSS Modules, Vue scoped styles) using PostCSS AST and relies on Vite's HMR to reflect changes. It is released as an open-source MIT-licensed package. This plugin is the server-side counterpart; the browser overlay handles user-initiated style edits and sends patches to the WS server. Release cadence is irregular; recent versions have focused on stability and compatibility with Vite 4+. It differentiates itself by preserving source file updates rather than injecting runtime styles, making it suitable for design-to-code workflows.

devops testing

npm install livestylesync-vite-plugin

package ↗

INSTALL

IMPORT

SIG · LIVESTYLESYNC-VITE

livestylesync-vite-plugin

devopsjavascriptv1.1.0

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.

liveStyleSync

✓ import { liveStyleSync } from 'livestylesync-vite-plugin'

✗ const liveStyleSync = require('livestylesync-vite-plugin')

Package is ESM-only, no CommonJS support. Use named import.

LiveStyleSyncOptions

✓ import type { LiveStyleSyncOptions } from 'livestylesync-vite-plugin'

✗ import { LiveStyleSyncOptions } from 'livestylesync-vite-plugin'

This is a TypeScript type, import using 'import type' to avoid runtime errors.

default import

✓ import liveStyleSyncPlugin from 'livestylesync-vite-plugin'

✗ import { default as liveStyleSyncPlugin } from 'livestylesync-vite-plugin'

While the package exports a named function, some documented examples show default import. Prefer named import for clarity.

Vite configuration enabling LiveStyleSync plugin with customizable WebSocket port, using environment variable for port number.

// vite.config.ts import { defineConfig } from 'vite'; import { liveStyleSync } from 'livestylesync-vite-plugin'; export default defineConfig({ plugins: [ liveStyleSync({ port: parseInt(process.env.LSS_PORT ?? '3100'), }), ], });

Debug

Known issues

deprecatedThe 'port' option default changed from 3100 to 3200 in version 1.1.0. Update your overlay configuration to match.

fix

Ensure both plugin and overlay use the same port. If you rely on the default, set port: 3100 explicitly in plugin options.

affects: 1.1.0

gotchaRequires installation of both the plugin and the overlay package. Missing either will cause WebSocket connection failure.

fix

npm install livestylesync-overlay livestylesync-vite-plugin

affects: >=1.0.0

breakingRemoved CommonJS support in v1.0.0. The package is now ESM-only.

fix

Convert to ESM: update project to use ES modules, or use dynamic import() for CommonJS projects.

affects: >=1.0.0

gotchaThe plugin only works with Vite dev server, not production builds. Production usage will silently fail.

fix

Use configureDevServer. Ensure the plugin is only applied in development mode.

affects: >=1.0.0

deprecatedTypeScript type 'UserPluginConfig' is deprecated since v1.1.0; use 'LiveStyleSyncOptions' instead.

fix

Replace all references to 'UserPluginConfig' with 'LiveStyleSyncOptions'.

affects: 1.1.0

Errors

Common errors & fixes

Cannot find module 'vite' (or peer dep not installed)

Missing peer dependency 'vite'.

fix

npm install vite@4

TypeError: liveStyleSync is not a function

Importing as default when package only exports named function.

fix

Use named import: import { liveStyleSync } from 'livestylesync-vite-plugin'

Error: Could not connect to WebSocket at ws://localhost:3100/

Port mismatch between plugin (default 3100) and overlay.

fix

Ensure overlay mount({ port: 3100 }) matches plugin default or set plugin port explicitly.

ReferenceError: require is not defined in ES module scope

Using require() with ESM-only package.

fix

Use import statement or switch to ESM project.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

viterequiredpeer dependency, Vite plugin interface requires Vite >=4

Agent activity

4 hits · last 30 days

node

Resources

packagelivestylesync-vite-plugin ↗