added css & scss queries

README.md

@@ -72,7 +72,7 @@ use 'nvim-treesitter/nvim-treesitter-context'
   - [ ] `commonlisp`
   - [ ] `cooklang`
   - [ ] `cpon`
-  - [ ] `css`
+  - [x] `css`
   - [ ] `cuda`
   - [ ] `d`
   - [ ] `devicetree`
@@ -158,7 +158,7 @@ use 'nvim-treesitter/nvim-treesitter-context'
   - [ ] `ron`
   - [ ] `rst`
   - [ ] `scheme`
-  - [ ] `scss`
+  - [x] `scss`
   - [ ] `slint`
   - [ ] `smali`
   - [ ] `smithy`

queries/css/context.scm

@@ -0,0 +1,10 @@
+(rule_set) @context
+([
+  (rule_set)
+  (keyframe_block)
+  (keyframes_statement)
+  (media_statement)
+  (supports_statement)
+  (at_rule)
+] @context)
+

queries/scss/context.scm

@@ -0,0 +1,13 @@
+; inherits: css
+
+([
+  (mixin_statement)
+  (function_statement)
+  (each_statement)
+  (for_statement)
+  (while_statement)
+  (if_clause)
+  (else_if_clause)
+  (else_clause)
+] @context)
+

test/test.css

@@ -0,0 +1,112 @@
+.foo {
+    background-color: #fff;
+    color: #000;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+
+    font-size: 14px;
+
+
+    @supports (font-size: calc(1vw + 1vh + 1vmin)) {
+
+
+
+        font-size: calc(1vw + 1vh + 1vmin);
+
+
+
+
+
+
+
+    }
+
+    @color-profile --swop5c {
+
+
+
+      src: url("https://example.org/SWOP2006_Coated5v2.icc");
+
+
+
+
+
+
+
+
+    }
+
+
+
+
+
+
+
+
+    line-height: 1.42857143;
+}
+
+@keyframes wave {
+    0% {
+        transform: translateY(-50%) scale(0);
+        opacity: 0;
+
+
+
+
+
+
+
+
+    }
+    50% {
+
+
+
+        transform: translateY(-50%) scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-50%) scale(0);
+
+
+
+        opacity: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+
+
+
+
+
+
+
+

test/test.scss

@@ -0,0 +1,233 @@
+$sizes: 40px, 50px, 80px;
+
+.foo-container {
+  .foo-item {
+    color: red;
+
+
+
+
+
+  }
+  .foo-image {
+    width: 100%;
+    height: 100%;
+
+
+
+
+
+
+  }
+}
+
+@each $size in $sizes {
+  .foo-#{$size} {
+
+
+
+
+    width: $size;
+
+
+
+
+
+    height: $size;
+  }
+}
+
+@for $i from 1 through 3 {
+
+
+
+
+  .foo-#{$i} {
+
+
+
+    width: $i * 10px;
+
+
+
+
+
+  }
+
+
+
+
+}
+
+@while $i < 10 {
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@keyframes FooKeyframes {
+  0% {
+
+
+
+
+
+
+    transform: rotateX(60deg) rotateZ(-45deg) scale(1);
+    filter: blur(5px);
+  }
+
+  50% {
+
+
+
+
+
+
+
+    transform: rotateX(60deg) rotateZ(-225deg) scale(1.1);
+    filter: blur(15px);
+  }
+
+  100% {
+    transform: rotateX(60deg) rotateZ(-405deg) scale(1);
+    filter: blur(5px);
+
+
+
+
+
+
+
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@mixin FooMixin($a, $b) {
+
+  @if $a > $b {
+    color: red;
+
+
+
+
+
+
+
+
+
+  } @else if $a < $b {
+    color: blue;
+
+
+
+
+
+
+
+  } @else {
+
+
+
+
+    color: green;
+
+
+
+
+
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+
+
+@function add($a, $b) {
+
+
+
+
+
+
+
+  @return $a + $b;
+
+
+
+
+
+
+}
+
+@at-root {
+
+
+
+
+
+  color: red;
+
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+