feat(qss): support QSS syntax highlighting

README.md

@@ -22,10 +22,10 @@
   - [x] Support user-defined tool args
   - [x] Support user-defined tool paths
 - [x] Build e2e tests (close #8)
-- [ ] Languages features
+- [x] Languages features
   - [x] `qml`
   - [x] `qmldir`
-  - [ ] `qss`
+  - [x] `qss`
   - [x] `qrc`
   - [x] `ui`
   - [ ] ~~`qt.ts`~~

languages/qss.json

@@ -0,0 +1,31 @@
+{
+  "comments": {
+    "blockComment": ["/*", "*/"]
+  },
+  "brackets": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}", "notIn": ["string", "comment"] },
+    { "open": "[", "close": "]", "notIn": ["string", "comment"] },
+    { "open": "(", "close": ")", "notIn": ["string", "comment"] },
+    { "open": "\"", "close": "\"", "notIn": ["string", "comment"] },
+    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
+    { "open": "/**", "close": " */", "notIn": ["string"] }
+  ],
+  "surroundingPairs": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"],
+    ["\"", "\""],
+    ["'", "'"]
+  ],
+  "folding": {
+    "markers": {
+      "start": "^\\s*\\/\\*\\s*#region\\b\\s*(.*?)\\s*\\*\\/",
+      "end": "^\\s*\\/\\*\\s*#endregion\\b.*\\*\\/"
+    }
+  }
+}

package.json

@@ -82,6 +82,17 @@
         ],
         "configuration": "./languages/qmldir.json"
       },
+      {
+        "id": "qss",
+        "extensions": [
+          ".qss"
+        ],
+        "aliases": [
+          "QSS",
+          "qss"
+        ],
+        "configuration": "./languages/qss.json"
+      },
       {
         "id": "xml",
         "firstLine": "^<\\?xml\\s+.*\\?>\\s*",
@@ -295,6 +306,11 @@
         "language": "qmldir",
         "scopeName": "source.qmldir",
         "path": "./syntaxes/qmldir.tmLanguage.json"
+      },
+      {
+        "language": "qss",
+        "scopeName": "source.qss",
+        "path": "./syntaxes/qss.tmLanguage.json"
       }
     ],
     "snippets": [
@@ -305,6 +321,10 @@
       {
         "language": "qmldir",
         "path": "./snippets/qmldir.json"
+      },
+      {
+        "language": "qss",
+        "path": "./snippets/qss.json"
       }
     ]
   },

python/tests/assets/qss/QAbstractScrollArea.qss

@@ -0,0 +1,5 @@
+QTextEdit, QListView {
+    background-color: white;
+    background-image: url(draft.png);
+    background-attachment: scroll;
+}

python/tests/assets/qss/QCheckBox.qss

@@ -0,0 +1,40 @@
+QCheckBox {
+    spacing: 5px;
+}
+
+QCheckBox::indicator {
+    width: 13px;
+    height: 13px;
+}
+
+QCheckBox::indicator:unchecked {
+    image: url(:/images/checkbox_unchecked.png);
+}
+
+QCheckBox::indicator:unchecked:hover {
+    image: url(:/images/checkbox_unchecked_hover.png);
+}
+
+QCheckBox::indicator:unchecked:pressed {
+    image: url(:/images/checkbox_unchecked_pressed.png);
+}
+
+QCheckBox::indicator:checked {
+    image: url(:/images/checkbox_checked.png);
+}
+
+QCheckBox::indicator:checked:hover {
+    image: url(:/images/checkbox_checked_hover.png);
+}
+
+QCheckBox::indicator:checked:pressed {
+    image: url(:/images/checkbox_checked_pressed.png);
+}
+
+QCheckBox::indicator:indeterminate:hover {
+    image: url(:/images/checkbox_indeterminate_hover.png);
+}
+
+QCheckBox::indicator:indeterminate:pressed {
+    image: url(:/images/checkbox_indeterminate_pressed.png);
+}

