@atlaskit/eslint-plugin-design-system 13.19.6 → 13.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +1 -1
  3. package/dist/cjs/rules/no-custom-icons/index.js +17 -5
  4. package/dist/cjs/rules/no-physical-properties/index.js +24 -3
  5. package/dist/es2019/rules/no-custom-icons/index.js +17 -5
  6. package/dist/es2019/rules/no-physical-properties/index.js +26 -3
  7. package/dist/esm/rules/no-custom-icons/index.js +17 -5
  8. package/dist/esm/rules/no-physical-properties/index.js +24 -3
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/eslint-plugin-design-system
2
2
 
3
+ ## 13.20.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`2896429aaa267`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2896429aaa267) -
8
+ Update the no-custom-icons eslint rule to include checking for custom svg usage
9
+
10
+ ## 13.20.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`e8f8ff85f4834`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f8ff85f4834) -
15
+ Add cssmap support for no-physical-properties rule
16
+
3
17
  ## 13.19.6
4
18
 
5
19
  ### Patch Changes
package/README.md CHANGED
@@ -85,7 +85,7 @@ module.exports = {
85
85
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-legacy-icons/README.md">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |
86
86
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
87
87
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
88
- | <a href="./packages/design-system/eslint-plugin/src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
88
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |
89
89
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-separator-with-list-elements/README.md">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as="li"`, `as="ol"`, or `as="dl"` in the Inline component. | Yes | | |
90
90
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-styled-tagged-template-expression/README.md">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
91
91
  | <a href="./packages/design-system/eslint-plugin/src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
package/dist/cjs/rules/no-custom-icons/index.js CHANGED
@@ -30,11 +30,12 @@ var rule = (0, _createRule.createLintRule)({
30
30
  additionalProperties: false
31
31
  }],
32
32
  messages: {
33
- noCustomIcons: "Custom icons from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
33
+ noCustomIcons: "Custom icons/svgs from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
34
34
  }
35
35
  },
