@dialpad/stylelint-plugin-dialtone 1.4.0-next.1 → 1.4.0-next.3

package/bin/fix-logical-properties.js

@@ -72,6 +72,27 @@ const VALUE_MAP = {
   },
 };
 
+// Physical → logical utility class prefix mappings
+// These map directional class names to their logical equivalents in templates.
+// Sorted by longest prefix first to avoid partial matches (d-ml- before d-l-).
+const CLASS_PREFIX_MAP = [
+  // Margin
+  ['d-mt-', 'd-mbs-'],
+  ['d-mr-', 'd-mie-'],
+  ['d-mb-', 'd-mbe-'],
+  ['d-ml-', 'd-mis-'],
+  // Padding
+  ['d-pt-', 'd-pbs-'],
+  ['d-pr-', 'd-pie-'],
+  ['d-pb-', 'd-pbe-'],
+  ['d-pl-', 'd-pis-'],
+  // Position (inset)
+  ['d-t-', 'd-ibs-'],
+  ['d-r-', 'd-iie-'],
+  ['d-b-', 'd-ibe-'],
+  ['d-l-', 'd-iis-'],
+];
+
 function escapeRegex(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -117,6 +138,47 @@ function fixLogicalProperties(content) {
   return fixedLines.join('\n');
 }
 
+/**
+ * Replace physical utility class prefixes with logical equivalents in a string.
+ * e.g. "d-pt-100 d-ml-200" → "d-pbs-100 d-mis-200"
+ */
+function fixLogicalClassNames(content) {
+  let fixed = content;
+  for (const [physical, logical] of CLASS_PREFIX_MAP) {
+    // Match the physical prefix followed by a token stop number or 'n' + number (negative)
+    // Word boundary ensures we don't match partial class names
+    const regex = new RegExp(escapeRegex(physical) + '(n?[0-9]+)', 'g');
+    fixed = fixed.replace(regex, `${logical}$1`);
+  }
+  return fixed;
+}
+
+/**
+ * Process class="..." and :class="..." attributes in template content,
+ * replacing physical class prefixes with logical equivalents.
+ */
+function processTemplateClassNames(content) {
+  let hasChanges = false;
+
+  // Match class="..." attributes (static)
+  const staticClassRegex = /(class=")(.*?)(")/g;
+  let fixed = content.replace(staticClassRegex, (_match, open, classes, close) => {
+    const fixedClasses = fixLogicalClassNames(classes);
+    if (fixedClasses !== classes) hasChanges = true;
+    return open + fixedClasses + close;
+  });
+
+  // Match :class="'...'" attributes (dynamic with string literal)
+  const dynamicClassRegex = /(:class="')(.*?)(')/g;
+  fixed = fixed.replace(dynamicClassRegex, (_match, open, classes, close) => {
+    const fixedClasses = fixLogicalClassNames(classes);
+    if (fixedClasses !== classes) hasChanges = true;
+    return open + fixedClasses + close;
+  });
+
+  return { fixed, hasChanges };
+}
+
 function processStyleBlocks(content) {
   // Match all <style> blocks (with any attributes like lang, scoped, etc.)
   const styleRegex = /(<style[^>]*>)([\s\S]*?)(<\/style>)/gi;
@@ -150,11 +212,12 @@ function processMarkdownFile(filePath) {
         return part; // Keep code blocks unchanged
       }
       // Process style blocks in non-code parts
-      const result = processStyleBlocks(part);
-      if (result.hasChanges) {
-        hasChanges = true;
-      }
-      return result.fixed;
+      const styleResult = processStyleBlocks(part);
+      if (styleResult.hasChanges) hasChanges = true;
+      // Process class names in non-code parts
+      const classResult = processTemplateClassNames(styleResult.fixed);
+      if (classResult.hasChanges) hasChanges = true;
+      return classResult.fixed;
     });
 
     if (hasChanges) {
@@ -171,11 +234,21 @@ function processMarkdownFile(filePath) {
 
 function processFileWithStyleBlocks(filePath) {
   try {
-    const content = fs.readFileSync(filePath, 'utf8');
-    const result = processStyleBlocks(content);
+    let content = fs.readFileSync(filePath, 'utf8');
+    let hasChanges = false;
+
+    // Fix CSS properties in <style> blocks
+    const styleResult = processStyleBlocks(content);
+    if (styleResult.hasChanges) hasChanges = true;
+    content = styleResult.fixed;
 
-    if (result.hasChanges) {
-      fs.writeFileSync(filePath, result.fixed, 'utf8');
+    // Fix class names in templates (outside <style> blocks)
+    const classResult = processTemplateClassNames(content);
+    if (classResult.hasChanges) hasChanges = true;
+    content = classResult.fixed;
+
+    if (hasChanges) {
+      fs.writeFileSync(filePath, content, 'utf8');
       console.log(`Fixed: ${filePath}`);
       return true;
     }

package/lib/index.js

@@ -1,7 +1,9 @@
 'use strict';
 
 const noBaseColorTokens = require('./rules/no-base-color-tokens');
+const noDeprecatedSizeTokens = require('./rules/no-deprecated-size-tokens');
 const noDeprecatedSpaceTokens = require('./rules/no-deprecated-space-tokens');
+const noDeprecatedSuccessTokens = require('./rules/no-deprecated-success-tokens');
 const noMixins = require('./rules/no-mixins');
 const recommendFontStyleTokens = require('./rules/recommend-font-style-tokens');
 const useDialtoneTokens = require('./rules/use-dialtone-tokens');
@@ -9,7 +11,9 @@ const useLogical = require('stylelint-use-logical');
 
 module.exports = [
   noBaseColorTokens,
+  noDeprecatedSizeTokens,
   noDeprecatedSpaceTokens,
+  noDeprecatedSuccessTokens,
   noMixins,
   recommendFontStyleTokens,
   useDialtoneTokens,

package/lib/rules/no-deprecated-size-tokens.js

@@ -0,0 +1,63 @@
+const stylelint = require('stylelint');
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = '@dialpad/stylelint-plugin-dialtone/no-deprecated-size-tokens';
+
+const messages = ruleMessages(ruleName, {
+  deprecatedSizeToken:
+    '--dt-size-* tokens have been replaced. Use --dt-layout-* for layout (widths/heights) or --dt-spacing-* for spacing (padding/margin). Run "npx dialtone-migration-helper" and select "size-to-layout".',
+  deprecatedSpaceToken:
+    '--dt-space-* tokens have been replaced by --dt-spacing-*. Run "npx dialtone-migration-helper" and select "space-to-spacing".',
+});
+
+const meta = {
+  url: 'https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/docs/rules/no-deprecated-size-tokens.md',
+};
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+    });
+
+    if (!validOptions) return;
+
+    root.walkDecls((declaration) => {
+      // Match --dt-size-{number} but NOT --dt-size-border-* or --dt-size-radius-* (those are valid)
+      const sizeTokenMatches = declaration.value.match(/var\(--dt-size-(?!border-|radius-)[^)]+\)/g);
+      if (sizeTokenMatches) {
+        sizeTokenMatches.forEach(() => {
+          report({
+            result,
+            ruleName,
+            node: declaration,
+            message: messages.deprecatedSizeToken,
+          });
+        });
+      }
+
+      const spaceTokenMatches = declaration.value.match(/var\(--dt-space-[^)]+\)/g);
+      if (spaceTokenMatches) {
+        spaceTokenMatches.forEach(() => {
+          report({
+            result,
+            ruleName,
+            node: declaration,
+            message: messages.deprecatedSpaceToken,
+          });
+        });
+      }
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = createPlugin(ruleName, ruleFunction);

package/lib/rules/no-deprecated-success-tokens.js

@@ -0,0 +1,58 @@
+const stylelint = require('stylelint');
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = '@dialpad/stylelint-plugin-dialtone/no-deprecated-success-tokens';
+
+const messages = ruleMessages(ruleName, {
+  deprecated: (successToken, positiveToken) =>
+    `Replace "${successToken}" with "${positiveToken}". Run "npx dialtone-migration-helper --config success-to-positive" to migrate automatically.`,
+});
+
+const meta = {
+  url: 'https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/docs/rules/no-deprecated-success-tokens.md',
+};
+
+// Match var(--dt-color-{role}-success{suffix?}) where role is foreground, surface,
+// border, or link, and suffix (if present) is one of the known variants. The
+// suffix list mirrors the `success-to-positive` migration helper so flagged
+// tokens always have a valid `positive*` replacement.
+const SUCCESS_SUFFIX = '(?:-(?:subtle-opaque-inverted|subtle-opaque|subtle-inverted|strong-inverted|opaque-inverted|inverted-hover|subtle|strong|opaque|inverted|hover))?';
+const SUCCESS_TOKEN_RE = new RegExp(`var\\(--dt-color-(?:foreground|surface|border|link)-success${SUCCESS_SUFFIX}\\)`, 'g');
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+    });
+
+    if (!validOptions) return;
+
+    root.walkDecls((declaration) => {
+      const matches = declaration.value.match(SUCCESS_TOKEN_RE);
+      if (!matches) return;
+
+      matches.forEach((match) => {
+        const successToken = match.replace('var(', '').replace(/\)$/, '');
+        const positiveToken = successToken.replace('-success', '-positive');
+
+        report({
+          result,
+          ruleName,
+          node: declaration,
+          message: messages.deprecated(successToken, positiveToken),
+        });
+      });
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = createPlugin(ruleName, ruleFunction);

package/package.json

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