Skip to content

Add emmet support #23

@remcohaszing

Description

@remcohaszing

https://play.tailwindcss.com supports Tailwindcss completions for emmet abbreviations.
For example you can type in an html area: .bg-red-100 and get autocompletion and expand the emmet.

The implementation of the main thread part can be seen on https://github.com/tailwindlabs/play.tailwindcss.com/blob/5ae52d6c44ed522260f3a22c56aef2df098f0bb8/src/monaco/emmet.js.

The worker code can be seen here: https://github.com/tailwindlabs/play.tailwindcss.com/blob/1921b3cb22d1e717d534e788761023ddcb6ffb43/src/workers/postcss.worker.js#L74-L82

monaco-emmet-es doesn’t provide way to extend it, so as can be seen in the links above, the Tailwindcss playground uses a hacky solution.

Another downside of depending on monaco-emmet-es directly is that it increases bundle size. Preferably we provide a way for the user to make them work together without enforcing our users to include it.

Perhaps @troy351 is willing to co-operate by providing the hooks we need in monaco-emmet-es (or accepting a PR for it). 😄

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions