Merge pull request #6933 from TheThingsNetwork/fix/styles-tooling

Reintroduce stylus linting and various stylus updates/fixes

.github/workflows/js.yml

@@ -39,6 +39,8 @@ jobs:
         run: tools/bin/mage -v jsSDK:lint
       - name: Lint frontend code
         run: tools/bin/mage -v js:lint
+      - name: Lint stylus files
+        run: tools/bin/mage -v styl:lint
       - name: Check for diff
         run: tools/bin/mage git:diff
 

config/.stylelintrc.yaml

@@ -0,0 +1,39 @@
+extends:
+  - 'stylelint-stylus/standard'
+rules:
+  color-no-hex: true
+  color-named: 'never'
+  declaration-no-important: true
+  stylus/at-rule-no-unknown: true
+  stylus/property-no-unknown: true
+  stylus/selector-type-no-unknown: true
+  stylus/at-extend-style: null
+  stylus/at-rule-empty-line-before: null
+  stylus/at-rule-name-space-after: null
+  stylus/block-closing-brace-empty-line-before: null
+  stylus/block-closing-brace-newline-after: null
+  stylus/block-closing-brace-newline-before: 'always-multi-line'
+  stylus/block-opening-brace-newline-after: 'always-multi-line'
+  stylus/block-opening-brace-space-after: 'always-single-line'
+  stylus/block-opening-brace-space-before: 'always'
+  stylus/color-hex-case: 'upper'
+  stylus/declaration-colon: 'always'
+  stylus/hash-object-property-comma: 'always'
+  stylus/indentation: 2
+  stylus/media-feature-colon: 'always'
+  stylus/no-at-require: null
+  stylus/no-eol-whitespace: true
+  stylus/number-leading-zero: 'never'
+  stylus/number-no-trailing-zeros: true
+  stylus/pythonic: 'always'
+  stylus/selector-list-comma: 'always'
+  stylus/selector-list-comma-newline-after: 'always-multi-line'
+  stylus/selector-list-comma-space-after: 'always-single-line'
+  stylus/selector-list-comma-space-before: 'never'
+  stylus/selector-pseudo-class-case: 'lower'
+  stylus/semicolon: 'never'
+  stylus/single-line-comment-double-slash-space-after: 'always'
+  stylus/single-line-comment-no-empty: null
+  stylus/single-line-comment:
+    - 'always'
+    - style: 'double-slash'

config/webpack.config.babel.js

@@ -26,7 +26,6 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import ShellPlugin from 'webpack-shell-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
-import nib from 'nib'
 
 import pjson from '../package.json'
 
@@ -125,7 +124,7 @@ export const styleConfig = {
         modules: {
           exportLocalsConvention: 'camelCase',
           localIdentName: env({
-            production: '[hash:base64:10]',
+            production: '[hash:base64:4]',
             development: '[local]-[hash:base64:4]',
           }),
         },
@@ -136,7 +135,6 @@ export const styleConfig = {
       options: {
         stylusOptions: {
           import: [path.resolve(context, 'pkg/webui/styles/include.styl')],
-          use: nib(),
         },
       },
     },

package.json

@@ -20,10 +20,10 @@
     "@babel/register": "^7.23.7",
     "@babel/runtime-corejs2": "^7.23.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@storybook/addon-actions": "^7.6.12",
     "@storybook/addon-designs": "^7.0.7",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-mdx-gfm": "^7.5.3",
-    "@storybook/addon-actions": "^7.6.12",
     "@storybook/cli": "^7.6.12",
     "@storybook/react": "^7.6.12",
     "@storybook/react-webpack5": "^7.6.12",
@@ -67,8 +67,9 @@
     "pg": "^8.11.3",
     "prettier": "^3.2.5",
     "react-refresh": "^0.14.0",
-    "stylint": "^2.0.0",
     "storybook": "^7.6.12",
+    "stylelint": "^16.2.1",
+    "stylelint-stylus": "^1.0.0",
     "stylus": "^0.62.0",
     "stylus-loader": "^8.1.0",
     "wait-on": "^7.2.0",
@@ -165,5 +166,8 @@
   "eslintConfig": {
     "extends": "./config/eslintrc.yaml"
   },
+  "stylelint": {
+    "extends": "./config/.stylelintrc.yaml"
+  },
   "prettier": "./config/.prettierrc.js"
 }

