add css linting for css, less and scss, re #606

Merge request studip/studip!724

.gitignore

@@ -4,7 +4,8 @@
 composer
 node_modules
 nbproject
-.phplint-cache
+.caches/*
+.reports/*
 
 config/config_local.inc.php
 config/config.inc.php

.gitlab-ci.yml

@@ -37,61 +37,93 @@ stages:
     - sed -i "s%$PWD/%%" tests/_output/report.xml
 
 .artifacts:
-  common: &common
+  common: &common-artifacts
     when: always
     expire_in: 1 week
   tests: &test-artifacts
-    <<: *common
+    <<: *common-artifacts
     paths:
       - tests/_output
     reports:
       junit: tests/_output/report.xml
 
 .caches:
-  php: &php-cache
+  php: &composer-cache
     key: "php-$CI_COMMIT_REF_SLUG"
     paths:
       - composer/
-      - .phplint-cache
-  js: &js-cache
+      - .caches/phplint-cache
+  js: &npm-cache
     key: "js-$CI_COMMIT_REF_SLUG"
     paths:
       - node_modules/
-      - .eslintcache
+      - .caches/eslint-cache
+      - .caches/stylelint-cache
 
 lint-php:
   stage: checks
   needs: []
-  cache: *php-cache
+  cache: *composer-cache
   allow_failure: false
   interruptible: true
   before_script:
     - !reference [.scripts, install-composer]
+    - mkdir -p .reports
   script:
-    - php -d memory_limit=-1 composer/bin/phplint --xml report.xml
+    - php -d memory_limit=-1 composer/bin/phplint --xml .reports/phplint-report.xml --cache=.caches/phplint-cache
   artifacts:
-    <<: *common
+    <<: *common-artifacts
     paths:
-      - report.xml
+      - .reports/phplint-report.xml
     reports:
-      junit: report.xml
+      junit: .reports/phplint-report.xml
 
 lint-js:
   stage: checks
   needs: []
-  cache: *js-cache
+  cache: *npm-cache
   allow_failure: false
   interruptible: true
   before_script:
     - make npm
   script:
-    - npm run lint -- --cache
+    - npm run lint -- --cache --cache-location .caches/eslint-cache --format ./node_modules/eslint-junit/index.js
+  only:
+    changes:
+      - resources/assets/javascripts/**/*
+      - resources/vue/**/*
+  artifacts:
+    <<: *common-artifacts
+    paths:
+      - .reports/eslint-report.xml
+    reports:
+       junit: .reports/eslint-report.xml
+
+lint-css:
+  stage: checks
+  needs: []
+  cache: *npm-cache
+  allow_failure: false
+  interruptible: true
+  before_script:
+    - make npm
+  script:
+    - npm run css-lint -s -- --cache --cache-location .caches/stylelint-cache --custom-formatter node_modules/stylelint-junit-formatter --output-file .reports/stylelint-report.xml
+  only:
+    changes:
+      - resources/assets/stylesheets/**/*
+  artifacts:
+    <<: *common-artifacts
+    paths:
+      - .reports/stylelint-report.xml
+    reports:
+      junit: .reports/stylelint-report.xml
 
 test-unit:
   stage: tests
   needs: [lint-php]
   cache:
-    <<: *php-cache
+    <<: *composer-cache
     policy: pull
   allow_failure: false
   interruptible: true
@@ -107,7 +139,7 @@ test-functional:
   stage: tests
   needs: [lint-php]
   cache:
-    <<: *php-cache
+    <<: *composer-cache
     policy: pull
   services:
     - mariadb
@@ -125,7 +157,7 @@ test-jsonapi:
   stage: tests
   needs: [lint-php]
   cache:
-    <<: *php-cache
+    <<: *composer-cache
     policy: pull
   services:
     - mariadb

.phplint.yml

 path: ./
 jobs: 10
-cache: .phplint-cache
+cache: .caches/phplint-cache
 extensions:
   - php
 exclude:
-  - vendor
   - composer
+  - public/plugins_packages
+  - vendor

.stylelintrc.json

