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

package/bin/fix-logical-properties.js

@@ -0,0 +1,306 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+
+// Physical to logical property mappings
+const PROPERTY_MAP = {
+  // Margins
+  'margin-left': 'margin-inline-start',
+  'margin-right': 'margin-inline-end',
+  'margin-top': 'margin-block-start',
+  'margin-bottom': 'margin-block-end',
+
+  // Padding
+  'padding-left': 'padding-inline-start',
+  'padding-right': 'padding-inline-end',
+  'padding-top': 'padding-block-start',
+  'padding-bottom': 'padding-block-end',
+
+  // Positioning (inset)
+  'left': 'inset-inline-start',
+  'right': 'inset-inline-end',
+  'top': 'inset-block-start',
+  'bottom': 'inset-block-end',
+
+  // Border
+  'border-left': 'border-inline-start',
+  'border-right': 'border-inline-end',
+  'border-top': 'border-block-start',
+  'border-bottom': 'border-block-end',
+  'border-left-width': 'border-inline-start-width',
+  'border-right-width': 'border-inline-end-width',
+  'border-top-width': 'border-block-start-width',
+  'border-bottom-width': 'border-block-end-width',
+  'border-left-style': 'border-inline-start-style',
+  'border-right-style': 'border-inline-end-style',
+  'border-top-style': 'border-block-start-style',
+  'border-bottom-style': 'border-block-end-style',
+  'border-left-color': 'border-inline-start-color',
+  'border-right-color': 'border-inline-end-color',
+  'border-top-color': 'border-block-start-color',
+  'border-bottom-color': 'border-block-end-color',
+
+  // Border radius
+  'border-top-left-radius': 'border-start-start-radius',
+  'border-top-right-radius': 'border-start-end-radius',
+  'border-bottom-left-radius': 'border-end-start-radius',
+  'border-bottom-right-radius': 'border-end-end-radius',
+
+  // Sizing
+  'width': 'inline-size',
+  'height': 'block-size',
+  'min-width': 'min-inline-size',
+  'max-width': 'max-inline-size',
+  'min-height': 'min-block-size',
+  'max-height': 'max-block-size',
+};
+
+// Value mappings for specific properties
+const VALUE_MAP = {
+  'text-align': {
+    'left': 'start',
+    'right': 'end',
+  },
+  'float': {
+    'left': 'inline-start',
+    'right': 'inline-end',
+  },
+  'clear': {
+    'left': 'inline-start',
+    'right': 'inline-end',
+  },
+};
+
+// 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, '\\$&');
+}
+
+function fixLogicalProperties(content) {
+  // Process line by line to avoid matching in comments
+  const lines = content.split('\n');
+  const fixedLines = lines.map(line => {
+    // Skip comment lines (LESS/CSS comments)
+    const trimmed = line.trim();
+    if (trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*')) {
+      return line;
+    }
+
+    let fixedLine = line;
+
+    // Fix property names - match property at start of declaration
+    for (const [physical, logical] of Object.entries(PROPERTY_MAP)) {
+      // Match: whitespace + property + colon (with optional whitespace)
+      // This ensures we only match actual CSS properties, not parts of other words
+      const propertyRegex = new RegExp(
+        `(^\\s*|[{;]\\s*)${escapeRegex(physical)}(\\s*:)`,
+        'g'
+      );
+      fixedLine = fixedLine.replace(propertyRegex, `$1${logical}$2`);
+    }
+
+    // Fix values for specific properties
+    for (const [property, values] of Object.entries(VALUE_MAP)) {
+      for (const [physical, logical] of Object.entries(values)) {
+        // Match: property: value (with proper boundaries)
+        const valueRegex = new RegExp(
+          `(${escapeRegex(property)}\\s*:\\s*)${physical}(\\s*[;!}]|\\s*$)`,
+          'gi'
+        );
+        fixedLine = fixedLine.replace(valueRegex, `$1${logical}$2`);
+      }
+    }
+
+    return fixedLine;
+  });
+
+  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;
+  let hasChanges = false;
+
+  const fixed = content.replace(styleRegex, (_match, openTag, styleContent, closeTag) => {
+    const fixedStyle = fixLogicalProperties(styleContent);
+    if (fixedStyle !== styleContent) {
+      hasChanges = true;
+    }
+    return openTag + fixedStyle + closeTag;
+  });
+
+  return { fixed, hasChanges };
+}
+
+function processMarkdownFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+
+    // Split by fenced code blocks to avoid processing code examples
+    // Match ``` with optional language identifier and content until closing ```
+    const fencedCodeRegex = /(```[\s\S]*?```)/g;
+    const parts = content.split(fencedCodeRegex);
+    let hasChanges = false;
+
+    // Process only non-code-block parts
+    const fixedParts = parts.map((part, index) => {
+      // Odd indices are the fenced code blocks (captured groups)
+      if (index % 2 === 1) {
+        return part; // Keep code blocks unchanged
+      }
+      // Process style blocks in non-code parts
+      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) {
+      fs.writeFileSync(filePath, fixedParts.join(''), 'utf8');
+      console.log(`Fixed: ${filePath}`);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error processing ${filePath}:`, error.message);
+    return false;
+  }
+}
+
+function processFileWithStyleBlocks(filePath) {
+  try {
+    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;
+
+    // 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;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error processing ${filePath}:`, error.message);
+    return false;
+  }
+}
+
+function processFile(filePath) {
+  try {
+    // Markdown: skip fenced code blocks, only process <style> tags
+    if (filePath.endsWith('.md')) {
+      return processMarkdownFile(filePath);
+    }
+
+    // Vue/HTML: only process <style> blocks
+    if (filePath.endsWith('.vue') || filePath.endsWith('.html')) {
+      return processFileWithStyleBlocks(filePath);
+    }
+
+    // CSS/LESS: process entire file
+    const content = fs.readFileSync(filePath, 'utf8');
+    const fixed = fixLogicalProperties(content);
+
+    if (content !== fixed) {
+      fs.writeFileSync(filePath, fixed, 'utf8');
+      console.log(`Fixed: ${filePath}`);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error processing ${filePath}:`, error.message);
+    return false;
+  }
+}
+
+// Main: process files passed as arguments
+const files = process.argv.slice(2);
+
+if (files.length === 0) {
+  console.log('Usage: fix-logical-properties <file1> [file2] ...');
+} else {
+  let fixedCount = 0;
+  for (const file of files) {
+    if (processFile(file)) {
+      fixedCount++;
+    }
+  }
+
+  if (fixedCount > 0) {
+    console.log(`\nFixed ${fixedCount} file(s)`);
+  }
+}

package/lib/index.js

@@ -1,15 +1,19 @@
 '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 noMixins = require('./rules/no-mixins');
 const recommendFontStyleTokens = require('./rules/recommend-font-style-tokens');
 const useDialtoneTokens = require('./rules/use-dialtone-tokens');
+const useLogical = require('stylelint-use-logical');
 
 module.exports = [
   noBaseColorTokens,
+  noDeprecatedSizeTokens,
   noDeprecatedSpaceTokens,
   noMixins,
   recommendFontStyleTokens,
   useDialtoneTokens,
+  useLogical,
 ];

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/stylelint-plugin-dialtone",
-  "version": "1.3.1-next.1",
+  "version": "1.4.0-next.2",
   "description": "dialtone stylelint plugin",
   "keywords": [
     "Dialpad",
@@ -39,10 +39,17 @@
     "directory": "packages/stylelint-plugin-dialtone"
   },
   "main": "./lib/index.js",
+  "bin": {
+    "fix-logical-properties": "./bin/fix-logical-properties.js"
+  },
   "files": [
-    "lib"
+    "lib",
+    "bin"
   ],
   "exports": "./lib/index.js",
+  "dependencies": {
+    "stylelint-use-logical": "^2.1.2"
+  },
   "devDependencies": {
     "eslint-plugin-n": "^17.0.0",
     "stylelint-test-rule-node": "^0.2.1",