Add "no global scoped selector" rule for CSS Modules

[iansan5653]

Adds a new Stylelint rule for CSS modules: css-modules/no-global-scoped-selector. This ensures that all selectors in a CSS module file are locally scoped - that is, they fall underneath a class selector that will be hashed.

The point of CSS modules is to encapsulate styles, so global selectors directly violate that principle. By enforcing encapsulation we can ensure that components minimize their side effects on the rest of the page. I think it's a good idea to start enforcing this early to teach best practices in the beginning.

From the docs:

✅ Example of local-scoped selectors:

// SCSS

.container {
  // ...
}

.container {
  :global .external-class {
    // ...
  }
}

❌ Example of global-scoped selectors:

// SCSS

h1 {
  // ...
}

:global .external-class {
  // ...
}

h1 {
  :global .external-class {
    // ...
  }
}

Note

This plugin requires "stylelint": "^13.0.0 || ^14.0.0" as a peer dependency. We are on 16.3.1, so I had to install the plugin with an override. I did try to fix this upstream but the package is not maintained anymore so I was unable to. Everything seems to work fine in 16.x though.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4d1f3d1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/stylelint-config	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[iansan5653]

Hmmm....npm i --force allowed it to be installed locally but didn't configure the package-lock.json to allow installing with npm ci without force. Is there a way around this?

Update: Resolved using overrides field in package.json

[jonrohan]

Awesome thanks for the contribution