Stylelint Upgrade (#509)

* Upgrade Stylelint Packages

* Lint Existing Files

* Add Engines

* Bump Circleci Node Version

* Bump Circleci Node Version Pt. 2

* Create .nvmrc

* Switch to Legacy rgb

* Revert "Add Engines"

This reverts commit 244fb06.

* caniuse update

* Lint New Files

.circleci/config.yml

@@ -6,7 +6,7 @@ version: 2
 jobs:
   lint:
     docker:
-      - image: circleci/node:10.16.2
+      - image: circleci/node:14.18.2
     steps:
       - checkout
       - restore_cache:
@@ -22,7 +22,7 @@ jobs:
 
   test:
     docker:
-      - image: circleci/node:10.16.2
+      - image: circleci/node:14.18.2
     steps:
       - checkout
       - restore_cache:

.nvmrc

@@ -0,0 +1 @@
+v14.18.2

.stylelintrc.js

@@ -1,9 +1,12 @@
 module.exports = {
+  customSyntax: 'postcss-less',
   extends: 'stylelint-config-standard',
   plugins: ['stylelint-order'],
   rules: {
     'order/order': ['custom-properties', 'declarations'],
     'order/properties-alphabetical-order': true,
-    'font-weight-notation': 'numeric'
+    'color-function-notation': 'legacy',
+    'font-weight-notation': 'numeric',
+    'selector-class-pattern': '^([a-zA-z][a-zA-z0-9]*)([\-\_]+[a-zA-z0-9]+)*$'
   },
 };

package.json

@@ -95,11 +95,13 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4",
+    "postcss": "^8.4.5",
+    "postcss-less": "^5.0.0",
     "prettier": "^2.0.5",
     "redux-mock-store": "^1.5.3",
-    "stylelint": "^13.4.1",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.0.0",
+    "stylelint": "^14.2.0",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-order": "^5.0.0",
     "typescript": "^3.8.3"
   }
 }

