Merge pull request #2889 from online-go/stylus-supremacy

Integrate stylus supremacy for .styl file formatting
online-go · Dec 15, 2024 · 6e0501d · 6e0501d
2 parents 03672d9 + 4399d1e
commit 6e0501d
Show file tree

Hide file tree

Showing 223 changed files with 7,499 additions and 5,358 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -3,6 +3,7 @@
 		"esbenp.prettier-vscode",
 		"dbaeumer.vscode-eslint",
 		"sysoev.language-stylus",
-		"streetsidesoftware.code-spell-checker"
+		"streetsidesoftware.code-spell-checker",
+		"thisismanta.stylus-supremacy"
 	],
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-    "stylusSupremacy.ignoreFiles": [
-        "[\"src/ogs.styl\"]"
-    ]
-}
+    "stylusSupremacy.ignoreFiles": ["src/ogs.styl"],
+    "stylusSupremacy.tabStopChar": "    ",
+    "stylusSupremacy.alwaysUseExtends": true
+}
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "lint": "eslint src/",
         "lintold": "eslint src/ --ext=.ts,.tsx -c .eslintrc.js",
         "lint:fix": "eslint --fix src/ --ext=.ts,.tsx -c .eslintrc.js",
+        "stylus-supremacy": "stylus-supremacy format --replace --options .vscode/settings.json 'src/**/*.styl'",
         "test": "jest",
         "fresh-test": "clear && jest",
         "gulp": "gulp",
@@ -86,6 +87,7 @@
         "pump": "^3.0.0",
         "source-map-loader": "^4.0.0",
         "stylus": "0.64.0",
+        "stylus-supremacy": "4.0.0",
         "supervisor": "^0.12.0",
         "ts-jest": "^29.2.5",
         "ts-loader": "^9.5.1",

diff --git a/src/components/ACLModal/ACLModal.styl b/src/components/ACLModal/ACLModal.styl
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 .ACLModal.Modal {
     width: 35rem;
     max-width: 100vw;
@@ -28,13 +27,11 @@
         }
     }
 
