stylelint-plugin-rhythmguard 3.10.2 → 3.11.0

package/src/core/token-index.js

@@ -35,24 +35,42 @@ function tokenFitsProperty(token, prop) {
   return !group || !kind || ACCEPTED_KINDS[group].includes(kind);
 }
 
+/**
+ * The lengths one definition holds, each with its signed px value, or null
+ * when the token holds more than one value. A token redefined under a media
+ * query, a theme or a data attribute (`--space-3: 12px` at the root and 20px
+ * from 768px up) renders differently there, so no single length stands for it
+ * (issue #231). A value that is not a plain length counts as another value.
+ */
+function singleValuedLengths(definition, baseFontSize) {
+  const lengths = [];
+  for (const raw of definition.values) {
+    const parsed = parseTokenValueLength(String(raw).trim());
+    if (!parsed) return definition.values.size > 1 ? null : [];
+    const unit = parsed.unit || 'px';
+    const px = toPx(parsed.number, unit, baseFontSize);
+    if (px === null || !Number.isFinite(px)) return definition.values.size > 1 ? null : [];
+    lengths.push({ px, raw: String(raw).trim(), unit });
+  }
+  return lengths.every((length) => numbersEqual(length.px, lengths[0].px)) ? lengths : null;
+}
+
 /**
  * Which token a fix may write for a length. Strict on purpose: the token must
- * hold the same px value in the same unit as the literal being fixed, it must
- * be a custom property (a Sass variable is not valid in CSS output), and it
- * must be the only candidate. A fix that guesses a token is worse than a fix
- * that writes a number, so anything ambiguous falls back to the literal.
+ * hold the same px value, with the same sign, in the same unit as the literal
+ * being fixed, it must hold that one value everywhere, it must be a custom
+ * property (a Sass variable is not valid in CSS output), and it must be the
+ * only candidate. A fix that guesses a token is worse than a fix that writes
+ * a number, so anything ambiguous falls back to the literal.
  */
 function tokenIndexFromDefinitions(definitions, baseFontSize = 16) {
   const index = [];
   for (const definition of definitions.values()) {
-    for (const raw of definition.values) {
-      const parsed = parseTokenValueLength(String(raw).trim());
-      if (!parsed) continue;
-      const unit = parsed.unit || 'px';
-      const px = toPx(Math.abs(parsed.number), unit, baseFontSize);
-      if (px === null || !Number.isFinite(px) || px === 0) continue;
+    const lengths = singleValuedLengths(definition, baseFontSize);
+    for (const { px, raw, unit } of lengths || []) {
+      if (px === 0) continue;
       const file = definition.files ? [...definition.files][0] : null;
-      index.push({ file: file && file !== 'stylesheet' ? file : null, px, raw: String(raw).trim(), token: definition.token, unit });
+      index.push({ file: file && file !== 'stylesheet' ? file : null, px, raw, token: definition.token, unit });
     }
   }
   return index;
@@ -61,16 +79,17 @@ function tokenIndexFromDefinitions(definitions, baseFontSize = 16) {
 /**
  * Every custom property that holds a length, for one property. The shared
  * resolver behind use-scale's `fixWith: "token"` and prefer-token, so the two
- * rules always know the same tokens. Same unit first; with `anyUnit`, a token
- * in another unit that holds the same px value counts when none matches the
- * unit. Sorted, so messages are stable.
+ * rules always know the same tokens. The px value is signed: 8 finds the
+ * tokens that hold 8px, -8 the tokens that hold -8px. Same unit first; with
+ * `anyUnit`, a token in another unit that holds the same px value counts when
+ * none matches the unit. Sorted, so messages are stable.
  */
 function tokensForLength(index, px, unit, { anyUnit = false, prop = null } = {}) {
   const wanted = unit || 'px';
   const sameUnit = new Set();
   const otherUnit = new Set();
   for (const entry of index) {
-    if (!entry.token.startsWith('--') || !numbersEqual(entry.px, Math.abs(px)) || !tokenFitsProperty(entry.token, prop)) {
+    if (!entry.token.startsWith('--') || !numbersEqual(entry.px, px) || !tokenFitsProperty(entry.token, prop)) {
       continue;
     }
     (entry.unit === wanted ? sameUnit : otherUnit).add(entry.token);
@@ -79,6 +98,22 @@ function tokensForLength(index, px, unit, { anyUnit = false, prop = null } = {})
   return [...found].sort((a, b) => a.localeCompare(b, 'en', { numeric: true }));
 }
 
+/**
+ * The tokens for a signed length, and whether a fix negates them. A negative
+ * value takes the tokens that hold it, written as they are, and otherwise the
+ * tokens that hold its magnitude, negated. A positive value never gets a
+ * negative token (issue #221).
+ */
+function signedTokensForLength(index, px, unit, options = {}) {
+  if (px < 0) {
+    const negative = tokensForLength(index, px, unit, options);
+    if (negative.length > 0) {
+      return { negate: false, tokens: negative };
+    }
+  }
+  return { negate: px < 0, tokens: tokensForLength(index, Math.abs(px), unit, options) };
+}
+
 function tokenForLength(index, px, unit, prop = null) {
   const candidates = tokensForLength(index, px, unit, { prop });
   return candidates.length === 1 ? `var(${candidates[0]})` : null;
@@ -97,30 +132,44 @@ function negateReplacement(replacement) {
 
 /**
  * The replacement text a length rule writes: the matching token when the
- * options ask for one and exactly one qualifies, otherwise the literal.
+ * options ask for one and exactly one qualifies, otherwise the literal. The
+ * nearest value is in px, or in the literal's unit with `unitStrategy:
+ * "exact"`; tokens are indexed in px, so the lookup converts it (issue #223).
  */
-function replacementFor(parsedLength, nearestPx, options, prop = null) {
+function replacementFor(parsedLength, nearest, options, prop = null) {
   if (options.fixWith === 'token' && options.tokenIndex) {
-    const token = tokenForLength(options.tokenIndex, nearestPx, parsedLength.unit || 'px', prop);
-    if (token) {
-      return parsedLength.number < 0 ? negateReplacement(token) : token;
+    const unit = parsedLength.unit || 'px';
+    const nearestPx = options.unitStrategy === 'exact' ? toPx(Math.abs(nearest), unit, options.baseFontSize) : Math.abs(nearest);
+    if (nearestPx !== null) {
+      const signedPx = parsedLength.number < 0 ? -nearestPx : nearestPx;
+      const { negate, tokens } = signedTokensForLength(options.tokenIndex, signedPx, unit, { prop });
+      if (tokens.length === 1) {
+        const token = `var(${tokens[0]})`;
+        return negate ? negateReplacement(token) : token;
+      }
     }
   }
-  return fixedLengthValue(parsedLength, nearestPx, options);
+  return fixedLengthValue(parsedLength, nearest, options);
 }
 
 /**
  * The sentence a length rule appends when its fix writes a token: which token
- * holds the snapped value. Empty when the replacement is a literal.
+ * holds the snapped value. Empty when the replacement is a literal. A token
+ * written as is for a negative literal holds the negative value.
  */
-function tokenHoldsNote(replacement, formattedNearest) {
+function tokenHoldsNote(replacement, formattedNearest, negativeLiteral = false) {
   const match = typeof replacement === 'string' ? replacement.match(/var\(--[^)]+\)/) : null;
-  return match ? `${match[0]} holds ${formattedNearest}.` : '';
+  if (!match) {
+    return '';
+  }
+  const holdsNegative = negativeLiteral && replacement === match[0];
+  return `${match[0]} holds ${holdsNegative ? `-${formattedNearest}` : formattedNearest}.`;
 }
 
 module.exports = {
   negateReplacement,
   replacementFor,
+  signedTokensForLength,
   tokenFitsProperty,
   tokenHoldsNote,
   tokenForLength,

package/src/core/token-map.js

@@ -71,11 +71,12 @@ function addLengthValueMapping(map, rawLength, tokenReference, baseFontSize, ori
     origins[token] = origin;
   }
 
-  const absolute = Math.abs(parsed.number);
-  const normalizedRaw = formatLength(absolute, parsed.unit || 'px');
+  // Keyed by the signed value: a -8px token stands for -8px, never for 8px
+  // (issue #221). prefer-token negates a positive token for a negative literal.
+  const normalizedRaw = formatLength(parsed.number, parsed.unit || 'px');
   map[normalizedRaw] = token;
 
-  const px = toPx(absolute, parsed.unit, baseFontSize);
+  const px = toPx(parsed.number, parsed.unit, baseFontSize);
   if (px !== null) {
     map[`${px}px`] = token;
   }
@@ -211,23 +212,36 @@ function mergeTokenMapFromCssCustomProperties({
   };
   const origin = displayOrigin(root && root.source && root.source.input ? root.source.input.file : null);
 
+  // Every value each custom property is given in the file. A property given
+  // two values (at the root and under a media query, a theme or a data
+  // attribute) renders differently there, so no fix writes it (issue #231).
+  const valuesByProp = new Map();
   root.walkDecls((decl) => {
     const prop = decl.prop.toLowerCase();
-    if (!prop.startsWith('--')) {
+    if (!prop.startsWith('--') || !tokenRegex.test(prop)) {
       return;
     }
+    const parsed = parseTokenValueLength(decl.value);
+    const px = parsed ? toPx(parsed.number, parsed.unit, baseFontSize) : null;
+    const key = px === null ? `raw:${decl.value.trim()}` : `px:${formatLength(px, 'px')}`;
+    if (!valuesByProp.has(decl.prop)) {
+      valuesByProp.set(decl.prop, { decl, keys: new Set() });
+    }
+    valuesByProp.get(decl.prop).keys.add(key);
+  });
 
-    if (!tokenRegex.test(prop)) {
-      return;
+  for (const { decl, keys } of valuesByProp.values()) {
+    if (keys.size > 1) {
+      continue;
     }
 
     const parsed = parseTokenValueLength(decl.value);
     if (!parsed || parsed.number === 0) {
-      return;
+      continue;
     }
 
     addLengthValueMapping(nextMap, decl.value, `var(${decl.prop})`, baseFontSize, origins, origin);
-  });
+  }
 
   return nextMap;
 }
@@ -375,8 +389,7 @@ function mergeTokenMapFromTailwindSpacing({
       continue;
     }
 
-    const absolute = Math.abs(parsed.number);
-    const normalizedRaw = formatLength(absolute, parsed.unit || 'px');
+    const normalizedRaw = formatLength(parsed.number, parsed.unit || 'px');
     nextMap[normalizedRaw] = `theme(spacing.${key})`;
     if (origins && !origins[nextMap[normalizedRaw]]) {
       origins[nextMap[normalizedRaw]] = displayOrigin(resolvedPath);

package/src/eslint/literal-spans.js

@@ -0,0 +1,234 @@
+'use strict';
+
+/**
+ * Maps the decoded value of a string literal back to its raw source text, so
+ * an autofix can replace one class token in place and leave every escape
+ * sequence (`\n`, `\\`, `\'`, `\u00e9`, a line continuation) and every JSX
+ * entity (`"`, `A`) around it byte for byte (#225).
+ *
+ * Each UTF-16 unit of the decoded value gets the raw span that produced it.
+ * A token is only replaceable when its raw span is exactly the token text, so
+ * a class written with an escape inside it (`p-[13\x70x]`) is never fixed.
+ */
+
+const SINGLE_CHARACTER_ESCAPES = {
+  b: '\b',
+  f: '\f',
+  n: '\n',
+  r: '\r',
+  t: '\t',
+  v: '\v',
+};
+
+const HEX_2 = /^[0-9a-fA-F]{2}$/;
+const HEX_4 = /^[0-9a-fA-F]{4}$/;
+const HEX_ANY = /^[0-9a-fA-F]+$/;
+const OCTAL_DIGIT = /^[0-7]$/;
+const JSX_ENTITY = /^&(?:#[xX]([0-9a-fA-F]+)|#([0-9]+)|[A-Za-z][A-Za-z0-9]*);/;
+const LINE_TERMINATOR = /[\n\r\u2028\u2029]/;
+
+function decodeJsStringBody(body) {
+  const pieces = [];
+  let index = 0;
+
+  while (index < body.length) {
+    const char = body[index];
+    if (char !== '\\') {
+      pieces.push({ end: index + 1, start: index, text: char });
+      index += 1;
+      continue;
+    }
+
+    const next = body[index + 1];
+    if (next === undefined) {
+      return null;
+    }
+
+    let end = index + 2;
+    let text;
+
+    if (next === '\r') {
+      end = body[index + 2] === '\n' ? index + 3 : index + 2;
+      text = '';
+    } else if (next === '\n' || next === '\u2028' || next === '\u2029') {
+      text = '';
+    } else if (next === 'x') {
+      const hex = body.slice(index + 2, index + 4);
+      if (!HEX_2.test(hex)) {
+        return null;
+      }
+      end = index + 4;
+      text = String.fromCharCode(Number.parseInt(hex, 16));
+    } else if (next === 'u' && body[index + 2] === '{') {
+      const close = body.indexOf('}', index + 3);
+      const hex = close === -1 ? '' : body.slice(index + 3, close);
+      const codePoint = HEX_ANY.test(hex) ? Number.parseInt(hex, 16) : Number.NaN;
+      if (!(codePoint <= 0x10ffff)) {
+        return null;
+      }
+      end = close + 1;
+      text = String.fromCodePoint(codePoint);
+    } else if (next === 'u') {
+      const hex = body.slice(index + 2, index + 6);
+      if (!HEX_4.test(hex)) {
+        return null;
+      }
+      end = index + 6;
+      text = String.fromCharCode(Number.parseInt(hex, 16));
+    } else if (OCTAL_DIGIT.test(next)) {
+      // Legacy octal escape (sloppy mode): up to three digits, at most \377.
+      let digits = next;
+      if (OCTAL_DIGIT.test(body[end] || '')) {
+        digits += body[end];
+        end += 1;
+        if (next <= '3' && OCTAL_DIGIT.test(body[end] || '')) {
+          digits += body[end];
+          end += 1;
+        }
+      }
+      text = String.fromCharCode(Number.parseInt(digits, 8));
+    } else {
+      text = SINGLE_CHARACTER_ESCAPES[next] ?? next;
+    }
+
+    pieces.push({ end, start: index, text });
+    index = end;
+  }
+
+  return pieces;
+}
+
+function alignJsxAttributeBody(body, value) {
+  const pieces = [];
+  let rawIndex = 0;
+  let valueIndex = 0;
+
+  while (rawIndex < body.length) {
+    const entity = body[rawIndex] === '&'
+      ? JSX_ENTITY.exec(body.slice(rawIndex, rawIndex + 12))
+      : null;
+
+    if (!entity) {
+      if (body[rawIndex] !== value[valueIndex]) {
+        return null;
+      }
+      pieces.push({ end: rawIndex + 1, start: rawIndex, text: body[rawIndex] });
+      rawIndex += 1;
+      valueIndex += 1;
+      continue;
+    }
+
+    const entityText = entity[0];
+    let text;
+    if (value.startsWith(entityText, valueIndex)) {
+      // Unknown names are kept as written by the JSX parser.
+      text = entityText;
+    } else if (entity[1] || entity[2]) {
+      const codePoint = Number.parseInt(entity[1] || entity[2], entity[1] ? 16 : 10);
+      const candidates = codePoint <= 0x10ffff
+        ? [String.fromCodePoint(codePoint), String.fromCharCode(codePoint)]
+        : [String.fromCharCode(codePoint)];
+      text = candidates.find((candidate) => value.startsWith(candidate, valueIndex));
+    } else {
+      // Every named XHTML entity decodes to one UTF-16 unit.
+      text = value[valueIndex];
+    }
+
+    if (text === undefined || valueIndex + text.length > value.length) {
+      return null;
+    }
+
+    pieces.push({ end: rawIndex + entityText.length, start: rawIndex, text });
+    rawIndex += entityText.length;
+    valueIndex += text.length;
+  }
+
+  return valueIndex === value.length ? pieces : null;
+}
+
+function isJsxAttributeValue(node) {
+  return Boolean(node.parent && node.parent.type === 'JSXAttribute' && node.parent.value === node);
+}
+
+/**
+ * Returns `replace(start, token, replacement)` for a string Literal node,
+ * which gives an ESLint fix replacing only that token's raw span, or null
+ * when the token cannot be located safely. Returns null for any other node.
+ */
+function createLiteralTokenFixer(node, sourceCode) {
+  if (node.type !== 'Literal' || typeof node.value !== 'string' || !Array.isArray(node.range)) {
+    return null;
+  }
+
+  const rawText = sourceCode.getText(node);
+  const quote = rawText[0];
+  if ((quote !== '"' && quote !== "'") || rawText.length < 2 || rawText[rawText.length - 1] !== quote) {
+    return null;
+  }
+
+  const body = rawText.slice(1, -1);
+  const jsx = isJsxAttributeValue(node);
+  const pieces = jsx ? alignJsxAttributeBody(body, node.value) : decodeJsStringBody(body);
+  if (!pieces || pieces.map((piece) => piece.text).join('') !== node.value) {
+    return null;
+  }
+
+  const rawStarts = [];
+  const rawEnds = [];
+  for (const piece of pieces) {
+    for (let unit = 0; unit < piece.text.length; unit += 1) {
+      rawStarts.push(piece.start);
+      rawEnds.push(piece.end);
+    }
+  }
+
+  const bodyOffset = node.range[0] + 1;
+
+  return function replace(start, token, replacement) {
+    if (typeof replacement !== 'string' || replacement === token || token.length === 0) {
+      return null;
+    }
+    if (
+      replacement.includes(quote)
+      || replacement.includes('\\')
+      || LINE_TERMINATOR.test(replacement)
+      || (jsx && replacement.includes('&'))
+    ) {
+      return null;
+    }
+
+    const end = start + token.length;
+    if (start < 0 || end > rawStarts.length) {
+      return null;
+    }
+
+    const rawStart = rawStarts[start];
+    const rawEnd = rawEnds[end - 1];
+    if (body.slice(rawStart, rawEnd) !== token) {
+      return null;
+    }
+
+    const range = [bodyOffset + rawStart, bodyOffset + rawEnd];
+    return (fixer) => fixer.replaceTextRange(range, replacement);
+  };
+}
+
+/**
+ * The text a class string rule should analyze: the decoded value of a string
+ * Literal, or the cooked value of a TemplateElement (its raw text when the
+ * cooked value is null, as in a tagged template with an invalid escape).
+ */
+function classStringValue(node) {
+  if (node.type === 'Literal') {
+    return typeof node.value === 'string' ? node.value : null;
+  }
+  if (node.type === 'TemplateElement' && node.value) {
+    return typeof node.value.cooked === 'string' ? node.value.cooked : node.value.raw;
+  }
+  return null;
+}
+
+module.exports = {
+  classStringValue,
+  createLiteralTokenFixer,
+};

package/src/eslint/rules/tailwind-class-use-motion-scale.js

@@ -4,24 +4,13 @@ const { MAX_NOTE_LENGTH, normalizeNote, withNote } = require('../../core/options
 const { nearestText } = require('../../core/length');
 const { formatTime } = require('../../core/time');
 const { createTailwindMotionAnalyzer } = require('../../core/tailwind-motion-analysis');
+const { classStringValue, createLiteralTokenFixer } = require('../literal-spans');
 
 const RULE_NAME = 'tailwind-class-use-motion-scale';
 
 function maybeCheckNodeText(node, sourceCode, context, analyzer, allowFix) {
-  const rawText = sourceCode.getText(node);
-  let value = null;
-  let quote = null;
-
-  if (node.type === 'Literal' && typeof node.value === 'string') {
-    value = node.value;
-    quote = rawText[0] === '"' || rawText[0] === "'" ? rawText[0] : '"';
-  }
-
-  if (node.type === 'TemplateElement') {
-    value = node.value.raw;
-  }
-
-  if (!value || typeof value !== 'string') {
+  const value = classStringValue(node);
+  if (!value) {
     return;
   }
 
@@ -30,20 +19,9 @@ function maybeCheckNodeText(node, sourceCode, context, analyzer, allowFix) {
     return;
   }
 
-  let fixedValue = value;
-  let fixedValueOffset = 0;
-
-  for (const { analysis, segment } of findings) {
-    if (allowFix && analysis.reason === 'duration' && node.type === 'Literal') {
-      const replacementStart = segment.start + fixedValueOffset;
-      fixedValue = `${fixedValue.slice(0, replacementStart)}${analysis.fixedToken}${fixedValue.slice(replacementStart + segment.token.length)}`;
-      fixedValueOffset += analysis.fixedToken.length - segment.token.length;
-    }
-  }
-
-  const fixedText = allowFix && node.type === 'Literal' && fixedValue !== value
-    ? `${quote}${fixedValue.replace(new RegExp(quote, 'g'), `\\${quote}`)}${quote}`
-    : null;
+  // Fixes replace only the raw span of the class token, so escapes and JSX
+  // entities elsewhere in the literal are kept as written (#225).
+  const replaceToken = allowFix ? createLiteralTokenFixer(node, sourceCode) : null;
 
   for (const { analysis, segment } of findings) {
     const lower = analysis.nearest
@@ -55,10 +33,9 @@ function maybeCheckNodeText(node, sourceCode, context, analyzer, allowFix) {
     context.report({
       message: withNote(buildMessage(analysis, segment, lower, upper), analyzer.note),
       node,
-      fix:
-        fixedText && analysis.reason === 'duration'
-          ? (fixer) => fixer.replaceText(node, fixedText)
-          : null,
+      fix: replaceToken && analysis.reason === 'duration'
+        ? replaceToken(segment.start, segment.token, analysis.fixedToken)
+        : null,
     });
   }
 }

package/src/eslint/rules/tailwind-class-use-scale.js

@@ -2,24 +2,13 @@
 
 const { MAX_NOTE_LENGTH, normalizeNote, withNote } = require('../../core/options');
 const { createTailwindClassAnalyzer, offScaleClassMessage } = require('../../core/tailwind-class-analysis');
+const { classStringValue, createLiteralTokenFixer } = require('../literal-spans');
 
 const RULE_NAME = 'tailwind-class-use-scale';
 
 function maybeCheckNodeText(node, sourceCode, context, analyzer, allowFix) {
-  const rawText = sourceCode.getText(node);
-  let value = null;
-  let quote = null;
-
-  if (node.type === 'Literal' && typeof node.value === 'string') {
-    value = node.value;
-    quote = rawText[0] === '"' || rawText[0] === "'" ? rawText[0] : '"';
-  }
-
-  if (node.type === 'TemplateElement') {
-    value = node.value.raw;
-  }
-
-  if (!value || typeof value !== 'string') {
+  const value = classStringValue(node);
+  if (!value) {
     return;
   }
 
@@ -28,29 +17,17 @@ function maybeCheckNodeText(node, sourceCode, context, analyzer, allowFix) {
     return;
   }
 
-  let fixedValue = value;
-  let fixedValueOffset = 0;
-
-  for (const { analysis, segment } of findings) {
-    if (allowFix && analysis.reason !== 'negative' && node.type === 'Literal') {
-      const replacementStart = segment.start + fixedValueOffset;
-      fixedValue = `${fixedValue.slice(0, replacementStart)}${analysis.fixedToken}${fixedValue.slice(replacementStart + segment.token.length)}`;
-      fixedValueOffset += analysis.fixedToken.length - segment.token.length;
-    }
-  }
-
-  const fixedText = allowFix && node.type === 'Literal' && fixedValue !== value
-    ? `${quote}${fixedValue.replace(new RegExp(quote, 'g'), `\\${quote}`)}${quote}`
-    : null;
+  // Fixes replace only the raw span of the class token, so escapes and JSX
+  // entities elsewhere in the literal are kept as written (#225).
+  const replaceToken = allowFix ? createLiteralTokenFixer(node, sourceCode) : null;
 
   for (const { analysis, segment } of findings) {
     context.report({
       message: withNote(offScaleClassMessage(segment.token, analysis), analyzer.note),
       node,
-      fix:
-        fixedText && analysis.reason !== 'negative'
-          ? (fixer) => fixer.replaceText(node, fixedText)
-          : null,
+      fix: replaceToken && analysis.reason !== 'negative'
+        ? replaceToken(segment.start, segment.token, analysis.fixedToken)
+        : null,
     });
   }
 }

package/src/rules/no-offscale-transform/index.js

@@ -9,6 +9,7 @@ const {
   nearestText,
   numbersEqual,
   parseLengthToken,
+  pxOnScale,
   toPx,
 } = require('../../core/length');
 const {
@@ -100,7 +101,7 @@ const ruleFunction = (primary, secondaryOptions) => {
             node.value,
             formatLength(nearest.lower, nearestUnit),
             formatLength(nearest.upper, nearestUnit),
-            [tokenHoldsNote(fixedValue, formatLength(nearest.nearest, nearestUnit)), options.note].filter(Boolean).join(' '),
+            [tokenHoldsNote(fixedValue, formatLength(nearest.nearest, nearestUnit), node.value.trim().startsWith('-')), options.note].filter(Boolean).join(' '),
           ),
           node,
           replacement: fixedValue,
@@ -177,7 +178,7 @@ const ruleFunction = (primary, secondaryOptions) => {
           return;
         }
 
-        const isOnScale = scalePx.some((entry) => numbersEqual(entry, pxValue));
+        const isOnScale = pxOnScale(scalePx, pxValue, parsedLength.unit, options.baseFontSize);
         if (isOnScale) {
           return;
         }