src/admin/components/AddAttendanceForm/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .add-attendance-form {
   display: flex;
@@ -16,7 +16,7 @@
     font-weight: 500;
 
     &::after {
-      content: '';
+      content: "";
     }
 
     span {

src/admin/components/AddAttendancePage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .add-attendance-page {
   .title {

src/admin/components/AdminPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .admin-page {
   .title {

src/admin/components/AwardPointsForm/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .award-points-form {
   display: flex;
@@ -16,7 +16,7 @@
     font-weight: 500;
 
     &::after {
-      content: '';
+      content: "";
     }
   }
 

src/admin/components/AwardPointsPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .award-points-page {
   .title {

src/admin/components/CreateEventForm/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .create-event-form {
   display: flex;
@@ -16,7 +16,7 @@
     font-weight: 500;
 
     &::after {
-      content: '';
+      content: "";
     }
   }
 

src/admin/components/CreateEventPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .create-event-page {
   .title {

src/admin/components/EditEventForm/style.less

@@ -1,11 +1,11 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .edit-event-form {
   display: flex;
   width: 50%;
 
   .cover-preview {
-    border: 2px solid rgba(6, 89, 188, 0.2);
+    border: 2px solid rgba(6, 89, 188, 20%);
     height: 150px;
     margin: 0;
     margin-bottom: 20px;
@@ -25,7 +25,7 @@
     font-weight: 500;
 
     &::after {
-      content: '';
+      content: "";
     }
   }
 

src/admin/components/EditEventPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .edit-event-page {
   .title {

src/auth/components/AuthenticateCard/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .auth-card {
   align-items: center;

src/auth/components/EmailVerificationPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .Email-verification-page {
   color: @black;

src/auth/components/LoginLayout/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .login-layout {
   .header-holder {

src/auth/components/PasswordForm/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .password-card {
   padding-top: 64px;

src/auth/components/PasswordReset/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .reset-card {
   padding-top: 64px;

src/auth/components/RegisterForm/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .signup-card {
   padding-top: 64px;

src/auth/components/ResendEmailVerificationPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .Resend-Email-verification-page {
   color: @black;

src/auth/components/SignInForm/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .signin-card {
   padding-top: 64px;

src/event/components/EventCard/styles.less

@@ -1,7 +1,7 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .event-card {
-  border: 2px solid rgba(6, 89, 188, 0.2);
+  border: 2px solid rgba(6, 89, 188, 20%);
   border-radius: 10px;
   height: @event-height;
   -ms-overflow-style: none;
@@ -41,7 +41,7 @@
     }
 
     .info {
-      padding: 5% 10% 0 10%;
+      padding: 5% 10% 0;
       width: 100%;
 
       > * {
@@ -105,9 +105,9 @@
     }
 
     .divider {
-      border: 1px solid rgba(51, 51, 51, 0.2);
+      border: 1px solid rgba(51, 51, 51, 20%);
       bottom: 0;
-      margin: auto 10% 15px 10%;
+      margin: auto 10% 15px;
       position: absolute;
       width: 80%;
     }

src/event/components/EventCheckIn/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .checkin-card {
   border: 2px solid @blue-5;

src/layout/components/AboutPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .about-page {
   font-size: @general-body;

src/layout/components/BreadPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .BreadPage {
   .BreadPageFrame {

src/layout/components/DiscordPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .discord-page {
   .title {

src/layout/components/ErrorPage/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .Error-Page {
   h1 {

src/layout/components/Header/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .header-container {
   .header-padding {
@@ -11,15 +11,14 @@
     z-index: 1000;
 
     .header {
-      .noselect;
-
       align-items: center;
       background: white;
       color: white;
       display: flex;
       font-size: @nav-heading;
       height: @nav-header-height;
       padding: 0 40px;
+      user-select: none;
 
       .title {
         color: #333;

src/layout/components/HomePage/style.less

@@ -1,10 +1,10 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .home-page {
   color: @black;
 
   .border {
-    border-top: 1px solid rgba(51, 51, 51, 0.2);
+    border-top: 1px solid rgba(51, 51, 51, 20%);
     margin: 0 -5vw;
     width: calc(100% + 10vw);
 

src/layout/components/NavBarHorizontal/NavTileItem/style.less

@@ -1,4 +1,4 @@
-@import '../../../../styles/vars.less';
+@import "../../../../styles/vars.less";
 
 .nav-tile-item {
   display: inline-block;
@@ -9,7 +9,7 @@
   .divider {
     background: @blue-1;
     height: 5px;
-    margin: 10px 0 0 0;
+    margin: 10px 0 0;
     visibility: hidden;
     width: 64px;
   }

src/layout/components/NavBarHorizontal/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .navbar-horizontal {
   color: @black;

src/layout/components/NavBarVertical/style.less

@@ -1,12 +1,12 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .navbar-vertical-container {
   .padding {
     width: 268px;
   }
 
   .content {
-    border-right: 1px solid rgba(51, 51, 51, 0.2);
+    border-right: 1px solid rgba(51, 51, 51, 20%);
     color: #333;
     display: flex;
     flex-direction: column;
@@ -20,7 +20,7 @@
     width: 268px;
 
     .title {
-      color: rgba(51, 51, 51, 0.3);
+      color: rgba(51, 51, 51, 30%);
       font-size: @nav-heading;
       font-weight: 700;
       margin: 0;

src/layout/components/NavDropdown/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .nav-dropdown {
   background-color: @white;
@@ -15,7 +15,7 @@
     border-color: @white transparent;
     border-style: solid;
     border-width: 0 15px 20px;
-    content: '';
+    content: "";
     display: block;
     margin-left: -15px;
     position: absolute;

src/layout/components/NavListItem/style.less

@@ -1,4 +1,4 @@
-@import '../../../styles/vars.less';
+@import "../../../styles/vars.less";
 
 .nav-list-item {
   white-space: nowrap;

src/layout/components/NavProfile/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins.less';
-@import '../../../styles/vars.less';
+@import "../../../styles/mixins.less";
+@import "../../../styles/vars.less";
 
 .nav-width {
   width: @nav-drop-width;
@@ -60,7 +60,7 @@
     width: 100px;
 
     .name {
-      .hidden;
+      display: none;
     }
   }
 }

src/layout/components/PageLayout/style.less

@@ -1,5 +1,5 @@
-@import '../../../styles/vars.less';
-@import '../../../styles/mixins.less';
+@import "../../../styles/vars.less";
+@import "../../../styles/mixins.less";
 
 .page-layout-content {
   overflow: hidden;