@siemens/stylelint-config-scss 1.0.0-next.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License
+
+Copyright (c) Siemens 2018 - 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,316 @@
+# Siemens Lint
+
+Siemens Lint helps you to improve and keep the code quality of your project on
+a high level. It provides presets and plugins for various linters used at
+Siemens.
+
+We welcome contributions of further linting rules and configs to be added to
+this repo for various other programming languages and frameworks.
+
+**Presets available for following linters:**
+
+- [typescript-eslint](https://typescript-eslint.io/)
+- [Angular ESLint](https://github.com/angular-eslint/angular-eslint)
+- [stylelint](https://stylelint.io/)
+- [commitlint](https://commitlint.js.org/)
+- [Prettier](https://prettier.io/)
+
+**Plugins:**
+
+- [eslint-plugin-defaultvalue](./eslint-plugin-defaultvalue/README.md)
+  for [typescript-eslint](https://typescript-eslint.io/) to automatically
+  annotate the `@defaultValue` TSDoc tag
+
+## Installation
+
+Install `@siemens/*-config*` and their peer dependencies in your project (whichever you need):
+
+```bash
+npm install @siemens/stylelint-config-scss --save-dev --save-exact
+npm install @siemens/commitlint-config --save-dev --save-exact
+npm install @siemens/prettier-config --save-dev --save-exact
+npm install @siemens/eslint-config-typescript --save-dev --save-exact
+npm install @siemens/eslint-config-angular --save-dev --save-exact
+```
+
+**_Note_** _You should specify the exact versions of the packages above and
+their peer dependencies like `eslint` and its plugins, `stylelint`,
+`stylelint-config-sass-guidelines` and `@commitlint/config-conventional`. Rules
+will get changed in the patch releases._
+
+### ESLint
+
+#### TypeScript
+
+Include the ESLint preset in your root `eslint.config.mjs`:
+
+```js
+import path from 'path';
+import { fileURLToPath } from 'url';
+import typescriptEslint from 'typescript-eslint';
+import typescriptConfig from '@siemens/eslint-config-typescript';
+
+// mimic CommonJS variables
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default typescriptEslint.config({
+  extends: [...baseTypescriptConfig, prettier],
+  files: ['**/*.ts'],
+  languageOptions: {
+    parserOptions: {
+      project: ['tsconfig.json', 'tsconfig.app.json', 'tsconfig.spec.json', 'e2e/tsconfig.json']
+      tsconfigRootDir: __dirname
+    }
+  }
+});
+```
+
+> **Note:** to use less strict rules, use the `base` rules, by importing
+> `{ configBase }` instead.
+
+#### Angular
+
+Include the ESLint preset in your root `eslint.config.js` (not `.mjs`) and make
+sure `"type": "module"` is set in your root `package.json`:
+
+```js
+import path from 'path';
+import { fileURLToPath } from 'url';
+import typescriptEslint from 'typescript-eslint';
+import angularTypescriptConfig from '@siemens/eslint-config-angular';
+import angularTemplateConfig from '@siemens/eslint-config-angular/template';
+
+// mimic CommonJS variables
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const tsConfig = typescriptEslint.config({
+  extends: [...angularTypescriptConfig, prettier],
+  files: ['**/*.ts'],
+  languageOptions: {
+    parserOptions: {
+      project: ['tsconfig.json', 'tsconfig.app.json', 'tsconfig.spec.json', 'e2e/tsconfig.json']
+      tsconfigRootDir: __dirname
+    }
+  },
+  rules: {
+    '@angular-eslint/directive-selector': [
+      'error',
+      {
+        type: 'attribute',
+        prefix: 'app',
+        style: 'camelCase'
+      }
+    ],
+    '@angular-eslint/component-selector': [
+      'error',
+      {
+        type: 'element',
+        prefix: 'app',
+        style: 'kebab-case'
+      }
+    ]
+  }
+});
+
+export const templateConfig = typescriptEslint.config({
+  extends: [...angularTemplateConfig, prettier],
+  files: ['**/*.html']
+});
+
+export default typescriptEslint.config(...tsConfig, ...templateConfig);
+```
+
+For libraries and other things in the `projects` directory,
+make sure `"type": "module"` is set in the relevant `package.json`
+and create an additional
+`eslint.config.js` for each project that looks like this:
+
+```js
+import typescriptEslint from 'typescript-eslint';
+import { tsConfig, templateConfig } from '../../eslint.config.js';
+
+export default typescriptEslint.config(
+  {
+    extends: [...tsConfig],
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        project: ['projects/element-ng/tsconfig.lib.json', 'projects/element-ng/tsconfig.spec.json']
+      }
+    },
+    rules: {
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'si',
+          style: 'kebab-case'
+        }
+      ],
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'si',
+          style: 'camelCase'
+        }
+      ]
+    }
+  },
+  ...templateConfig
+);
+```
+
+The `@angular-eslint/builder` will also not automatically pick up the library
+config location, manually provide it in `angular.json`:
+
+```diff
+@@ -122,15 +125,11 @@
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ],
++           "eslintConfig": "path/to/project/eslint.config.js"
+          }
+        },
+```
+
+#### Migration from TSLint
+
+Also in `angular.json`, make sure to replace the TSLint related entries like
+this:
+
+```diff
+@@ -122,15 +125,11 @@
+          }
+        },
+        "lint": {
+-         "builder": "@angular-devkit/build-angular:tslint",
++         "builder": "@angular-eslint/builder:lint",
+          "options": {
+-           "tsConfig": [
+-             "tsconfig.app.json",
+-             "tsconfig.spec.json",
+-             "e2e/tsconfig.json"
+-           ],
+-           "exclude": [
+-             "**/node_modules/**"
++           "lintFilePatterns": [
++             "src/**/*.ts",
++             "src/**/*.html"
+            ]
+          }
+        },
+```
+
+> **Note:** to use less strict rules, which are derived from the upstream
+> Angular recommendation and more geared towards applications, use the `base`
+> rules, by importing `{ configBase }` instead.
+
+### Stylelint
+
+Include the stylelint preset in your `.stylelintrc.yml`:
+
+```yml
+extends:
+  - '@siemens/stylelint-config-scss/stylelintrc.yml'
+```
+
+### Commitlint
+
+Include the commitlint preset in your `package.json`:
+
+```json
+  "commitlint": {
+    "extends": [
+      "@siemens/commitlint-config/.commitlintrc.js"
+    ]
+  },
+
+// Optional: Pre-commit hook using husky: https://github.com/typicode/husky
+  "husky": {
+      "hooks": {
+        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+      }
+    },
+```
+
+### Prettier
+
+Include the shared Prettier config in your `package.json`:
+
+```json
+"prettier": "@siemens/prettier-config/.prettierrc.json",
+```
+
+### ESLint Plugin
+
+The usage of the ESLint plugin is documented [here](./eslint-plugin-defaultvalue/README.md).
+
+## Usage
+
+The preset will now be automatically used by `eslint` and `ng lint`. Please
+refer to the [Angular ESLint](https://github.com/angular-eslint/angular-eslint) and
+[ng lint](https://angular.io/cli/lint) documentation for more details.
+
+Add the commitlint, ESlint and stylelint scripts to your `package.json`:
+
+```json
+"scripts": {
+  "lint": "ng lint",
+  "lint:sass": "stylelint **.scss",
+  "lint:commit": "commitlint --from=origin/main",
+  "lint:all": "npm run lint:commit && npm run lint && npm run lint:sass"
+}
+```
+
+To fix ESLint issues automatically use:
+
+```json
+"scripts": {
+  "lint:fix": "ng lint --fix"
+}
+```
+
+To fix stylelint issues automatically use:
+
+```json
+"scripts": {
+  "lint:sass:fix": "stylelint --fix **.scss"
+}
+```
+
+Make sure to call the linters in your CI build chain in `.gitlab-ci.yml`:
+
+```yml
+lint:
+  stage: tests
+  script:
+    - npm install
+    - npm run lint:all
+```
+
+> **Note:** To make commitlint work in Gitlab CI, one needs to set the
+> `Git shallow clone` setting to `0` (found in project `settings` > `CI / CD`).
+> That way GitLab CI fetches all branches and tags each time.
+
+## Contributing
+
+Improvements are always welcome! Feel free to log a bug,
+write a suggestion or contribute code by creating a pull request.
+All details are listed in our contribution guide.
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+Code and documentation Copyright (c) Siemens 2018 - 2024.
+
+See [LICENSE.md](LICENSE.md).

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@siemens/stylelint-config-scss",
+  "version": "1.0.0-next.1",
+  "description": "Configuration for Stylelint using SCSS (Sass).",
+  "files": [
+    "*.yml",
+    "*.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/siemens/lint.git"
+  },
+  "author": {
+    "name": "Siemens",
+    "email": "opensource@siemens.com"
+  },
+  "homepage": "https://github.com/siemens/lint",
+  "bugs": "https://github.com/siemens/lint/issues",
+  "keywords": [
+    "siemens",
+    "lint"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "stylelint": "^16.8.1",
+    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint-scss": "^6.5.1"
+  }
+}

package/stylelintrc.yml

@@ -0,0 +1,14 @@
+extends:
+  - stylelint-config-sass-guidelines
+rules:
+  color-named: never
+  color-no-hex: true
+  declaration-no-important: true
+  max-nesting-depth: null
+  selector-no-qualifying-type: null
+  selector-max-compound-selectors: null
+  scss/at-extend-no-missing-placeholder: null
+  scss/dollar-variable-colon-space-after: null
+  selector-pseudo-element-no-unknown:
+    - true
+    - ignorePseudoElements: [ng-deep]