@kununu/stylelint-config 6.1.4 → 6.1.5

package/README.md

@@ -2,11 +2,17 @@
 
 > kununu style linter configuration
 
-These configurations are for [stylelint](https://stylelint.io/) linter.
+Shared [stylelint](https://stylelint.io/) configuration for kununu's SCSS, used
+across the frontend apps and `@kununu/ui`. It builds on
+[`stylelint-config-standard-scss`](https://github.com/stylelint-scss/stylelint-config-standard-scss)
+and enforces kununu's conventions plus Prettier formatting.
+
+`stylelint` itself is bundled as a dependency, so you don't need to install it
+separately. The package pins Node `24.13.1` / npm `11.8.0` in `engines`.
 
 ## 📦 Installation
 
-Add @kununu/stylelint-config npm package as a dev dependency to your project:
+Add the package as a dev dependency:
 
 ```console
 npm install @kununu/stylelint-config --save-dev
@@ -14,35 +20,78 @@ npm install @kununu/stylelint-config --save-dev
 
 ## 💻 Usage
 
-Create a `.stylelintrc` file with the following configuration:
+Create a `.stylelintrc` (or `.stylelintrc.json`) file:
 
-```yaml
+```json
 {
   "extends": "@kununu/stylelint-config"
 }
 ```
 
-See [docs](https://stylelint.io/user-guide/configuration) to find more detailed information on stylelint configuration and usage.
-
-And add
+Add a lint script targeting your SCSS files to `package.json`:
 
- ```console
-
-"lint": "stylelint '**/*.scss'",
+```json
+{
+  "scripts": {
+    "lint": "stylelint '**/*.scss'"
+  }
+}
 ```
 
-to your npm file.
-
-## ⚡️ Editor Plugins
-
-At kununu, [@kununu/stylelint-config](https://www.npmjs.com/package/@kununu/stylelint-config) linter runs on every commit, but finding a lint error after push can be frustrating and a waste time. In order to avoid it, editor plugins are available to warn you and validate your code.
-
-There's what we use and recommend:
-
-### Atom
-
-- [linter-stylelint](https://atom.io/packages/linter-stylelint)
-
-### Visual Code Studio
-
-- [stylelint](https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus)
+See the [stylelint docs](https://stylelint.io/user-guide/configuration) for more
+detailed configuration options.
+
+## 🎨 What's included
+
+The config extends `stylelint-config-standard-scss` and
+`stylelint-prettier/recommended`, then layers on kununu's conventions. The
+notable rules:
+
+- **Class selectors** must be **camelCase** (`selector-class-pattern`).
+- **SCSS mixin names** must be **kebab-case** (`scss/at-mixin-pattern`).
+- **Colors:** named colors are forbidden (`color-named`), hex must be long form
+  (`#ffffff`, not `#fff`), and legacy color/alpha notation is used
+  (`rgba(0, 0, 0, 0.5)`).
+- **No duplicate selectors**, and ID selectors are flagged as a **warning**
+  (not an error).
+- CSS Modules pseudo-selectors (`:export`, `:global`, `:local`, `:import`) are
+  allowed.
+- **Property and selector ordering** is enforced via
+  [`stylelint-semantic-groups`](https://www.npmjs.com/package/stylelint-semantic-groups).
+
+### Formatting (Prettier)
+
+Formatting is handled by [Prettier](https://prettier.io/) through
+`stylelint-prettier` and reported as lint errors (auto-fixable with
+`stylelint --fix`). The relevant options are pinned here:
+
+| Option | Value |
+| --- | --- |
+| `printWidth` | `80` |
+| `tabWidth` | `2` |
+| `useTabs` | `false` |
+| `singleQuote` | `true` |
+| `trailingComma` | `'all'` |
+
+> **Note:** these Prettier options are enforced by this config and
+> **intentionally override any `.prettierrc` in the consuming project** for SCSS
+> files. This keeps SCSS formatting consistent across all repos regardless of
+> each project's JS/TS Prettier setup.
+
+## ⚡️ Editor integration
+
+Linting runs in CI (and pre-commit, where configured), but catching errors in
+your editor is faster. We recommend the
+[stylelint VS Code extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint).
+
+Installing the extension alone often isn't enough to lint SCSS — add this to
+your `.vscode/settings.json` so it validates SCSS and stylelint owns formatting
+instead of the built-in linters:
+
+```json
+{
+  "stylelint.validate": ["css", "scss"],
+  "css.validate": false,
+  "scss.validate": false
+}
+```

package/index.js

@@ -6,20 +6,14 @@ module.exports = {
     'stylelint-prettier/recommended',
   ],
   plugins: [
-    'stylelint-scss',
     'stylelint-order',
   ],
   rules: {
     'alpha-value-notation': 'number',
-    'at-rule-no-unknown': null,
-    'at-rule-no-vendor-prefix': true,
     'color-function-notation': 'legacy',
     'color-hex-length': 'long',
     'color-named': 'never',
     'comment-empty-line-before': ['always', {except: ['first-nested'], ignore: ['after-comment', 'stylelint-commands']}],
-    'comment-whitespace-inside': 'always',
-    'function-url-quotes': 'always',
-    'media-feature-name-no-vendor-prefix': true,
     'media-feature-range-notation': 'prefix',
     'no-descending-specificity': null, // clashing with order/order
     'no-duplicate-selectors': true,
@@ -33,13 +27,13 @@ module.exports = {
       return group
     })),
     'prettier/prettier': [
-      true, 
+      true,
       {
-        'arrowParens': 'avoid',
-        'bracketSpacing': false,
-        'semi': true,
+        'printWidth': 80,
         'singleQuote': true,
+        'tabWidth': 2,
         'trailingComma': 'all',
+        'useTabs': false,
       },
     ],
     'property-no-unknown': [
@@ -48,18 +42,14 @@ module.exports = {
         ignoreSelectors: [':export'],
       },
     ],
-    'property-no-vendor-prefix': true,
     'rule-empty-line-before': ['always', {except: ['after-single-line-comment', 'first-nested']}],
     'scss/at-mixin-pattern': '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$', // kebab-case
     'scss/at-rule-no-unknown': true,
-    'selector-attribute-quotes': 'always',
     'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$', // camelCase
     'selector-max-id': [0, {severity: 'warning'}],
-    'selector-no-vendor-prefix': true,
     'selector-pseudo-element-colon-notation': 'single',
     'selector-pseudo-class-no-unknown': [true, {
       ignorePseudoClasses: ['global', 'export', 'import', 'local'],
     }],
-    'value-no-vendor-prefix': true,
   },
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kununu/stylelint-config",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "description": "kununu's stylelint config",
   "author": "kununu",
   "license": "ISC",
@@ -25,12 +25,12 @@
     "beta": "npm publish --tag=beta"
   },
   "dependencies": {
-    "prettier": "3.8.3",
-    "stylelint": "17.12.0",
+    "prettier": "3.9.4",
+    "stylelint": "17.14.0",
     "stylelint-config-standard-scss": "17.0.0",
     "stylelint-order": "8.1.1",
     "stylelint-prettier": "5.0.3",
-    "stylelint-scss": "7.1.1",
+    "stylelint-scss": "7.2.0",
     "stylelint-semantic-groups": "1.2.2"
   }
 }