diff --git a/README.md b/README.md index d9ad5c4..e8def5e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Code Quality Tools -> Built with ❤️ at [LMC][lmc-home] +> Built with ❤️ at [Alma Career][alma-home] This monorepo contains shareable configurations for various coding-style/best practices/lint tools to make the configurations consistent across projects and provide easy setup mechanism. @@ -12,14 +12,14 @@ This monorepo contains shareable configurations for various coding-style/best pr | Commitlint | [@lmc-eu/commitlint-config](packages/commitlint-config) | [![@lmc-eu/commitlint-config][clc-badge]][clc-npm] | | Conventional Changelog | [@lmc-eu/conventional-changelog-lmc-bitbucket](packages/conventional-changelog-lmc-bitbucket) | [![@lmc-eu/conventional-changelog-lmc-bitbucket][cc-bb-badge]][cc-bb-npm] | | Conventional Changelog | [@lmc-eu/conventional-changelog-lmc-github](packages/conventional-changelog-lmc-github) | [![@lmc-eu/conventional-changelog-lmc-github][cc-gh-badge]][cc-gh-npm] | -| Prettier | [@lmc-eu/prettier-config](packages/prettier-config) | [![@lmc-eu/prettier-config][pc-badge]][pc-npm] | -| Stylelint | [@lmc-eu/stylelint-config](packages/stylelint-config) | [![@lmc-eu/stylelint-config][slc-badge]][slc-npm] | -| Renovate | [@lmc-eu/renovate-config](packages/renovate-config) | [![@lmc-eu/renovate-config][rc-badge]][rc-npm] | | ESLint | [@lmc-eu/eslint-config-base](packages/eslint-config-base) | [![@lmc-eu/eslint-config-base][slc-badge]][ec-base-npm] | | ESLint | [@lmc-eu/eslint-config-graphql](packages/eslint-config-graphql) | [![@lmc-eu/eslint-config-graphql][ec-gql-badge]][ec-gql-npm] | | ESLint | [@lmc-eu/eslint-config-react](packages/eslint-config-react) | [![@lmc-eu/eslint-config-react][ec-react-badge]][ec-react-npm] | | ESLint | [@lmc-eu/eslint-config-jest](packages/eslint-config-jest) | [![@lmc-eu/eslint-config-jest][ec-jest-badge]][ec-jest-npm] | | ESLint | [@lmc-eu/eslint-config-typescript](packages/eslint-config-typescript) | [![@lmc-eu/eslint-config-typescript][ec-ts-badge]][ec-ts-npm] | +| Prettier | [@lmc-eu/prettier-config](packages/prettier-config) | [![@lmc-eu/prettier-config][pc-badge]][pc-npm] | +| Renovate | [@lmc-eu/renovate-config](packages/renovate-config) | [![@lmc-eu/renovate-config][rc-badge]][rc-npm] | +| Stylelint | [@lmc-eu/stylelint-config](packages/stylelint-config) | [![@lmc-eu/stylelint-config][slc-badge]][slc-npm] | | Textlint | [@lmc-eu/textlint-rule-preset-lmc](packages/textlint-rule-preset-lmc) | [![@lmc-eu/textlint-rule-preset-lmc][tlc-badge]][tlc-npm] | ## License @@ -30,7 +30,7 @@ See the [LICENSE](LICENSE) file for information. We got a lot of inspiration from similar project at [STRV][strv-github]. Thank you very much ❤️! -[lmc-home]: https://www.lmc.eu +[alma-home]: https://www.almacareer.com [blc-npm]: https://npmjs.org/package/%40lmc-eu/browserslist-config [blc-badge]: https://img.shields.io/npm/v/%40lmc-eu/browserslist-config.svg?style=flat-square [cc-bb-npm]: https://npmjs.org/package/%40lmc-eu/conventional-changelog-lmc-bitbucket diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json index e7a186b..2eb68f2 100644 --- a/packages/stylelint-config/package.json +++ b/packages/stylelint-config/package.json @@ -27,6 +27,6 @@ "stylelint-order": "^6.0.0" }, "peerDependencies": { - "stylelint": "^14.14.0" + "stylelint": "^15.11.0" } } diff --git a/packages/stylelint-config/rules/extras.js b/packages/stylelint-config/rules/extras.js index ae9036b..90c8612 100644 --- a/packages/stylelint-config/rules/extras.js +++ b/packages/stylelint-config/rules/extras.js @@ -1,20 +1,9 @@ module.exports = { rules: { - // Reason: Avoid compound selectors' creation using nested ampersand SASS syntax. - // Main reasons why use this pattern: - // - Unification with design system components code style - // - Look up easily for the selector using fulltext search in IDEs - // - Better orientation in longer component's code when scrolled down - // - Makes `no-descending-specificity` stylelint rule work correctly - // - IDE's support clicking through from selector usage to its source - // Docs: https://stylelint.io/user-guide/rules/list/selector-nested-pattern/ - 'selector-nested-pattern': [ - '(^&:)|(^&\\[)|(^&\\.(is\\-|has\\-))', - { - message: - 'Only pseudo class selector, attribute selector and combination with state class is allowed (selector-nested-pattern)', - }, - ], + // No default value + // Reason: Color-named values disabled - desired lint should check for design system token values only. + // Docs: https://stylelint.io/user-guide/rules/list/color-named + 'color-named': 'never', // Reason: Except for utility classes and third-party overrides, !important can be avoided. // Docs: https://stylelint.io/user-guide/rules/list/declaration-no-important @@ -35,6 +24,11 @@ module.exports = { }, ], + // No default value + // Reason: Declaring font weights in other ways is unsafe. + // Docs: https://stylelint.io/user-guide/rules/list/font-weight-notation + 'font-weight-notation': 'numeric', + // Reason: Selector maximum class count should be just one but especially form parts/components // need more complex selectors to add styles when validation is applied. // Setting rule to "1" would be uneasy to pass in almost all projects so "2" is clearly just fine. @@ -42,14 +36,14 @@ module.exports = { // Docs: https://stylelint.io/user-guide/rules/list/selector-max-class 'selector-max-class': 2, - // Reason: IDs are handy for Javascript, not for CSS anymore. - // Docs: https://stylelint.io/user-guide/rules/list/selector-max-id - 'selector-max-id': 0, - // Reason: Keep selector specificity as low as possible by default. // Docs: https://stylelint.io/user-guide/rules/list/selector-max-compound-selectors 'selector-max-compound-selectors': 3, + // Reason: IDs are handy for Javascript, not for CSS anymore. + // Docs: https://stylelint.io/user-guide/rules/list/selector-max-id + 'selector-max-id': 0, + // Reason: Keep selector specificity as low as possible by default. // Docs: https://stylelint.io/user-guide/rules/list/selector-max-specificity 'selector-max-specificity': '0,4,0', @@ -58,20 +52,26 @@ module.exports = { // Docs: https://stylelint.io/user-guide/rules/list/selector-max-universal 'selector-max-universal': 0, + // Reason: Avoid compound selectors' creation using nested ampersand SASS syntax. + // Main reasons why use this pattern: + // - Unification with design system components code style + // - Look up easily for the selector using fulltext search in IDEs + // - Better orientation in longer component's code when scrolled down + // - Makes `no-descending-specificity` stylelint rule work correctly + // - IDE's support clicking through from selector usage to its source + // Docs: https://stylelint.io/user-guide/rules/list/selector-nested-pattern/ + 'selector-nested-pattern': [ + '(^&:)|(^&\\[)|(^&\\.(is\\-|has\\-))', + { + message: + 'Only pseudo class selector, attribute selector and combination with state class is allowed (selector-nested-pattern)', + }, + ], + // Reason: In most cases, it only needlessly increases selector specificity. // Docs: https://stylelint.io/user-guide/rules/list/selector-no-qualifying-type 'selector-no-qualifying-type': true, - // No default value - // Reason: Declaring font weights in other ways is unsafe. - // Docs: https://stylelint.io/user-guide/rules/list/font-weight-notation - 'font-weight-notation': 'numeric', - - // No default value - // Reason: Color-named values disabled - desired lint should check for design system token values only. - // Docs: https://stylelint.io/user-guide/rules/list/color-named - 'color-named': 'never', - // Default value: 'always' with secondary options. // Reason: Turned off to support grouping variables using empty lines. // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-empty-line-before/README.md