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' },