Monaco-css-in-js NPM

Monaco CSS-in-JS

Fork of the CSS, LESS and SCSS plugin for the Monaco Editor, providing support for CSS-in-JS (styled components, emotion). It is intended to be used with monaco-react.

Overview

monaco-css by default can't handle css-in-js syntax, where css properties are written at the root level, without a selector. This modification adds a small proxy between the input document and the scss language service, so that input gets transformed like this:

Input (valid css-in-js, but invalid css/scss)

background: red;

div {
 color: blue;
}

Gets passed down to the language service as this (valid scss)

.this-element {
 background: red;
 
 div {
  color: blue;
 }
}

The response is modified so that the positioning is as if the extra syntax doesn't exist.

Installation

npm package

npm install monaco-css-in-js

yarn add monaco-css-in-js

Sample usage (with monaco-react)

import MonacoEditor, { EditorProps, Monaco } from '@monaco-editor/react'
import {
  CSSInJSWorker,
  IEditorInjection,
  setupCssInJsLang,
  setupValidation,
} from 'monaco-css-in-js'
import React, { useRef } from 'react'

export type EmotionCssEditorProps = Omit<
  EditorProps,
  'language' | 'onMount' | 'beforeMount'
>

const getEditorInjection = (monaco: Monaco) => {
  const editorInjection: IEditorInjection = {
    Uri: monaco.Uri,
    createWebWorker: monaco.editor.createWebWorker,
    getModels: monaco.editor.getModels,
    getModel: monaco.editor.getModel,
    CompletionItemInsertTextRule: monaco.languages.CompletionItemInsertTextRule,
    itemKinds: monaco.languages.CompletionItemKind,
    onDidChangeModelLanguage: monaco.editor.onDidChangeModelLanguage,
    onDidCreateModel: monaco.editor.onDidCreateModel,
    onWillDisposeModel: monaco.editor.onWillDisposeModel,
    setModelMarkers: monaco.editor.setModelMarkers,
    severities: monaco.MarkerSeverity,
    Range: monaco.Range,
    Emitter: monaco.Emitter,
  }

  return editorInjection
}

export const EmotionCssEditor = ({
  theme,
  ...props
}: EmotionCssEditorProps) => {
  const workerRef = useRef<any>()

  return (
    <MonacoEditor
      language={'cssInJs'}
      theme={theme || 'vs-dark'}
      {...props}
      onMount={(editor, monaco) => {
        const editorInjection = getEditorInjection(monaco)
        setupValidation(workerRef.current, editor, editorInjection)
      }}
      beforeMount={(monaco) => {
        // We are injecting the editor instance, because of a css conflict that arises if we import the whole monaco.editor module
        const editorInjection = getEditorInjection(monaco)

        workerRef.current = new CSSInJSWorker()

        setupCssInJsLang(workerRef.current, monaco.languages, editorInjection)
      }}
    />
  )
}

Original repo

Internally the CSS plugin uses the vscode-css-languageservice node module, providing the implementation of the functionally listed above. The same module is also used in Visual Studio Code to power the CSS, LESS and SCSS editing experience.