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

Latest version **3.5.8** (published 2021-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install monaco-css-in-js
pnpm add monaco-css-in-js
yarn add monaco-css-in-js
bun add monaco-css-in-js
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.5.8 |
| Published | 2021-07-05 |
| First published | 2021-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Microsoft Corporation |
| Maintainers | antonmmichaylov |

## Links

- npm: https://www.npmjs.com/package/monaco-css-in-js
- Repository: https://github.com/antonmihaylov/monaco-css
- Homepage: https://github.com/antonmihaylov/monaco-css#readme
- Issues: https://github.com/antonmihaylov/monaco-css/issues
- npm.io page: https://npm.io/package/monaco-css-in-js

## Recent versions

- 3.5.8 (latest) — 2021-07-05
- 3.5.7 — 2021-07-05
- 3.5.6 — 2021-07-02
- 3.5.5 — 2021-07-02
- 3.5.4 — 2021-07-02
- 3.5.3 — 2021-07-02
- 3.5.2 — 2021-07-02
- 3.5.1 — 2021-07-02
- 3.5.0 — 2021-07-02

## README

# 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](https://www.npmjs.com/package/@monaco-editor/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)*
```scss
background: red;

div {
 color: blue;
}
```

*Gets passed down to the language service as this (valid scss)*
```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](https://www.npmjs.com/package/monaco-css-in-js)

```
npm install monaco-css-in-js
```

or 

```
yarn add monaco-css-in-js
```

## Sample usage (with monaco-react)
```tsx
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](https://github.com/Microsoft/monaco-editor)


Internally the CSS plugin uses the [vscode-css-languageservice](https://github.com/Microsoft/vscode-css-languageservice)
node module, providing the implementation of the functionally listed above. The same module is also used
in [Visual Studio Code](https://github.com/Microsoft/vscode) to power the CSS, LESS and SCSS editing experience.



## Development

- `npm install .`
- compile with `npm run compile`
- watch with `npm run watch`
- `npm run prepublishOnly`
- open `$/monaco-css/test/index.html` in your favorite browser.

## License

[MIT](https://github.com/Microsoft/monaco-css/blob/master/LICENSE.md)

---
_Source: https://npm.io/package/monaco-css-in-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._