36
36
  create: function create(context) {
37
37
  var _context$options$;
38
+ var isIconSvg = (0, _isFromImportSource.createIsFromImportSourceFor)('@atlaskit/icon/svg');
38
39
  var isIconBase = (0, _isFromImportSource.createIsFromImportSourceFor)('@atlaskit/icon', '@atlaskit/icon/base');
39
40
 
40
41
  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
@@ -43,14 +44,25 @@ var rule = (0, _createRule.createLintRule)({
43
44
  centralLocation = _ref$centralLocation === void 0 ? '' : _ref$centralLocation,
44
45
  _ref$failSilently = _ref.failSilently,
45
46
  failSilently = _ref$failSilently === void 0 ? false : _ref$failSilently;
47
+ function checkNode(node) {
48
+ isIconBase.importDeclarationHook(node);
49
+ isIconSvg.importDeclarationHook(node);
50
+ }
46
51
  var locationMessage = centralLocation ? ", move the icon to '".concat(centralLocation, "', or, if it's a third party logo, migrate to a standard <svg> element with a `label`.") : '';
47
52
  return (0, _errorBoundary.errorBoundary)({
48
53
  JSXElement: function JSXElement(node) {
49
- var _isIconBase$getImport;
50
- if (!isIconBase(node) || !(0, _hasProp.hasProp)(node, 'glyph')) {
54
+ var isSvg = isIconSvg(node);
55
+ var isBase = isIconBase(node);
56
+ // Not an icon import
57
+ if (!isSvg && (!isBase || !(0, _hasProp.hasProp)(node, 'glyph'))) {
51
58
  return;
52
59
  }
53
- var importSource = (_isIconBase$getImport = isIconBase.getImportSource(node)) !== null && _isIconBase$getImport !== void 0 ? _isIconBase$getImport : '';
60
+ var importSource = '';
61
+ if (isSvg) {
62
+ importSource = isIconSvg.getImportSource(node);
63
+ } else if (isBase) {
64
+ importSource = isIconBase.getImportSource(node);
65
+ }
54
66
  context.report({
55
67
  node: node.openingElement,
56
68
  messageId: 'noCustomIcons',
@@ -60,7 +72,7 @@ var rule = (0, _createRule.createLintRule)({
60
72
  }
61
73
  });
62
74
  },
63
- ImportDeclaration: isIconBase.importDeclarationHook
75
+ ImportDeclaration: checkNode
64
76
  }, failSilently);
65
77
  }
66
78
  });
package/dist/cjs/rules/no-physical-properties/index.js CHANGED
@@ -12,17 +12,18 @@ var rule = (0, _createRule.createLintRule)({
12
12
  name: 'no-physical-properties',
13
13
  fixable: 'code',
14
14
  docs: {
15
- description: 'Disallow physical properties and values in `css` function calls.',
15
+ description: 'Disallow physical properties and values in `css` and `cssMap` function calls.',
16
16
  recommended: false,
17
17
  severity: 'error'
18
18
  },
19
19
  messages: {
20
- noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
21
- noPhysicalValues: 'Physical values are not allowed in `css` functions.'
20
+ noPhysicalProperties: 'Physical properties are not allowed in `css` and `cssMap` functions as they do not support different reading modes. Use a logical property instead.',
21
+ noPhysicalValues: 'Physical values are not allowed in `css` and `cssMap` functions.'
22
22
  }
23
23
  },
24
24
  create: function create(context) {
25
25
  return {
26
+ // Handle css() calls
26
27
  'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCss__ObjectExpression_PropertyCallExpressionCalleeNameXcss__ObjectExpression_Property(node) {
27
28
  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
28
29
  return;
@@ -41,6 +42,26 @@ var rule = (0, _createRule.createLintRule)({
41
42
  }
42
43
  });
43
44
  }
45
+ },
46
+ // Handle cssMap() calls
47
+ 'CallExpression[callee.name=cssMap] > ObjectExpression Property > ObjectExpression Property': function CallExpressionCalleeNameCssMap__ObjectExpression_Property__ObjectExpression_Property(node) {
48
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
49
+ return;
50
+ }
51
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
52
+ return;
53
+ }
54
+ var key = node.key;
55
+ if (key.name in _logicalPhysicalMap.physicalLogicalMap) {
56
+ context.report({
57
+ node: key,
58
+ messageId: 'noPhysicalProperties',
59
+ fix: function fix(fixer) {
60
+ var logicalProperty = _logicalPhysicalMap.physicalLogicalMap[key.name];
61
+ return fixer.replaceText(key, logicalProperty);
62
+ }
63
+ });
64
+ }
44
65
  }
45
66
  };
46
67
  }
package/dist/es2019/rules/no-custom-icons/index.js CHANGED
@@ -24,12 +24,13 @@ const rule = createLintRule({
24
24
  additionalProperties: false
25
25
  }],
26
26
  messages: {
27
- noCustomIcons: `Custom icons from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.
27
+ noCustomIcons: `Custom icons/svgs from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.
28
28
  [Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide).`
29
29
  }
30
30
  },
31
31
  create(context) {
32
32
  var _context$options$;
33
+ const isIconSvg = createIsFromImportSourceFor('@atlaskit/icon/svg');
33
34
  const isIconBase = createIsFromImportSourceFor('@atlaskit/icon', '@atlaskit/icon/base');
34
35
 
35
36
  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
@@ -37,14 +38,25 @@ const rule = createLintRule({
37
38
  centralLocation = '',
38
39
  failSilently = false
39
40
  } = (_context$options$ = context.options[0]) !== null && _context$options$ !== void 0 ? _context$options$ : {};
41
+ function checkNode(node) {
42
+ isIconBase.importDeclarationHook(node);
43
+ isIconSvg.importDeclarationHook(node);
44
+ }
40
45
  const locationMessage = centralLocation ? `, move the icon to '${centralLocation}', or, if it's a third party logo, migrate to a standard <svg> element with a \`label\`.` : '';
41
46
  return errorBoundary({
42
47
  JSXElement(node) {
43
- var _isIconBase$getImport;
44
- if (!isIconBase(node) || !hasProp(node, 'glyph')) {
48
+ const isSvg = isIconSvg(node);
49
+ const isBase = isIconBase(node);
50
+ // Not an icon import
51
+ if (!isSvg && (!isBase || !hasProp(node, 'glyph'))) {
45
52
  return;
46
53
  }
47
- const importSource = (_isIconBase$getImport = isIconBase.getImportSource(node)) !== null && _isIconBase$getImport !== void 0 ? _isIconBase$getImport : '';
54
+ let importSource = '';
55
+ if (isSvg) {
56
+ importSource = isIconSvg.getImportSource(node);
57
+ } else if (isBase) {
58
+ importSource = isIconBase.getImportSource(node);
59
+ }
48
60
  context.report({
49
61
  node: node.openingElement,
50
62
  messageId: 'noCustomIcons',
@@ -54,7 +66,7 @@ const rule = createLintRule({
54
66
  }
55
67
  });
56
68
  },
57
- ImportDeclaration: isIconBase.importDeclarationHook
69
+ ImportDeclaration: checkNode
58
70
  }, failSilently);
59
71
  }
60
72
  });
