diff --git a/examples/file.css b/examples/file.css
index 324c5315..5e63be95 100644
--- a/examples/file.css
+++ b/examples/file.css
@@ -7,21 +7,21 @@ body {
 }
 
 .addon-store .pagehead h1 { display: inline-block }
-.addon-store .addon-summary:after { clear: both }
+.addon-store .addon-summary::after { clear: both }
 
 #addon-store .pagehead .electrocat-small {
-    bottom: -7px;
+    bottom: calc(100% - 20px);
     position: absolute;
     right: 0;
 }
 
 .addon-store .addons-nav::after {
     display: block;
-    content: "";
+    content: attr("data-link");
 }
 
 .addon-store .addons-nav a:hover {
- background-color: red;
+   background-color: red;
 }
 
 .addon-store .addons-nav a.selected {
@@ -31,6 +31,16 @@ body {
     padding: 0 0 14px;
 }
 
+.addon-store img {
+    filter: grayscale(100%);
+}
+
+@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+
 .addon-store .addon-icon {
     background: #fff;
     border: 1px solid #ddd;
@@ -56,9 +66,8 @@ body {
 }
 
 .addon-field-editor .addon-field-list, .addon-field-editor .addon-new-field {
-    -moz-box-sizing: border-box;
     border-radius: 3px;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     display: inline-block;
     text-align: center;
     width: 595px;
@@ -67,3 +76,14 @@ body {
 #form input[type="text"] {
     border: 1px solid var(--color-border-input);
 }
+
+@keyframes mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+@media screen and (max-width: 600px) {
+  body {
+    background-color: blue;
+  }
+}
diff --git a/examples/file.scss b/examples/file.scss
index 6404f207..6d511304 100644
--- a/examples/file.scss
+++ b/examples/file.scss
@@ -1,5 +1,5 @@
-$addon-store-border-color: #d95468;
-$addon-store-color: #333;
+$addon-store-border-color: #d95468 !default;
+$addon-store-color: #333 !default;
 
 #app {
   .addons-nav {
@@ -40,7 +40,7 @@ $addon-store-color: #333;
 }
 
 @mixin grid($flex) {
-  @if $flex {
+  @if ($flex) {
     @include flex;
   }
   @else {
@@ -49,6 +49,6 @@ $addon-store-color: #333;
 }
 
 /* Functions */
-@function my-calculation-function($some-number, $another-number){
+@function my-calculation-function($some-number, $another-number) {
   @return $some-number + $another-number;
 }
diff --git a/schemes/Meetio-Cobalt.sublime-color-scheme b/schemes/Meetio-Cobalt.sublime-color-scheme
index 3b86b59f..e1fb0aaf 100644
--- a/schemes/Meetio-Cobalt.sublime-color-scheme
+++ b/schemes/Meetio-Cobalt.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/schemes/Meetio-Darker.sublime-color-scheme b/schemes/Meetio-Darker.sublime-color-scheme
index 0287a680..faf309a6 100644
--- a/schemes/Meetio-Darker.sublime-color-scheme
+++ b/schemes/Meetio-Darker.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/schemes/Meetio-Lighter.sublime-color-scheme b/schemes/Meetio-Lighter.sublime-color-scheme
index 1fb41e63..1f21bd3a 100644
--- a/schemes/Meetio-Lighter.sublime-color-scheme
+++ b/schemes/Meetio-Lighter.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/schemes/Meetio-Ocean.sublime-color-scheme b/schemes/Meetio-Ocean.sublime-color-scheme
index d612083a..61f998b0 100644
--- a/schemes/Meetio-Ocean.sublime-color-scheme
+++ b/schemes/Meetio-Ocean.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/schemes/Meetio-Palenight.sublime-color-scheme b/schemes/Meetio-Palenight.sublime-color-scheme
index 4ce887fa..1a426cf0 100644
--- a/schemes/Meetio-Palenight.sublime-color-scheme
+++ b/schemes/Meetio-Palenight.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/schemes/Meetio.sublime-color-scheme b/schemes/Meetio.sublime-color-scheme
index ad04bcf3..54944c2d 100644
--- a/schemes/Meetio.sublime-color-scheme
+++ b/schemes/Meetio.sublime-color-scheme
@@ -47,6 +47,86 @@
         "tags_options": "stippled_underline"
     },
     "rules": [
+        {
+            "scope": "col_gutter",
+            "background": "#000000",
+            "foreground": "#ffffff"
+        },
+        {
+            "scope": "col_E1F5FEFF",
+            "background": "#E1F5FEFF",
+            "foreground": "#707070FF"
+        },
+        {
+            "scope": "col_65737EFF",
+            "background": "#65737EFF",
+            "foreground": "#F0F0F0FF"
+        },
+        {
+            "scope": "col_89DDFFFF",
+            "background": "#89DDFFFF",
+            "foreground": "#474747FF"
+        },
+        {
+            "scope": "col_82AAFFFF",
+            "background": "#82AAFFFF",
+            "foreground": "#272727FF"
+        },
+        {
+            "scope": "col_F06292FF",
+            "background": "#F06292FF",
+            "foreground": "#111111FF"
+        },
+        {
+            "scope": "col_FF5370FF",
+            "background": "#FF5370FF",
+            "foreground": "#090909FF"
+        },
+        {
+            "scope": "col_F97B58FF",
+            "background": "#F97B58FF",
+            "foreground": "#1C1C1CFF"
+        },
+        {
+            "scope": "col_BB80B3FF",
+            "background": "#BB80B3FF",
+            "foreground": "#171717FF"
+        },
+        {
+            "scope": "col_B39DDBFF",
+            "background": "#B39DDBFF",
+            "foreground": "#2A2A2AFF"
+        },
+        {
+            "scope": "col_FEFEFEFF",
+            "background": "#FEFEFEFF",
+            "foreground": "#7E7E7EFF"
+        },
+        {
+            "scope": "col_FFCB6BFF",
+            "background": "#FFCB6BFF",
+            "foreground": "#4F4F4FFF"
+        },
+        {
+            "scope": "col_7DCAC4FF",
+            "background": "#7DCAC4FF",
+            "foreground": "#323232FF"
+        },
+        {
+            "scope": "col_212121FF",
+            "background": "#212121FF",
+            "foreground": "#A1A1A1FF"
+        },
+        {
+            "scope": "col_C3E88DFF",
+            "background": "#C3E88DFF",
+            "foreground": "#525252FF"
+        },
+        {
+            "scope": "col_F78C6CFF",
+            "background": "#F78C6CFF",
+            "foreground": "#282828FF"
+        },
         {
             "name": "Comment",
             "scope": "comment, punctuation.definition.comment",
@@ -110,31 +190,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +232,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",
diff --git a/src/schemes/files/rules.json b/src/schemes/files/rules.json
index 25c79358..73b0ec41 100644
--- a/src/schemes/files/rules.json
+++ b/src/schemes/files/rules.json
@@ -62,31 +62,36 @@
     {
         "name": "[CSS] Classes",
         "scope": "entity.other.attribute-name.class",
-        "foreground": "var(magenta)"
+        "foreground": "var(yellow)"
     },
     {
         "name": "[CSS] ID",
-        "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-        "foreground": "var(magenta)"
+        "scope": "entity.other.attribute-name.id.css",
+        "foreground": "var(yellow)"
     },
     {
-        "name": "[CSS] Class and Support",
+        "name": "[CSS] Properties",
         "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
         "foreground": "var(foreground)"
     },
     {
         "name": "[CSS] Variable",
-        "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-        "foreground": "var(yellow)"
+        "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+        "foreground": "var(cyan)"
     },
     {
         "name": "[CSS] Functions",
-        "scope": "support.function.var.css",
+        "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+        "foreground": "var(blue)"
+    },
+    {
+        "name": "[CSS] Prefix",
+        "scope": "support.type.vendor-prefix.css",
         "foreground": "var(blue)"
     },
     {
         "name": "[CSS] Properties",
-        "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+        "scope": "meta.property-name.css",
         "foreground": "var(foreground)"
     },
     {
@@ -99,6 +104,16 @@
         "scope": "entity.other.pseudo-element.css",
         "foreground": "var(red)"
     },
+    {
+        "name": "[CSS] Important",
+        "scope": "keyword.other.important.css",
+        "foreground": "var(violet)"
+    },
+    {
+        "name": "[CSS] Color Values",
+        "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+        "foreground": "var(blue)"
+    },
     {
         "name": "[JavaScript] Dollar",
         "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",