Repository: alecthomas/chroma (go)

Issue:
New SCSS module system not highlighting correctly
SCSS language has introduced many new features recently. The new module system `@use` doesn't highlight `with` configs correctly.

For example, the following example renders correctly using prism.js:

![image](https://user-images.githubusercontent.com/9663168/108617697-840c4100-73e6-11eb-8a9e-ab71ab602fcd.png)

However, in chroma the key/value pairs are being recognized as `chroma .nt` and are not able to be colored separately: 

![image](https://user-images.githubusercontent.com/9663168/108617730-a9994a80-73e6-11eb-8f72-74e59186bfd8.png)

Also the `$` symbol in front of the word config is being recognized by chroma as an error `.chroma .err`

Pull request description:
SCSS fixes and modifications, fixes #451

Patch:
diff --git a/lexers/s/scss.go b/lexers/s/scss.go
index 5a4c899..e489ade 100644
--- a/lexers/s/scss.go
+++ b/lexers/s/scss.go
@@ -20,12 +20,28 @@ var Scss = internal.Register(MustNewLazyLexer(
 ))
 
 func scssRules() Rules {
+	cssProperties := []string{`src`, `align-content`, `align-items`, `align-self`, `all`, `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `appearance`, `aspect-ratio`, `backface-visibility`, `background`, `background-attachment`, `background-blend-mode`, `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `block-size`, `border`, `border-block`, `border-block-color`, `border-block-end`, `border-block-end-color`, `border-block-end-style`, `border-block-end-width`, `border-block-start`, `border-block-start-color`, `border-block-start-style`, `border-block-start-width`, `border-block-style`, `border-block-width`, `border-bottom`, `border-bottom-color`, `border-bottom-left-radius`, `border-bottom-right-radius`, `border-bottom-style`, `border-bottom-width`, `border-collapse`, `border-color`, `border-end-end-radius`, `border-end-start-radius`, `border-image`, `border-image-outset`, `border-image-repeat`, `border-image-slice`, `border-image-source`, `border-image-width`, `border-inline`, `border-inline-color`, `border-inline-end`, `border-inline-end-color`, `border-inline-end-style`, `border-inline-end-width`, `border-inline-start`, `border-inline-start-color`, `border-inline-start-style`, `border-inline-start-width`, `border-inline-style`, `border-inline-width`, `border-left`, `border-left-color`, `border-left-style`, `border-left-width`, `border-radius`, `border-right`, `border-right-color`, `border-right-style`, `border-right-width`, `border-spacing`, `border-start-end-radius`, `border-start-start-radius`, `border-style`, `border-top`, `border-top-color`, `border-top-left-radius`, `border-top-right-radius`, `border-top-style`, `border-top-width`, `border-width`, `bottom`, `box-decoration-break`, `box-shadow`, `box-sizing`, `break-after`, `break-before`, `break-inside`, `caption-side`, `caret-color`, `clear`, `clip`, `clip-path`, `color`, `color-adjust`, `column-count`, `column-fill`, `column-gap`, `column-rule`, `column-rule-color`, `column-rule-style`, `column-rule-width`, `column-span`, `column-width`, `columns`, `content`, `content-visibility`, `counter-increment`, `counter-reset`, `counter-set`, `cursor`, `direction`, `display`, `empty-cells`, `filter`, `flex`, `flex-basis`, `flex-direction`, `flex-flow`, `flex-grow`, `flex-shrink`, `flex-wrap`, `float`, `font`, `font-family`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-optical-sizing`, `font-size`, `font-size-adjust`, `font-stretch`, `font-style`, `font-synthesis`, `font-variant`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-emoji`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `footnote-display`, `footnote-policy`, `forced-color-adjust`, `gap`, `grid`, `grid-area`, `grid-auto-columns`, `grid-auto-flow`, `grid-auto-rows`, `grid-column`, `grid-column-end`, `grid-column-start`, `grid-row`, `grid-row-end`, `grid-row-start`, `grid-template`, `grid-template-areas`, `grid-template-columns`, `grid-template-rows`, `hanging-punctuation`, `height`, `hyphens`, `image-orientation`, `image-rendering`, `image-resolution`, `initial-letter`, `initial-letter-align`, `initial-letter-wrap`, `inline-size`, `inline-sizing`, `inset`, `inset-block`, `inset-block-end`, `inset-block-start`, `inset-inline`, `inset-inline-end`, `inset-inline-start`, `isolation`, `justify-content`, `justify-items`, `justify-self`, `left`, `letter-spacing`, `lighting-color`, `line-break`, `line-clamp`, `line-grid`, `line-height`, `line-padding`, `line-snap`, `list-style`, `list-style-image`, `list-style-position`, `list-style-type`, `margin`, `margin-block`, `margin-block-end`, `margin-block-start`, `margin-bottom`, `margin-break`, `margin-inline`, `margin-inline-end`, `margin-inline-start`, `margin-left`, `margin-right`, `margin-top`, `margin-trim`, `mask`, `mask-border`, `mask-border-mode`, `mask-border-repeat`, `mask-border-slice`, `mask-border-source`, `mask-border-width`, `mask-clip`, `mask-composite`, `mask-image`, `mask-mode`, `mask-origin`, `mask-position`, `mask-repeat`, `mask-size`, `mask-type`, `max-block-size`, `max-height`, `max-lines`, `max-width`, `min-height`, `min-width`, `mix-blend-mode`, `nav-down`, `nav-left`, `nav-right`, `nav-up`, `object-fit`, `object-position`, `offset`, `offset-anchor`, `offset-distance`, `offset-path`, `offset-position`, `offset-rotate`, `opacity`, `order`, `orphans`, `outline`, `outline-color`, `outline-offset`, `outline-style`, `outline-width`, `overflow`, `overflow-anchor`, `overflow-block`, `overflow-clip-margin`, `overflow-inline`, `overflow-wrap`, `overflow-x`, `overflow-y`, `overscroll-behavior`, `overscroll-behavior-block`, `overscroll-behavior-inline`, `overscroll-behavior-x`, `overscroll-behavior-y`, `padding`, `padding-block`, `padding-block-end`, `padding-block-start`, `padding-bottom`, `padding-inline`, `padding-inline-end`, `padding-inline-start`, `padding-left`, `padding-right`, `padding-top`, `page`, `page-break-after`, `page-break-before`, `page-break-inside`, `page-orientation`, `perspective`, `perspective-origin`, `place-content`, `place-items`, `place-self`, `pointer-events`, `position`, `quotes`, `resize`, `right`, `rotate`, `row-gap`, `scale`, `scroll-behavior`, `scroll-margin`, `scroll-margin-block`, `scroll-margin-block-end`, `scroll-margin-block-start`, `scroll-margin-bottom`, `scroll-margin-inline`, `scroll-margin-inline-end`, `scroll-margin-inline-start`, `scroll-margin-left`, `scroll-margin-right`, `scroll-margin-top`, `scroll-padding`, `scroll-padding-block`, `scroll-padding-block-end`, `scroll-padding-block-start`, `scroll-padding-bottom`, `scroll-padding-inline`, `scroll-padding-inline-end`, `scroll-padding-inline-start`, `scroll-padding-left`, `scroll-padding-right`, `scroll-padding-top`, `scroll-snap-align`, `scroll-snap-stop`, `scroll-snap-type`, `scrollbar-color`, `scrollbar-gutter`, `scrollbar-width`, `shape-image-threshold`, `shape-inside`, `shape-margin`, `shape-outside`, `shape-padding`, `spatial-navigation-action`, `spatial-navigation-contain`, `spatial-navigation-function`, `string-set`, `tab-size`, `table-layout`, `text-align`, `text-align-all`, `text-align-last`, `text-combine-upright`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-skip`, `text-decoration-style`, `text-decoration-thickness`, `text-emphasis`, `text-emphasis-position`, `text-emphasis-style`, `text-group-align`, `text-indent`, `text-justify`, `text-orientation`, `text-overflow`, `text-rendering`, `text-shadow`, `text-size-adjust`, `text-space-trim`, `text-spacing`, `text-transform`, `text-underline-offset`, `text-underline-position`, `text-wrap`, `top`, `touch-action`, `transform`, `transform-box`, `transform-origin`, `transform-style`, `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `translate`, `unicode-bidi`, `user-select`, `vertical-align`, `visibility`, `white-space`, `widows`, `width`, `will-change`, `word-break`, `word-spacing`, `word-wrap`, `wrap-after`, `wrap-before`, `wrap-flow`, `wrap-inside`, `wrap-through`, `writing-mode`, `z-index`}
+
+	cssPropertyValues := []string{
+		`stretch`, `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `normal`, `baseline`, `first`, `last`, `space-evenly`, `start`, `end`, `safe`, `unsafe`, `self-start`, `self-end`, `auto`, `initial`, `inherit`, `unset`, `revert`, `reverse`, `alternate-reverse`, `alternate`, `none`, `forwards`, `both`, `backwards`, `infinite`, `running`, `paused`, `ease`, `linear`, `step-start`, `step-end`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier`, `textfield`, `menulist-button`, `searchfield`, `textarea`, `push-button`, `slider-horizontal`, `checkbox`, `radio`, `square-button`, `menulist`, `listbox`, `meter`, `progress-bar`, `button`, `visible`, `hidden`, `scroll`, `fixed`, `local`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color`, `luminosity`, `border-box`, `padding-box`, `content-box`, `text`, `transparent`, `currentColor`, `url`, `element`, `image`, `image-set`, `cross-fade`, `top`, `bottom`, `left`, `right`, `repeat`, `no-repeat`, `space`, `round`, `repeat-y`, `repeat-x`, `cover`, `contain`, `max-content`, `min-content`, `available`, `fit-content`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`, `medium`, `thin`, `thick`, `separate`, `collapse`, `slice`, `clone`, `avoid`, `always`, `all`, `avoid-page`, `page`, `recto`, `verso`, `avoid-column`, `column`, `avoid-region`, `region`, `inline-start`, `inline-end`, `rect`, `circle`, `ellipse`, `polygon`, `path`, `margin-box`, `fill-box`, `stroke-box`, `view-box`, `economy`, `exact`, `balance`, `balance-all`, `open-quote`, `close-quote`, `no-open-quote`, `no-close-quote`, `contents`, `attr`, `target-counter`, `target-text`, `leader`, `default`, `context-menu`, `help`, `pointer`, `progress`, `wait`, `cell`, `crosshair`, `vertical-text`, `alias`, `copy`, `move`, `no-drop`, `not-allowed`, `grab`, `grabbing`, `all-scroll`, `col-resize`, `row-resize`, `n-resize`, `s-resize`, `w-resize`, `ne-resize`, `nw-resize`, `se-resize`, `sw-resize`, `ew-resize`, `ns-resize`, `nesw-resize`, `nwse-resize`, `zoom-in`, `zoom-out`, `ltr`, `rtl`, `inline`, `block`, `inline-block`, `inline-table`, `run-in`, `flow`, `flow-root`, `table`, `flex`, `grid`, `ruby`, `list-item`, `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-cell`, `table-column-group`, `table-column`, `table-caption`, `ruby-base`, `ruby-text`, `ruby-base-container`, `ruby-text-container`, `inline-flex`, `inline-grid`, `show`, `hide`, `url;`, `blur`, `brightness`, `contrast`, `drop-shadow`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, `sepia`, `content`, `row`, `row-reverse`, `column-reverse`, `nowrap`, `wrap`, `wrap-reverse`, `block-start`, `block-end`, `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`, `serif`, `sans-serif`, `cursive`, `fantasy`, `monospace`, `system-ui`, `emoji`, `math`, `fangsong`, `ui-serif`, `ui-sans-serif`, `ui-monospace`, `ui-rounded`, `xx-small`, `x-small`, `small`, `large`, `x-large`, `xx-large`, `xxx-large`, `smaller`, `larger`, `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`, `italic`, `weight`, `style`, `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`, `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `unicode`, `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, `no-contextual`, `ordinal`, `slashed-zero`, `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `sub`, `super`, `bold`, `lighter`, `bolder`, `line`, `auto‑flow`, `minmax`, `auto;`, `dense`, `subgrid`, `masonry`, `force-end`, `allow-end`, `manual`, `from-image`, `smooth`, `high-quality`, `crisp-edges`, `pixelated`, `snap`, `alphabetic`, `ideographic`, `hebrew`, `hanging`, `isolate`, `legacy`, `white`, `strict`, `loose`, `anywhere`, `match-parent`, `create`, `outside`, `inside`, `disc`, `square`, `decimal`, `symbols`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, `disclosure-closed`, `keep`, `discard`, `in-flow`, `alpha`, `luminance`, `no-clip`, `add`, `subtract`, `intersect`, `exclude`, `match-source`, `current`, `fill`, `scale-down`, `ray`, `clip`, `break-word`, `upright`, `rotate-left`, `rotate-right`, `static`, `relative`, `absolute`, `sticky`, `horizontal`, `vertical`, `x`, `y`, `z`, `mandatory`, `proximity`, `dark`, `light`, `stable`, `force`, `outside-shape`, `display`, `focus`, `justify`, `justify-all`, `underline`, `overline`, `line-through`, `blink`, `spelling-error`, `grammar-error`, `wavy`, `from-font`, `over`, `under`, `filled`, `open`, `dot`, `double-circle`, `triangle`, `sesame`, `inter-word`, `inter-character`, `mixed`, `sideways`, `ellipsis`, `optimizeSpeed`, `optimizeLegibility`, `geometricPrecision`, `trim-inner`, `discard-before`, `discard-after`, `trim-start`, `space-start`, `space-first`, `trim-end`, `space-end`, `trim-adjacent`, `space-adjacent`, `no-compress`, `ideograph-alpha`, `ideograph-numeric`, `punctuation`, `capitalize`, `uppercase`, `lowercase`, `full-size-kana`, `pretty`, `pan-x`, `pan-left`, `pan-right`, `pan-y`, `pan-up`, `pan-down`, `manipulation`, `matrix`, `matrix3d`, `translate`, `translateX`, `translateY`, `translate3d`, `translateZ`, `scale`, `scaleX`, `scaleY`, `scaleZ`, `rotate`, `rotate3d`, `rotateX`, `rotateY`, `rotateZ`, `perspective`, `skew`, `skewX`, `skewY`, `flat`, `preserve-3d`, `border-bottom`, `embed`, `bidi-override`, `isolate-override`, `plaintext`, `middle`, `text-top`, `text-bottom`, `pre`, `pre-wrap`, `pre-line`, `scroll-position`, `transform`, `width`, `keep-all`, `break-all`, `avoid-line`, `avoid-flex`, `minimum`, `maximum`, `clear`, `horizontal-tb`, `vertical-rl`, `vertical-lr`, `sideways-rl`, `sideways-lr`,
+	}
+
+	cssColorNames := []string{`AliceBlue`, `AntiqueWhite`, `Aqua`, `Aquamarine`, `Azure`, `Beige`, `Bisque`, `Black`, `BlanchedAlmond`, `Blue`, `BlueViolet`, `Brown`, `BurlyWood`, `CadetBlue`, `Chartreuse`, `Chocolate`, `Coral`, `CornflowerBlue`, `Cornsilk`, `Crimson`, `Cyan`, `DarkBlue`, `DarkCyan`, `DarkGoldenRod`, `DarkGray`, `DarkGrey`, `DarkGreen`, `DarkKhaki`, `DarkMagenta`, `DarkOliveGreen`, `DarkOrange`, `DarkOrchid`, `DarkRed`, `DarkSalmon`, `DarkSeaGreen`, `DarkSlateBlue`, `DarkSlateGray`, `DarkSlateGrey`, `DarkTurquoise`, `DarkViolet`, `DeepPink`, `DeepSkyBlue`, `DimGray`, `DimGrey`, `DodgerBlue`, `FireBrick`, `FloralWhite`, `ForestGreen`, `Fuchsia`, `Gainsboro`, `GhostWhite`, `Gold`, `GoldenRod`, `Gray`, `Grey`, `Green`, `GreenYellow`, `HoneyDew`, `HotPink`, `IndianRed`, `Indigo`, `Ivory`, `Khaki`, `Lavender`, `LavenderBlush`, `LawnGreen`, `LemonChiffon`, `LightBlue`, `LightCoral`, `LightCyan`, `LightGoldenRodYellow`, `LightGray`, `LightGrey`, `LightGreen`, `LightPink`, `LightSalmon`, `LightSeaGreen`, `LightSkyBlue`, `LightSlateGray`, `LightSlateGrey`, `LightSteelBlue`, `LightYellow`, `Lime`, `LimeGreen`, `Linen`, `Magenta`, `Maroon`, `MediumAquaMarine`, `MediumBlue`, `MediumOrchid`, `MediumPurple`, `MediumSeaGreen`, `MediumSlateBlue`, `MediumSpringGreen`, `MediumTurquoise`, `MediumVioletRed`, `MidnightBlue`, `MintCream`, `MistyRose`, `Moccasin`, `NavajoWhite`, `Navy`, `OldLace`, `Olive`, `OliveDrab`, `Orange`, `OrangeRed`, `Orchid`, `PaleGoldenRod`, `PaleGreen`, `PaleTurquoise`, `PaleVioletRed`, `PapayaWhip`, `PeachPuff`, `Peru`, `Pink`, `Plum`, `PowderBlue`, `Purple`, `RebeccaPurple`, `Red`, `RosyBrown`, `RoyalBlue`, `SaddleBrown`, `Salmon`, `SandyBrown`, `SeaGreen`, `SeaShell`, `Sienna`, `Silver`, `SkyBlue`, `SlateBlue`, `SlateGray`, `SlateGrey`, `Snow`, `SpringGreen`, `SteelBlue`, `Tan`, `Teal`, `Thistle`, `Tomato`, `Turquoise`, `Violet`, `Wheat`, `White`, `WhiteSmoke`, `Yellow`, `YellowGreen`}
+
+	const cssPropertyPattern = `(?<!:\s*)[^ \t:="\[;(),.]+(?=[ \t]*:(?:#{|[^{])+?[;,])`
+
 	return Rules{
 		"root": {
+			{`[{}()]`, Punctuation, nil},
 			{`\s+`, Text, nil},
 			{`//.*?\n`, CommentSingle, nil},
 			{`/\*.*?\*/`, CommentMultiline, nil},
 			{`@import`, Keyword, Push("value")},
+			{
+				`(@(?:use|forward))(\s+)([^\s;]+)(?:(\s+)(as)(\s+)(\w+|\*))?(?:(\s+)(with))?`,
+				ByGroups(Keyword, Text, UsingSelf("selector"), Text, Keyword, Text, NameNamespace, Text, Keyword),
+				Push("value"),
+			},
 			{`@for`, Keyword, Push("for")},
 			{`@each`, Keyword, Push("each")},
 			{`@(debug|warn|else if|if|while|return)`, Keyword, Push("value")},
@@ -36,11 +52,11 @@ func scssRules() Rules {
 			{`@[\w-]+`, Keyword, Push("selector")},
 			{`(\$[\w-]*\w)([ \t]*:)`, ByGroups(NameVariable, Operator), Push("value")},
 			{`#\{`, LiteralStringInterpol, Push("interpolation")},
-			{`[^\s:="\[]+(?=[ \t]*(?:#{|[^{])+?;)`, NameAttribute, Push("attr")},
+			{Words(`\b`, `(?=\s*:)`, cssProperties...), NameAttribute, Push("attr")},
+			{cssPropertyPattern, NameAttribute, Push("attr")},
 			Default(Push("selector")),
 		},
 		"attr": {
-			{`[^\s:="\[]+`, NameAttribute, nil},
 			{`#\{`, LiteralStringInterpol, Push("interpolation")},
 			{`[ \t]*:`, Operator, Push("value")},
 			Default(Pop(1)),
@@ -52,20 +68,21 @@ func scssRules() Rules {
 		},
 		"value": {
 			{`[ \t]+`, Text, nil},
+			{`!(important|default|global)`, Keyword, nil},
 			{`[!$][\w-]+`, NameVariable, nil},
 			{`url\(`, LiteralStringOther, Push("string-url")},
 			{`[a-z_-][\w-]*(?=\()`, NameFunction, nil},
-			{Words(``, `\b`, `align-content`, `align-items`, `align-self`, `alignment-baseline`, `all`, `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `appearance`, `azimuth`, `backface-visibility`, `background`, `background-attachment`, `background-blend-mode`, `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `baseline-shift`, `bookmark-label`, `bookmark-level`, `bookmark-state`, `border`, `border-bottom`, `border-bottom-color`, `border-bottom-left-radius`, `border-bottom-right-radius`, `border-bottom-style`, `border-bottom-width`, `border-boundary`, `border-collapse`, `border-color`, `border-image`, `border-image-outset`, `border-image-repeat`, `border-image-slice`, `border-image-source`, `border-image-width`, `border-left`, `border-left-color`, `border-left-style`, `border-left-width`, `border-radius`, `border-right`, `border-right-color`, `border-right-style`, `border-right-width`, `border-spacing`, `border-style`, `border-top`, `border-top-color`, `border-top-left-radius`, `border-top-right-radius`, `border-top-style`, `border-top-width`, `border-width`, `bottom`, `box-decoration-break`, `box-shadow`, `box-sizing`, `box-snap`, `box-suppress`, `break-after`, `break-before`, `break-inside`, `caption-side`, `caret`, `caret-animation`, `caret-color`, `caret-shape`, `chains`, `clear`, `clip`, `clip-path`, `clip-rule`, `color`, `color-interpolation-filters`, `column-count`, `column-fill`, `column-gap`, `column-rule`, `column-rule-color`, `column-rule-style`, `column-rule-width`, `column-span`, `column-width`, `columns`, `content`, `counter-increment`, `counter-reset`, `counter-set`, `crop`, `cue`, `cue-after`, `cue-before`, `cursor`, `direction`, `display`, `dominant-baseline`, `elevation`, `empty-cells`, `filter`, `flex`, `flex-basis`, `flex-direction`, `flex-flow`, `flex-grow`, `flex-shrink`, `flex-wrap`, `float`, `float-defer`, `float-offset`, `float-reference`, `flood-color`, `flood-opacity`, `flow`, `flow-from`, `flow-into`, `font`, `font-family`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-size`, `font-size-adjust`, `font-stretch`, `font-style`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `footnote-display`, `footnote-policy`, `glyph-orientation-vertical`, `grid`, `grid-area`, `grid-auto-columns`, `grid-auto-flow`, `grid-auto-rows`, `grid-column`, `grid-column-end`, `grid-column-gap`, `grid-column-start`, `grid-gap`, `grid-row`, `grid-row-end`, `grid-row-gap`, `grid-row-start`, `grid-template`, `grid-template-areas`, `grid-template-columns`, `grid-template-rows`, `hanging-punctuation`, `height`, `hyphenate-character`, `hyphenate-limit-chars`, `hyphenate-limit-last`, `hyphenate-limit-lines`, `hyphenate-limit-zone`, `hyphens`, `image-orientation`, `image-resolution`, `initial-letter`, `initial-letter-align`, `initial-letter-wrap`, `isolation`, `justify-content`, `justify-items`, `justify-self`, `left`, `letter-spacing`, `lighting-color`, `line-break`, `line-grid`, `line-height`, `line-snap`, `list-style`, `list-style-image`, `list-style-position`, `list-style-type`, `margin`, `margin-bottom`, `margin-left`, `margin-right`, `margin-top`, `marker-side`, `marquee-direction`, `marquee-loop`, `marquee-speed`, `marquee-style`, `mask`, `mask-border`, `mask-border-mode`, `mask-border-outset`, `mask-border-repeat`, `mask-border-slice`, `mask-border-source`, `mask-border-width`, `mask-clip`, `mask-composite`, `mask-image`, `mask-mode`, `mask-origin`, `mask-position`, `mask-repeat`, `mask-size`, `mask-type`, `max-height`, `max-lines`, `max-width`, `min-height`, `min-width`, `mix-blend-mode`, `motion`, `motion-offset`, `motion-path`, `motion-rotation`, `move-to`, `nav-down`, `nav-left`, `nav-right`, `nav-up`, `object-fit`, `object-position`, `offset-after`, `offset-before`, `offset-end`, `offset-start`, `opacity`, `order`, `orphans`, `outline`, `outline-color`, `outline-offset`, `outline-style`, `outline-width`, `overflow`, `overflow-style`, `overflow-wrap`, `overflow-x`, `overflow-y`, `padding`, `padding-bottom`, `padding-left`, `padding-right`, `padding-top`, `page`, `page-break-after`, `page-break-before`, `page-break-inside`, `page-policy`, `pause`, `pause-after`, `pause-before`, `perspective`, `perspective-origin`, `pitch`, `pitch-range`, `play-during`, `polar-angle`, `polar-distance`, `position`, `presentation-level`, `quotes`, `region-fragment`, `resize`, `rest`, `rest-after`, `rest-before`, `richness`, `right`, `rotation`, `rotation-point`, `ruby-align`, `ruby-merge`, `ruby-position`, `running`, `scroll-snap-coordinate`, `scroll-snap-destination`, `scroll-snap-points-x`, `scroll-snap-points-y`, `scroll-snap-type`, `shape-image-threshold`, `shape-inside`, `shape-margin`, `shape-outside`, `size`, `speak`, `speak-as`, `speak-header`, `speak-numeral`, `speak-punctuation`, `speech-rate`, `stress`, `string-set`, `tab-size`, `table-layout`, `text-align`, `text-align-last`, `text-combine-upright`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-skip`, `text-decoration-style`, `text-emphasis`, `text-emphasis-color`, `text-emphasis-position`, `text-emphasis-style`, `text-indent`, `text-justify`, `text-orientation`, `text-overflow`, `text-shadow`, `text-space-collapse`, `text-space-trim`, `text-spacing`, `text-transform`, `text-underline-position`, `text-wrap`, `top`, `transform`, `transform-origin`, `transform-style`, `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `unicode-bidi`, `user-select`, `vertical-align`, `visibility`, `voice-balance`, `voice-duration`, `voice-family`, `voice-pitch`, `voice-range`, `voice-rate`, `voice-stress`, `voice-volume`, `volume`, `white-space`, `widows`, `width`, `will-change`, `word-break`, `word-spacing`, `word-wrap`, `wrap-after`, `wrap-before`, `wrap-flow`, `wrap-inside`, `wrap-through`, `writing-mode`, `z-index`, `above`, `absolute`, `always`, `armenian`, `aural`, `auto`, `avoid`, `baseline`, `behind`, `below`, `bidi-override`, `blink`, `block`, `bold`, `bolder`, `both`, `capitalize`, `center-left`, `center-right`, `center`, `circle`, `cjk-ideographic`, `close-quote`, `collapse`, `condensed`, `continuous`, `crop`, `crosshair`, `cross`, `cursive`, `dashed`, `decimal-leading-zero`, `decimal`, `default`, `digits`, `disc`, `dotted`, `double`, `e-resize`, `embed`, `extra-condensed`, `extra-expanded`, `expanded`, `fantasy`, `far-left`, `far-right`, `faster`, `fast`, `fixed`, `georgian`, `groove`, `hebrew`, `help`, `hidden`, `hide`, `higher`, `high`, `hiragana-iroha`, `hiragana`, `icon`, `inherit`, `inline-table`, `inline`, `inset`, `inside`, `invert`, `italic`, `justify`, `katakana-iroha`, `katakana`, `landscape`, `larger`, `large`, `left-side`, `leftwards`, `level`, `lighter`, `line-through`, `list-item`, `loud`, `lower-alpha`, `lower-greek`, `lower-roman`, `lowercase`, `ltr`, `lower`, `low`, `medium`, `message-box`, `middle`, `mix`, `monospace`, `n-resize`, `narrower`, `ne-resize`, `no-close-quote`, `no-open-quote`, `no-repeat`, `none`, `normal`, `nowrap`, `nw-resize`, `oblique`, `once`, `open-quote`, `outset`, `outside`, `overline`, `pointer`, `portrait`, `px`, `relative`, `repeat-x`, `repeat-y`, `repeat`, `rgb`, `ridge`, `right-side`, `rightwards`, `s-resize`, `sans-serif`, `scroll`, `se-resize`, `semi-condensed`, `semi-expanded`, `separate`, `serif`, `show`, `silent`, `slow`, `slower`, `small-caps`, `small-caption`, `smaller`, `soft`, `solid`, `spell-out`, `square`, `static`, `status-bar`, `super`, `sw-resize`, `table-caption`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`, `text`, `text-bottom`, `text-top`, `thick`, `thin`, `transparent`, `ultra-condensed`, `ultra-expanded`, `underline`, `upper-alpha`, `upper-latin`, `upper-roman`, `uppercase`, `url`, `visible`, `w-resize`, `wait`, `wider`, `x-fast`, `x-high`, `x-large`, `x-loud`, `x-low`, `x-small`, `x-soft`, `xx-large`, `xx-small`, `yes`), NameConstant, nil},
-			{Words(``, `\b`, `aliceblue`, `antiquewhite`, `aqua`, `aquamarine`, `azure`, `beige`, `bisque`, `black`, `blanchedalmond`, `blue`, `blueviolet`, `brown`, `burlywood`, `cadetblue`, `chartreuse`, `chocolate`, `coral`, `cornflowerblue`, `cornsilk`, `crimson`, `cyan`, `darkblue`, `darkcyan`, `darkgoldenrod`, `darkgray`, `darkgreen`, `darkgrey`, `darkkhaki`, `darkmagenta`, `darkolivegreen`, `darkorange`, `darkorchid`, `darkred`, `darksalmon`, `darkseagreen`, `darkslateblue`, `darkslategray`, `darkslategrey`, `darkturquoise`, `darkviolet`, `deeppink`, `deepskyblue`, `dimgray`, `dimgrey`, `dodgerblue`, `firebrick`, `floralwhite`, `forestgreen`, `fuchsia`, `gainsboro`, `ghostwhite`, `gold`, `goldenrod`, `gray`, `green`, `greenyellow`, `grey`, `honeydew`, `hotpink`, `indianred`, `indigo`, `ivory`, `khaki`, `lavender`, `lavenderblush`, `lawngreen`, `lemonchiffon`, `lightblue`, `lightcoral`, `lightcyan`, `lightgoldenrodyellow`, `lightgray`, `lightgreen`, `lightgrey`, `lightpink`, `lightsalmon`, `lightseagreen`, `lightskyblue`, `lightslategray`, `lightslategrey`, `lightsteelblue`, `lightyellow`, `lime`, `limegreen`, `linen`, `magenta`, `maroon`, `mediumaquamarine`, `mediumblue`, `mediumorchid`, `mediumpurple`, `mediumseagreen`, `mediumslateblue`, `mediumspringgreen`, `mediumturquoise`, `mediumvioletred`, `midnightblue`, `mintcream`, `mistyrose`, `moccasin`, `navajowhite`, `navy`, `oldlace`, `olive`, `olivedrab`, `orange`, `orangered`, `orchid`, `palegoldenrod`, `palegreen`, `paleturquoise`, `palevioletred`, `papayawhip`, `peachpuff`, `peru`, `pink`, `plum`, `powderblue`, `purple`, `rebeccapurple`, `red`, `rosybrown`, `royalblue`, `saddlebrown`, `salmon`, `sandybrown`, `seagreen`, `seashell`, `sienna`, `silver`, `skyblue`, `slateblue`, `slategray`, `slategrey`, `snow`, `springgreen`, `steelblue`, `tan`, `teal`, `thistle`, `tomato`, `turquoise`, `violet`, `wheat`, `white`, `whitesmoke`, `yellow`, `yellowgreen`, `transparent`), NameEntity, nil},
-			{Words(``, `\b`, `black`, `silver`, `gray`, `white`, `maroon`, `red`, `purple`, `fuchsia`, `green`, `lime`, `olive`, `yellow`, `navy`, `blue`, `teal`, `aqua`), NameBuiltin, nil},
-			{`\!(important|default)`, NameException, nil},
+			{Words(`\b`, `(?=\s*:)`, cssProperties...), NameAttribute, nil},
+			{cssPropertyPattern, NameAttribute, nil},
+			{Words(`\b`, `\b`, cssPropertyValues...), NameEntity, nil},
+			{Words(`(?i)\b`, `\b`, cssColorNames...), NameConstant, nil},
 			{`(true|false)`, NamePseudo, nil},
 			{`(and|or|not)`, OperatorWord, nil},
 			{`/\*`, CommentMultiline, Push("inline-comment")},
 			{`//[^\n]*`, CommentSingle, nil},
 			{`\#[a-z0-9]{1,6}`, LiteralNumberHex, nil},
-			{`(-?\d+)(\%|[a-z]+)?`, ByGroups(LiteralNumberInteger, KeywordType), nil},
-			{`(-?\d*\.\d+)(\%|[a-z]+)?`, ByGroups(LiteralNumberFloat, KeywordType), nil},
+			{`(-)?(\d+)(\%|[a-z]+)?`, ByGroups(Operator, LiteralNumberInteger, KeywordType), nil},
+			{`(-?)(\d*\.\d+)(\%|[a-z]+)?`, ByGroups(Operator, LiteralNumberFloat, KeywordType), nil},
 			{`#\{`, LiteralStringInterpol, Push("interpolation")},
 			{`[~^*!&%<>|+=@:,./?-]+`, Operator, nil},
 			{`[\[\]()]+`, Punctuation, nil},
@@ -86,7 +103,8 @@ func scssRules() Rules {
 			{`#\{`, LiteralStringInterpol, Push("interpolation")},
 			{`\#`, NameNamespace, Push("id")},
 			{`&`, Keyword, nil},
-			{`[~^*!&\[\]()<>|+=@:,./?%-]`, Operator, nil},
+			{`[~^*!&\[\]()<>|+=@:,./?-]`, Operator, nil},
+			{`(%)([\w-]+)`, ByGroups(Operator, NameClass), nil},
 			{`"`, LiteralStringDouble, Push("string-double")},
 			{`'`, LiteralStringSingle, Push("string-single")},
 			{`\n`, Text, nil},


Test patch:
diff --git a/lexers/testdata/scss.actual b/lexers/testdata/scss.actual
index 9692607..13e12e6 100644
--- a/lexers/testdata/scss.actual
+++ b/lexers/testdata/scss.actual
@@ -1,3 +1,35 @@
+@use "src/corners" as c;
+@use "src/corners" as *;
+
+/* private vars */
+$-radius: 3px;
+$_radius: 3px;
+
+$black: #000 !default;
+
+@use 'library' with (
+     $black: #222,
+     $config: (
+         important: true,
+         utility: (
+             leading-trim: trim,
+             properties: (leading-trim),
+             variants: (
+                 both: both
+             )
+         )
+     )
+);
+
+@use 'library' as * with (
+     $black: #222;
+);
+
+.content {
+    $variable: value !global;
+    value: $variable;
+}
+
 $roboto-font-path: "../fonts/roboto";
 
 @font-face {
@@ -243,7 +275,7 @@ $lightbox_shadow: 0 2px 5px rgba(0, 0, 0, .2);
     &-header {
         overflow: hidden;
         @include lb_styles-header();
-        &-headline{
+        &-headline {
             line-height: 1rem;
             padding-right: calc(#{$lightbox_header-height} * 2);
             overflow: hidden;
diff --git a/lexers/testdata/scss.expected b/lexers/testdata/scss.expected
index 150ed2d..213eec8 100644
--- a/lexers/testdata/scss.expected
+++ b/lexers/testdata/scss.expected
@@ -1,4 +1,148 @@
 [
+  {"type":"Keyword","value":"@use"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralStringDouble","value":"\"src/corners\""},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"as"},
+  {"type":"Text","value":" "},
+  {"type":"NameNamespace","value":"c"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n"},
+  {"type":"Keyword","value":"@use"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralStringDouble","value":"\"src/corners\""},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"as"},
+  {"type":"Text","value":" "},
+  {"type":"NameNamespace","value":"*"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"CommentMultiline","value":"/* private vars */"},
+  {"type":"Text","value":"\n"},
+  {"type":"NameVariable","value":"$-radius"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralNumberInteger","value":"3"},
+  {"type":"KeywordType","value":"px"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n"},
+  {"type":"NameVariable","value":"$_radius"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralNumberInteger","value":"3"},
+  {"type":"KeywordType","value":"px"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"NameVariable","value":"$black"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralNumberHex","value":"#000"},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"!default"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"Keyword","value":"@use"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralStringSingle","value":"'library'"},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"with"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n     "},
+  {"type":"NameVariable","value":"$black"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralNumberHex","value":"#222"},
+  {"type":"Operator","value":","},
+  {"type":"Text","value":"\n     "},
+  {"type":"NameVariable","value":"$config"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n         "},
+  {"type":"NameAttribute","value":"important"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"NamePseudo","value":"true"},
+  {"type":"Operator","value":","},
+  {"type":"Text","value":"\n         "},
+  {"type":"NameAttribute","value":"utility"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n             "},
+  {"type":"NameAttribute","value":"leading-trim"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Name","value":"trim"},
+  {"type":"Operator","value":","},
+  {"type":"Text","value":"\n             "},
+  {"type":"NameAttribute","value":"properties"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Name","value":"leading-trim"},
+  {"type":"Punctuation","value":")"},
+  {"type":"Operator","value":","},
+  {"type":"Text","value":"\n             "},
+  {"type":"NameAttribute","value":"variants"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n                 "},
+  {"type":"NameAttribute","value":"both"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"NameEntity","value":"both"},
+  {"type":"Text","value":"\n             "},
+  {"type":"Punctuation","value":")"},
+  {"type":"Text","value":"\n         "},
+  {"type":"Punctuation","value":")"},
+  {"type":"Text","value":"\n     "},
+  {"type":"Punctuation","value":")"},
+  {"type":"Text","value":"\n"},
+  {"type":"Punctuation","value":");"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"Keyword","value":"@use"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralStringSingle","value":"'library'"},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"as"},
+  {"type":"Text","value":" "},
+  {"type":"NameNamespace","value":"*"},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"with"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n     "},
+  {"type":"NameVariable","value":"$black"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"LiteralNumberHex","value":"#222"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n"},
+  {"type":"Punctuation","value":");"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"NameClass","value":".content"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"{"},
+  {"type":"Text","value":"\n    "},
+  {"type":"NameVariable","value":"$variable"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"Name","value":"value"},
+  {"type":"Text","value":" "},
+  {"type":"Keyword","value":"!global"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n    "},
+  {"type":"NameAttribute","value":"value"},
+  {"type":"Operator","value":":"},
+  {"type":"Text","value":" "},
+  {"type":"NameVariable","value":"$variable"},
+  {"type":"Punctuation","value":";"},
+  {"type":"Text","value":"\n"},
+  {"type":"Punctuation","value":"}"},
+  {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$roboto-font-path"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
@@ -37,7 +181,7 @@
   {"type":"LiteralNumberInteger","value":"100"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"Keyword","value":"@use"},
   {"type":"Text","value":" "},
@@ -47,7 +191,7 @@
   {"type":"NameVariable","value":"$primary-color"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"red"},
+  {"type":"NameConstant","value":"red"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
   {"type":"NameClass","value":".inverse"},
@@ -83,7 +227,7 @@
   {"type":"NameAttribute","value":"list-style-type"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"none"},
+  {"type":"NameEntity","value":"none"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"Punctuation","value":"}"},
@@ -106,9 +250,9 @@
   {"type":"LiteralNumberInteger","value":"1"},
   {"type":"KeywordType","value":"px"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"solid"},
+  {"type":"NameEntity","value":"solid"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"gray"},
+  {"type":"NameConstant","value":"gray"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"Punctuation","value":"}"},
@@ -150,9 +294,9 @@
   {"type":"LiteralNumberInteger","value":"1"},
   {"type":"KeywordType","value":"px"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"solid"},
+  {"type":"NameEntity","value":"solid"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"black"},
+  {"type":"NameConstant","value":"black"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-radius"},
@@ -170,7 +314,7 @@
   {"type":"Name","value":"null"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$base-color"},
   {"type":"Operator","value":":"},
@@ -264,14 +408,14 @@
   {"type":"NameVariable","value":"$ratio"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n    "},
   {"type":"Keyword","value":"@return"},
   {"type":"Text","value":" "},
   {"type":"NameVariable","value":"$value"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$normal-font-size"},
   {"type":"Operator","value":":"},
@@ -297,7 +441,7 @@
   {"type":"KeywordType","value":"px"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$sizes"},
   {"type":"Operator","value":":"},
@@ -377,9 +521,7 @@
   {"type":"NameAttribute","value":"display"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"inline"},
-  {"type":"Operator","value":"-"},
-  {"type":"NameConstant","value":"block"},
+  {"type":"NameEntity","value":"inline-block"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"font-family"},
@@ -394,9 +536,9 @@
   {"type":"NameVariable","value":"$glyph"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$icons"},
   {"type":"Operator","value":":"},
@@ -452,9 +594,7 @@
   {"type":"NameAttribute","value":"display"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"inline"},
-  {"type":"Operator","value":"-"},
-  {"type":"NameConstant","value":"block"},
+  {"type":"NameEntity","value":"inline-block"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"font-family"},
@@ -508,13 +648,13 @@
   {"type":"NameAttribute","value":"border-color"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"transparent"},
+  {"type":"NameEntity","value":"transparent"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-style"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"solid"},
+  {"type":"NameEntity","value":"solid"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-width"},
@@ -551,7 +691,7 @@
   {"type":"Text","value":" "},
   {"type":"Operator","value":"=="},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"right"},
+  {"type":"NameEntity","value":"right"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n        "},
@@ -587,7 +727,7 @@
   {"type":"Text","value":" "},
   {"type":"Operator","value":"=="},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"left"},
+  {"type":"NameEntity","value":"left"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n        "},
@@ -627,13 +767,13 @@
   {"type":"KeywordType","value":"px"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"black"},
+  {"type":"NameConstant","value":"black"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"right"},
+  {"type":"NameEntity","value":"right"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$icons"},
   {"type":"Operator","value":":"},
@@ -681,9 +821,7 @@
   {"type":"NameAttribute","value":"display"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"inline"},
-  {"type":"Operator","value":"-"},
-  {"type":"NameConstant","value":"block"},
+  {"type":"NameEntity","value":"inline-block"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"font-family"},
@@ -705,7 +843,7 @@
   {"type":"CommentMultiline","value":"/* This CSS will print because %message-shared is extended. */"},
   {"type":"Text","value":"\n"},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"message-shared"},
+  {"type":"NameClass","value":"message-shared"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n    "},
@@ -715,7 +853,7 @@
   {"type":"LiteralNumberInteger","value":"1"},
   {"type":"KeywordType","value":"px"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"solid"},
+  {"type":"NameEntity","value":"solid"},
   {"type":"Text","value":" "},
   {"type":"LiteralNumberHex","value":"#ccc"},
   {"type":"Punctuation","value":";"},
@@ -737,20 +875,20 @@
   {"type":"Text","value":"\n\n"},
   {"type":"CommentSingle","value":"// This CSS won't print because %equal-heights is never extended.\n"},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"equal-heights"},
+  {"type":"NameClass","value":"equal-heights"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"display"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"flex"},
+  {"type":"NameEntity","value":"flex"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"flex-wrap"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"Name","value":"wrap"},
+  {"type":"NameEntity","value":"wrap"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":"}"},
@@ -762,7 +900,7 @@
   {"type":"Keyword","value":"@extend"},
   {"type":"Text","value":" "},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"message-shared"},
+  {"type":"NameClass","value":"message-shared"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":"}"},
@@ -774,13 +912,13 @@
   {"type":"Keyword","value":"@extend"},
   {"type":"Text","value":" "},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"message-shared"},
+  {"type":"NameClass","value":"message-shared"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-color"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"green"},
+  {"type":"NameConstant","value":"green"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":"}"},
@@ -792,13 +930,13 @@
   {"type":"Keyword","value":"@extend"},
   {"type":"Text","value":" "},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"message-shared"},
+  {"type":"NameClass","value":"message-shared"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-color"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"red"},
+  {"type":"NameConstant","value":"red"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":"}"},
@@ -810,16 +948,16 @@
   {"type":"Keyword","value":"@extend"},
   {"type":"Text","value":" "},
   {"type":"Operator","value":"%"},
-  {"type":"NameTag","value":"message-shared"},
+  {"type":"NameClass","value":"message-shared"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"border-color"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameEntity","value":"yellow"},
+  {"type":"NameConstant","value":"yellow"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n\n"},
   {"type":"NameVariable","value":"$grid-gutter-width"},
   {"type":"Operator","value":" :"},
@@ -975,7 +1113,7 @@
   {"type":"LiteralNumberInteger","value":"1"},
   {"type":"KeywordType","value":"px"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"solid"},
+  {"type":"NameEntity","value":"solid"},
   {"type":"Text","value":" "},
   {"type":"NameVariable","value":"$eee"},
   {"type":"Punctuation","value":";"},
@@ -985,7 +1123,7 @@
   {"type":"Text","value":" "},
   {"type":"NameFunction","value":"transparentize"},
   {"type":"Punctuation","value":"("},
-  {"type":"NameEntity","value":"black"},
+  {"type":"NameConstant","value":"black"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
   {"type":"LiteralNumberFloat","value":".4"},
@@ -1099,7 +1237,7 @@
   {"type":"NameAttribute","value":"font-weight"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"bold"},
+  {"type":"NameEntity","value":"bold"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"Punctuation","value":"}"},
@@ -1123,17 +1261,15 @@
   {"type":"NameAttribute","value":"box-sizing"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"border"},
-  {"type":"Operator","value":"-"},
-  {"type":"Name","value":"box"},
+  {"type":"NameEntity","value":"border-box"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"position"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"fixed"},
+  {"type":"NameEntity","value":"fixed"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"height"},
@@ -1153,14 +1289,16 @@
   {"type":"NameAttribute","value":"left"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"vw"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
   {"type":"NameAttribute","value":"top"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"vh"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n    "},
@@ -1183,9 +1321,9 @@
   {"type":"NameAttribute","value":"transition"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"all"},
+  {"type":"NameEntity","value":"all"},
   {"type":"Text","value":" "},
-  {"type":"Name","value":"ease-in-out"},
+  {"type":"NameEntity","value":"ease-in-out"},
   {"type":"Text","value":" "},
   {"type":"LiteralNumberFloat","value":".5"},
   {"type":"KeywordType","value":"s"},
@@ -1207,7 +1345,7 @@
   {"type":"NameAttribute","value":"overflow"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"hidden"},
+  {"type":"NameEntity","value":"hidden"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"left"},
@@ -1246,7 +1384,7 @@
   {"type":"NameAttribute","value":"position"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"absolute"},
+  {"type":"NameEntity","value":"absolute"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"transform"},
@@ -1254,11 +1392,13 @@
   {"type":"Text","value":" "},
   {"type":"NameFunction","value":"translate"},
   {"type":"Punctuation","value":"("},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"%"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"%"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n        "},
@@ -1277,7 +1417,7 @@
   {"type":"NameAttribute","value":"overflow"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"auto"},
+  {"type":"NameEntity","value":"auto"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"Keyword","value":"@include"},
@@ -1310,14 +1450,18 @@
   {"type":"NameAttribute","value":"overflow"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"hidden"},
+  {"type":"NameEntity","value":"hidden"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"Keyword","value":"@include"},
   {"type":"NameDecorator","value":" lb_styles-header"},
   {"type":"Punctuation","value":"();"},
   {"type":"Text","value":"\n        "},
-  {"type":"NameAttribute","value":"\u0026-headline{"},
+  {"type":"Keyword","value":"\u0026"},
+  {"type":"Operator","value":"-"},
+  {"type":"NameTag","value":"headline"},
+  {"type":"Text","value":" "},
+  {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n            "},
   {"type":"NameAttribute","value":"line-height"},
   {"type":"Operator","value":":"},
@@ -1343,13 +1487,13 @@
   {"type":"NameAttribute","value":"overflow"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"hidden"},
+  {"type":"NameEntity","value":"hidden"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n            "},
   {"type":"NameAttribute","value":"text-overflow"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"Name","value":"ellipsis"},
+  {"type":"NameEntity","value":"ellipsis"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n            "},
   {"type":"NameAttribute","value":"max-height"},
@@ -1361,7 +1505,7 @@
   {"type":"NameAttribute","value":"text-transform"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"uppercase"},
+  {"type":"NameEntity","value":"uppercase"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n            "},
   {"type":"Keyword","value":"@include"},
@@ -1442,13 +1586,13 @@
   {"type":"NameAttribute","value":"cursor"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"pointer"},
+  {"type":"NameEntity","value":"pointer"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"position"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"absolute"},
+  {"type":"NameEntity","value":"absolute"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"right"},
@@ -1485,7 +1629,8 @@
   {"type":"NameAttribute","value":"text-indent"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"LiteralNumberInteger","value":"-1000"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"1000"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n        "},
   {"type":"NameAttribute","value":"font-size"},
@@ -1507,19 +1652,20 @@
   {"type":"Text","value":"\n        "},
   {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n        "},
-  {"type":"Keyword","value":"\u0026"},
-  {"type":"NameDecorator","value":":before"},
+  {"type":"NameAttribute","value":"\u0026"},
+  {"type":"Operator","value":":"},
+  {"type":"Name","value":"before"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
-  {"type":"Keyword","value":"\u0026"},
-  {"type":"NameDecorator","value":":after"},
+  {"type":"Operator","value":"\u0026:"},
+  {"type":"Name","value":"after"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"{"},
   {"type":"Text","value":"\n            "},
   {"type":"NameAttribute","value":"position"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
-  {"type":"NameConstant","value":"absolute"},
+  {"type":"NameEntity","value":"absolute"},
   {"type":"Punctuation","value":";"},
   {"type":"Text","value":"\n            "},
   {"type":"NameAttribute","value":"left"},
@@ -1540,11 +1686,13 @@
   {"type":"Text","value":" "},
   {"type":"NameFunction","value":"translate"},
   {"type":"Punctuation","value":"("},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"%"},
   {"type":"Operator","value":","},
   {"type":"Text","value":" "},
-  {"type":"LiteralNumberInteger","value":"-50"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"50"},
   {"type":"KeywordType","value":"%"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n            "},
@@ -1601,7 +1749,8 @@
   {"type":"Text","value":" "},
   {"type":"NameFunction","value":"rotate"},
   {"type":"Punctuation","value":"("},
-  {"type":"LiteralNumberInteger","value":"-45"},
+  {"type":"Operator","value":"-"},
+  {"type":"LiteralNumberInteger","value":"45"},
   {"type":"KeywordType","value":"deg"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n        "},
@@ -1614,7 +1763,7 @@
   {"type":"Keyword","value":"@media"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"("},
-  {"type":"NameConstant","value":"min-width"},
+  {"type":"NameAttribute","value":"min-width"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
   {"type":"LiteralStringInterpol","value":"#{"},
@@ -1668,7 +1817,7 @@
   {"type":"Keyword","value":"@media"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"("},
-  {"type":"NameConstant","value":"min-width"},
+  {"type":"NameAttribute","value":"min-width"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
   {"type":"LiteralStringInterpol","value":"#{"},
@@ -1715,9 +1864,9 @@
   {"type":"KeywordType","value":"rem"},
   {"type":"Punctuation","value":");"},
   {"type":"Text","value":"\n    "},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n"},
-  {"type":"NameAttribute","value":"}"},
+  {"type":"Punctuation","value":"}"},
   {"type":"Text","value":"\n"},
   {"type":"NameVariable","value":"$wrapper"},
   {"type":"Operator","value":":"},
@@ -1746,7 +1895,7 @@
   {"type":"Keyword","value":"@media"},
   {"type":"Text","value":" "},
   {"type":"Punctuation","value":"("},
-  {"type":"NameConstant","value":"min-width"},
+  {"type":"NameAttribute","value":"min-width"},
   {"type":"Operator","value":":"},
   {"type":"Text","value":" "},
   {"type":"LiteralStringInterpol","value":"#{"},