From 226e9ce0750c4df10d6ed4eeebf9b96ad980bcb2 Mon Sep 17 00:00:00 2001
From: MCMXC <16797721+mcmxcdev@users.noreply.github.com>
Date: Thu, 19 Feb 2026 07:53:45 -0700
Subject: [PATCH 1/2] feat(lint): add NoInlineStyles nursery rule

---
 .changeset/add-no-inline-styles-rule.md       |   5 +
 .../src/analyzer/linter/rules.rs              |   4 +
 .../src/generated/domain_selector.rs          |   1 +
 .../src/categories.rs                         |   5 +-
 .../src/lint/nursery/no_inline_styles.rs      |  89 +++++++++
 .../specs/nursery/noInlineStyles/invalid.html |  13 ++
 .../nursery/noInlineStyles/invalid.html.snap  | 147 +++++++++++++++
 .../specs/nursery/noInlineStyles/valid.html   |  11 ++
 .../nursery/noInlineStyles/valid.html.snap    |  19 ++
 .../src/lint/nursery/no_inline_styles.rs      | 149 +++++++++++++++
 .../specs/nursery/noInlineStyles/invalid.jsx  |  15 ++
 .../nursery/noInlineStyles/invalid.jsx.snap   | 170 ++++++++++++++++++
 .../specs/nursery/noInlineStyles/valid.jsx    |  15 ++
 .../nursery/noInlineStyles/valid.jsx.snap     |  23 +++
 crates/biome_rule_options/src/lib.rs          |   1 +
 .../src/no_inline_styles.rs                   |   6 +
 16 files changed, 671 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/add-no-inline-styles-rule.md
 create mode 100644 crates/biome_html_analyze/src/lint/nursery/no_inline_styles.rs
 create mode 100644 crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html
 create mode 100644 crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html.snap
 create mode 100644 crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html
 create mode 100644 crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html.snap
 create mode 100644 crates/biome_js_analyze/src/lint/nursery/no_inline_styles.rs
 create mode 100644 crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx
 create mode 100644 crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx.snap
 create mode 100644 crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx
 create mode 100644 crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx.snap
 create mode 100644 crates/biome_rule_options/src/no_inline_styles.rs

