Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce <style global> #824

Merged
merged 8 commits into from
Jul 23, 2021
Merged

Introduce <style global> #824

merged 8 commits into from
Jul 23, 2021

Conversation

tony-sull
Copy link
Contributor

@tony-sull tony-sull commented Jul 22, 2021 •
edited
Loading

Changes

Fixes RFC #507

  • Adds support for multiple <style> blocks in an Astro component
  • Adds support for <style global> to skip scoped styles for all selectors in the style block

Testing

Updated the astro-css-bundling test to cover:

  • the use of multiple scoped <style> blocks
  • the use of <style global> blocks
  • the use of @keyframes in scoped and global styles

Docs

Docs site updated to note support for <style global>, including a couple examples and details on when to use this (and that you should probably avoid it)

@changeset-bot
Copy link

changeset-bot bot commented Jul 22, 2021 •
edited
Loading

🦋 Changeset detected

Latest commit: a1cdf73

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
astro Patch
@astrojs/parser Patch

Not sure what this means? Click here to learn what changesets are.

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

@vercel
Copy link

vercel bot commented Jul 22, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

astro-www – ./www

🔍 Inspect: https://vercel.com/pikapkg/astro-www/DqeEiWSTzVrxa3Vzfwi9Mj4WENys
✅ Preview: https://astro-www-git-fork-tony-sull-introduce-style-global-pikapkg.vercel.app

astro-docs – ./docs

🔍 Inspect: https://vercel.com/pikapkg/astro-docs/Fp2bdMEPAK63p8VRxtJbKKCDDktj
✅ Preview: https://astro-docs-git-fork-tony-sull-introduce-style-global-pikapkg.vercel.app

@tony-sull tony-sull mentioned this pull request Jul 22, 2021
Closed
3 tasks
@tony-sull tony-sull changed the title WIP: Introduce style global Introduce style global Jul 23, 2021
@tony-sull tony-sull changed the title Introduce style global Introduce <style global> Jul 23, 2021
@tony-sull tony-sull marked this pull request as ready for review July 23, 2021 14:52
aFuzzyBear
aFuzzyBear reviewed Jul 23, 2021
View reviewed changes
Copy link
Contributor

@aFuzzyBear aFuzzyBear left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small punctuation change, otherwise, lgtm, =)

docs/src/pages/guides/styling.md Outdated Show resolved Hide resolved
FredKSchott
FredKSchott approved these changes Jul 23, 2021
View reviewed changes
Copy link
Member

@FredKSchott FredKSchott left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work, LGTM! Would want someone from @snowpackjs/contributors-core with more experience in our styling logic to give a review as well before merging.

Would be cool if we could get this in for v0.18.0! But can also go out immediately after if not.

@matthewp
Copy link
Contributor

Is there an associated RFC for this? I'm all for having this functionality but am curious if the idea was already discussed or not.

@tony-sull
Copy link
Contributor Author

Is there an associated RFC for this? I'm all for having this functionality but am curious if the idea was already discussed or not.

Sorry! I should have included a link to the RFC (#507)

@tony-sull tony-sull changed the title Introduce <style global> Fixes RFC #507 - Introduce <style global> Jul 23, 2021
matthewp
matthewp reviewed Jul 23, 2021
View reviewed changes
docs/src/pages/guides/styling.md Outdated
@@ -30,6 +30,32 @@ To create global styles, add a `:global()` wrapper around a selector (the same a
<h1>I have both scoped and global styles</h1>
```

To include every selector in a `<style>` as global styles, use `<style global>`. It's best to avoid using this escape hatch if possible, but it can be useful when importing global styling libraries like [Tailwind](/guides/styling#tailwind) or changing theme variables.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you provide an example in the docs on how this helps with Tailwind? This is mentioned a couple of times but it's not clear to me on how it does, so users might also not understand, so an example would help.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think I'll actually just remove the mentions of how it helps with Tailwind. My thought was that people might want to use this to wrap around the @tailwind setup, but that's not really the best example for when you'd want a global style block

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just updated the docs to remove the Tailwind references, replaced it with a little more generic description of when you'd use it

@FredKSchott
Copy link
Member

It was discussed and accepted at a past RFC meeting

@matthewp
Copy link
Contributor

Just one question regarding docs, code looks good to me.

@tony-sull tony-sull changed the title Fixes RFC #507 - Introduce <style global> Introduce <style global> Jul 23, 2021
@matthewp
Copy link
Contributor

Looks great, merging! Thanks so much @tony-sull

@matthewp matthewp merged commit 294a656 into withastro:main Jul 23, 2021
@tony-sull tony-sull deleted the introduce-style-global branch August 17, 2021 19:02
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
Introduce <style global> (withastro#824)
9feb2a1 
* Adding support for multiple <style> blocks

* Adding support for `<style global>`

* scoping @Keyframes should also be skipped for <style global>

* Adding test coverage for muliple style blocks, global blocks, and scoped keyframes

* docs: Updating docs for `<style global>` support

* Adding yarn changeset

* Punctuation fix in styling docs

* docs: Clarifying example use cases given in the docs

Co-authored-by: Tony Sullivan <[email protected]>
xstevenyung pushed a commit to xstevenyung/astro that referenced this pull request Oct 17, 2023
@astrobot-houston @tony-sull @delucis
ci: update showcase (withastro#824)
764008e 
Co-authored-by: tony-sull <[email protected]>
Co-authored-by: Chris Swithinbank <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matthewp matthewp matthewp left review comments

@aFuzzyBear aFuzzyBear aFuzzyBear left review comments

@FredKSchott FredKSchott FredKSchott approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@tony-sull @matthewp @FredKSchott @aFuzzyBear