stylelint-plugin-rhythmguard 3.10.2 → 3.12.0

package/src/core/value-nodes.js

@@ -52,38 +52,43 @@ function isTokenFunction(node, tokenFunctions, tokenRegex) {
   return tokenRegex.test(firstArg);
 }
 
-function normalizeWalkContext(context) {
-  if (!context) {
-    return {
-      parentFunctionArgIndex: null,
-      parentFunctionName: null,
-    };
-  }
+// What a walker's callback returns for a token var(): skip the name, walk the fallback.
+const WALK_TOKEN_FALLBACK = 'fallback';
 
-  if (typeof context === 'string') {
-    return {
-      parentFunctionArgIndex: null,
-      parentFunctionName: context,
-    };
+/**
+ * How a length rule walks a token function (issue #240). The name of a token
+ * var() is the token and is skipped, but its fallback is a value like any
+ * other and is walked, so `var(--space-1, 7px)` checks the 7px. Any other
+ * token function (theme(), token()) is skipped whole. False for a function
+ * that is not a token.
+ */
+function skipTokenFunction(node, tokenFunctions, tokenRegex) {
+  if (!isTokenFunction(node, tokenFunctions, tokenRegex)) {
+    return false;
   }
 
-  return {
-    parentFunctionArgIndex:
-      Number.isInteger(context.parentFunctionArgIndex) && context.parentFunctionArgIndex > 0
-        ? context.parentFunctionArgIndex
-        : null,
-    parentFunctionName:
-      typeof context.parentFunctionName === 'string' && context.parentFunctionName.length > 0
-        ? context.parentFunctionName
-        : null,
-  };
+  return node.value.toLowerCase() === 'var' ? WALK_TOKEN_FALLBACK : true;
 }
 
-function walkRootValueNodes(parsed, walkNode, state) {
-  const initialContext = normalizeWalkContext(state);
+function varName(node) {
+  const comma = node.nodes.findIndex((child) => child.type === 'div' && child.value === ',');
+  return valueParser.stringify(comma === -1 ? node.nodes : node.nodes.slice(0, comma)).trim();
+}
 
-  const walkNodes = (nodes, parentFunction) => {
-    let argIndex = 1;
+function varFallbackNodes(node) {
+  const comma = node.nodes.findIndex((child) => child.type === 'div' && child.value === ',');
+  return comma === -1 ? [] : node.nodes.slice(comma + 1);
+}
+
+/**
+ * Walk value nodes for a length rule. `walkNode` returns true to skip a
+ * function's children, or WALK_TOKEN_FALLBACK to walk only the fallback of a
+ * var(). Nodes inside a fallback carry `tokenFallbackOf`, the names of the
+ * var()s they fall back from, outermost first.
+ */
+function createNodeWalker(walkNode, rootFunctionName = null) {
+  const walkNodes = (nodes, parentFunction, firstArgIndex = 1, tokenFallbackOf = []) => {
+    let argIndex = firstArgIndex;
 
     for (const node of nodes) {
       if (node.type === 'div' && node.value === ',') {
@@ -93,18 +98,24 @@ function walkRootValueNodes(parsed, walkNode, state) {
 
       const context = {
         parentFunctionArgIndex: parentFunction ? argIndex : null,
-        parentFunctionName: parentFunction ? parentFunction.name : initialContext.parentFunctionName,
+        parentFunctionName: parentFunction ? parentFunction.name : rootFunctionName,
+        tokenFallbackOf,
       };
 
       if (node.type === 'function') {
         const fnName = node.value.toLowerCase();
         const skipChildren = walkNode(node, context);
 
+        if (skipChildren === WALK_TOKEN_FALLBACK) {
+          walkNodes(varFallbackNodes(node), { name: fnName }, 2, [...tokenFallbackOf, varName(node)]);
+          continue;
+        }
+
         if (skipChildren) {
           continue;
         }
 
-        walkNodes(node.nodes, { name: fnName });
+        walkNodes(node.nodes, { name: fnName }, 1, tokenFallbackOf);
         continue;
       }
 
@@ -112,38 +123,43 @@ function walkRootValueNodes(parsed, walkNode, state) {
     }
   };
 
-  walkNodes(parsed.nodes, null);
+  return walkNodes;
 }
 
-function walkTransformTranslateNodes(parsed, walkNode) {
-  const walkNodes = (nodes, parentFunction) => {
-    let argIndex = 1;
-
-    for (const node of nodes) {
-      if (node.type === 'div' && node.value === ',') {
-        argIndex += 1;
-        continue;
-      }
+function normalizeWalkContext(context) {
+  if (!context) {
+    return {
+      parentFunctionArgIndex: null,
+      parentFunctionName: null,
+    };
+  }
 
-      const context = {
-        parentFunctionArgIndex: parentFunction ? argIndex : null,
-        parentFunctionName: parentFunction ? parentFunction.name : null,
-      };
+  if (typeof context === 'string') {
+    return {
+      parentFunctionArgIndex: null,
+      parentFunctionName: context,
+    };
+  }
 
-      if (node.type === 'function') {
-        const fnName = node.value.toLowerCase();
-        const skipChildren = walkNode(node, context);
-        if (skipChildren) {
-          continue;
-        }
+  return {
+    parentFunctionArgIndex:
+      Number.isInteger(context.parentFunctionArgIndex) && context.parentFunctionArgIndex > 0
+        ? context.parentFunctionArgIndex
+        : null,
+    parentFunctionName:
+      typeof context.parentFunctionName === 'string' && context.parentFunctionName.length > 0
+        ? context.parentFunctionName
+        : null,
+  };
+}
 
-        walkNodes(node.nodes, { name: fnName });
-        continue;
-      }
+function walkRootValueNodes(parsed, walkNode, state) {
+  const initialContext = normalizeWalkContext(state);
+  createNodeWalker(walkNode, initialContext.parentFunctionName)(parsed.nodes, null);
+}
 
-      walkNode(node, context);
-    }
-  };
+function walkTransformTranslateNodes(parsed, walkNode) {
+  const walkNodes = createNodeWalker(walkNode);
 
   for (const node of parsed.nodes) {
     if (node.type !== 'function') {
@@ -240,21 +256,231 @@ function collectMathBounds(fnNode) {
   return bounds;
 }
 
+const SASS_OPERATORS = new Set(['*', '+', '-', '%']);
+
+function isSassOperator(node) {
+  return Boolean(node) && (
+    (node.type === 'word' && SASS_OPERATORS.has(node.value)) ||
+    (node.type === 'div' && node.value === '/')
+  );
+}
+
+/**
+ * The words of a Sass value that are operands of an expression (issue #234):
+ * next to `*`, `/`, `+`, `-` or `%`, or an argument of a Sass module function
+ * such as math.div(). Rewriting one changes what the expression computes, so
+ * a rule may report such a literal but never fix it. Empty for a value
+ * without `$`, which is not a Sass expression.
+ */
+function sassOperandNodes(parsed, value) {
+  const operands = new Set();
+  if (!String(value).includes('$')) {
+    return operands;
+  }
+
+  const visit = (nodes, inModuleFunction) => {
+    const meaningful = nodes.filter((node) => node.type !== 'space' && node.type !== 'comment');
+    meaningful.forEach((node, index) => {
+      if (node.type === 'function') {
+        visit(node.nodes, inModuleFunction || node.value.includes('.'));
+        return;
+      }
+      if (node.type !== 'word' || isSassOperator(node)) {
+        return;
+      }
+      if (inModuleFunction || isSassOperator(meaningful[index - 1]) || isSassOperator(meaningful[index + 1])) {
+        operands.add(node);
+      }
+    });
+  };
+  visit(parsed.nodes, false);
+  return operands;
+}
+
+/**
+ * Where the value starts inside the declaration as written: after the
+ * property and the colon with its spacing.
+ */
 function declarationValueIndex(decl) {
+  const between = decl.raws && typeof decl.raws.between === 'string' ? decl.raws.between : null;
+  if (between !== null && typeof decl.prop === 'string') {
+    return decl.prop.length + between.length;
+  }
   const declarationText = decl.toString();
   const idx = declarationText.indexOf(decl.value);
   return idx === -1 ? 0 : idx;
 }
 
+/**
+ * Blank the Sass inline comments of `scss` (the value as written) with spaces
+ * of the same length, so a parser never reads `// was 13px` as a value and
+ * every offset still points into the written text. postcss-scss keeps the
+ * value with each inline comment turned into a block comment in `raw`; the
+ * two are walked side by side so only real inline comments are blanked. Null
+ * when they do not line up.
+ */
+function blankScssInlineComments(scss, raw) {
+  let masked = '';
+  const comments = [];
+  let i = 0;
+  let j = 0;
+  while (j < scss.length) {
+    if (scss.startsWith('//', j) && raw.startsWith('/*', i)) {
+      let end = j + 2;
+      while (end < scss.length && !/[\n\r\f]/.test(scss[end])) end += 1;
+      const converted = `/*${scss.slice(j + 2, end).replace(/(\*\/|\/\*)/g, '*//*')}*/`;
+      if (raw.startsWith(converted, i)) {
+        comments.push({ end, start: j });
+        masked += ' '.repeat(end - j);
+        i += converted.length;
+        j = end;
+        continue;
+      }
+    }
+    if (scss[j] !== raw[i]) {
+      return null;
+    }
+    masked += scss[j];
+    i += 1;
+    j += 1;
+  }
+  return i === raw.length ? { comments, masked } : null;
+}
+
+/**
+ * The value of a declaration as written in the source (issue #233). PostCSS
+ * strips the comments from `decl.value` and keeps the written value in
+ * `raws.value.raw` (and postcss-scss keeps `//` comments in `raws.value.scss`),
+ * so offsets into `decl.value` point at the wrong character and writing
+ * `decl.value` drops the comments. Rules parse `parseText`, whose offsets are
+ * offsets into `text`, and write fixes back with writeDeclarationValue().
+ */
+function declarationValueSource(decl) {
+  const raws = decl.raws && decl.raws.value;
+  if (!raws || typeof raws.raw !== 'string' || raws.value !== decl.value) {
+    return { kind: 'value', parseText: decl.value, text: decl.value };
+  }
+  if (typeof raws.scss === 'string') {
+    const blanked = blankScssInlineComments(raws.scss, raws.raw);
+    if (blanked) {
+      return { comments: blanked.comments, kind: 'scss', parseText: blanked.masked, text: raws.scss };
+    }
+  }
+  return { kind: 'raw', parseText: raws.raw, text: raws.raw };
+}
+
+/**
+ * `text` with every block comment blanked with spaces of the same length, for
+ * code that reads the value as an expression and cannot skip comments.
+ */
+function blankBlockComments(text) {
+  const parsed = valueParser(text);
+  let blanked = text;
+  parsed.walk((node) => {
+    if (node.type === 'comment') {
+      const end = node.sourceEndIndex;
+      blanked = `${blanked.slice(0, node.sourceIndex)}${' '.repeat(end - node.sourceIndex)}${blanked.slice(end)}`;
+    }
+  });
+  return blanked;
+}
+
+/** The edits a walk made to the parsed value, as spans of the parsed text. */
+function collectValueEdits(nodes, parseText, edits) {
+  for (const node of nodes) {
+    const original = parseText.slice(node.sourceIndex, node.sourceEndIndex);
+    const current = valueParser.stringify(node);
+    if (current === original) {
+      continue;
+    }
+    if (node.type === 'function' && Array.isArray(node.nodes) && original.startsWith(`${node.value}(`)) {
+      collectValueEdits(node.nodes, parseText, edits);
+      continue;
+    }
+    edits.push({ end: node.sourceEndIndex, start: node.sourceIndex, text: current });
+  }
+  return edits;
+}
+
+/** The value PostCSS keeps in `decl.value`: a comment next to whitespace or an edge is dropped. */
+function cleanValue(raw) {
+  const drops = [];
+  valueParser(raw).walk((node) => {
+    if (node.type !== 'comment') return;
+    const before = raw[node.sourceIndex - 1];
+    const after = raw[node.sourceEndIndex];
+    if (before === undefined || after === undefined || /\s/.test(before) || /\s/.test(after)) {
+      drops.push(node);
+    }
+  });
+  let clean = raw;
+  for (const node of drops.reverse()) {
+    clean = `${clean.slice(0, node.sourceIndex)}${clean.slice(node.sourceEndIndex)}`;
+  }
+  return clean;
+}
+
+/**
+ * Write edits ({ start, end, text } spans of `source.text`) into the
+ * declaration and keep the comments of the value as written (issue #233).
+ * Returns whether anything changed.
+ */
+function writeValueEdits(decl, source, edits) {
+  if (edits.length === 0) {
+    return false;
+  }
+
+  const ordered = [...edits].sort((a, b) => b.start - a.start);
+  let text = source.text;
+  for (const edit of ordered) {
+    text = `${text.slice(0, edit.start)}${edit.text}${text.slice(edit.end)}`;
+  }
+
+  if (source.kind === 'value') {
+    decl.value = text;
+    return true;
+  }
+
+  let raw = text;
+  if (source.kind === 'scss') {
+    // The inline comments moved by the edits before them; turn each back into
+    // the block comment postcss-scss keeps in `raw`.
+    const shift = (offset) => ordered.reduce((sum, edit) => (edit.end <= offset ? sum + edit.text.length - (edit.end - edit.start) : sum), 0);
+    for (const comment of [...source.comments].reverse()) {
+      const start = comment.start + shift(comment.start);
+      const end = comment.end + shift(comment.start);
+      const body = text.slice(start + 2, end).replace(/(\*\/|\/\*)/g, '*//*');
+      raw = `${raw.slice(0, start)}/*${body}*/${raw.slice(end)}`;
+    }
+  }
+
+  const clean = cleanValue(raw);
+  decl.value = clean;
+  decl.raws.value = source.kind === 'scss' ? { raw, scss: text, value: clean } : { raw, value: clean };
+  return true;
+}
+
+/** Write the nodes a walk changed in `parsed` (parsed from `source.parseText`) back into the declaration. */
+function writeDeclarationValue(decl, source, parsed) {
+  return writeValueEdits(decl, source, collectValueEdits(parsed.nodes, source.parseText, []));
+}
+
 module.exports = {
+  WALK_TOKEN_FALLBACK,
+  blankBlockComments,
   collectMathBounds,
   declarationValueIndex,
+  declarationValueSource,
   isBoundFunction,
   isKeyword,
   isMathFunction,
   isTokenFunction,
   propertyMatches,
+  sassOperandNodes,
   shouldLintMathArgument,
+  skipTokenFunction,
   walkRootValueNodes,
   walkTransformTranslateNodes,
+  writeDeclarationValue,
+  writeValueEdits,
 };