feat(mono): Support auto-sorting properties in css files (#18937)

Closes AUTH-2109

Sort CSS properties in CSS files by smacss convention and enforce that sorting with lint.

Like the import order sorting, this should be relatively hands off and work on-save in most IDEs, however there is a new format-css makefile command that will sort CSS files according to the plugin rules.

Author: mjhuff

.stylelintrc.js

@@ -1,14 +1,5 @@
 module.exports = {
-  processors: [
-    [
-      'stylelint-processor-styled-components',
-      {
-        ignoreFiles: ['**/*.css'],
-      },
-    ],
-  ],
-
-  extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
+  extends: ['stylelint-config-standard', 'stylelint-config-idiomatic-order'],
 
   ignoreFiles: [
     'api/**',

Makefile

@@ -215,7 +215,7 @@ test-js: test-js-internal
 
 # lints and typechecks
 .PHONY: lint
-lint: lint-py lint-js lint-json lint-css check-js circular-dependencies-js
+lint: lint-py lint-js lint-json lint-css check-js check-css circular-dependencies-js
 
 PYTHON_LINT_TARGETS  = $(addsuffix -py-lint, $(PYTHON_DIRS))
 
@@ -246,7 +246,7 @@ lint-css:
 	yarn stylelint "**/*.css" "**/*.js"
 
 .PHONY: format
-format: format-js format-py
+format: format-js format-py format-css
 
 PYTHON_FORMAT_TARGETS := $(addsuffix -py-format, $(PYTHON_DIRS))
 
@@ -260,6 +260,10 @@ format-py: $(PYTHON_FORMAT_TARGETS)
 format-js:
 	yarn prettier --ignore-path .eslintignore --write $(FORMAT_FILE_GLOB)
 
+.PHONY: format-css
+format-css:
+	yarn stylelint "**/*.css" --fix
+
 .PHONY: check-js
 check-js: build-ts
 

app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css

@@ -10,26 +10,26 @@
 .simple-keyboard.oddTheme1.hg-theme-default .hg-layout-default {
   width: 100%;
   height: 100%;
+  padding: 8px;
   background-color: #cbcccc; /* grey35 */
   font-family: 'Public Sans', sans-serif;
-  padding: 8px;
 }
 
 .hg-layout-default .hg-row .hg-button,
 .hg-layout-shift .hg-row .hg-button,
 .hg-layout-numbers .hg-row .hg-button {
+  padding: 10px 22px;
+  background-color: #fff;
   color: #16212d;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
-  background-color: #ffffff;
-  padding: 10px 22px;
 }
 
 .simple-keyboard .hg-button:active {
-  color: #16212d;
   background-color: #dedede; /* grey30 */
+  color: #16212d;
 }
 
 .alphanumericKeyboard .hg-button {
@@ -41,6 +41,7 @@
 .hg-layout-shift .hg-row:not(:last-child) {
   grid-column: 8px;
 }
+
 .hg-row:not(:last-child) .hg-button {
   width: 94px;
 }
@@ -53,10 +54,12 @@ the rest is the same */
   /* adding 3px because package's css add margin-right:5px */
   grid-gap: 3px;
 }
+
 .hg-layout-default .hg-row:last-child .hg-button,
 .hg-layout-shift .hg-row:last-child .hg-button {
   width: 97px;
 }
+
 .hg-layout-default .hg-row:last-child .hg-button:first-child,
 .hg-layout-default .hg-row:last-child .hg-button:last-child,
 .hg-layout-shift .hg-row:last-child .hg-button:first-child,
@@ -65,15 +68,15 @@ the rest is the same */
 }
 
 .hg-layout-numbers .hg-row .hg-button {
-  height: 44.75px;
   width: 330px !important;
+  height: 44.75px;
 }
 
 .hg-candidate-box {
   max-width: 400px;
 }
 
 li.hg-candidate-box-list-item {
-  height: 60px;
   width: 60px;
+  height: 60px;
 }

app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css

@@ -11,9 +11,9 @@
 .simple-keyboard.oddTheme1.hg-theme-default {
   width: 100%;
   height: 100%;
+  padding: 8px;
   background-color: #cbcccc; /* grey35 */
   font-family: 'Public Sans', sans-serif;
-  padding: 8px;
 }
 
 .hg-layout-default .hg-row,
@@ -29,21 +29,21 @@
 }
 
 .simple-keyboard .hg-button:active {
-  color: #16212d;
   background-color: #dedede;
+  color: #16212d;
 }
 
 .hg-layout-default .hg-row .hg-button,
 .hg-layout-shift .hg-row .hg-button,
 .hg-layout-symbols .hg-row .hg-button,
 .hg-layout-numbers .hg-row .hg-button {
+  padding: 10px 22px;
+  background-color: #fff;
   color: #16212d;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
-  background-color: #ffffff;
-  padding: 10px 22px;
 }
 
 .hg-layout-default .hg-row:nth-child(1) .hg-button,
@@ -100,15 +100,15 @@
 }
 
 .simple-keyboard .hg-button:active {
-  color: #16212d;
   background-color: #e3e3e3; /* grey30 */
+  color: #16212d;
 }
 
 .hg-candidate-box {
   max-width: 400px;
 }
 
 li.hg-candidate-box-list-item {
-  height: 60px;
   width: 60px;
+  height: 60px;
 }

