@atlaskit/eslint-plugin-design-system 13.23.0 → 13.23.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.23.2
+
+### Patch Changes
+
+- [`789b0a7d82394`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/789b0a7d82394) -
+  Update `ensure-proper-xcss-usage` to account for style declarations after usage.
+
+## 13.23.1
+
+### Patch Changes
+
+- [`70773e71f139a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70773e71f139a) -
+  Update description for use-spotlight-package.
+- [`70773e71f139a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70773e71f139a) -
+  Update tests.
+
 ## 13.23.0
 
 ### Minor Changes

package/dist/cjs/rules/ensure-proper-xcss-usage/index.js

@@ -31,6 +31,9 @@ var rule = (0, _createRule.createLintRule)({
       cssMapVariables: new Map(),
       xcssVariables: new Set()
     };
+
+    // Store potential violations to check after all declarations are collected
+    var potentialViolations = [];
     return (0, _errorBoundary.errorBoundary)({
       // Track all imports in a single handler
       ImportDeclaration: function ImportDeclaration(node) {
@@ -44,7 +47,9 @@ var rule = (0, _createRule.createLintRule)({
           switch (source) {
             case '@atlaskit/primitives/compiled':
               if (specifier.imported.type === 'Identifier') {
-                tracker.compiledComponents.add(specifier.imported.name);
+                // Track the local name (alias), not the imported name
+                // e.g., import { Box as CompiledBox } -> track "CompiledBox"
+                tracker.compiledComponents.add(specifier.local.name);
               }
               break;
             case '@atlaskit/primitives':
@@ -82,11 +87,54 @@ var rule = (0, _createRule.createLintRule)({
             });
           }
           tracker.cssMapVariables.set(variableName, keys);
+
+          // Check if this variable was used before it was declared
+          var violationsToRemove = [];
+          potentialViolations.forEach(function (violation, index) {
+            if (violation.identifierName === variableName) {
+              if (violation.type === 'identifier') {
+                // Identifier usage of cssMap variable is invalid (e.g., styles instead of styles.root)
+                context.report({
+                  node: violation.node,
+                  messageId: 'missingCssMapKey',
+                  data: {
+                    identifier: variableName
+                  }
+                });
+                violationsToRemove.push(index);
+              }
+              // Member expressions with cssMap are valid (e.g., styles.root) - just remove from list
+              // No need to report or keep in list
+              if (violation.type === 'memberExpression') {
+                violationsToRemove.push(index);
+              }
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          violationsToRemove.reverse().forEach(function (index) {
+            potentialViolations.splice(index, 1);
+          });
         }
 
         // Track xcss variables
         if (tracker.xcssFunction.has(calleeName)) {
           tracker.xcssVariables.add(variableName);
+
+          // Check if this variable was used before it was declared
+          var _violationsToRemove = [];
+          potentialViolations.forEach(function (violation, index) {
+            if (violation.identifierName === variableName) {
+              context.report({
+                node: violation.node,
+                messageId: 'noXcssWithCompiled'
+              });
+              _violationsToRemove.push(index);
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          _violationsToRemove.reverse().forEach(function (index) {
+            potentialViolations.splice(index, 1);
+          });
         }
       },
       // Check JSX elements for xcss prop usage
@@ -138,6 +186,13 @@ var rule = (0, _createRule.createLintRule)({
                 identifier: identifierName
               }
             });
+          } else {
+            // Variable not yet declared - store for later check
+            potentialViolations.push({
+              node: expression,
+              identifierName: identifierName,
+              type: 'identifier'
+            });
           }
           return;
         }
@@ -150,8 +205,39 @@ var rule = (0, _createRule.createLintRule)({
               node: expression,
               messageId: 'noXcssWithCompiled'
             });
+          } else if (!tracker.cssMapVariables.has(objectName)) {
+            // Variable not yet declared - store for later check
+            // Note: If it's already a cssMap variable, member expressions are valid (e.g., styles.root)
+            potentialViolations.push({
+              node: expression,
+              identifierName: objectName,
+              type: 'memberExpression'
+            });
           }
+          // If it's a cssMap variable, member expressions are valid - no action needed
         }
+      },
+      // Final check after all declarations are processed
+      'Program:exit': function ProgramExit() {
+        // Check remaining potential violations against all collected declarations
+        potentialViolations.forEach(function (violation) {
+          if (tracker.xcssVariables.has(violation.identifierName)) {
+            context.report({
+              node: violation.node,
+              messageId: 'noXcssWithCompiled'
+            });
+          } else if (tracker.cssMapVariables.has(violation.identifierName) && violation.type === 'identifier') {
+            // Only report cssMap violations for identifier usage (not member expressions)
+            // Member expressions like stylesMap.root are valid
+            context.report({
+              node: violation.node,
+              messageId: 'missingCssMapKey',
+              data: {
+                identifier: violation.identifierName
+              }
+            });
+          }
+        });
       }
     });
   }

package/dist/cjs/rules/use-spotlight-package/index.js

@@ -15,11 +15,11 @@ var rule = (0, _createRule.createLintRule)({
     fixable: 'code',
     hasSuggestions: true,
     docs: {
-      description: 'Discourage the use of deprecated imports from @atlaskit/onboarding in favor of @atlaskit/spotlight.',
+      description: 'Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.',
       recommended: false,
       severity: 'warn'
     },
-    messages: (0, _defineProperty2.default)({}, 'use-spotlight-package', '@atlaskit/onboarding is being deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.')
+    messages: (0, _defineProperty2.default)({}, 'use-spotlight-package', '@atlaskit/onboarding is deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.')
   },
   create: function create(context) {
     return {

package/dist/es2019/rules/ensure-proper-xcss-usage/index.js

@@ -25,6 +25,9 @@ const rule = createLintRule({
       cssMapVariables: new Map(),
       xcssVariables: new Set()
     };
+
+    // Store potential violations to check after all declarations are collected
+    const potentialViolations = [];
     return errorBoundary({
       // Track all imports in a single handler
       ImportDeclaration(node) {
@@ -38,7 +41,9 @@ const rule = createLintRule({
           switch (source) {
             case '@atlaskit/primitives/compiled':
               if (specifier.imported.type === 'Identifier') {
-                tracker.compiledComponents.add(specifier.imported.name);
+                // Track the local name (alias), not the imported name
+                // e.g., import { Box as CompiledBox } -> track "CompiledBox"
+                tracker.compiledComponents.add(specifier.local.name);
               }
               break;
             case '@atlaskit/primitives':
@@ -76,11 +81,54 @@ const rule = createLintRule({
             });
           }
           tracker.cssMapVariables.set(variableName, keys);
+
+          // Check if this variable was used before it was declared
+          const violationsToRemove = [];
+          potentialViolations.forEach((violation, index) => {
+            if (violation.identifierName === variableName) {
+              if (violation.type === 'identifier') {
+                // Identifier usage of cssMap variable is invalid (e.g., styles instead of styles.root)
+                context.report({
+                  node: violation.node,
+                  messageId: 'missingCssMapKey',
+                  data: {
+                    identifier: variableName
+                  }
+                });
+                violationsToRemove.push(index);
+              }
+              // Member expressions with cssMap are valid (e.g., styles.root) - just remove from list
+              // No need to report or keep in list
+              if (violation.type === 'memberExpression') {
+                violationsToRemove.push(index);
+              }
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          violationsToRemove.reverse().forEach(index => {
+            potentialViolations.splice(index, 1);
+          });
         }
 
         // Track xcss variables
         if (tracker.xcssFunction.has(calleeName)) {
           tracker.xcssVariables.add(variableName);
+
+          // Check if this variable was used before it was declared
+          const violationsToRemove = [];
+          potentialViolations.forEach((violation, index) => {
+            if (violation.identifierName === variableName) {
+              context.report({
+                node: violation.node,
+                messageId: 'noXcssWithCompiled'
+              });
+              violationsToRemove.push(index);
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          violationsToRemove.reverse().forEach(index => {
+            potentialViolations.splice(index, 1);
+          });
         }
       },
       // Check JSX elements for xcss prop usage
@@ -130,6 +178,13 @@ const rule = createLintRule({
                 identifier: identifierName
               }
             });
+          } else {
+            // Variable not yet declared - store for later check
+            potentialViolations.push({
+              node: expression,
+              identifierName,
+              type: 'identifier'
+            });
           }
           return;
         }
@@ -142,8 +197,39 @@ const rule = createLintRule({
               node: expression,
               messageId: 'noXcssWithCompiled'
             });
+          } else if (!tracker.cssMapVariables.has(objectName)) {
+            // Variable not yet declared - store for later check
+            // Note: If it's already a cssMap variable, member expressions are valid (e.g., styles.root)
+            potentialViolations.push({
+              node: expression,
+              identifierName: objectName,
+              type: 'memberExpression'
+            });
           }
+          // If it's a cssMap variable, member expressions are valid - no action needed
         }
+      },
+      // Final check after all declarations are processed
+      'Program:exit'() {
+        // Check remaining potential violations against all collected declarations
+        potentialViolations.forEach(violation => {
+          if (tracker.xcssVariables.has(violation.identifierName)) {
+            context.report({
+              node: violation.node,
+              messageId: 'noXcssWithCompiled'
+            });
+          } else if (tracker.cssMapVariables.has(violation.identifierName) && violation.type === 'identifier') {
+            // Only report cssMap violations for identifier usage (not member expressions)
+            // Member expressions like stylesMap.root are valid
+            context.report({
+              node: violation.node,
+              messageId: 'missingCssMapKey',
+              data: {
+                identifier: violation.identifierName
+              }
+            });
+          }
+        });
       }
     });
   }

package/dist/es2019/rules/use-spotlight-package/index.js

@@ -7,12 +7,12 @@ const rule = createLintRule({
     fixable: 'code',
     hasSuggestions: true,
     docs: {
-      description: 'Discourage the use of deprecated imports from @atlaskit/onboarding in favor of @atlaskit/spotlight.',
+      description: 'Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.',
       recommended: false,
       severity: 'warn'
     },
     messages: {
-      ['use-spotlight-package']: '@atlaskit/onboarding is being deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.'
+      ['use-spotlight-package']: '@atlaskit/onboarding is deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.'
     }
   },
   create(context) {

package/dist/esm/rules/ensure-proper-xcss-usage/index.js

@@ -25,6 +25,9 @@ var rule = createLintRule({
       cssMapVariables: new Map(),
       xcssVariables: new Set()
     };
+
+    // Store potential violations to check after all declarations are collected
+    var potentialViolations = [];
     return errorBoundary({
       // Track all imports in a single handler
       ImportDeclaration: function ImportDeclaration(node) {
@@ -38,7 +41,9 @@ var rule = createLintRule({
           switch (source) {
             case '@atlaskit/primitives/compiled':
               if (specifier.imported.type === 'Identifier') {
-                tracker.compiledComponents.add(specifier.imported.name);
+                // Track the local name (alias), not the imported name
+                // e.g., import { Box as CompiledBox } -> track "CompiledBox"
+                tracker.compiledComponents.add(specifier.local.name);
               }
               break;
             case '@atlaskit/primitives':
@@ -76,11 +81,54 @@ var rule = createLintRule({
             });
           }
           tracker.cssMapVariables.set(variableName, keys);
+
+          // Check if this variable was used before it was declared
+          var violationsToRemove = [];
+          potentialViolations.forEach(function (violation, index) {
+            if (violation.identifierName === variableName) {
+              if (violation.type === 'identifier') {
+                // Identifier usage of cssMap variable is invalid (e.g., styles instead of styles.root)
+                context.report({
+                  node: violation.node,
+                  messageId: 'missingCssMapKey',
+                  data: {
+                    identifier: variableName
+                  }
+                });
+                violationsToRemove.push(index);
+              }
+              // Member expressions with cssMap are valid (e.g., styles.root) - just remove from list
+              // No need to report or keep in list
+              if (violation.type === 'memberExpression') {
+                violationsToRemove.push(index);
+              }
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          violationsToRemove.reverse().forEach(function (index) {
+            potentialViolations.splice(index, 1);
+          });
         }
 
         // Track xcss variables
         if (tracker.xcssFunction.has(calleeName)) {
           tracker.xcssVariables.add(variableName);
+
+          // Check if this variable was used before it was declared
+          var _violationsToRemove = [];
+          potentialViolations.forEach(function (violation, index) {
+            if (violation.identifierName === variableName) {
+              context.report({
+                node: violation.node,
+                messageId: 'noXcssWithCompiled'
+              });
+              _violationsToRemove.push(index);
+            }
+          });
+          // Remove violations in reverse order to maintain indices
+          _violationsToRemove.reverse().forEach(function (index) {
+            potentialViolations.splice(index, 1);
+          });
         }
       },
       // Check JSX elements for xcss prop usage
@@ -132,6 +180,13 @@ var rule = createLintRule({
                 identifier: identifierName
               }
             });
+          } else {
+            // Variable not yet declared - store for later check
+            potentialViolations.push({
+              node: expression,
+              identifierName: identifierName,
+              type: 'identifier'
+            });
           }
           return;
         }
@@ -144,8 +199,39 @@ var rule = createLintRule({
               node: expression,
               messageId: 'noXcssWithCompiled'
             });
+          } else if (!tracker.cssMapVariables.has(objectName)) {
+            // Variable not yet declared - store for later check
+            // Note: If it's already a cssMap variable, member expressions are valid (e.g., styles.root)
+            potentialViolations.push({
+              node: expression,
+              identifierName: objectName,
+              type: 'memberExpression'
+            });
           }
+          // If it's a cssMap variable, member expressions are valid - no action needed
         }
+      },
+      // Final check after all declarations are processed
+      'Program:exit': function ProgramExit() {
+        // Check remaining potential violations against all collected declarations
+        potentialViolations.forEach(function (violation) {
+          if (tracker.xcssVariables.has(violation.identifierName)) {
+            context.report({
+              node: violation.node,
+              messageId: 'noXcssWithCompiled'
+            });
+          } else if (tracker.cssMapVariables.has(violation.identifierName) && violation.type === 'identifier') {
+            // Only report cssMap violations for identifier usage (not member expressions)
+            // Member expressions like stylesMap.root are valid
+            context.report({
+              node: violation.node,
+              messageId: 'missingCssMapKey',
+              data: {
+                identifier: violation.identifierName
+              }
+            });
+          }
+        });
       }
     });
   }

package/dist/esm/rules/use-spotlight-package/index.js

@@ -8,11 +8,11 @@ var rule = createLintRule({
     fixable: 'code',
     hasSuggestions: true,
     docs: {
-      description: 'Discourage the use of deprecated imports from @atlaskit/onboarding in favor of @atlaskit/spotlight.',
+      description: 'Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.',
       recommended: false,
       severity: 'warn'
     },
-    messages: _defineProperty({}, 'use-spotlight-package', '@atlaskit/onboarding is being deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.')
+    messages: _defineProperty({}, 'use-spotlight-package', '@atlaskit/onboarding is deprecated in favor of @atlaskit/spotlight. Please migrate your spotlight experiences accordingly.')
   },
   create: function create(context) {
     return {

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": "13.23.0",
+	"version": "13.23.2",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -40,8 +40,8 @@
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/icon-lab": "^5.10.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/icon-lab": "^5.11.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",
@@ -54,7 +54,7 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/eslint-utils": "^0.5.0",