package/dist/es2019/rules/no-physical-properties/index.js CHANGED
@@ -6,17 +6,18 @@ const rule = createLintRule({
6
6
  name: 'no-physical-properties',
7
7
  fixable: 'code',
8
8
  docs: {
9
- description: 'Disallow physical properties and values in `css` function calls.',
9
+ description: 'Disallow physical properties and values in `css` and `cssMap` function calls.',
10
10
  recommended: false,
11
11
  severity: 'error'
12
12
  },
13
13
  messages: {
14
- noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
15
- noPhysicalValues: 'Physical values are not allowed in `css` functions.'
14
+ noPhysicalProperties: 'Physical properties are not allowed in `css` and `cssMap` functions as they do not support different reading modes. Use a logical property instead.',
15
+ noPhysicalValues: 'Physical values are not allowed in `css` and `cssMap` functions.'
16
16
  }
17
17
  },
18
18
  create(context) {
19
19
  return {
20
+ // Handle css() calls
20
21
  'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': node => {
21
22
  if (!isNodeOfType(node, 'Property')) {
22
23
  return;
@@ -37,6 +38,28 @@ const rule = createLintRule({
37
38
  }
38
39
  });
39
40
  }
41
+ },
42
+ // Handle cssMap() calls
43
+ 'CallExpression[callee.name=cssMap] > ObjectExpression Property > ObjectExpression Property': node => {
44
+ if (!isNodeOfType(node, 'Property')) {
45
+ return;
46
+ }
47
+ if (!isNodeOfType(node.key, 'Identifier')) {
48
+ return;
49
+ }
50
+ const {
51
+ key
52
+ } = node;
53
+ if (key.name in physicalLogicalMap) {
54
+ context.report({
55
+ node: key,
56
+ messageId: 'noPhysicalProperties',
57
+ fix: fixer => {
58
+ const logicalProperty = physicalLogicalMap[key.name];
59
+ return fixer.replaceText(key, logicalProperty);
60
+ }
61
+ });
62
+ }
40
63
  }
41
64
  };
42
65
  }
package/dist/esm/rules/no-custom-icons/index.js CHANGED
@@ -24,11 +24,12 @@ var rule = createLintRule({
24
24
  additionalProperties: false
25
25
  }],
26
26
  messages: {
27
- noCustomIcons: "Custom icons from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
27
+ noCustomIcons: "Custom icons/svgs from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
28
28
  }
29
29
  },
