VACMS-3629: automatically lint custom (s)css (#3630)

* Automatically lint all custom (s)css

* Update all custom (s)css to pass linting rules

* Update composer.json

* Use github actions to run stylelint instead of yaml-tests

* [docs] Update code review doc

* sudo make me a sandwich

* Run stylelint as pre-commit check if lando is available

* Ignore pushes to master branch for stylelint checks

* [docs] Add code style IDE plugin documentation

* Commit broken style to verify gh actions test

* Use reviewdog with stylelint

* Fix CSS style issues

* Update to only show errors from the current PR

Author: acrollet

.github/workflows/stylelint-modules.yml

@@ -0,0 +1,20 @@
+name: stylelint-modules
+on: [pull_request]
+jobs:
+  stylelint:
+    name: runner / stylelint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: stylelint
+
+        # TODO: update to use reviewdog/action-stylelint@v1 when possible.
+        uses: acrollet/action-stylelint@master
+        with:
+          fail_on_error: true
+          github_token: ${{ secrets.github_token }}
+          packages: 'stylelint-config-sass-guidelines stylelint-order'
+          reporter: github-pr-review
+          stylelint_config: '.stylelintrc'
+          stylelint_input: 'docroot/modules/custom/**/*.css'
+

.github/workflows/stylelint-themes.yml

@@ -0,0 +1,20 @@
+name: stylelint-themes
+on: [pull_request]
+jobs:
+  stylelint:
+    name: runner / stylelint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: stylelint
+
+        # TODO: update to use reviewdog/action-stylelint@v1 when possible.
+        uses: acrollet/action-stylelint@master
+        with:
+          fail_on_error: true
+          github_token: ${{ secrets.github_token }}
+          packages: 'stylelint-config-sass-guidelines stylelint-order'
+          reporter: github-pr-review
+          stylelint_config: '.stylelintrc'
+          stylelint_input: 'docroot/themes/custom/**/*.scss'
+

.stylelintrc

@@ -0,0 +1,26 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "max-nesting-depth": 5,
+    "property-no-vendor-prefix": null,
+    "selector-class-pattern": null,
+    "selector-max-compound-selectors": 7,
+    "selector-max-id": 1,
+    "selector-no-qualifying-type": [
+      true,
+      {
+        "ignore": [
+          "class"
+        ]
+      }
+    ]
+  }
+}

READMES/code-review.md

@@ -88,6 +88,7 @@ The following automated code tools must pass before a Pull Request can be merged
 
 * PHPCS
 * PHPMD
+* stylelint
 
 ## Definition of Done
 

READMES/local.md

@@ -85,6 +85,17 @@ This occurs because Drupal checks and hardens file permissions under the setting
 
 ```$settings['skip_permissions_hardening'] = TRUE;```
 
+## IDE plugins
+There are plugins available to provide in-line style checking according to project standards.
+
+### PHPCS
+- [PhpStorm](https://www.jetbrains.com/help/phpstorm/using-php-code-sniffer.html)
+- [VS Code](https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs)
+
+### Stylelint
+- [PhpStorm](https://www.jetbrains.com/help/phpstorm/using-stylelint-code-quality-tool.html)
+- [VS Code](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+
 ## Scripts
 There are some scripts created to help with managing the Drupal site locally.
 

composer.json

@@ -395,6 +395,18 @@
         "va:proxy:sshuttle": [
             "sudo -E sshuttle -r [email protected] -e 'ssh -A ' 10.0.0.0/8"
         ],
+        "va:test:lint-css-all": [
+            "npm install",
+            "npm run stylelint-modules && npm run stylelint-themes"
+        ],
+        "va:test:module-lint-css": [
+            "npm install",
+            "npm run stylelint-modules"
+        ],
+        "va:test:theme-lint-scss": [
+            "npm install",
+            "npm run stylelint-themes"
+        ],
         "va:test:accessibility": [
             "npm install --only=production",
             "npm test"

docroot/modules/custom/va_gov_backend/css/system_style.css

@@ -1,18 +1,18 @@
 #block-sitealert {
+  bottom: 0;
+  box-sizing: border-box;
+  left: 0;
   position: fixed;
-  bottom: 0px;
-  left: 0px;
   width: 100%;
   z-index: 500;
-  box-sizing: border-box;
 }
 
 #block-sitealert div.site-alert div.severity-low,
 #block-sitealert div.site-alert div.severity-medium,
 #block-sitealert div.site-alert div.severity-high {
-  margin-bottom: 0;
   background-image: none;
-  color: black;
+  color: #000;
+  margin-bottom: 0;
 }
 
 #block-sitealert div.site-alert div.severity-low {
@@ -24,19 +24,19 @@
 }
 
 #block-sitealert div.site-alert div.severity-high {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100vh;
   background-color: rgb(255, 241, 210);
   background-color: rgba(255, 241, 210, 0.9);
+  bottom: 0;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  right: 0;
   z-index: 800;
 }
 
-#block-sitealert div.site-alert div.severity-high div.text {
+#block-sitealert div.severity-high div.text {
   background-color: rgb(255, 241, 210);
-  margin-top: 50vh;
   margin-left: 25%;
   margin-right: 25%;
+  margin-top: 50vh;
 }

docroot/modules/custom/va_gov_user/css/sections_accordion.css

@@ -5,7 +5,7 @@
 }
 
 .item-list ul.sections .item-list ul {
-  background-color: #ffffff;
+  background-color: #fff;
   margin: 0;
   padding: 0 0 0 2em;
 }
@@ -16,7 +16,7 @@
 
 .item-list > ul.sections > li {
   border: 1px solid #aeb0b5;
-  border-bottom: none;
+  border-bottom: hidden;
   padding: 0;
   position: relative;
 }
@@ -40,11 +40,11 @@
 }
 
 ul.sections li .toggle {
+  background-color: transparent;
   background-image: url('../images/chevron-disc-down.svg');
-  background-size: 1rem;
-  background-position: 0.75rem .75rem;
+  background-position: 0.75rem 0.75rem;
   background-repeat: no-repeat;
-  background-color: transparent;
+  background-size: 1rem;
   border: 0;
   cursor: pointer;
   display: block;