fix(Button): wrap responsive height styles in css helper

[Akash5908]

What does it do?

It fixes invalid CSS generation in the Button component when rendering responsive button heights. It imports the css helper from styled-components and wraps the dynamic height styles in css templates rather than returning a raw concatenated string.

Why is it needed?

After updating Strapi, custom plugins using <Button variant="secondary" fullWidth ...> encountered invalid CSS-styles. In styled-components v6, returning a raw string containing media query brace blocks (@media (...) { ... }) from functional interpolations can break the CSS stylesheet parser (stylis v4). Using the css template helper compiles the styles correctly as nested AST rules, avoiding formatting and syntax breakages in the generated stylesheet.

How to test it?

1. Build the library locally by running yarn build (which builds successfully).
2. Render a component utilizing <Button variant="secondary" fullWidth ...> and inspect the button element styles. The height styles should be successfully applied across breakpoints without syntax errors in the document stylesheets.

Related issue(s)/PR(s)

Resolves the invalid CSS styles issue with the Button component following responsive mobile size adjustments. #2006

[vercel]

@Akash5908 is attempting to deploy a commit to the Strapi Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5b1cef2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 352c48bc-3e04-428e-b252-c94518ee64cb

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud