add treesitter highlights

after/queries/css/highlights.scm

@@ -0,0 +1,18 @@
+(id_selector (id_name) @CssIdentifier)
+(id_selector (id_name)) @CssIdSelector
+(tag_name) @HtmlTagName
+
+(class_selector (class_name) @CssClassName)
+(selectors (pseudo_class_selector (class_name) @cssPseudoClass))
+(nesting_selector) @cssNestingSelector
+
+; need to find out how to make this more specific?
+(universal_selector) @CssUniversalSelector
+
+((property_name) (_)) @CssProp
+
+(unit) @CssUnit
+
+(declaration (property_name) (_) @CssPropertyValue)
+
+(media_statement (feature_query (feature_name) @cssMediaFeatureName (_ (unit) @cssMediaQueryValueUnit) @cssMediaQueryValue) @cssMediaQuery)

after/queries/html/highlights.scm

@@ -0,0 +1,17 @@
+(start_tag
+	(attribute
+		(attribute_name) @ClassNameAttribute (#eq? @ClassNameAttribute "class")
+		(quoted_attribute_value
+			(attribute_value) @CssClassName )))
+
+(start_tag
+	(attribute
+		(attribute_name) @IdAttribute (#eq? @IdAttribute "id")
+		(quoted_attribute_value
+			(attribute_value) @CssIdentifier )))
+
+(start_tag
+	(attribute
+		(attribute_name) @DataAttribute (#match? @DataAttribute "^data-")
+		(quoted_attribute_value
+			(attribute_value) @DataAttributeValue )))