feat(lint): add rules to disallow slotted popovers and tailwind classes

- `no-slotted-popovers` to prevent the use of the slot attribute on popover elements
- `no-tailwind-classes` to disallow Tailwind CSS utility classes on nve custom elements

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/src/page/page.examples.ts

@@ -620,7 +620,7 @@ export const InteractionDrawer = {
     <p nve-text="body">page content</p>
   </main>
 
-  <nve-drawer id="drawer" slot="left-aside" position="left" size="sm" closable style="--top: 48px">
+  <nve-drawer id="drawer" position="left" size="sm" closable style="--top: 48px">
     <nve-drawer-header>
       <h3 nve-text="heading medium sm">Drawer Header</h3>
     </nve-drawer-header>

projects/lint/README.md

@@ -83,6 +83,8 @@ export default [
 | `@nvidia-elements/lint/no-nested-container-types` | Require nested container components to use flat container mode. | HTML | `error` |
 | `@nvidia-elements/lint/no-restricted-attributes` | Disallow use of invalid API attributes or utility attributes on custom HTML element tags. | HTML | `error` |
 | `@nvidia-elements/lint/no-restricted-page-sizing` | Disallow custom height or width styles on nve-page. | HTML | `error` |
+| `@nvidia-elements/lint/no-slotted-popovers` | Disallow the slot attribute on popover elements (nve-tooltip, nve-dialog, nve-drawer, ...). | HTML | `error` |
+| `@nvidia-elements/lint/no-tailwind-classes` | Disallow Tailwind CSS utility classes with Elements alternatives, and all Tailwind utilities on nve custom elements. | HTML | `warn` |
 | `@nvidia-elements/lint/no-unexpected-attribute-value` | Disallow use of invalid attribute values for nve-* elements. | HTML | `error` |
 | `@nvidia-elements/lint/no-unexpected-css-value` | Disallow use of invalid CSS values. | CSS | `error` |
 | `@nvidia-elements/lint/no-unexpected-css-variable` | Disallow use of invalid CSS theme variables. | CSS | `error` |

projects/lint/src/eslint/configs/html.ts

@@ -13,6 +13,7 @@ import noUnexpectedStyleCustomization from '../rules/no-unexpected-style-customi
 import noDeprecatedGlobalAttributeValue from '../rules/no-deprecated-global-attribute-value.js';
 import noDeprecatedGlobalAttributes from '../rules/no-deprecated-global-attributes.js';
 import noRestrictedAttributes from '../rules/no-restricted-attributes.js';
+import noSlottedPopovers from '../rules/no-slotted-popovers.js';
 import noDeprecatedSlots from '../rules/no-deprecated-slots.js';
 import noMissingSlottedElements from '../rules/no-missing-slotted-elements.js';
 import noMissingControlLabel from '../rules/no-missing-control-label.js';
@@ -29,6 +30,7 @@ import noUnknownCssVariable from '../rules/no-unknown-css-variable.js';
 import noRestrictedPageSizing from '../rules/no-restricted-page-sizing.js';
 import noNestedContainerTypes from '../rules/no-nested-container-types.js';
 import noUnstyledTypography from '../rules/no-unstyled-typography.js';
+import noTailwindClasses from '../rules/no-tailwind-classes.js';
 
 const source = ['src/**/*.html', 'src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx'];
 
@@ -71,6 +73,7 @@ export const elementsHtmlConfig: Linter.Config = {
         'no-missing-popover-trigger': noMissingPopoverTrigger,
         'no-restricted-attributes': noRestrictedAttributes,
         'no-restricted-page-sizing': noRestrictedPageSizing,
+        'no-slotted-popovers': noSlottedPopovers,
         'no-unexpected-global-attribute-value': noUnexpectedGlobalAttributeValue,
         'no-unexpected-style-customization': noUnexpectedStyleCustomization,
         'no-unexpected-slot-value': noUnexpectedSlotValue,
@@ -82,13 +85,13 @@ export const elementsHtmlConfig: Linter.Config = {
         'no-missing-gap-space': noMissingGapSpace,
         'no-unknown-css-variable': noUnknownCssVariable,
         'no-nested-container-types': noNestedContainerTypes,
-        'no-unstyled-typography': noUnstyledTypography
+        'no-unstyled-typography': noUnstyledTypography,
+        'no-tailwind-classes': noTailwindClasses
       }
     }
   },
   rules: {
     '@nvidia-elements/lint/no-complex-popovers': ['error'],
-    '@nvidia-elements/lint/no-unexpected-style-customization': ['off'],
     '@nvidia-elements/lint/no-deprecated-tags': ['error'],
     '@nvidia-elements/lint/no-deprecated-attributes': ['error'],
     '@nvidia-elements/lint/no-deprecated-icon-names': ['error'],
@@ -102,16 +105,19 @@ export const elementsHtmlConfig: Linter.Config = {
     '@nvidia-elements/lint/no-missing-popover-trigger': ['error'],
     '@nvidia-elements/lint/no-restricted-attributes': ['error'],
     '@nvidia-elements/lint/no-restricted-page-sizing': ['error'],
+    '@nvidia-elements/lint/no-slotted-popovers': ['error'],
     '@nvidia-elements/lint/no-unexpected-global-attribute-value': ['error'],
     '@nvidia-elements/lint/no-unexpected-slot-value': ['error'],
     '@nvidia-elements/lint/no-unknown-tags': ['error'],
     '@nvidia-elements/lint/no-unexpected-attribute-value': ['error'],
     '@nvidia-elements/lint/no-unexpected-input-type': ['error'],
     '@nvidia-elements/lint/no-invalid-event-listeners': ['error'],
     '@nvidia-elements/lint/no-invalid-invoker-triggers': ['error'],
-    '@nvidia-elements/lint/no-missing-gap-space': ['off'],
     '@nvidia-elements/lint/no-unknown-css-variable': ['error'],
     '@nvidia-elements/lint/no-nested-container-types': ['error'],
-    '@nvidia-elements/lint/no-unstyled-typography': ['error']
+    '@nvidia-elements/lint/no-unstyled-typography': ['error'],
+    '@nvidia-elements/lint/no-tailwind-classes': ['error'],
+    '@nvidia-elements/lint/no-unexpected-style-customization': ['off'],
+    '@nvidia-elements/lint/no-missing-gap-space': ['off']
   }
 };

projects/lint/src/eslint/internals/index.ts

@@ -26,17 +26,23 @@ export interface TemplateLintMessage {
 
 export async function lintPlaygroundTemplate(code: string): Promise<TemplateLintMessage[]> {
   // extra restrictions/rules as agents rarely use these advanced APIs correctly for playground generation out of context of an established project
-  // '@nvidia-elements/lint/no-unexpected-style-customization': ['error']
   const rules: Partial<Linter.RulesRecord> = {
-    '@nvidia-elements/lint/no-unexpected-global-attribute-value': ['error', { distilled: true }],
+    '@nvidia-elements/lint/no-unexpected-style-customization': ['error'],
+    '@nvidia-elements/lint/no-missing-gap-space': ['error'],
     '@nvidia-elements/lint/no-missing-slotted-elements': ['error', { 'nve-card': { required: ['nve-card-content'] } }],
-    '@nvidia-elements/lint/no-missing-gap-space': ['error']
+    '@nvidia-elements/lint/no-unexpected-global-attribute-value': ['error', { distilled: true }],
+    '@nvidia-elements/lint/no-tailwind-classes': ['error', { strict: true }]
   };
   return lintString(code, rules);
 }
 
 export async function lintTemplate(code: string): Promise<TemplateLintMessage[]> {
-  return lintString(code);
+  const rules: Partial<Linter.RulesRecord> = {
+    '@nvidia-elements/lint/no-unexpected-global-attribute-value': ['error', { distilled: true }],
+    '@nvidia-elements/lint/no-tailwind-classes': ['warn', { strict: true }],
+    '@nvidia-elements/lint/no-missing-gap-space': ['warn']
+  };
+  return lintString(code, rules);
 }
 
 async function lintString(code: string, rules: Partial<Linter.RulesRecord> = {}): Promise<TemplateLintMessage[]> {