+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "alpha-value-notation": null,
+        "at-rule-empty-line-before": null,
+        "at-rule-no-vendor-prefix": null,
+        "block-closing-brace-empty-line-before": null,
+        "block-closing-brace-newline-after": null,
+        "block-closing-brace-newline-before": null,
+        "block-closing-brace-space-before": null,
+        "block-no-empty": null,
+        "block-opening-brace-newline-after": null,
+        "block-opening-brace-space-after": null,
+        "block-opening-brace-space-before": null,
+        "color-function-notation": null,
+        "color-hex-case": null,
+        "color-hex-length": null,
+        "color-no-invalid-hex": null,
+        "comment-empty-line-before": null,
+        "comment-whitespace-inside": null,
+        "declaration-bang-space-after": null,
+        "declaration-bang-space-before": null,
+        "declaration-block-no-duplicate-properties": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-block-semicolon-newline-after": null,
+        "declaration-block-semicolon-space-before": null,
+        "declaration-block-single-line-max-declarations": null,
+        "declaration-block-trailing-semicolon": null,
+        "declaration-colon-newline-after": null,
+        "declaration-colon-space-after": null,
+        "declaration-colon-space-before": null,
+        "declaration-empty-line-before": null,
+        "font-family-name-quotes": null,
+        "font-family-no-missing-generic-family-keyword": null,
+        "function-comma-space-after": null,
+        "function-comma-space-before": null,
+        "function-name-case": null,
+        "function-no-unknown": null,
+        "function-parentheses-newline-inside": null,
+        "function-parentheses-space-inside": null,
+        "function-url-quotes": null,
+        "hue-degree-notation": null,
+        "indentation": null,
+        "keyframes-name-pattern": null,
+        "length-zero-no-unit": null,
+        "max-empty-lines": null,
+        "max-line-length": null,
+        "media-feature-name-no-vendor-prefix": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "no-empty-first-line": null,
+        "no-empty-source": null,
+        "no-eol-whitespace": null,
+        "no-extra-semicolons": null,
+        "no-invalid-position-at-import-rule": null,
+        "no-irregular-whitespace": null,
+        "no-missing-end-of-source-newline": null,
+        "number-leading-zero": null,
+        "number-max-precision": null,
+        "number-no-trailing-zeros": null,
+        "property-no-vendor-prefix": null,
+        "rule-empty-line-before": null,
+        "selector-attribute-quotes": null,
+        "selector-class-pattern": null,
+        "selector-combinator-space-after": null,
+        "selector-combinator-space-before": null,
+        "selector-descendant-combinator-no-non-space": null,
+        "selector-id-pattern": null,
+        "selector-list-comma-newline-after": null,
+        "selector-no-vendor-prefix": null,
+        "selector-not-notation": null,
+        "selector-pseudo-element-colon-notation": null,
+        "shorthand-property-no-redundant-values": null,
+        "string-quotes": null,
+        "value-keyword-case": null,
+        "value-list-max-empty-lines": null,
+        "value-no-vendor-prefix": null
+    },
+    "overrides": [
+        {
+            "files": ["**/*.scss"],
+            "customSyntax": "postcss-scss",
+            "rules": {
+                "at-rule-no-unknown": null
+            }
+        },
+        {
+            "files": ["**/*.less"],
+            "customSyntax": "postcss-less"
+        }
+    ],
+    "ignoreFiles": [
+        "resource/assets/stylesheets/jquery-ui.structure.css",
+        "resources/assets/stylesheets/less/jquery-ui/*",
+        "resources/assets/stylesheets/vendor/*"
+    ]
+}

package.json

@@ -5,6 +5,7 @@
     "private": true,
     "scripts": {
         "lint": "eslint resources/assets/javascripts resources/vue",
+        "css-lint": "stylelint resources/assets/stylesheets",
         "wds": "webpack serve --progress --config webpack.dev-server.js",
         "webpack-dev": "webpack --config webpack.dev.js --mode development",
         "webpack-prod": "webpack --config webpack.prod.js --mode production",
@@ -48,6 +49,7 @@
         "easygettext": "^2.17.0",
         "es6-promise": "4.2.8",
         "eslint": "^7.32.0",
+        "eslint-junit": "^1.0.1",
         "eslint-plugin-vue": "7.7.0",
         "eslint-webpack-plugin": "^3.1.1",
         "expose-loader": "1.0.1",
@@ -74,7 +76,9 @@
         "pdfjs-dist": "^2.6.347",
         "portal-vue": "^2.1.7",
         "postcss": "^8.1.8",
+        "postcss-less": "^6.0.0",
         "postcss-loader": "4.1.0",
+        "postcss-scss": "^4.0.4",
         "sanitize-html": "^2.7.0",
         "sass": "^1.29.0",
         "sass-loader": "^10.1.0",
@@ -83,6 +87,9 @@
         "sticky-kit": "1.1.3",
         "stream-browserify": "^3.0.0",
         "style-loader": "^2.0.0",
+        "stylelint": "^14.9.1",
+        "stylelint-config-standard": "^26.0.0",
+        "stylelint-junit-formatter": "^0.2.2",
         "svgo": "^2.3.1",
         "tablesorter": "2.31.3",
         "vrp-vue-resizable": "1.2.7",
@@ -122,5 +129,8 @@
         "printWidth": 120,
         "singleQuote": true,
         "tabWidth": 4
+    },
+    "eslint-junit": {
+        "output": "./.reports/eslint-report.xml"
     }
 }

resources/assets/stylesheets/less/breakpoints.less

-//** Major Breakpoints
+// Major Breakpoints
 @major-breakpoint-tiny: 0;
 @major-breakpoint-small: 576px;
 @major-breakpoint-medium: 768px;

resources/assets/stylesheets/less/variables.less

@@ -13,12 +13,12 @@
 @font-size-h5:            @font-size-base;
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
-//** Unit-less `line-height` for use in components like buttons.
+// Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
-//** By default, this inherits from the `<body>`.
+// By default, this inherits from the `<body>`.
 @headings-font-family:    inherit;
 @headings-font-weight:    550;
 @headings-line-height:    1.1;
@@ -32,7 +32,7 @@
 @drag_and_drop_z_index:    1000;
 @drag_and_drop_border:     1px solid @base-color;
 
-//Avatar sizes:
+// Avatar sizes:
 @avatar-small:  25px;
 @avatar-medium: 100px;
 @avatar-normal: 250px;