@dialpad/eslint-plugin-dialtone 1.11.1-next.1 → 1.11.1

package/lib/rules/recommend-typography-style.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities
+ * @fileoverview Combining multiple typography utility categories is discouraged in favor of composed typography utilities
  * @author Nina Repetto
  */
 'use strict';
@@ -8,21 +8,30 @@
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+const typographyCategories = {
+  'font-weight': ['d-fw-normal', 'd-fw-medium', 'd-fw-semibold', 'd-fw-bold'],
+  'font-size': ['d-fs'], // prefix match
+  'line-height': ['d-lh'], // prefix match
+  'font-family': ['d-ff-custom', 'd-ff-sans', 'd-ff-mono', 'd-ff-marketing', 'd-ff-unset'],
+};
+
 module.exports = {
   meta: {
     type: 'suggestion', // `problem`, `suggestion`, or `layout`
     docs: {
-      description: 'Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities',
+      description: 'Combining multiple typography utility categories is discouraged in favor of composed typography utilities',
       recommended: false,
       url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/recommend-typography-style.md', // URL to the documentation page for this rule
     },
     fixable: null, // Or `code` or `whitespace`
     schema: [], // Add a schema if the rule has options
     messages: {
-      recommendTypographyStyle: `Utilities to set Font family, Font weight, Font size, and Line height separately are
-      discouraged in favor of composed typography utilities. Checkout the available classes here:
+      recommendTypographyStyle: `Combining multiple typography utility categories (Font family, Font weight, Font size, Line height) is
+      discouraged in favor of composed typography utilities. Check out the available classes here:
       https://dialtone.dialpad.com/design/typography/#api. There can be cases where using these utilities is intentional and valid,
       in which case you can ignore this lint warning.`,
+      conflictingTypographyUtilities: `Conflicting typography utilities detected: multiple {{category}} classes found ({{classes}}).
+      Only one will be applied. Remove the conflicting classes.`,
     }, // Add messageId and message
   },
 
@@ -33,28 +42,43 @@ module.exports = {
       VAttribute (node) {
         if (node.key.name === 'class') {
           const classes = node.value.value.split(' ');
-          const typographyClasses = [
-            'd-fs',
-            'd-fw-normal',
-            'd-fw-medium',
-            'd-fw-semibold',
-            'd-fw-bold',
-            'd-lh',
-            'd-ff-custom',
-            'd-ff-sans',
-            'd-ff-mono',
-            'd-ff-marketing',
-            'd-ff-unset',
-          ];
-          const typographyClassesFound = classes.filter((className) =>
-            typographyClasses.some((typographyClass) => className.includes(typographyClass)),
-          );
-          if (typographyClassesFound.length > 0) {
+
+          // For each class, determine which category it belongs to and track all matches
+          const categoryCounts = {};
+          classes.forEach((className) => {
+            for (const [category, patterns] of Object.entries(typographyCategories)) {
+              if (patterns.some((pattern) => className.startsWith(pattern))) {
+                if (!categoryCounts[category]) {
+                  categoryCounts[category] = [];
+                }
+                categoryCounts[category].push(className);
+              }
+            }
+          });
+
+          const categoriesFound = Object.keys(categoryCounts);
+
+          // Report if 2+ different categories are present
+          if (categoriesFound.length >= 2) {
             context.report({
               node,
               messageId: 'recommendTypographyStyle',
             });
           }
+
+          // Report conflicting utilities within the same category
+          for (const [category, matchedClasses] of Object.entries(categoryCounts)) {
+            if (matchedClasses.length >= 2) {
+              context.report({
+                node,
+                messageId: 'conflictingTypographyUtilities',
+                data: {
+                  category,
+                  classes: matchedClasses.join(', '),
+                },
+              });
+            }
+          }
         }
       },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.11.1-next.1",
+  "version": "1.11.1",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",

package/lib/rules/deprecated-headline-sizes.js

@@ -1,77 +0,0 @@
-/**
- * @fileoverview Detects usage of deprecated xxl/xxxl headline sizes which have been renamed to 2xl/3xl.
- * @author Dialtone Team
- */
-'use strict';
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-const SIZE_MAP = {
-  xxxl: '3xl',
-  xxl: '2xl',
-};
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description: 'Headline sizes xxl/xxxl have been renamed to 2xl/3xl.',
-      recommended: false,
-      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.md',
-    },
-    fixable: 'code',
-    schema: [],
-    messages: {
-      deprecatedSize: 'Headline size "{{oldSize}}" has been renamed to "{{newSize}}". Update size="{{oldSize}}" to size="{{newSize}}".',
-      deprecatedClass: 'CSS class "{{oldClass}}" has been renamed to "{{newClass}}". Update to use the new class name.',
-    },
-  },
-
-  create(context) {
-    const sourceCode = context.sourceCode ?? context.getSourceCode();
-    return sourceCode.parserServices.defineTemplateBodyVisitor({
-      VAttribute(node) {
-        // Check size prop (e.g., size="xxl" or size="xxxl")
-        if (node.key.name === 'size' && node.value && node.value.value) {
-          const sizeValue = node.value.value;
-          if (SIZE_MAP[sizeValue]) {
-            context.report({
-              node,
-              messageId: 'deprecatedSize',
-              data: {
-                oldSize: sizeValue,
-                newSize: SIZE_MAP[sizeValue],
-              },
-              fix(fixer) {
-                return fixer.replaceText(node.value, `"${SIZE_MAP[sizeValue]}"`);
-              },
-            });
-          }
-        }
-
-        // Check class attributes for deprecated d-text-headline--xxl/xxxl classes
-        // Note: We only flag d-text-headline-- (current system), NOT d-headline-- (legacy system)
-        if (node.key.name === 'class' && node.value && node.value.value) {
-          const classValue = node.value.value;
-          // Match d-text-headline--xxl or d-text-headline--xxxl (but NOT d-headline--xxl)
-          const match = classValue.match(/\bd-text-headline--(xxx?l)\b/);
-          if (match && SIZE_MAP[match[1]]) {
-            const oldClass = `d-text-headline--${match[1]}`;
-            const newClass = `d-text-headline--${SIZE_MAP[match[1]]}`;
-            context.report({
-              node,
-              messageId: 'deprecatedClass',
-              data: { oldClass, newClass },
-              fix(fixer) {
-                const newValue = classValue.replace(oldClass, newClass);
-                return fixer.replaceText(node.value, `"${newValue}"`);
-              },
-            });
-          }
-        }
-      },
-    });
-  },
-};