pkg/webui/account/views/front/front.styl

@@ -44,7 +44,7 @@
   background-image: url('../../../assets/img/layout/bg/login-visual.jpg')
   background-size: cover
   background-position: left
-  box-shadow: inset 60px 0 60px rgba(0,0,0,0.08)
+  box-shadow: inset 60px 0 60px rgba(0,0,0,.08)
 
 +media-query($bp.l)
   .visual
@@ -82,9 +82,9 @@
 .title
   color: var(--c-text-brand-normal)
   margin-top: 0
-  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active))
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
   font-weight: 200
   font-size: $fs.xl3
   +media-query($bp.s)
@@ -110,8 +110,8 @@
     flex-direction: row
   +media-query($bp.s)
     button, a
-      margin-bottom: $cs.s !important
-      margin-right: 0 !important
+      margin-bottom: $cs.s
+      margin-right: 0
 
 .footer
   position: fixed

pkg/webui/account/views/overview/overview.styl

@@ -14,5 +14,5 @@
 
 .top
   padding: $ls.xl 0
-  diplay: flex
+  display: flex
   justify-content: center

pkg/webui/components/button/button.styl

@@ -186,6 +186,7 @@
 
   &.busy:not(.naked),
   &.busy
+    // stylelint-disable-next-line declaration-no-important
     color: transparent !important
     position: relative
     svg
@@ -225,5 +226,7 @@
     margin-right: $cs.xs
 
     +media-query($bp.s)
+      // stylelint-disable declaration-no-important
       margin-bottom: $cs.s !important
       margin-right: 0 !important
+      // stylelint-enable declaration-no-important

pkg/webui/components/checkbox/checkbox.styl

@@ -32,7 +32,7 @@
   color: var(--c-text-neutral-light)
 
   .checkbox
-    opacity .4
+    opacity: .4
 
 .checkbox
   position: relative
@@ -63,7 +63,7 @@
   input:checked ~ .checkmark:after
     opacity: 1
     transform: rotate(45deg) scale(1) translate(-50%, -50%)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .checkmark
     border-color: var(--c-text-brand-normal)

pkg/webui/components/dropdown/dropdown.styl

@@ -18,7 +18,7 @@ ul.dropdown
   border: 1px solid var(--c-border-neutral-normal)
   list-style-type: none
   background: var(--c-bg-neutral-min)
-  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, .06)
   position: absolute
   padding: $cs.xs
   width: max-content

pkg/webui/components/footer/footer.styl

@@ -23,33 +23,33 @@ $fh = 'calc(%s - 1px)' % $footer-height
   flex: none
   background-color: var(--c-bg-neutral-min)
   box-sizing: border-box
-  
+
   +media-query-min($bp.xs)
     padding-left: $cs.xs
     height: $footer-height
   +media-query($bp.xs)
     min-height: $footer-height * 2
     flex-direction: column
-  
+
   .language
     position: relative
     height: 100%
 
     &-dropdown
       bottom: $fh
       left: 0
-  
+
   &.transparent
     +media-query-min($bp.s)
       .footer-section
         border: 0
         background-color: transparent
 
         &.interactive:hover
-          background-color: rgba(255,255,2555,0.1)
+          background-color: rgba(255,255,2555,.1)
 
       .right
-          color: var(--c-bg-neutral-min)
+        color: var(--c-bg-neutral-min)
 
 .link
   color: var(--c-text-neutral-light)
@@ -79,7 +79,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     width: 100%
     justify-content: space-between
     align-items: center
-  
+
 .footer-section
   height: $fh
   display: flex
@@ -91,7 +91,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
 
   &:not(.interactive)
     padding: 0 $cs.s
-  
+
   &-button
     reset-button()
     text-decoration: none
@@ -103,7 +103,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     & > div
       display: flex
       align-items: center
-    
+
   &:not(.primary)
     border-normal('left')
     background-color: var(--c-bg-neutral-min)
@@ -113,6 +113,6 @@ $fh = 'calc(%s - 1px)' % $footer-height
   &.primary
     background-color: var(--c-text-brand-normal)
     color: var(--c-bg-neutral-min)
-    
+
     &.interactive:hover
       background-color: hoverize(var(--c-text-brand-normal))

pkg/webui/components/form/field/field.styl

@@ -37,7 +37,7 @@
   &:not(.has-tooltip)
     &.required
       .label::after
-        margin-left: 0.1rem
+        margin-left: .1rem
 
   &.grow
     flex-grow: 1
@@ -132,7 +132,7 @@
 
       &:not(:last-child)
         margin: 0 0 $cs.s 0
-  
+
     .tooltip-links
       display: flex
       justify-content: space-between
@@ -187,4 +187,4 @@
   color: var(--c-text-warning-normal)
 
 .disabled .info-area
-    color: var(--c-text-neutral-light)
+  color: var(--c-text-neutral-light)

pkg/webui/components/icon/story.styl

@@ -14,7 +14,7 @@
 
 .wrapper
   span:first-child
-      margin-right: .6rem
+    margin-right: .6rem
 
   div
     border-dark()

pkg/webui/components/key-value-map/key-value-map.styl

@@ -17,4 +17,4 @@
   flex-grow: 1
 
   &-index-as-key
-    flex-grow: 0.25
+    flex-grow: .25

pkg/webui/components/link/link.styl

@@ -52,7 +52,7 @@
   nudge('up', 2px)
   margin-left: .11rem
   margin-right: .1rem
-  font-size: 0.9rem
+  font-size: .9rem
 
 .doc-icon
   nudge('up')

pkg/webui/components/map/map.styl

@@ -18,6 +18,7 @@
   height: 100%
 
 .click
+  // stylelint-disable-next-line declaration-no-important
   cursor: crosshair !important
 
 .container
@@ -29,6 +30,8 @@
   &.widget
     height: 25rem
 
+// stylelint-disable
+
   :global {
   .leaflet-pane,
   .leaflet-tile,
@@ -618,3 +621,5 @@
     border-right-color: #fff
     }
   }
+
+// stylelint-enable

pkg/webui/components/mobile-menu/mobile-menu.styl

@@ -27,15 +27,15 @@ ul.mobile-dropdown
       padding: $cs.l 0
 
   hr
-    height: 0.35rem
+    height: .35rem
     margin: 0
 
 .user-header
   display: flex
   justify-content: space-between
   padding: $cs.xl $cs.l
   align-items: center
-  border-top: 0.35rem solid var(--c-border-neutral-light)
+  border-top: .35rem solid var(--c-border-neutral-light)
 
 .user-icon
   margin-right: $cs.xs

pkg/webui/components/notification/details/details.styl

@@ -24,11 +24,11 @@
     background-color: var(--c-bg-neutral-semilight)
     color: var(--c-text-neutral-heavy)
     font-size: $fs.s
-    y-overflow: auto
     padding: $cs.s
     color: var(--c-text-neutral-heavy)
     margin: (-1 * $ls.m) 0 0 0
     box-sizing: border-box
 
   &-button
+    // stylelint-disable-next-line declaration-no-important
     margin-right: 0 !important

pkg/webui/components/panel/toggle/toggle.styl

@@ -31,7 +31,7 @@
 
     &-active
       color: var(--c-text-neutral-min)
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .05)
       background: var(--c-bg-neutral-heavy)
       font-weight: $fwv2.regular
 

pkg/webui/components/profile-dropdown/profile-dropdown.styl

@@ -17,6 +17,7 @@
   position: relative
 
   button
+    // stylelint-disable-next-line declaration-no-important
     padding: 0 $cs.s !important
 
 .brand-logo

pkg/webui/components/radio-button/radio-button.styl

@@ -30,7 +30,7 @@
   color: var(--c-text-neutral-light)
 
   .dot
-    opacity .4
+    opacity: .4
 
 .radio
   nudge('up')
@@ -61,7 +61,7 @@
   input:checked ~ .dot:after
     opacity: 1
     transform: scale(1)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .dot
     border-color: var(--c-text-brand-normal)