Skip to content

Lower CSS specificity by wrapping styles in @layer#3098

Closed
felix-bohlin wants to merge 1 commit into
withastro:mainfrom
felix-bohlin:lower-specificity
Closed

Lower CSS specificity by wrapping styles in @layer#3098
felix-bohlin wants to merge 1 commit into
withastro:mainfrom
felix-bohlin:lower-specificity

Conversation

@felix-bohlin
Copy link
Copy Markdown

@felix-bohlin felix-bohlin commented Apr 12, 2025

Description

Lowers CSS specificity by wrapping the styles in @layer. In my project (a component library) I'd like a lot of control over the styles and this solution would make it easier to override some of the Starlight styles.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 12, 2025

⚠️ No Changeset found

Latest commit: 449b6ec

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

@github-actions github-actions Bot added the 🌟 core Changes to Starlight’s main package label Apr 12, 2025
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 12, 2025

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 449b6ec
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/67fa2a4f68dd740008b72bad
😎 Deploy Preview https://deploy-preview-3098--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@astrobot-houston
Copy link
Copy Markdown
Contributor

Hello! Thank you for opening your first PR to Starlight! ✨

Here’s what will happen next:

  1. Our GitHub bots will run to check your changes.
    If they spot any issues you will see some error messages on this PR.
    Don’t hesitate to ask any questions if you’re not sure what these mean!

  2. In a few minutes, you’ll be able to see a preview of your changes on Netlify 🤩

  3. One or more of our maintainers will take a look and may ask you to make changes.
    We try to be responsive, but don’t worry if this takes a few days.

@felix-bohlin felix-bohlin changed the title feat(styles): lower specificity by wrapping styles in @layer Lower specificity by wrapping styles in @layer Apr 12, 2025
@felix-bohlin felix-bohlin changed the title Lower specificity by wrapping styles in @layer Lower CSS specificity by wrapping styles in @layer Apr 12, 2025
@delucis
Copy link
Copy Markdown
Member

delucis commented Apr 13, 2025

Thanks for the PR @felix-bohlin. We already have a PR for this that we’re working on so will close this as a duplicate of #2322.

@delucis delucis closed this Apr 13, 2025
@felix-bohlin felix-bohlin deleted the lower-specificity branch April 13, 2025 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🌟 core Changes to Starlight’s main package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants