@atlaskit/eslint-plugin-design-system 8.2.0 → 8.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.2.2
+
+### Patch Changes
+
+- [`1859bc0b8c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1859bc0b8c7) - Update the casing on `xcss` to ensure consistency with the API and package consumption.
+
+## 8.2.1
+
+### Patch Changes
+
+- [`52b35a6b571`](https://bitbucket.org/atlassian/atlassian-frontend/commits/52b35a6b571) - - Fixed an issue where the `ensure-design-token-usage` rule may incorrectly report variables that reference tokens as an error.
+  - Fixed an issue where the `ensure-design-token-usage` rule may handle expressions that span multiple lines in template literals incorrectly.
+
 ## 8.2.0
 
 ### Minor Changes

package/README.md

@@ -49,7 +49,7 @@ module.exports = {
 
 | Rule                                                                                                    | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
+| <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xcss prop usages                                               | Yes         | Yes     |             |
 | <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     | Yes         |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |

package/constellation/index/usage.mdx

@@ -13,7 +13,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 
 | Rule                                                                               | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="#consistent-css-prop-usage">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
+| <a href="#consistent-css-prop-usage">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xcss prop usages                                               | Yes         | Yes     |             |
 | <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     | Yes         |
 | <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     | Yes         |
 | <a href="#icon-label">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -111,7 +111,7 @@ var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'consistent-css-prop-usage',
     docs: {
-      description: 'Ensures consistency with CSS and xCSS prop usages',
+      description: 'Ensures consistency with CSS and xcss prop usages',
       url: 'https://developer.atlassian.com/cloud/framework/atlassian-frontend/development/styling',
       recommended: true,
       severity: 'error'

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

@@ -168,6 +168,9 @@ var createWithConfig = function createWithConfig(initialConfig) {
                 numericOrNanValue = _ref4[0],
                 pxValue = _ref4[1],
                 originalValue = _ref4[2];
+              if (!originalValue) {
+                return originalValue;
+              }
               if ((0, _spacingUtils.isTokenValueString)(originalValue)) {
                 // if the value is already valid, nothing to report or replace
                 return originalValue;

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

@@ -150,7 +150,7 @@ var getRawExpression = function getRawExpression(node, context) {
   var _node$range = (0, _slicedToArray2.default)(node.range, 2),
     start = _node$range[0],
     end = _node$range[1];
-  return context.getSourceCode().getText().substring(start, end);
+  return context.getSourceCode().getText().substring(start, end).replaceAll('\n', '');
 };
 exports.getRawExpression = getRawExpression;
 var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
@@ -456,7 +456,6 @@ function getFontSizeValueInScope(cssProperties) {
 /**
  * Attempts to remove all non-essential words & characters from a style block.
  * Including selectors and queries
- * Adapted from ensure-design-token-usage
  * @param styleString string of css properties
  */
 function splitCssProperties(styleString) {

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

@@ -31,6 +31,11 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
   var isFontFamily = /fontFamily/.test(propertyName);
   var value = (0, _spacingUtils.getValue)(node.value, context);
 
+  // Value is a token string (e.g. set via a variable)
+  if (typeof value === 'string' && /\${token\(.*\)}/.test(value)) {
+    return;
+  }
+
   // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
   if (!(value && (0, _spacingUtils.isValidSpacingValue)(value, fontSize))) {
     return context.report({

package/dist/cjs/version.json

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

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -97,7 +97,7 @@ const rule = createLintRule({
   meta: {
     name: 'consistent-css-prop-usage',
     docs: {
-      description: 'Ensures consistency with CSS and xCSS prop usages',
+      description: 'Ensures consistency with CSS and xcss prop usages',
       url: 'https://developer.atlassian.com/cloud/framework/atlassian-frontend/development/styling',
       recommended: true,
       severity: 'error'

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

@@ -136,6 +136,9 @@ const createWithConfig = initialConfig => context => {
           .map((value, index) => [
           // if emToPX conversion fails we'll default to original value
           emToPixels(value, globalFontSize) || value, processedValues[index], originalValues[index]]).map(([numericOrNanValue, pxValue, originalValue]) => {
+            if (!originalValue) {
+              return originalValue;
+            }
             if (isTokenValueString(originalValue)) {
               // if the value is already valid, nothing to report or replace
               return originalValue;

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

@@ -111,7 +111,7 @@ export const getRawExpression = (node, context) => {
     return null;
   }
   const [start, end] = node.range;
-  return context.getSourceCode().getText().substring(start, end);
+  return context.getSourceCode().getText().substring(start, end).replaceAll('\n', '');
 };
 const getValueFromIdentifier = (node, context) => {
   if (!isNodeOfType(node, 'Identifier')) {
@@ -398,7 +398,6 @@ export function getFontSizeValueInScope(cssProperties) {
 /**
  * Attempts to remove all non-essential words & characters from a style block.
  * Including selectors and queries
- * Adapted from ensure-design-token-usage
  * @param styleString string of css properties
  */
 export function splitCssProperties(styleString) {

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

@@ -20,6 +20,11 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
   const isFontFamily = /fontFamily/.test(propertyName);
   const value = getValue(node.value, context);
 
+  // Value is a token string (e.g. set via a variable)
+  if (typeof value === 'string' && /\${token\(.*\)}/.test(value)) {
+    return;
+  }
+
   // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
   if (!(value && isValidSpacingValue(value, fontSize))) {
     return context.report({

package/dist/es2019/version.json

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

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -104,7 +104,7 @@ var rule = createLintRule({
   meta: {
     name: 'consistent-css-prop-usage',
     docs: {
-      description: 'Ensures consistency with CSS and xCSS prop usages',
+      description: 'Ensures consistency with CSS and xcss prop usages',
       url: 'https://developer.atlassian.com/cloud/framework/atlassian-frontend/development/styling',
       recommended: true,
       severity: 'error'

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

@@ -161,6 +161,9 @@ var createWithConfig = function createWithConfig(initialConfig) {
                 numericOrNanValue = _ref4[0],
                 pxValue = _ref4[1],
                 originalValue = _ref4[2];
+              if (!originalValue) {
+                return originalValue;
+              }
               if (isTokenValueString(originalValue)) {
                 // if the value is already valid, nothing to report or replace
                 return originalValue;

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

@@ -120,7 +120,7 @@ export var getRawExpression = function getRawExpression(node, context) {
   var _node$range = _slicedToArray(node.range, 2),
     start = _node$range[0],
     end = _node$range[1];
-  return context.getSourceCode().getText().substring(start, end);
+  return context.getSourceCode().getText().substring(start, end).replaceAll('\n', '');
 };
 var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
   if (!isNodeOfType(node, 'Identifier')) {
@@ -417,7 +417,6 @@ export function getFontSizeValueInScope(cssProperties) {
 /**
  * Attempts to remove all non-essential words & characters from a style block.
  * Including selectors and queries
- * Adapted from ensure-design-token-usage
  * @param styleString string of css properties
  */
 export function splitCssProperties(styleString) {

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

@@ -24,6 +24,11 @@ export var lintObjectForSpacing = function lintObjectForSpacing(node, context, r
   var isFontFamily = /fontFamily/.test(propertyName);
   var value = getValue(node.value, context);
 
+  // Value is a token string (e.g. set via a variable)
+  if (typeof value === 'string' && /\${token\(.*\)}/.test(value)) {
+    return;
+  }
+
   // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
   if (!(value && isValidSpacingValue(value, fontSize))) {
     return context.report({

package/dist/esm/version.json

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

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

@@ -77,7 +77,6 @@ export declare function getFontSizeValueInScope(cssProperties: ProcessedCSSLines
 /**
  * Attempts to remove all non-essential words & characters from a style block.
  * Including selectors and queries
- * Adapted from ensure-design-token-usage
  * @param styleString string of css properties
  */
 export declare function splitCssProperties(styleString: string): string[];

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

@@ -80,7 +80,6 @@ export declare function getFontSizeValueInScope(cssProperties: ProcessedCSSLines
 /**
  * Attempts to remove all non-essential words & characters from a style block.
  * Including selectors and queries
- * Adapted from ensure-design-token-usage
  * @param styleString string of css properties
  */
 export declare function splitCssProperties(styleString: string): string[];

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": "8.2.0",
+  "version": "8.2.2",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"