-
     .acl-entries {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 1rem;
-
     }
 
     .acl-entry {
@@ -45,6 +42,7 @@
         display: flex;
         flex-justify: spacing-between;
         margin: 1rem;
+
         .PlayerAutocomplete, .GroupAutocomplete {
             margin-right: 1rem;
         }

diff --git a/src/components/AIReviewStream/AIReviewStream.styl b/src/components/AIReviewStream/AIReviewStream.styl
@@ -14,8 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-
 .AIReviewStream {
     // here
 }
diff --git a/src/components/AccountWarning/AccountWarning.styl b/src/components/AccountWarning/AccountWarning.styl
@@ -14,8 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-
 .AccountWarning-backdrop {
     position: fixed;
     top: 0;
@@ -42,15 +40,12 @@
     width: 30rem;
     max-width: calc(95vw - 2rem);
     max-height: calc(95vh - 2rem);
-
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-
     z-index: z.account-warning;
-    themed background-color info
-    themed color colored-background-fg 
+    themed: background-color info;
+    themed: color colored-background-fg;
     border-radius: 0.5rem;
     padding: 1rem;
-
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -64,13 +59,12 @@
         padding: 0;
         margin: 0;
 
-
         strong {
             text-decoration: underline;
         }
     }
 
-    .space  {
+    .space {
         flex-grow: 1;
         height: 1rem;
     }
@@ -88,7 +82,7 @@
         font-size: 1.1rem;
     }
 
-    input[type="checkbox"] {
+    input[type='checkbox'] {
         margin-right: 0.5rem;
         width: 1.2rem;
         height: 1.2rem;
@@ -98,9 +92,6 @@
         cursor: pointer;
         margin-right: 1rem;
     }
-
-
-
 }
 
 .AccountWarningAck {
@@ -115,22 +106,18 @@
     width: 30rem;
     max-width: calc(95vw - 2rem);
     max-height: calc(95vh - 2rem);
-
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-
     z-index: z.account-warning;
-    themed background-color info
-    themed color colored-background-fg 
+    themed: background-color info;
+    themed: color colored-background-fg;
     border-radius: 0.5rem;
     padding: 1rem;
-
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
-
-    .space  {
+    .space {
         flex-grow: 1;
         height: 1rem;
     }
@@ -148,7 +135,7 @@
         font-size: 1.1rem;
     }
 
-    input[type="checkbox"] {
+    input[type='checkbox'] {
         margin-right: 0.5rem;
         width: 1.2rem;
         height: 1.2rem;

diff --git a/src/components/ActiveDroppedGameList/ActiveDroppedGameList.styl b/src/components/ActiveDroppedGameList/ActiveDroppedGameList.styl
@@ -1,6 +1,7 @@
 .dropped-games-header {
     display: flex;
     align-items: center;
+
     i {
         margin-left: 0.5rem;
         font-size: 2em;

diff --git a/src/components/Announcements/ActiveAnnouncements.styl b/src/components/Announcements/ActiveAnnouncements.styl
@@ -1,14 +1,14 @@
 
 .ActiveAnnouncements {
-    //text-align: left;
+    // text-align: left;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 60rem;
     margin: auto;
-    margin-top: 1.0rem;
+    margin-top: 1rem;
     text-align: center;
-    padding: .5rem;
+    padding: 0.5rem;
 
     div {
         text-align: left;
@@ -19,6 +19,7 @@
 
     .popup-menu {
         padding: 0;
+
         .popup-menu-button {
             margin-left: 5px;
         }

diff --git a/src/components/Announcements/Announcements.styl b/src/components/Announcements/Announcements.styl
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 .Announcements {
     position: absolute;
     top: navbar-height;
@@ -29,12 +28,13 @@
         width: 17rem;
         display: inline-flex;
         max-width: 100vw;
-        padding-top: .2rem;
-        padding-bottom: .2rem;
-        themed background-color bg
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+        themed: background-color bg;
         align-items: center;
         box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.16);
         overflow: hidden;
+
         .fa-times-circle {
             padding: 0.5rem;
             cursor: pointer;

diff --git a/src/components/Announcements/TournamentIndicator.styl b/src/components/Announcements/TournamentIndicator.styl
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 .TournamentIndicator {
     display: inline-flex;
     flex-direction: column;
@@ -25,18 +24,18 @@
 
     .fa-trophy {
         font-size: 0.9rem;
-        //color: #E7DB00;
+        // color: #E7DB00;
         color: gold;
-
-        //text-stroke: 1px black;
-        text-shadow: 0px 0px 0 #888, -1px -1px 0 #888,  1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
+        // text-stroke: 1px black;
+        text-shadow: 0px 0px 0 #888, -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
     }
 
     .time {
         font-size: font-size-smaller;
         padding-bottom: -5px;
     }
 }
+
 .TournamentIndicator:hover {
     text-decoration: none;
 

diff --git a/src/components/AnnulQueueModal/AnnulQueueModal.styl b/src/components/AnnulQueueModal/AnnulQueueModal.styl
@@ -28,11 +28,10 @@
         left: 0px;
         bottom: 0px;
         border-right: 1px solid transparent;
-        themed border-color shade3;
+        themed: border-color shade3;
         overflow-y: scroll;
         overflow-x: hidden;
         overscroll-behavior: contain;
-
         -ms-overflow-style: none; /* Internet Explorer 10+ */
         scrollbar-width: none; /* Firefox */
     }
@@ -44,14 +43,12 @@
     .game-container {
         width: 85%;
         height: 90%;
-
         float: right;
         position: absolute;
         top: 0px;
         right: 0px;
         overflow-y: scroll;
-
-         -ms-overflow-style: none; /* Internet Explorer 10+ */
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
         scrollbar-width: none; /* Firefox */
     }
 
@@ -101,12 +98,12 @@
     }
 
     .modal-actions, .close {
-        margin: 0 0px;     
+        margin: 0 0px;
     }
 
     .strikethrough {
         text-decoration: line-through;
-        color: #444; 
+        color: #444;
     }
 
     ul {
@@ -142,7 +139,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-
     }
 
     .icon-button {
@@ -160,20 +156,17 @@
         box-shadow: none;
     }
 
-    .nav-arrow:hover i,
-    .nav-arrow:focus i {
+    .nav-arrow:hover i, .nav-arrow:focus i {
         transform: scale(1.3);
         color: #2196f3;
     }
 
-
-    .nav-arrow:hover,
-    .nav-arrow:focus {
+    .nav-arrow:hover, .nav-arrow:focus {
         background: none;
         border: none;
         box-shadow: none;
     }
-    
+
     .nav-arrow.left {
         margin-right: 5px;
     }
@@ -186,11 +179,11 @@
         outline: none;
     }
 
-
     .nav-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;
+
         span {
             font-size: 1.1rem;
         }
@@ -205,11 +198,10 @@
     }
 
     .gamelist-nav .fa:hover {
-        transform: scale(1.3); 
+        transform: scale(1.3);
         color: #2196f3;
     }
 
-
     .AnnulOverlay {
         min-height: 100%;
         min-width: 100%;
@@ -222,7 +214,7 @@
         align-items: center;
         width: 100%;
         height: 100%;
-        themed background-color bg
+        themed: background-color bg;
     }
 
     .spinner-container {
@@ -238,6 +230,7 @@
         0% {
             transform: rotate(0deg);
         }
+
         100% {
             transform: rotate(360deg);
         }
@@ -255,11 +248,11 @@
 }
 
 .bg-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 1;
 }