app/src/atoms/SoftwareKeyboard/IndividualKey/index.css

@@ -1,12 +1,13 @@
 /* stylelint-disable */
 
 .simple-keyboard .hg-button {
-  text-align: center;
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;
+  text-align: center;
 }
+
 .simple-keyboard .hg-button:active {
-  color: #16212d;
   background-color: #dedede; /* grey30 */
+  color: #16212d;
 }

app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css

@@ -10,10 +10,10 @@
 .simple-keyboard.oddTheme1.hg-theme-default {
   width: 100%;
   height: 100%;
+  padding: 8px;
   border-radius: 0;
   background-color: #cbcccc; /* grey35 */
   font-family: 'Public Sans', sans-serif;
-  padding: 8px;
 }
 
 .hg-layout-intKeyboard .hg-row,
@@ -25,12 +25,12 @@
 
 /* ToDo (kk:04/04/2024) this important will be removed when I refactor the entire css */
 .numerical-keyboard .hg-row .hg-button {
-  text-align: center;
+  height: 75px !important;
+  padding: 10px 22px;
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;
-  height: 75px !important;
-  padding: 10px 22px;
+  text-align: center;
 }
 
 .hg-layout-intKeyboard .hg-row:nth-child(-n + 3) .hg-button,
@@ -50,6 +50,6 @@
 }
 
 .simple-keyboard .hg-button:active {
-  color: #16212d;
   background-color: #dedede; /* grey30 */
+  color: #16212d;
 }

app/src/atoms/SoftwareKeyboard/index.css

@@ -1,18 +1,24 @@
 /* stylelint-disable */
 
 .hg-theme-default {
-  background-color: #ececec;
-  border-radius: 5px;
-  box-sizing: border-box;
-  font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue,
-    Helvetica, Arial, Lucida Grande, sans-serif;
   overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
   padding: 5px;
+  border-radius: 5px;
+  background-color: #ececec;
+  font-family:
+    HelveticaNeue-Light,
+    Helvetica Neue Light,
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    Lucida Grande,
+    sans-serif;
   touch-action: manipulation;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  width: 100%;
 }
 
 .hg-theme-default .hg-button span {
@@ -52,16 +58,16 @@
 }
 
 .hg-theme-default .hg-button {
+  display: flex;
+  box-sizing: border-box;
   align-items: center;
-  background: #fff;
-  border-bottom: 1px solid #b5b5b5;
+  justify-content: center;
+  padding: 5px;
   border-radius: 5px;
+  border-bottom: 1px solid #b5b5b5;
+  background: #fff;
   box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
   cursor: pointer;
-  display: flex;
-  justify-content: center;
-  padding: 5px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
@@ -74,11 +80,11 @@
 }
 
 .hg-theme-default.hg-layout-numeric .hg-button {
-  align-items: center;
   display: flex;
+  width: 33.3%;
   height: 60px;
+  align-items: center;
   justify-content: center;
-  width: 33.3%;
 }
 
 .hg-theme-default .hg-button.hg-button-com {
@@ -103,13 +109,13 @@
 }
 
 .hg-candidate-box {
-  background: #ececec;
-  border-bottom: 2px solid #b5b5b5;
-  border-radius: 5px;
+  position: absolute;
   display: inline-flex;
-  margin-top: -10px;
   max-width: 272px;
-  position: absolute;
+  border-radius: 5px;
+  border-bottom: 2px solid #b5b5b5;
+  margin-top: -10px;
+  background: #ececec;
   transform: translateY(-100%);
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -119,17 +125,17 @@
 ul.hg-candidate-box-list {
   display: flex;
   flex: 1;
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 li.hg-candidate-box-list-item {
-  align-items: center;
   display: flex;
+  width: 40px;
   height: 40px;
+  align-items: center;
   justify-content: center;
-  width: 40px;
 }
 
 li.hg-candidate-box-list-item:hover {
@@ -141,21 +147,21 @@ li.hg-candidate-box-list-item:active {
   background: rgba(0, 0, 0, 0.1);
 }
 
-.hg-candidate-box-prev:before {
+.hg-candidate-box-prev::before {
   content: '◄';
 }
 
-.hg-candidate-box-next:before {
+.hg-candidate-box-next::before {
   content: '►';
 }
 
 .hg-candidate-box-next,
 .hg-candidate-box-prev {
+  display: flex;
   align-items: center;
+  padding: 0 10px;
   color: #969696;
   cursor: pointer;
-  display: flex;
-  padding: 0 10px;
 }
 
 .hg-candidate-box-next {