@atlaskit/eslint-plugin-design-system 4.16.2 → 4.16.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.16.3
+
+### Patch Changes
+
+- [`ed34264c827`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed34264c827) - Fix errors on tagged template literals for eslint rule ensure-design-token-usage-spacing and handle edgecases ensuring seamless fallback on errors
+
 ## 4.16.2
 
 ### Patch Changes

package/dist/cjs/rules/ensure-design-token-usage-spacing/index.js

@@ -205,8 +205,12 @@ var rule = (0, _createRule.createRule)({
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        var parentNode = (0, _utils.findParentNodeForLine)(node);
         var processedCssLines = (0, _utils.processCssNode)(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        var parentNode = (0, _utils.findParentNodeForLine)(node);
         var globalFontSize = (0, _utils.getFontSizeValueInScope)(processedCssLines);
         var textForSource = context.getSourceCode().getText(node.quasi);
         var allReplacedValues = [];

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.cleanComments = cleanComments;
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
 exports.findParentNodeForLine = void 0;
@@ -77,10 +78,21 @@ exports.isSpacingProperty = isSpacingProperty;
 var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 exports.isTypographyProperty = isTypographyProperty;
 var splitShorthandValues = function splitShorthandValues(str) {
-  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
-  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 exports.splitShorthandValues = splitShorthandValues;
 var getValueFromShorthand = function getValueFromShorthand(str) {
@@ -176,7 +188,7 @@ var getRawExpression = function getRawExpression(node, context) {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
+  (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   var _node$range = (0, _slicedToArray2.default)(node.range, 2),
@@ -358,6 +370,14 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -375,10 +395,14 @@ function processCssNode(node, context) {
     return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : '');
   }).join('');
   var rawString = node.quasi.quasis.map(function (q, i) {
-    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : '');
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : null : '');
   }).join('');
-  var cssProperties = splitCssProperties(combinedString);
-  var unalteredCssProperties = splitCssProperties(rawString);
+  var cssProperties = splitCssProperties(cleanComments(combinedString));
+  var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map(function (cssProperty, index) {
     return [cssProperty, unalteredCssProperties[index]];
   });
@@ -442,9 +466,21 @@ function getFontSizeValueInScope(cssProperties) {
 function splitCssProperties(styleString) {
   return styleString.split('\n').filter(function (line) {
     return !line.trim().startsWith('@');
+  })
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(function (line) {
+    return line.endsWith(';') ? line : "".concat(line, ";");
   }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(function (line) {
+    return line.trim() !== 'null' && line.trim() !== 'null;';
+  }).map(function (el) {
     return el.trim() || '';
+  })
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(function (line) {
+    return line.split(':').length === 2;
   }).filter(Boolean);
 }
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.16.2",
+	"version": "4.16.3",
 	"sideEffects": false
 }

package/dist/es2019/rules/ensure-design-token-usage-spacing/index.js

@@ -194,8 +194,12 @@ const rule = createRule({
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        const parentNode = findParentNodeForLine(node);
         const processedCssLines = processCssNode(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        const parentNode = findParentNodeForLine(node);
         const globalFontSize = getFontSizeValueInScope(processedCssLines);
         const textForSource = context.getSourceCode().getText(node.quasi);
         const allReplacedValues = [];

package/dist/es2019/rules/ensure-design-token-usage-spacing/utils.js

@@ -39,9 +39,20 @@ export const isSpacingProperty = propertyName => {
 export const isTypographyProperty = propertyName => {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export const splitShorthandValues = str => {
-  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
-  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 export const getValueFromShorthand = str => {
   const valueString = String(str);
@@ -122,7 +133,7 @@ export const getRawExpression = (node, context) => {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression') || isNodeOfType(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   const [start, end] = node.range;
@@ -296,6 +307,14 @@ export function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -313,10 +332,14 @@ export function processCssNode(node, context) {
     return `${q.value.raw}${node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : ''}`;
   }).join('');
   const rawString = node.quasi.quasis.map((q, i) => {
-    return `${q.value.raw}${node.quasi.expressions[i] ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : ''}`;
+    return `${q.value.raw}${node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : null : ''}`;
   }).join('');
-  const cssProperties = splitCssProperties(combinedString);
-  const unalteredCssProperties = splitCssProperties(rawString);
+  const cssProperties = splitCssProperties(cleanComments(combinedString));
+  const unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map((cssProperty, index) => [cssProperty, unalteredCssProperties[index]]);
 }
 
@@ -368,8 +391,14 @@ export function getFontSizeValueInScope(cssProperties) {
  * @param styleString string of css properties
  */
 export function splitCssProperties(styleString) {
-  return styleString.split('\n').filter(line => !line.trim().startsWith('@')).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(el => el.trim() || '').filter(Boolean);
+  return styleString.split('\n').filter(line => !line.trim().startsWith('@'))
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(line => line.endsWith(';') ? line : `${line};`).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(line => line.trim() !== 'null' && line.trim() !== 'null;').map(el => el.trim() || '')
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(line => line.split(':').length === 2).filter(Boolean);
 }
 
 /**

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.16.2",
+	"version": "4.16.3",
 	"sideEffects": false
 }

package/dist/esm/rules/ensure-design-token-usage-spacing/index.js

@@ -200,8 +200,12 @@ var rule = createRule({
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        var parentNode = findParentNodeForLine(node);
         var processedCssLines = processCssNode(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        var parentNode = findParentNodeForLine(node);
         var globalFontSize = getFontSizeValueInScope(processedCssLines);
         var textForSource = context.getSourceCode().getText(node.quasi);
         var allReplacedValues = [];

package/dist/esm/rules/ensure-design-token-usage-spacing/utils.js

@@ -49,9 +49,20 @@ export var isSpacingProperty = function isSpacingProperty(propertyName) {
 export var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export var splitShorthandValues = function splitShorthandValues(str) {
-  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
-  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 export var getValueFromShorthand = function getValueFromShorthand(str) {
   var valueString = String(str);
@@ -144,7 +155,7 @@ export var getRawExpression = function getRawExpression(node, context) {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression') || isNodeOfType(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   var _node$range = _slicedToArray(node.range, 2),
@@ -320,6 +331,14 @@ export function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -337,10 +356,14 @@ export function processCssNode(node, context) {
     return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : '');
   }).join('');
   var rawString = node.quasi.quasis.map(function (q, i) {
-    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : '');
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : null : '');
   }).join('');
-  var cssProperties = splitCssProperties(combinedString);
-  var unalteredCssProperties = splitCssProperties(rawString);
+  var cssProperties = splitCssProperties(cleanComments(combinedString));
+  var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map(function (cssProperty, index) {
     return [cssProperty, unalteredCssProperties[index]];
   });
@@ -404,9 +427,21 @@ export function getFontSizeValueInScope(cssProperties) {
 export function splitCssProperties(styleString) {
   return styleString.split('\n').filter(function (line) {
     return !line.trim().startsWith('@');
+  })
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(function (line) {
+    return line.endsWith(';') ? line : "".concat(line, ";");
   }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(function (line) {
+    return line.trim() !== 'null' && line.trim() !== 'null;';
+  }).map(function (el) {
     return el.trim() || '';
+  })
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(function (line) {
+    return line.split(':').length === 2;
   }).filter(Boolean);
 }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.16.2",
+	"version": "4.16.3",
 	"sideEffects": false
 }

package/dist/types/rules/ensure-design-token-usage-spacing/utils.d.ts

@@ -73,6 +73,17 @@ export declare function findIdentifierInParentScope({ scope, identifierName, }:
 export declare function insertTokensImport(fixer: Rule.RuleFixer): Rule.Fix;
 export declare const isSpacingProperty: (propertyName: string) => boolean;
 export declare const isTypographyProperty: (propertyName: string) => boolean;
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export declare const splitShorthandValues: (str: string) => string[];
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
@@ -97,6 +108,11 @@ export declare const findParentNodeForLine: (node: Rule.Node) => Rule.Node;
  * ```
  */
 export declare function shouldAnalyzeProperty(propertyName: string, targetOptions: TargetOptions): boolean;
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export declare function cleanComments(str: string): string;
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -109,7 +125,7 @@ export declare function shouldAnalyzeProperty(propertyName: string, targetOption
  * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
  * ```
  */
-export declare function processCssNode(node: TaggedTemplateExpression & Rule.NodeParentExtension, context: Rule.RuleContext): ProcessedCSSLines;
+export declare function processCssNode(node: TaggedTemplateExpression & Rule.NodeParentExtension, context: Rule.RuleContext): ProcessedCSSLines | undefined;
 /**
  * Returns a token node for a given value including fallbacks.
  * @param propertyName camelCase CSS property

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "4.16.2",
+  "version": "4.16.3",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"