feat: ✨ add scss filetype support

README.md

@@ -118,6 +118,7 @@ require("onedarkpro").setup({
     python = true,
     ruby = true,
     rust = true,
+    scss = true,
     toml = true,
     typescript = true,
     typescriptreact = true,
@@ -345,6 +346,7 @@ The theme supports opinionated highlighting for filetypes, just like the origina
 - `python`
 - `ruby`
 - `rust`
+- `scss`
 - `toml`
 - `typescript`
 - `typescriptreact`

after/queries/scss/highlights.scm

@@ -0,0 +1,7 @@
+; extends
+(rule_set (selectors) @odp.selector (#set! "priority" 125))
+(declaration (property_name) @odp.vendor_prefix (#match? @odp.vendor_prefix "^-"))
+(declaration (variable_value) @odp.variable)
+(class_selector (nesting_selector) . (class_name) @odp.nesting_selector (#set! "priority" 126))
+(pseudo_class_selector (class_name) @odp.pseudo_class (#set! "priority" 125))
+

doc/onedarkpro.nvim.txt

@@ -112,6 +112,7 @@ Click to see the default configuration ~
         python = true,
         ruby = true,
         rust = true,
+        scss = true,
         toml = true,
         typescript = true,
         typescriptreact = true,
@@ -368,6 +369,7 @@ are loaded at runtime. The theme currently has support for:
 - `python`
 - `ruby`
 - `rust`
+- `scss`
 - `toml`
 - `typescript`
 - `typescriptreact`

examples/scss.scss

@@ -0,0 +1,43 @@
+// Variables
+$primary-color: #3498db;
+$secondary-color: #2ecc71;
+$font-stack: Arial, sans-serif;
+$default-padding: 10px;
+
+// Mixin for rounded corners
+@mixin rounded-corners($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  border-radius: $radius;
+}
+
+// Button styles
+.button {
+  font-family: $font-stack;
+  font-weight: bold;
+  padding: $default-padding;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &--primary {
+    background-color: $primary-color;
+    color: white;
+
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+
+  &--secondary {
+    background-color: $secondary-color;
+    color: white;
+
+    &:hover {
+      background-color: darken($secondary-color, 10%);
+    }
+  }
+
+  @include rounded-corners(5px);
+}

lua/onedarkpro/config.lua

@@ -17,6 +17,7 @@ local defaults = {
         python = true,
         ruby = true,
         rust = true,
+        scss = true,
         toml = true,
         typescript = true,
         typescriptreact = true,

lua/onedarkpro/highlights/filetypes/scss.lua

@@ -0,0 +1,23 @@
+local M = {}
+
+---Get the highlight groups for the filetype
+---@param theme table
+---@return table
+function M.groups(theme)
+    local config = require("onedarkpro.config").config
+
+    return {
+        ["@property.scss"] = { fg = theme.palette.fg },
+        ["@punctuation.bracket.scss"] = { fg = theme.palette.orange },
+        ["@string.scss"] = { fg = theme.palette.orange, style = config.styles.string },
+        ["@type.scss"] = { fg = theme.palette.red },
+
+        ["@odp.nesting_selector.scss"] = { fg = theme.palette.red },
+        ["@odp.pseudo_class.scss"] = { fg = theme.palette.cyan },
+        ["@odp.selector.scss"] = { fg = theme.palette.orange },
+        ["@odp.variable.scss"] = { fg = theme.palette.red, style = config.styles.variables },
+        ["@odp.vendor_prefix.scss"] = { fg = theme.palette.cyan },
+    }
+end
+
+return M