most of the css highlights

client/components/codeEditor/codeEditor.jsx

@@ -17,7 +17,7 @@ import { EditorState, Compartment } from '@codemirror/state';
 import { foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language';
 import { defaultKeymap, history, historyField, undo, redo } from '@codemirror/commands';
 import { languages } from '@codemirror/language-data';
-import { css } from '@codemirror/lang-css';
+import { css, cssLanguage } from '@codemirror/lang-css';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { autocompleteEmoji } from './autocompleteEmoji.js';
 import { searchKeymap, search } from '@codemirror/search';
@@ -31,11 +31,17 @@ const highlightCompartment = new Compartment();
 
 import { customKeymap } from './customKeyMap.js';
 import { homebreweryFold, hbFolding } from './customFolding.js';
-import { customHighlightStyle, tokenizeCustomMarkdown } from './customHighlight.js';
+import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js';
 import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js'; //only makes highlight for
 
 const createHighlightPlugin = (renderer, tab)=>{
-	const tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
+	let tokenize;
+
+if (tab === "brewStyles") {
+  tokenize = tokenizeCustomCSS;
+} else {
+  tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
+}
 	/* eslint-disable no-restricted-syntax */
 	class countWidget extends WidgetType {
 		constructor(count) {
@@ -153,7 +159,7 @@ const CodeEditor = forwardRef(
 				highlightExtension,
 			];
 
-			const languageExtension = language === 'css' ? css() : markdown({ base: markdownLanguage, codeLanguages: languages });
+			const languageExtension = language === 'css' ? [css(), cssLanguage] : markdown({ base: markdownLanguage, codeLanguages: languages });
 
 			const themeExtension = Array.isArray(themes[editorTheme]) ? themes[editorTheme] : [];
 
@@ -178,7 +184,7 @@ const CodeEditor = forwardRef(
 				highlightActiveLineGutter(),
 				highlightCompartment.of(combinedHighlight),
 				themeCompartment.of(themeExtension),
-				autocompleteEmoji,
+				...(tab !== 'brewStyles' ? [autocompleteEmoji] : []),
 				search(),
 			];
 		};

client/components/codeEditor/customHighlight.js

@@ -16,13 +16,17 @@ const customTags = {
 	definitionTerm  : 'definitionTerm', // .cm-definitionTerm
 	definitionDesc  : 'definitionDesc', // .cm-definitionDesc
 	definitionColon : 'definitionColon', // .cm-definitionColon
+
+	//CSS 
+
+	variable: 'variable',
+	colorMark: 'colorMark',
 };
 
 export function tokenizeCustomMarkdown(text) {
 	const tokens = [];
 	const lines = text.split('\n');
 
-	console.log(tags);
 	lines.forEach((lineText, lineNumber)=>{
 		// --- Page / snippet lines ---
 		if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine });
@@ -228,6 +232,29 @@ export function tokenizeCustomMarkdown(text) {
 	return tokens;
 }
 
+export function tokenizeCustomCSS(text) {
+	const tokens = [];
+	const lines = text.split('\n');
+
+	lines.forEach((lineText, lineNumber)=>{
+		
+		if(/--[a-zA-Z0-9-_]+/gm.test(lineText)) {
+			const varRegex =/--[a-zA-Z0-9-_]+/gm;
+			let match;
+			while ((match = varRegex.exec(lineText)) !== null) {
+				tokens.push({
+					line : lineNumber,
+					from : match.index +1,
+					to   : match.index + match.length[1] +1,
+					type : customTags.varProperty,
+				});
+			}
+		}
+	});
+
+	return tokens;
+}
+
 export const customHighlightStyle = HighlightStyle.define([
 	{ tag: tags.heading,  class: 'cm-header' },
 	{ tag: tags.heading1,  class: 'cm-header cm-header-1' },
@@ -236,13 +263,27 @@ export const customHighlightStyle = HighlightStyle.define([
 	{ tag: tags.heading4,  class: 'cm-header cm-header-4' },
 	{ tag: tags.heading5,  class: 'cm-header cm-header-5' },
 	{ tag: tags.heading6,  class: 'cm-header cm-header-6' },
+
 	{ tag: tags.link,  class: 'cm-link' },
 	{ tag: tags.string,  class: 'cm-string' },
 	{ tag: tags.url,  class: 'cm-string cm-url' },
 	{ tag: tags.list,  class: 'cm-list' },
 	{ tag: tags.strong,  class: 'cm-strong' },
 	{ tag: tags.emphasis,  class: 'cm-em' },
-	
+
+	{ tag: tags.tagName,  class: 'cm-tag' },
+	{ tag: tags.className,  class: 'cm-class' },
+	{ tag: tags.propertyName,  class: 'cm-property' },
+	{ tag: tags.attributeValue,  class: 'cm-value' },
+	{ tag: tags.keyword,  class: 'cm-keyword' },
+	{ tag: tags.atom,  class: 'cm-atom' },
+	{ tag: tags.integer,  class: 'cm-integer' },
+	{ tag: tags.unit,  class: 'cm-unit' },
+	{ tag: tags.color,  class: 'cm-color' },
+	{ tag: tags.paren,  class: 'cm-paren' },
+	{ tag: tags.variableName,  class: 'cm-variable' },
+	{ tag: tags.invalid,  class: 'cm-error' },
+	{ tag: tags.comment,  class: 'cm-comment' },
 
 	{ tag: customTags.pageLine, color: '#f0a' },
 	{ tag: customTags.snippetLine, class: 'cm-snippetLine', color: '#0af' },

themes/codeMirror/customThemes/default.js

@@ -46,8 +46,6 @@ export const defaultCM5Theme = EditorView.theme({
   },
   ".cm-foldmarker": {
     color: "blue",
-    textShadow:
-      "#b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px",
     fontFamily: "arial",
     lineHeight: "0.3",
     cursor: "pointer",
@@ -59,16 +57,16 @@ export const defaultCM5Theme = EditorView.theme({
   ".cm-em": { fontStyle: "italic" },
   ".cm-quote": { color: "#090" },
   ".cm-keyword": { color: "#708" },
-  ".cm-atom": { color: "#219" },
+  ".cm-atom, cm-value, cm-color": { color: "#219" },
   ".cm-number": { color: "#164" },
   ".cm-def": { color: "#00f" },
   ".cm-list": { color: "#05a" },
-  ".cm-variable-3, .cm-type": { color: "#085" },
+  ".cm-variable, .cm-type": { color: "#085" },
   ".cm-comment": { color: "#a50" },
   ".cm-link": { color: "#00c", textDecoration: "underline" },
   ".cm-string": { color: "#a11", textDecoration: "none"  },
   ".cm-string-2": { color: "#f50", textDecoration: "none"  },
-  ".cm-meta, .cm-qualifier": { color: "#555" },
+  ".cm-meta, .cm-qualifier, .cm-class": { color: "#555" },
   ".cm-builtin": { color: "#30a" },
   ".cm-bracket": { color: "#997" },
   ".cm-tag": { color: "#170" },