feat(editor): add .css language support (#936)

package-lock.json

@@ -10,6 +10,7 @@
             "dependencies": {
                 "@codemirror/basic-setup": "^0.19.0",
                 "@codemirror/highlight": "^0.19.6",
+                "@codemirror/lang-css": "^0.19.3",
                 "@codemirror/lang-javascript": "^0.19.3",
                 "@codemirror/lang-json": "^0.19.1",
                 "@codemirror/language": "^0.19.7",
@@ -2068,6 +2069,18 @@
                 "@codemirror/view": "^0.19.0"
             }
         },
+        "node_modules/@codemirror/lang-css": {
+            "version": "0.19.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-0.19.3.tgz",
+            "integrity": "sha512-tyCUJR42/UlfOPLb94/p7dN+IPsYSIzHbAHP2KQHANj0I+Orqp+IyIOS++M8TuCX4zkWh9dvi8s92yy/Tn8Ifg==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^0.19.0",
+                "@codemirror/highlight": "^0.19.6",
+                "@codemirror/language": "^0.19.0",
+                "@codemirror/state": "^0.19.0",
+                "@lezer/css": "^0.15.2"
+            }
+        },
         "node_modules/@codemirror/lang-javascript": {
             "version": "0.19.7",
             "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-0.19.7.tgz",
@@ -2521,6 +2534,14 @@
             "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.11.tgz",
             "integrity": "sha512-vv0nSdIaVCRcJ8rPuDdsrNVfBOYe/4Szr/LhF929XyDmBndLDuWiCCHooGlGlJfzELyO608AyDhVsuX/ZG36NA=="
         },
+        "node_modules/@lezer/css": {
+            "version": "0.15.2",
+            "resolved": "https://registry.npmjs.org/@lezer/css/-/css-0.15.2.tgz",
+            "integrity": "sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==",
+            "dependencies": {
+                "@lezer/lr": "^0.15.0"
+            }
+        },
         "node_modules/@lezer/javascript": {
             "version": "0.15.3",
             "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-0.15.3.tgz",
@@ -10922,6 +10943,18 @@
                 "@codemirror/view": "^0.19.0"
             }
         },
+        "@codemirror/lang-css": {
+            "version": "0.19.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-0.19.3.tgz",
+            "integrity": "sha512-tyCUJR42/UlfOPLb94/p7dN+IPsYSIzHbAHP2KQHANj0I+Orqp+IyIOS++M8TuCX4zkWh9dvi8s92yy/Tn8Ifg==",
+            "requires": {
+                "@codemirror/autocomplete": "^0.19.0",
+                "@codemirror/highlight": "^0.19.6",
+                "@codemirror/language": "^0.19.0",
+                "@codemirror/state": "^0.19.0",
+                "@lezer/css": "^0.15.2"
+            }
+        },
         "@codemirror/lang-javascript": {
             "version": "0.19.7",
             "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-0.19.7.tgz",
@@ -11319,6 +11352,14 @@
             "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.11.tgz",
             "integrity": "sha512-vv0nSdIaVCRcJ8rPuDdsrNVfBOYe/4Szr/LhF929XyDmBndLDuWiCCHooGlGlJfzELyO608AyDhVsuX/ZG36NA=="
         },
+        "@lezer/css": {
+            "version": "0.15.2",
+            "resolved": "https://registry.npmjs.org/@lezer/css/-/css-0.15.2.tgz",
+            "integrity": "sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==",
+            "requires": {
+                "@lezer/lr": "^0.15.0"
+            }
+        },
         "@lezer/javascript": {
             "version": "0.15.3",
             "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-0.15.3.tgz",

package.json

@@ -24,6 +24,7 @@
     "dependencies": {
         "@codemirror/basic-setup": "^0.19.0",
         "@codemirror/highlight": "^0.19.6",
+        "@codemirror/lang-css": "^0.19.3",
         "@codemirror/lang-javascript": "^0.19.3",
         "@codemirror/lang-json": "^0.19.1",
         "@codemirror/language": "^0.19.7",

src/components/inputs/Codemirror.vue

@@ -22,6 +22,7 @@ import { gcode } from '@/plugins/StreamParserGcode'
 import { EditorView, keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
 
 @Component
 export default class Codemirror extends Mixins(BaseMixin) {
@@ -98,6 +99,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
         if (['cfg', 'conf'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(klipper_config))
         else if (['gcode'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(gcode))
         else if (['json'].includes(this.fileExtension)) extensions.push(json())
+        else if (['css'].includes(this.fileExtension)) extensions.push(css())
 
         return extensions
     }