Rule to warn on className assignment of anything from backpack-web

index.js

@@ -16,11 +16,13 @@
  * limitations under the License.
  */
 
+const noClassnameAssign = require('./src/rules/no-classname-assign');
 const useTokens = require('./src/rules/use-tokens/use-tokens');
 const useComponents = require('./src/rules/use-components/use-components');
 
 module.exports = {
   rules: {
+    'no-classname-assign': noClassnameAssign,
     'use-tokens': useTokens,
     'use-components': useComponents,
   },

src/rules/no-classname-assign/no-classname-assign.js

@@ -0,0 +1,45 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2018-present Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const importedComponents = [];
+
+module.exports = {
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@skyscanner/backpack-web') {
+          for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportSpecifier') {
+              importedComponents.push(specifier.local.name);
+            }
+          }
+        }
+      },
+      AssignmentExpression(node) {
+        if (
+          node.left.type === 'MemberExpression' &&
+          node.left.property.name === 'className' &&
+          importedComponents.includes(node.left.object.name)
+        ) {
+          context.report({
+            node,
+            message: 'Avoid assigning to className of backpack-web components',
+          });
+        }
+      },
+    };
+  },
+};

src/rules/no-classname-assign/no-classname-assign.test.js

@@ -0,0 +1,93 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2018-present Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const { RuleTester } = require('eslint');
+const rule = require('./no-classname-assign');
+
+const parserOptions = {
+  parser: '@babel/eslint-parser',
+  ecmaVersion: 2015,
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+const ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run('no-classname-assign', rule, {
+  valid: [
+    {
+      code: `
+                import BpkButton from '@skyscanner/backpack-web';
+                function MyComponent() {
+                    return <BpkButton className="my-class" />;
+                }
+            `,
+    },
+    {
+      code: `
+                import { BpkButton } from '@skyscanner/backpack-web';
+                function MyComponent() {
+                    return <BpkButton />;
+                }
+            `,
+    },
+    {
+      code: `
+                import NotBackpack from 'some-other-package';
+                function MyComponent() {
+                    NotBackpack.className = 'another-class';
+                }
+            `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+                import BpkButton from '@skyscanner/backpack-web';
+                function MyComponent() {
+                    BpkButton.className = 'another-class';
+                }
+            `,
+      errors: [
+        {
+          message: 'Avoid assigning to className of backpack-web components',
+          type: 'AssignmentExpression',
+        },
+      ],
+    },
+    {
+      code: `
+                import { BpkButton, BpkLink } from '@skyscanner/backpack-web';
+                function MyComponent() {
+                    BpkButton.className = 'another-class';
+                    BpkLink.className = 'another-class';
+                }
+            `,
+      errors: [
+        {
+          message: 'Avoid assigning to className of backpack-web components',
+          type: 'AssignmentExpression',
+        },
+        {
+          message: 'Avoid assigning to className of backpack-web components',
+          type: 'AssignmentExpression',
+        },
+      ],
+    },
+  ],
+});