30
30
  create: function create(context) {
31
31
  var _context$options$;
32
+ var isIconSvg = createIsFromImportSourceFor('@atlaskit/icon/svg');
32
33
  var isIconBase = createIsFromImportSourceFor('@atlaskit/icon', '@atlaskit/icon/base');
33
34
 
34
35
  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
@@ -37,14 +38,25 @@ var rule = createLintRule({
37
38
  centralLocation = _ref$centralLocation === void 0 ? '' : _ref$centralLocation,
38
39
  _ref$failSilently = _ref.failSilently,
39
40
  failSilently = _ref$failSilently === void 0 ? false : _ref$failSilently;
41
+ function checkNode(node) {
42
+ isIconBase.importDeclarationHook(node);
43
+ isIconSvg.importDeclarationHook(node);
44
+ }
40
45
  var locationMessage = centralLocation ? ", move the icon to '".concat(centralLocation, "', or, if it's a third party logo, migrate to a standard <svg> element with a `label`.") : '';
41
46
  return errorBoundary({
42
47
  JSXElement: function JSXElement(node) {
43
- var _isIconBase$getImport;
44
- if (!isIconBase(node) || !hasProp(node, 'glyph')) {
48
+ var isSvg = isIconSvg(node);
49
+ var isBase = isIconBase(node);
50
+ // Not an icon import
51
+ if (!isSvg && (!isBase || !hasProp(node, 'glyph'))) {
45
52
  return;
46
53
  }
47
- var importSource = (_isIconBase$getImport = isIconBase.getImportSource(node)) !== null && _isIconBase$getImport !== void 0 ? _isIconBase$getImport : '';
54
+ var importSource = '';
55
+ if (isSvg) {
56
+ importSource = isIconSvg.getImportSource(node);
57
+ } else if (isBase) {
58
+ importSource = isIconBase.getImportSource(node);
59
+ }
48
60
  context.report({
49
61
  node: node.openingElement,
50
62
  messageId: 'noCustomIcons',
@@ -54,7 +66,7 @@ var rule = createLintRule({
54
66
  }
55
67
  });
56
68
  },
57
- ImportDeclaration: isIconBase.importDeclarationHook
69
+ ImportDeclaration: checkNode
58
70
  }, failSilently);
59
71
  }
60
72
  });
package/dist/esm/rules/no-physical-properties/index.js CHANGED
@@ -6,17 +6,18 @@ var rule = createLintRule({
6
6
  name: 'no-physical-properties',
7
7
  fixable: 'code',
8
8
  docs: {
9
- description: 'Disallow physical properties and values in `css` function calls.',
9
+ description: 'Disallow physical properties and values in `css` and `cssMap` function calls.',
10
10
  recommended: false,
11
11
  severity: 'error'
12
12
  },
13
13
  messages: {
14
- noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
15
- noPhysicalValues: 'Physical values are not allowed in `css` functions.'
14
+ noPhysicalProperties: 'Physical properties are not allowed in `css` and `cssMap` functions as they do not support different reading modes. Use a logical property instead.',
15
+ noPhysicalValues: 'Physical values are not allowed in `css` and `cssMap` functions.'
16
16
  }
17
17
  },
18
18
  create: function create(context) {
19
19
  return {
20
+ // Handle css() calls
20
21
  'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCss__ObjectExpression_PropertyCallExpressionCalleeNameXcss__ObjectExpression_Property(node) {
21
22
  if (!isNodeOfType(node, 'Property')) {
22
23
  return;
@@ -35,6 +36,26 @@ var rule = createLintRule({
35
36
  }
36
37
  });
37
38
  }
39
+ },
40
+ // Handle cssMap() calls
41
+ 'CallExpression[callee.name=cssMap] > ObjectExpression Property > ObjectExpression Property': function CallExpressionCalleeNameCssMap__ObjectExpression_Property__ObjectExpression_Property(node) {
42
+ if (!isNodeOfType(node, 'Property')) {
43
+ return;
44
+ }
45
+ if (!isNodeOfType(node.key, 'Identifier')) {
46
+ return;
47
+ }
48
+ var key = node.key;
49
+ if (key.name in physicalLogicalMap) {
50
+ context.report({
51
+ node: key,
52
+ messageId: 'noPhysicalProperties',
53
+ fix: function fix(fixer) {
54
+ var logicalProperty = physicalLogicalMap[key.name];
55
+ return fixer.replaceText(key, logicalProperty);
56
+ }
57
+ });
58
+ }
38
59
  }
39
60
  };
40
61
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/eslint-plugin-design-system",
3
3
  "description": "The essential plugin for use with the Atlassian Design System.",
4
- "version": "13.19.6",
4
+ "version": "13.20.1",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
7
7
  "publishConfig": {
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/eslint-utils": "^2.0.0",
46
46
  "@atlaskit/icon": "^28.1.0",
47
47
  "@atlaskit/icon-lab": "^5.7.0",
48
- "@atlaskit/tokens": "^6.1.0",
48
+ "@atlaskit/tokens": "^6.3.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@typescript-eslint/utils": "^7.1.0",
51
51
  "ajv": "^6.12.6",