diff --git a/.changeset/add-no-inline-styles-rule.md b/.changeset/add-no-inline-styles-rule.md
new file mode 100644
index 000000000000..6c29c59d5d7d
--- /dev/null
+++ b/.changeset/add-no-inline-styles-rule.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the nursery rule [`noInlineStyles`](https://biomejs.dev/linter/rules/no-inline-styles/). The rule disallows the use of inline `style` attributes in HTML and the `style` prop in JSX, including `React.createElement` calls. Inline styles make code harder to maintain and can interfere with Content Security Policy.
diff --git a/crates/biome_configuration/src/analyzer/linter/rules.rs b/crates/biome_configuration/src/analyzer/linter/rules.rs
index ae5da59ffdb5..b882a15421c7 100644
--- a/crates/biome_configuration/src/analyzer/linter/rules.rs
+++ b/crates/biome_configuration/src/analyzer/linter/rules.rs
@@ -214,6 +214,7 @@ pub enum RuleName {
     NoImportantStyles,
     NoIncrementDecrement,
     NoInferrableTypes,
+    NoInlineStyles,
     NoInnerDeclarations,
     NoInteractiveElementToNoninteractiveRole,
     NoInvalidBuiltinInstantiation,
@@ -669,6 +670,7 @@ impl RuleName {
             Self::NoImportantStyles => "noImportantStyles",
             Self::NoIncrementDecrement => "noIncrementDecrement",
             Self::NoInferrableTypes => "noInferrableTypes",
+            Self::NoInlineStyles => "noInlineStyles",
             Self::NoInnerDeclarations => "noInnerDeclarations",
             Self::NoInteractiveElementToNoninteractiveRole => {
                 "noInteractiveElementToNoninteractiveRole"
@@ -1128,6 +1130,7 @@ impl RuleName {
             Self::NoImportantStyles => RuleGroup::Complexity,
             Self::NoIncrementDecrement => RuleGroup::Nursery,
             Self::NoInferrableTypes => RuleGroup::Style,
+            Self::NoInlineStyles => RuleGroup::Nursery,
             Self::NoInnerDeclarations => RuleGroup::Correctness,
             Self::NoInteractiveElementToNoninteractiveRole => RuleGroup::A11y,
             Self::NoInvalidBuiltinInstantiation => RuleGroup::Correctness,
@@ -1588,6 +1591,7 @@ impl std::str::FromStr for RuleName {
             "noImportantStyles" => Ok(Self::NoImportantStyles),
             "noIncrementDecrement" => Ok(Self::NoIncrementDecrement),
             "noInferrableTypes" => Ok(Self::NoInferrableTypes),
+            "noInlineStyles" => Ok(Self::NoInlineStyles),
             "noInnerDeclarations" => Ok(Self::NoInnerDeclarations),
             "noInteractiveElementToNoninteractiveRole" => {
                 Ok(Self::NoInteractiveElementToNoninteractiveRole)
diff --git a/crates/biome_configuration/src/generated/domain_selector.rs b/crates/biome_configuration/src/generated/domain_selector.rs
index 4230d0d405d3..3a236efc5f09 100644
--- a/crates/biome_configuration/src/generated/domain_selector.rs
+++ b/crates/biome_configuration/src/generated/domain_selector.rs
@@ -67,6 +67,7 @@ static REACT_FILTERS: LazyLock<Vec<RuleFilter<'static>>> = LazyLock::new(|| {
         RuleFilter::Rule("correctness", "useJsxKeyInIterable"),
         RuleFilter::Rule("correctness", "useUniqueElementIds"),
         RuleFilter::Rule("nursery", "noDuplicatedSpreadProps"),
+        RuleFilter::Rule("nursery", "noInlineStyles"),
         RuleFilter::Rule("nursery", "noJsxPropsBind"),
         RuleFilter::Rule("nursery", "noLeakedRender"),
         RuleFilter::Rule("nursery", "noSyncScripts"),
diff --git a/crates/biome_diagnostics_categories/src/categories.rs b/crates/biome_diagnostics_categories/src/categories.rs
index cf8d9d13b764..d1e0e45abd4f 100644
--- a/crates/biome_diagnostics_categories/src/categories.rs
+++ b/crates/biome_diagnostics_categories/src/categories.rs
@@ -173,10 +173,10 @@ define_categories! {
     "lint/correctness/useValidForDirection": "https://biomejs.dev/linter/rules/use-valid-for-direction",
     "lint/correctness/useValidTypeof": "https://biomejs.dev/linter/rules/use-valid-typeof",
     "lint/correctness/useYield": "https://biomejs.dev/linter/rules/use-yield",
-    "lint/nursery/useExpect": "https://biomejs.dev/linter/rules/use-expect",
     "lint/nursery/noAmbiguousAnchorText": "https://biomejs.dev/linter/rules/no-ambiguous-anchor-text",
     "lint/nursery/noBeforeInteractiveScriptOutsideDocument": "https://biomejs.dev/linter/rules/no-before-interactive-script-outside-document",
     "lint/nursery/noColorInvalidHex": "https://biomejs.dev/linter/rules/no-color-invalid-hex",
+    "lint/nursery/noConditionalExpect": "https://biomejs.dev/linter/rules/no-conditional-expect",
     "lint/nursery/noContinue": "https://biomejs.dev/linter/rules/no-continue",
     "lint/nursery/noDeprecatedMediaType": "https://biomejs.dev/linter/rules/no-deprecated-media-type",
     "lint/nursery/noDivRegex": "https://biomejs.dev/linter/rules/no-div-regex",
@@ -198,6 +198,7 @@ define_categories! {
     "lint/nursery/noHexColors": "https://biomejs.dev/linter/rules/no-hex-colors",
     "lint/nursery/noImplicitCoercion": "https://biomejs.dev/linter/rules/no-implicit-coercion",
     "lint/nursery/noIncrementDecrement": "https://biomejs.dev/linter/rules/no-increment-decrement",
+    "lint/nursery/noInlineStyles": "https://biomejs.dev/linter/rules/no-inline-styles",
     "lint/nursery/noJsxPropsBind": "https://biomejs.dev/linter/rules/no-jsx-props-bind",
     "lint/nursery/noLeakedRender": "https://biomejs.dev/linter/rules/no-leaked-render",
     "lint/nursery/noMissingGenericFamilyKeyword": "https://biomejs.dev/linter/rules/no-missing-generic-family-keyword",
@@ -206,7 +207,6 @@ define_categories! {
     "lint/nursery/noMultiStr": "https://biomejs.dev/linter/rules/no-multi-str",
     "lint/nursery/noNestedPromises": "https://biomejs.dev/linter/rules/no-nested-promises",
     "lint/nursery/noParametersOnlyUsedInRecursion": "https://biomejs.dev/linter/rules/no-parameters-only-used-in-recursion",
-    "lint/nursery/noConditionalExpect": "https://biomejs.dev/linter/rules/no-conditional-expect",
     "lint/nursery/noPlaywrightElementHandle": "https://biomejs.dev/linter/rules/no-playwright-element-handle",
     "lint/nursery/noPlaywrightEval": "https://biomejs.dev/linter/rules/no-playwright-eval",
     "lint/nursery/noPlaywrightForceOption": "https://biomejs.dev/linter/rules/no-playwright-force-option",
@@ -244,6 +244,7 @@ define_categories! {
     "lint/nursery/useDestructuring": "https://biomejs.dev/linter/rules/use-destructuring",
     "lint/nursery/useErrorCause": "https://biomejs.dev/linter/rules/use-error-cause",
     "lint/nursery/useExhaustiveSwitchCases": "https://biomejs.dev/linter/rules/use-exhaustive-switch-cases",
+    "lint/nursery/useExpect": "https://biomejs.dev/linter/rules/use-expect",
     "lint/nursery/useExplicitFunctionReturnType": "https://biomejs.dev/linter/rules/use-explicit-type",
     "lint/nursery/useExplicitType": "https://biomejs.dev/linter/rules/use-explicit-type",
     "lint/nursery/useFind": "https://biomejs.dev/linter/rules/use-find",
diff --git a/crates/biome_html_analyze/src/lint/nursery/no_inline_styles.rs b/crates/biome_html_analyze/src/lint/nursery/no_inline_styles.rs
new file mode 100644
index 000000000000..22ddb938fa7f
--- /dev/null
+++ b/crates/biome_html_analyze/src/lint/nursery/no_inline_styles.rs
@@ -0,0 +1,89 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_html_syntax::HtmlAttribute;
+use biome_rowan::AstNode;
+use biome_rule_options::no_inline_styles::NoInlineStylesOptions;
+
+declare_lint_rule! {
+    /// Disallow the use of inline styles on elements.
+    ///
+    /// Inline styles are specified using the `style` attribute directly on an element.
+    /// They make code harder to maintain and override, prevent reusability of styling, and
+    /// can be a security concern when implementing a strict Content Security Policy (CSP).
+    ///
+    /// Instead of inline styles, use CSS classes defined in external stylesheets or
+    /// `<style>` blocks. This promotes separation of concerns and makes styles easier
+    /// to manage, reuse, and override.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```html,expect_diagnostic
+    /// <div style="color: red;"></div>
+    /// ```
+    ///
+    /// ```html,expect_diagnostic
+    /// <button style="background: blue; color: white;">Click</button>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```html
+    /// <div class="text-red"></div>
+    /// ```
+    ///
+    /// ```html
+    /// <button class="btn btn-primary">Click</button>
+    /// ```
+    ///
+    pub NoInlineStyles {
+        version: "next",
+        name: "noInlineStyles",
+        language: "html",
+        sources: &[
+            RuleSource::HtmlEslint("no-inline-styles").same(),
+        ],
+        recommended: false,
+    }
+}
+
+impl Rule for NoInlineStyles {
+    type Query = Ast<HtmlAttribute>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    type Options = NoInlineStylesOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let attribute = ctx.query();
+        let name = attribute.name().ok()?;
+        let name_token = name.value_token().ok()?;
+
+        if name_token.text_trimmed() == "style" {
+            return Some(());
+        }
+
+        None
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> {
+        let attribute = ctx.query();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                attribute.range(),
+                markup! {
+                    "Avoid using the "<Emphasis>"style"</Emphasis>" attribute."
+                },
+            )
+            .note(markup! {
+                "Inline styles make code harder to maintain, override, and can interfere with Content Security Policy."
+            })
+            .note(markup! {
+                "Use a CSS class instead."
+            }),
+        )
+    }
+}
diff --git a/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html
new file mode 100644
index 000000000000..d05a18640ec3
--- /dev/null
+++ b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html
@@ -0,0 +1,13 @@
+<!-- Invalid cases - should trigger the rule -->
+
+<div style="color: red;"></div>
+
+<button style="background: blue; color: white;">Click</button>
+
+<p style="margin: 0; padding: 10px;">Paragraph</p>
+
+<span style="">Empty inline style</span>
+
+<img style="width: 100px;" src="image.png" alt="Image">
+
+<a style="text-decoration: none;" href="#">Link</a>
diff --git a/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html.snap b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html.snap
new file mode 100644
index 000000000000..c0a3cd2c92d0
--- /dev/null
+++ b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/invalid.html.snap
@@ -0,0 +1,147 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: invalid.html
+---
+# Input
+```html
+<!-- Invalid cases - should trigger the rule -->
+
+<div style="color: red;"></div>
+
+<button style="background: blue; color: white;">Click</button>
+
+<p style="margin: 0; padding: 10px;">Paragraph</p>
+
+<span style="">Empty inline style</span>
+
+<img style="width: 100px;" src="image.png" alt="Image">
+
+<a style="text-decoration: none;" href="#">Link</a>
+
+```
+
+# Diagnostics
+```
+invalid.html:3:6 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+    1 │ <!-- Invalid cases - should trigger the rule -->
+    2 │ 
+  > 3 │ <div style="color: red;"></div>
+      │      ^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │ <button style="background: blue; color: white;">Click</button>
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.html:5:9 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+    3 │ <div style="color: red;"></div>
+    4 │ 
+  > 5 │ <button style="background: blue; color: white;">Click</button>
+      │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    6 │ 
+    7 │ <p style="margin: 0; padding: 10px;">Paragraph</p>
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.html:7:4 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+    5 │ <button style="background: blue; color: white;">Click</button>
+    6 │ 
+  > 7 │ <p style="margin: 0; padding: 10px;">Paragraph</p>
+      │    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    8 │ 
+    9 │ <span style="">Empty inline style</span>
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.html:9:7 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+     7 │ <p style="margin: 0; padding: 10px;">Paragraph</p>
+     8 │ 
+   > 9 │ <span style="">Empty inline style</span>
+       │       ^^^^^^^^
+    10 │ 
+    11 │ <img style="width: 100px;" src="image.png" alt="Image">
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.html:11:6 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+     9 │ <span style="">Empty inline style</span>
+    10 │ 
+  > 11 │ <img style="width: 100px;" src="image.png" alt="Image">
+       │      ^^^^^^^^^^^^^^^^^^^^^
+    12 │ 
+    13 │ <a style="text-decoration: none;" href="#">Link</a>
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.html:13:4 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style attribute.
+  
+    11 │ <img style="width: 100px;" src="image.png" alt="Image">
+    12 │ 
+  > 13 │ <a style="text-decoration: none;" href="#">Link</a>
+       │    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    14 │ 
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
diff --git a/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html
new file mode 100644
index 000000000000..bfa8e54d1dea
--- /dev/null
+++ b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html
@@ -0,0 +1,11 @@
+<!-- Valid cases - should NOT trigger the rule -->
+
+<div class="text-red"></div>
+
+<button class="btn btn-primary">Click</button>
+
+<p class="no-margin padded">Paragraph</p>
+
+<div id="container"></div>
+
+<span data-style="not-inline">Not inline style</span>
diff --git a/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html.snap b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html.snap
new file mode 100644
index 000000000000..72231643f378
--- /dev/null
+++ b/crates/biome_html_analyze/tests/specs/nursery/noInlineStyles/valid.html.snap
@@ -0,0 +1,19 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: valid.html
+---
+# Input
+```html
+<!-- Valid cases - should NOT trigger the rule -->
+
+<div class="text-red"></div>
+
+<button class="btn btn-primary">Click</button>
+
+<p class="no-margin padded">Paragraph</p>
+
+<div id="container"></div>
+
+<span data-style="not-inline">Not inline style</span>
+
+```
diff --git a/crates/biome_js_analyze/src/lint/nursery/no_inline_styles.rs b/crates/biome_js_analyze/src/lint/nursery/no_inline_styles.rs
new file mode 100644
index 000000000000..0a870c6f6030
--- /dev/null
+++ b/crates/biome_js_analyze/src/lint/nursery/no_inline_styles.rs
@@ -0,0 +1,149 @@
+use crate::react::ReactCreateElementCall;
+use crate::services::semantic::Semantic;
+use biome_analyze::{
+    Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_js_syntax::{AnyJsxAttributeName, JsCallExpression, JsxAttribute};
+use biome_rowan::{AstNode, TextRange, declare_node_union};
+use biome_rule_options::no_inline_styles::NoInlineStylesOptions;
+
+declare_lint_rule! {
+    /// Disallow the use of inline styles in JSX.
+    ///
+    /// Inline styles via the `style` attribute make code harder to maintain and override,
+    /// prevent reusability of styling, and can be a security concern when implementing
+    /// a strict Content Security Policy (CSP).
+    ///
+    /// Instead of inline styles, use CSS classes, CSS modules, or a styling library.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <div style={{ color: "red" }}>Error</div>
+    /// ```
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <button style={{ background: "blue" }}>Click</button>
+    /// ```
+    ///
+    /// ```js,expect_diagnostic
+    /// React.createElement("div", { style: { color: "red" } });
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```jsx
+    /// <div className="text-red">Error</div>
+    /// ```
+    ///
+    /// ```jsx
+    /// <button className="btn-primary">Click</button>
+    /// ```
+    ///
+    /// ```js
+    /// React.createElement("div", { className: "container" });
+    /// ```
+    ///
+    pub NoInlineStyles {
+        version: "next",
+        name: "noInlineStyles",
+        language: "jsx",
+        sources: &[
+            RuleSource::HtmlEslint("no-inline-styles").inspired(),
+        ],
+        domains: &[RuleDomain::React],
+        recommended: false,
+    }
+}
+
+declare_node_union! {
+    pub AnyJsElementWithStyle = JsxAttribute | JsCallExpression
+}
+
+pub enum NoInlineStylesState {
+    JsxAttribute(TextRange),
+    ReactProp(TextRange),
+}
+
+impl NoInlineStylesState {
+    fn range(&self) -> TextRange {
+        match self {
+            Self::JsxAttribute(range) | Self::ReactProp(range) => *range,
+        }
+    }
+}
+
+impl Rule for NoInlineStyles {
+    type Query = Semantic<AnyJsElementWithStyle>;
+    type State = NoInlineStylesState;
+    type Signals = Option<Self::State>;
+    type Options = NoInlineStylesOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let node = ctx.query();
+        let model = ctx.model();
+
+        match node {
+            AnyJsElementWithStyle::JsxAttribute(jsx_attribute) => {
+                let name = jsx_attribute.name().ok()?;
+                if let AnyJsxAttributeName::JsxName(jsx_name) = name {
+                    if jsx_name.syntax().text_trimmed() == "style" {
+                        return Some(NoInlineStylesState::JsxAttribute(jsx_attribute.range()));
+                    }
+                }
+            }
+            AnyJsElementWithStyle::JsCallExpression(call_expression) => {
+                if let Some(react_create_element) =
+                    ReactCreateElementCall::from_call_expression(call_expression, model)
+                {
+                    let ReactCreateElementCall { props, .. } = react_create_element;
+
+                    if let Some(props) = props {
+                        for member in props.members() {
+                            let Ok(member) = member else { continue };
+                            let Some(property_member) = member.as_js_property_object_member()
+                            else {
+                                continue;
+                            };
+                            let Ok(property_name) = property_member.name() else {
+                                continue;
+                            };
+                            let Some(name) = property_name.as_js_literal_member_name() else {
+                                continue;
+                            };
+
+                            if name.syntax().text_trimmed() == "style" {
+                                return Some(NoInlineStylesState::ReactProp(
+                                    property_member.range(),
+                                ));
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        None
+    }
+
+    fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                state.range(),
+                markup! {
+                    "Avoid using the "<Emphasis>"style"</Emphasis>" prop."
+                },
+            )
+            .note(markup! {
+                "Inline styles make code harder to maintain, override, and can interfere with Content Security Policy."
+            })
+            .note(markup! {
+                "Use a CSS class or a styling library instead."
+            }),
+        )
+    }
+}
diff --git a/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx
new file mode 100644
index 000000000000..177a71d26e9a
--- /dev/null
+++ b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx
@@ -0,0 +1,15 @@
+// Invalid cases - should trigger the rule
+
+<div style={{ color: "red" }}>Error</div>;
+
+<button style={{ background: "blue", color: "white" }}>Click</button>;
+
+<p style={{ margin: 0, padding: "10px" }}>Paragraph</p>;
+
+<span style={styles}>Styled</span>;
+
+<img style={{ width: "100px" }} src="image.png" alt="Image" />;
+
+React.createElement("div", { style: { color: "red" } });
+
+React.createElement("button", { style: { background: "blue" } }, "Click");
diff --git a/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx.snap
new file mode 100644
index 000000000000..de21d57a4270
--- /dev/null
+++ b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/invalid.jsx.snap
@@ -0,0 +1,170 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: invalid.jsx
+---
+# Input
+```jsx
+// Invalid cases - should trigger the rule
+
+<div style={{ color: "red" }}>Error</div>;
+
+<button style={{ background: "blue", color: "white" }}>Click</button>;
+
+<p style={{ margin: 0, padding: "10px" }}>Paragraph</p>;
+
+<span style={styles}>Styled</span>;
+
+<img style={{ width: "100px" }} src="image.png" alt="Image" />;
+
+React.createElement("div", { style: { color: "red" } });
+
+React.createElement("button", { style: { background: "blue" } }, "Click");
+
+```
+
+# Diagnostics
+```
+invalid.jsx:3:6 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+    1 │ // Invalid cases - should trigger the rule
+    2 │ 
+  > 3 │ <div style={{ color: "red" }}>Error</div>;
+      │      ^^^^^^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │ <button style={{ background: "blue", color: "white" }}>Click</button>;
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:5:9 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+    3 │ <div style={{ color: "red" }}>Error</div>;
+    4 │ 
+  > 5 │ <button style={{ background: "blue", color: "white" }}>Click</button>;
+      │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    6 │ 
+    7 │ <p style={{ margin: 0, padding: "10px" }}>Paragraph</p>;
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:7:4 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+    5 │ <button style={{ background: "blue", color: "white" }}>Click</button>;
+    6 │ 
+  > 7 │ <p style={{ margin: 0, padding: "10px" }}>Paragraph</p>;
+      │    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    8 │ 
+    9 │ <span style={styles}>Styled</span>;
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:9:7 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+     7 │ <p style={{ margin: 0, padding: "10px" }}>Paragraph</p>;
+     8 │ 
+   > 9 │ <span style={styles}>Styled</span>;
+       │       ^^^^^^^^^^^^^^
+    10 │ 
+    11 │ <img style={{ width: "100px" }} src="image.png" alt="Image" />;
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:11:6 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+     9 │ <span style={styles}>Styled</span>;
+    10 │ 
+  > 11 │ <img style={{ width: "100px" }} src="image.png" alt="Image" />;
+       │      ^^^^^^^^^^^^^^^^^^^^^^^^^^
+    12 │ 
+    13 │ React.createElement("div", { style: { color: "red" } });
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:13:30 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+    11 │ <img style={{ width: "100px" }} src="image.png" alt="Image" />;
+    12 │ 
+  > 13 │ React.createElement("div", { style: { color: "red" } });
+       │                              ^^^^^^^^^^^^^^^^^^^^^^^
+    14 │ 
+    15 │ React.createElement("button", { style: { background: "blue" } }, "Click");
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
+
+```
+invalid.jsx:15:33 lint/nursery/noInlineStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Avoid using the style prop.
+  
+    13 │ React.createElement("div", { style: { color: "red" } });
+    14 │ 
+  > 15 │ React.createElement("button", { style: { background: "blue" } }, "Click");
+       │                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    16 │ 
+  
+  i Inline styles make code harder to maintain, override, and can interfere with Content Security Policy.
+  
+  i Use a CSS class or a styling library instead.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+
+```
diff --git a/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx
new file mode 100644
index 000000000000..48482b53241a
--- /dev/null
+++ b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx
@@ -0,0 +1,15 @@
+/* should not generate diagnostics */
+
+<div className="text-red">Error</div>;
+
+<button className="btn-primary">Click</button>;
+
+<p className="no-margin">Paragraph</p>;
+
+<div id="container"></div>;
+
+<span data-style="not-inline">Not inline style</span>;
+
+React.createElement("div", { className: "container" });
+
+React.createElement("button", { onClick: () => {} }, "Click");
diff --git a/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx.snap b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx.snap
new file mode 100644
index 000000000000..0d5a648d48dc
--- /dev/null
+++ b/crates/biome_js_analyze/tests/specs/nursery/noInlineStyles/valid.jsx.snap
@@ -0,0 +1,23 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: valid.jsx
+---
+# Input
+```jsx
+/* should not generate diagnostics */
+
+<div className="text-red">Error</div>;
+
+<button className="btn-primary">Click</button>;
+
+<p className="no-margin">Paragraph</p>;
+
+<div id="container"></div>;
+
+<span data-style="not-inline">Not inline style</span>;
+
+React.createElement("div", { className: "container" });
+
+React.createElement("button", { onClick: () => {} }, "Click");
+
+```
diff --git a/crates/biome_rule_options/src/lib.rs b/crates/biome_rule_options/src/lib.rs
index c40014efc7d8..2eb97bd767e6 100644
--- a/crates/biome_rule_options/src/lib.rs
+++ b/crates/biome_rule_options/src/lib.rs
@@ -128,6 +128,7 @@ pub mod no_important_in_keyframe;
 pub mod no_important_styles;
 pub mod no_increment_decrement;
 pub mod no_inferrable_types;
+pub mod no_inline_styles;
 pub mod no_inner_declarations;
 pub mod no_interactive_element_to_noninteractive_role;
 pub mod no_invalid_builtin_instantiation;
diff --git a/crates/biome_rule_options/src/no_inline_styles.rs b/crates/biome_rule_options/src/no_inline_styles.rs
new file mode 100644
index 000000000000..a15c22e288a3
--- /dev/null
+++ b/crates/biome_rule_options/src/no_inline_styles.rs
@@ -0,0 +1,6 @@
+use biome_deserialize_macros::{Deserializable, Merge};
+use serde::{Deserialize, Serialize};
+#[derive(Default, Clone, Debug, Deserialize, Deserializable, Merge, Eq, PartialEq, Serialize)]
+#[cfg_attr(feature = "schema", derive(schemars::JsonSchema))]
+#[serde(rename_all = "camelCase", deny_unknown_fields, default)]
+pub struct NoInlineStylesOptions {}

From d5b4b48f9c4a2ff086ceb16a17078117d040a5e0 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 17:26:51 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 .../migrate/eslint_any_rule_to_biome.rs       | 28 +++++++++++++++++++
 .../@biomejs/backend-jsonrpc/src/workspace.ts | 18 ++++++++++--
 .../@biomejs/biome/configuration_schema.json  | 26 +++++++++++++++++
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs b/crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs
index 29335a6a48ea..7d0dbf512d10 100644
--- a/crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs
+++ b/crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs
@@ -241,6 +241,34 @@ pub(crate) fn migrate_eslint_any_rule(
                 .get_or_insert(Default::default());
             rule.set_level(rule.level().max(rule_severity.into()));
         }
+        "@html-eslint/no-inline-styles" => {
+            if !options.include_nursery {
+                results.add(eslint_name, eslint_to_biome::RuleMigrationResult::Nursery);
+                return false;
+            }
+            let group = rules.nursery.get_or_insert_with(Default::default);
+            let rule = group
+                .unwrap_group_as_mut()
+                .no_inline_styles
+                .get_or_insert(Default::default());
+            rule.set_level(rule.level().max(rule_severity.into()));
+        }
+        "@html-eslint/no-inline-styles" => {
+            if !options.include_inspired {
+                results.add(eslint_name, eslint_to_biome::RuleMigrationResult::Inspired);
+                return false;
+            }
+            if !options.include_nursery {
+                results.add(eslint_name, eslint_to_biome::RuleMigrationResult::Nursery);
+                return false;
+            }
+            let group = rules.nursery.get_or_insert_with(Default::default);
+            let rule = group
+                .unwrap_group_as_mut()
+                .no_inline_styles
+                .get_or_insert(Default::default());
+            rule.set_level(rule.level().max(rule_severity.into()));
+        }
         "@html-eslint/no-positive-tabindex" => {
             let group = rules.a11y.get_or_insert_with(Default::default);
             let rule = group
diff --git a/packages/@biomejs/backend-jsonrpc/src/workspace.ts b/packages/@biomejs/backend-jsonrpc/src/workspace.ts
index 01f86640bd69..5623ed2bf620 100644
--- a/packages/@biomejs/backend-jsonrpc/src/workspace.ts
+++ b/packages/@biomejs/backend-jsonrpc/src/workspace.ts
@@ -2151,6 +2151,11 @@ See https://biomejs.dev/linter/rules/no-increment-decrement
 	 */
 	noIncrementDecrement?: NoIncrementDecrementConfiguration;
 	/**
+	* Disallow the use of inline styles on elements.
+See https://biomejs.dev/linter/rules/no-inline-styles 
+	 */
+	noInlineStyles?: NoInlineStylesConfiguration;
+	/**
 	* Disallow .bind(), arrow functions, or function expressions in JSX props.
 See https://biomejs.dev/linter/rules/no-jsx-props-bind 
 	 */
@@ -4096,6 +4101,9 @@ export type NoHexColorsConfiguration =
 export type NoIncrementDecrementConfiguration =
 	| RulePlainConfiguration
 	| RuleWithNoIncrementDecrementOptions;
+export type NoInlineStylesConfiguration =
+	| RulePlainConfiguration
+	| RuleWithNoInlineStylesOptions;
 export type NoJsxPropsBindConfiguration =
 	| RulePlainConfiguration
 	| RuleWithNoJsxPropsBindOptions;
@@ -5729,6 +5737,10 @@ export interface RuleWithNoIncrementDecrementOptions {
 	level: RulePlainConfiguration;
 	options?: NoIncrementDecrementOptions;
 }
+export interface RuleWithNoInlineStylesOptions {
+	level: RulePlainConfiguration;
+	options?: NoInlineStylesOptions;
+}
 export interface RuleWithNoJsxPropsBindOptions {
 	level: RulePlainConfiguration;
 	options?: NoJsxPropsBindOptions;
@@ -7274,6 +7286,7 @@ export interface NoIncrementDecrementOptions {
 	 */
 	allowForLoopAfterthoughts?: boolean;
 }
+export type NoInlineStylesOptions = {};
 export type NoJsxPropsBindOptions = {};
 export type NoLeakedRenderOptions = {};
 export type NoMisusedPromisesOptions = {};
@@ -8254,10 +8267,10 @@ export type Category =
 	| "lint/correctness/useValidForDirection"
 	| "lint/correctness/useValidTypeof"
 	| "lint/correctness/useYield"
-	| "lint/nursery/useExpect"
 	| "lint/nursery/noAmbiguousAnchorText"
 	| "lint/nursery/noBeforeInteractiveScriptOutsideDocument"
 	| "lint/nursery/noColorInvalidHex"
+	| "lint/nursery/noConditionalExpect"
 	| "lint/nursery/noContinue"
 	| "lint/nursery/noDeprecatedMediaType"
 	| "lint/nursery/noDivRegex"
@@ -8279,6 +8292,7 @@ export type Category =
 	| "lint/nursery/noHexColors"
 	| "lint/nursery/noImplicitCoercion"
 	| "lint/nursery/noIncrementDecrement"
+	| "lint/nursery/noInlineStyles"
 	| "lint/nursery/noJsxPropsBind"
 	| "lint/nursery/noLeakedRender"
 	| "lint/nursery/noMissingGenericFamilyKeyword"
@@ -8287,7 +8301,6 @@ export type Category =
 	| "lint/nursery/noMultiStr"
 	| "lint/nursery/noNestedPromises"
 	| "lint/nursery/noParametersOnlyUsedInRecursion"
-	| "lint/nursery/noConditionalExpect"
 	| "lint/nursery/noPlaywrightElementHandle"
 	| "lint/nursery/noPlaywrightEval"
 	| "lint/nursery/noPlaywrightForceOption"
@@ -8325,6 +8338,7 @@ export type Category =
 	| "lint/nursery/useDestructuring"
 	| "lint/nursery/useErrorCause"
 	| "lint/nursery/useExhaustiveSwitchCases"
+	| "lint/nursery/useExpect"
 	| "lint/nursery/useExplicitFunctionReturnType"
 	| "lint/nursery/useExplicitType"
 	| "lint/nursery/useFind"
diff --git a/packages/@biomejs/biome/configuration_schema.json b/packages/@biomejs/biome/configuration_schema.json
index 3cd3430f0b98..ebf885dcf614 100644
--- a/packages/@biomejs/biome/configuration_schema.json
+++ b/packages/@biomejs/biome/configuration_schema.json
@@ -3927,6 +3927,16 @@
 			"type": "object",
 			"additionalProperties": false
 		},
+		"NoInlineStylesConfiguration": {
+			"oneOf": [
+				{ "$ref": "#/$defs/RulePlainConfiguration" },
+				{ "$ref": "#/$defs/RuleWithNoInlineStylesOptions" }
+			]
+		},
+		"NoInlineStylesOptions": {
+			"type": "object",
+			"additionalProperties": false
+		},
 		"NoInnerDeclarationsConfiguration": {
 			"oneOf": [
 				{ "$ref": "#/$defs/RulePlainConfiguration" },
@@ -5896,6 +5906,13 @@
 						{ "type": "null" }
 					]
 				},
+				"noInlineStyles": {
+					"description": "Disallow the use of inline styles on elements.\nSee https://biomejs.dev/linter/rules/no-inline-styles",
+					"anyOf": [
+						{ "$ref": "#/$defs/NoInlineStylesConfiguration" },
+						{ "type": "null" }
+					]
+				},
 				"noJsxPropsBind": {
 					"description": "Disallow .bind(), arrow functions, or function expressions in JSX props.\nSee https://biomejs.dev/linter/rules/no-jsx-props-bind",
 					"anyOf": [
@@ -8121,6 +8138,15 @@
 			"additionalProperties": false,
 			"required": ["level"]
 		},
+		"RuleWithNoInlineStylesOptions": {
+			"type": "object",
+			"properties": {
+				"level": { "$ref": "#/$defs/RulePlainConfiguration" },
+				"options": { "$ref": "#/$defs/NoInlineStylesOptions" }
+			},
+			"additionalProperties": false,
+			"required": ["level"]
+		},
 		"RuleWithNoInnerDeclarationsOptions": {
 			"type": "object",
 			"properties": {