NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

Fix stylelint for ncids-css #773

Closed bryanpizzillo closed 1 year ago

bryanpizzillo commented 1 year ago

Issue description

ESTIMATE TBD

In #11 we said we turned on the linter. Technically it is. However, it does not lint any of our files. BAD package.json scripts

        "lint": "stylelint scss/**/*.scss",
        "lint:fix": "stylelint scss/**/*.scss --fix",

GOOD package.json scripts

        "lint": "stylelint \"packages/**/*.scss\"",
        "lint:fix": "stylelint \"packages/**/*.scss\" --fix",

You will need to go fix all the things too.

All the things:

should be something like this

module.exports = {
    "extends": [
        "stylelint-config-recommended-scss",
        "stylelint-prettier/recommended"
    ],
    "rules": {
        "no-descending-specificity": null,
                "no-duplicate-selectors": null,
    'selector-class-pattern': [
      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
      {
        message:
          'Class selectors should be named using "Two Dashes Style" BEM format. See: https://en.bem.info/methodology/naming-convention/#two-dashes-style',
      },
    ],
    }
}

once this is complete please see Enabler: Create Stylelint Rule Package #27

olitharp-nci commented 1 year ago

USWDS rules:

{
  "extends": [
    "@18f/identity-stylelint-config"
  ],
  "rules": {
    "unit-no-unknown": null,
    "no-descending-specificity": null,
    "no-duplicate-selectors": null
  },
}

@18f/identity-stylelint-config rules

module.exports = {
  extends: ['stylelint-config-recommended-scss', 'stylelint-prettier/recommended'],
  rules: {
    'no-descending-specificity': null,
    'scss/comment-no-empty': null,
    'scss/no-global-function-names': null,
    'scss/operator-no-newline-after': null,
    'scss/operator-no-newline-before': null,
    'scss/operator-no-unspaced': null,
    'selector-class-pattern': [
      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
      {
        message:
          'Class selectors should be named using "Two Dashes Style" BEM format. See: https://en.bem.info/methodology/naming-convention/#two-dashes-style',
      },
    ],
  },
};

18f and uswds are removing a lot of rules that we should keep for ncids, namely:

We may need to adjust later, but let's set no-descending-specificity and no-duplicate-selectors to null for now as it may cause more issues than needed to get stylelint up and running. Additionally, for later, we might want to look into selector-nested-pattern. There is a lot of styles that need to be adjusted to follow this pattern.

Let's keep selector-class-pattern for BEM for now as well:

    'selector-class-pattern': [
      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
      {
        message:
          'Class selectors should be named using "Two Dashes Style" BEM format. See: https://en.bem.info/methodology/naming-convention/#two-dashes-style',
      },