allow for vars defined in scope, or within :root/:host selectors in file

[keithamus]

This expands the no-undefined-vars rule to allow for variables that are defined in a local scope, like:

.x {
  --color-foo: #ffeeee;
  color: var(--color-foo);
}

This allows developers to use variables defined in locally scoped components, which can be useful for imperatively altering them using the JavaScript APIs, without changing the specific properties they are referred in. So for example this can be useful when using calc or min/max for a specific component:

.x {
  --min-margin: 100px;
  margin-bottom: max(--min-margin, 1vh);
}

// allows for changing minimum value without overriding actual value
embiggen.addEventListener('click', () => $('.x').setProperty('--min-margin', '200px'))

However this does not allow for undefined vars of a different scope:

.x {
  --color-foo: #ffeeee;
}
.y {
  color: var(--color-foo); // this will still fail.
}

It also allows for a file to define its own global variables, which can be either global to the :host (for shadow roots) or :root (for documents). These definitions can only be file local, so the following now works:

/* my-component.css */
:root {
  --my-component-color: #ffeeee;
}
.my-component {
  color: var(--my-component-color);
  background: white;
}
.my-component.flipped {
  background: var(--my-component-color);
  color: white;
}

However specifying variables that exist cross file will still error, unless defined per usual in the rules config:

/* my-first-component.css */
:root {
  --my-component-color: #ffeeee;
}

/* my-other-component.css */
.x { color: --my-component-color: #ffeeee; } // still fails

[changeset-bot]

🦋 Changeset detected

Latest commit: 7aa4ece

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

[jonrohan]

Looks good, just a couple of lint issues