Merge branch 'main' into innovation-building-blocks

Author: shivamarorac95

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   rules: {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
+    'gamut/no-inline-style': 'error',
     'gamut/import-paths': 'error',
     'import/no-extraneous-dependencies': 'off',
   },
@@ -66,5 +67,11 @@ module.exports = {
         'lodash/import-scope': ['error', 'method'],
       },
     },
+    {
+      files: ['packages/gamut-illustrations/**'],
+      rules: {
+        'gamut/no-inline-style': 'off',
+      },
+    },
   ],
 };

packages/eslint-plugin-gamut/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.0](https://github.com/Codecademy/gamut/compare/[email protected]@2.4.0) (2025-12-01)
+
+### Features
+
+- Disable inline `style` prop for components ([e695579](https://github.com/Codecademy/gamut/commit/e695579fdeb2de526a42d2aff2b75537918a9096))
+
 ### [2.3.2](https://github.com/Codecademy/gamut/compare/[email protected]@2.3.2) (2025-10-14)
 
 **Note:** Version bump only for package eslint-plugin-gamut

packages/eslint-plugin-gamut/README.md

@@ -16,6 +16,7 @@ module.exports = {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
     'gamut/import-paths': 'error',
+    'gamut/no-inline-style': 'error',
   },
 };
 ```

packages/eslint-plugin-gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-gamut",
   "description": "Shared eslint plugin for Gamut applications",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
     "@typescript-eslint/utils": "^5.15.0"

packages/eslint-plugin-gamut/src/index.tsx

@@ -1,11 +1,13 @@
 import gamutImportPaths from './gamut-import-paths';
 import noCssStandalone from './no-css-standalone';
+import noInlineStyle from './no-inline-style';
 import preferThemed from './prefer-themed';
 import recommended from './recommended';
 
 const rules = {
   'import-paths': gamutImportPaths,
   'no-css-standalone': noCssStandalone,
+  'no-inline-style': noInlineStyle,
   'prefer-themed': preferThemed,
 };
 

packages/eslint-plugin-gamut/src/no-css-standalone.ts

@@ -19,7 +19,7 @@ export default createRule({
     },
     messages: {
       noCssStandalone:
-        "Do not create anymore stylesheets, please see Gamut's Notion page for current best practices.",
+        "Do not create anymore stylesheets, please see Gamut's Storybook documentation for current best practices.",
     },
     type: 'suggestion',
     schema: [],

packages/eslint-plugin-gamut/src/no-inline-style.test.ts

@@ -0,0 +1,72 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+import rule from './no-inline-style';
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('no-inline-style', rule, {
+  valid: [
+    `<div />`,
+    `<div className="foo" />`,
+    `<Component className="bar" />`,
+    `<div styles={styles} />`,
+    `<Component styleSheet={sheet} />`,
+    `const style = { padding: 0 };`,
+  ],
+  invalid: [
+    {
+      code: `<div style={{ padding: 0 }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<Component style={{ margin: '10px' }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<button style={styles.button} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<div className="foo" style={{ color: 'red' }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `
+        <Component
+          style={{
+            padding: 0,
+            margin: 0,
+          }}
+        />
+      `,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-gamut/src/no-inline-style.ts

@@ -0,0 +1,30 @@
+import { createRule } from './createRule';
+
+export default createRule({
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.type === 'JSXIdentifier' && node.name.name === 'style') {
+          context.report({
+            messageId: 'noInlineStyle',
+            node,
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      description: 'Disallow inline style props on JSX elements.',
+      recommended: 'error',
+    },
+    messages: {
+      noInlineStyle:
+        'The use of inline styles is discouraged — consider using styled components, design system utilities, or CSS classes instead.',
+    },
+    type: 'suggestion',
+    schema: [],
+  },
+  name: 'no-inline-style',
+});

packages/eslint-plugin-gamut/src/recommended.ts

@@ -1,6 +1,7 @@
 export default {
   rules: {
     'gamut/no-css-standalone': 'error',
+    'gamut/no-inline-style': 'error',
     'gamut/prefer-themed': 'off',
     'gamut/gamut-import-paths': 'error',
   },

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.565](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-12-01)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.564](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-13)
 
 **Note:** Version bump only for package @codecademy/gamut-kit