fix: allow component token names

.changeset/pretty-vans-notice.md

@@ -0,0 +1,6 @@
+---
+"@rhds/tokens": patch
+---
+Stylelint: avoid some false-positives when linting [component token names][wiki].
+
+[wiki]: https://github.com/RedHat-UX/red-hat-design-system/wiki/CSS-Styles#tokens-and-naming-conventions

CHANGELOG.md

@@ -14,7 +14,7 @@
 
   ```yaml
   rules:
-    rhds/token-values:
+    rhds/no-unknown-token-names:
       - true
       - migrations:
           # reds

plugins/stylelint/README.md

@@ -34,7 +34,7 @@ specified names, it will automatically replace it with the new one.
 
 ```yaml
 rules:
-  rhds/token-values:
+  rhds/no-unknown-token-name:
     - true
     - migrations:
       # instances of gray-90 will be replaced with gray-95

plugins/stylelint/rules/no-unknown-token-name.cjs

@@ -1,3 +1,4 @@
+const path = require('node:path');
 const { tokens } = require('@rhds/tokens');
 const stylelint = require('stylelint');
 const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex');
@@ -16,6 +17,10 @@ const meta = {
 /** @type {import('stylelint').Plugin} */
 const ruleFunction = (_, opts, ctx) => {
   return (root, result) => {
+    // here we assume a file structure of */rh-tagname/rh-tagname.css
+    const tagName = path.dirname(root.source.input.file)
+      .split(path.sep)
+      .findLast(x => x.startsWith('rh-'));
     const validOptions = stylelint.utils.validateOptions(
       result,
       ruleName,
@@ -36,7 +41,10 @@ const ruleFunction = (_, opts, ctx) => {
         parsedValue.walk(parsed => {
           if (parsed.type === 'function' && parsed.value === 'var') {
             const [{ value }] = parsed.nodes ?? [];
-            if (value.startsWith('--rh') && !tokens.has(value) || migrations.has(value)) {
+            if (value.startsWith('--rh') &&
+                !value.startsWith(`--${tagName}`) &&
+                !tokens.has(value) ||
+                migrations.has(value)) {
               const message = `Expected ${value} to be a known token name`;
               const { nodes: [{ sourceIndex, sourceEndIndex }] } = parsed;
               const declIndex = declarationValueIndex(node);

tokens/color/crayon/green.yml

@@ -17,10 +17,10 @@ color:
       $value: '#87BB62'
     50:
       $value: '#63993D'
-      $description: 
+      $description:
     60:
       $value: '#3D7317'
       $description: Alert - Success accent
     70:
       $value: '#204D00'
-      $description: Alert - Success title text
+      $description: Alert - Success title text