python/tests/assets/qss/QComboBox.qss

@@ -0,0 +1,49 @@
+QComboBox {
+    border: 1px solid gray;
+    border-radius: 3px;
+    padding: 1px 18px 1px 3px;
+    min-width: 6em;
+}
+
+QComboBox:editable {
+    background: white;
+}
+
+QComboBox:!editable, QComboBox::drop-down:editable {
+     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
+                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
+}
+
+/* QComboBox gets the "on" state when the popup is open */
+QComboBox:!editable:on, QComboBox::drop-down:editable:on {
+    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
+                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
+}
+
+QComboBox:on { /* shift the text when the popup opens */
+    padding-top: 3px;
+    padding-left: 4px;
+}
+
+QComboBox::drop-down {
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 15px;
+
+    border-left-width: 1px;
+    border-left-color: darkgray;
+    border-left-style: solid; /* just a single line */
+    border-top-right-radius: 3px; /* same radius as the QComboBox */
+    border-bottom-right-radius: 3px;
+}
+
+QComboBox::down-arrow {
+    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
+}
+
+QComboBox::down-arrow:on { /* shift the arrow when popup is open */
+    top: 1px;
+    left: 1px;
+}

python/tests/assets/qss/QDockWidget.qss

@@ -0,0 +1,25 @@
+QDockWidget {
+    border: 1px solid lightgray;
+    titlebar-close-icon: url(close.png);
+    titlebar-normal-icon: url(undock.png);
+}
+
+QDockWidget::title {
+    text-align: left; /* align the text to the left */
+    background: lightgray;
+    padding-left: 5px;
+}
+
+QDockWidget::close-button, QDockWidget::float-button {
+    border: 1px solid transparent;
+    background: darkgray;
+    padding: 0px;
+}
+
+QDockWidget::close-button:hover, QDockWidget::float-button:hover {
+    background: gray;
+}
+
+QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
+    padding: 1px -1px -1px 1px;
+}

snippets/qss.json

@@ -0,0 +1,43 @@
+{
+  "RGB": {
+    "prefix": "rgb",
+    "body": ["rgb(${1:r}, ${2:g}, ${3:b})$0"],
+    "description": "RGB Color"
+  },
+  "RGBA": {
+    "prefix": "rgba",
+    "body": ["rgba(${1:r}, ${2:g}, ${3:b}, ${4:alpha})$0"],
+    "description": "RGBA Color"
+  },
+  "HSV": {
+    "prefix": "hsv",
+    "body": ["hsv(${1:h}, ${2:s}, ${3:v})$0"],
+    "description": "HSV Color"
+  },
+  "HSVA": {
+    "prefix": "hsva",
+    "body": ["hsva(${1:h}, ${2:s}, ${3:v}, ${4:alpha})$0"],
+    "description": "HSVA Color"
+  },
+  "Linear Gradient": {
+    "prefix": "qlineargradient",
+    "body": [
+      "qlineargradient(x1:${1:x1}, y1:${2:y1}, x2:${3:x2}, y2:${4:y2}, stop:${5:stop}, stop:${6:stop}, stop:${7:stop})$0"
+    ],
+    "description": "Linear Gradient"
+  },
+  "Radial Gradient": {
+    "prefix": "qradialgradient",
+    "body": [
+      "qradialgradient(cx:${1:cx}, cy:${2:cy}, radius:${3:radius}, fx:${4:fx}, fy:${5:fy}, stop:${6:stop}, stop:${7:stop})$0"
+    ],
+    "description": "Radial Gradient"
+  },
+  "Conical Gradient": {
+    "prefix": "qconicalgradient",
+    "body": [
+      "qconicalgradient(cx:${1:cx}, cy:${2:cy}, angle:${3:angle}, stop:${4:stop}, stop:${5:stop})$0"
+    ],
+    "description": "Conical Gradient"
+  }
+}