CSS Editor
An optimized editor, just for CSS.
Used by CSS Canvas.
Try it out with the demo.
Installation
Install CSS Editor with:
npm install @css-canvas/editor
Usage
Import the CSSEditor
class into your project:
import { CSSEditor } from '@css-canvas/editor';
Attach the editor to an element on your page:
const editor = new CSSEditor('#editor');
// Replace '#editor' with the selector for your element.
Set the stylesheet:
const yourStylesheet = [
{
selector: 'div',
properties: [
{
key: 'border',
values: [ '10px', 'solid', 'red' ]
}
]
}
];
editor.stylesheet = yourStylesheet;
Listen to changes in the stylesheet with a callback:
function yourCallback (stylesheet) {
// Do something awesome!
}
const callbackID = editor.onUpdate(yourCallback);
// You can add as many callbacks as you like. They will all be called whenever the stylesheet is updated.
Stop listening to changes in the stylesheet:
editor.offUpdate(callbackID);
The CSSEditor
class also has two static methods, parse
and stringify
:
// Convert a CSS string into a stylesheet object.
const stylesheet = CSSEditor.parse('div { border: 10px solid red; }');
// Convert a stylesheet object into a CSS string.
const stylesheet = [
{
selector: 'div',
properties: [
{
key: 'border',
values: [ '10px', 'solid', 'red' ]
}
]
}
];
const string = CSSEditor.stringify(stylesheet);
Development
Install Dependencies
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile, and Minify for Production
npm run build
Type-Check, Compile, and Minify for NPM
npm run build-package