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.

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

Pretty print !important in declarations #14611

Merged
merged 2 commits into from
Oct 7, 2024
Merged

Conversation

RobinMalfait
Copy link
Member

This PR is a very small improvement. We started pretty printing the generated CSS (proper indentation) a while ago, so that we can use the output as-is for intellisense (on hover).

The other day I noticed that when you use !important that we attach it directly to the declaration. Not the end of the world, but this PR injects a little space to make sure that the !important is separated from the value which makes it a little easier to read and looks more like what you would write by hand.

Before:

.flex\! {
  display: flex!important;
}

After:

.flex\! {
  display: flex !important;
}

@RobinMalfait RobinMalfait changed the title Pretty print !important Pretty print !important in declarations Oct 7, 2024
@RobinMalfait RobinMalfait merged commit ab0abcf into next Oct 7, 2024
1 check passed
@RobinMalfait RobinMalfait deleted the feat/pretty-print-important branch October 7, 2024 09:38
CHANGELOG.md Show resolved Hide resolved
philipp-spiess pushed a commit that referenced this pull request Oct 7, 2024
This PR is a very small improvement. We started pretty printing the
generated CSS (proper indentation) a while ago, so that we can use the
output as-is for intellisense (on hover).

The other day I noticed that when you use `!important` that we attach it
directly to the declaration. Not the end of the world, but this PR
injects a little space to make sure that the `!important` is separated
from the value which makes it a little easier to read and looks more
like what you would write by hand.

Before:
```css
.flex\! {
  display: flex!important;
}
```

After:
```css
.flex\! {
  display: flex !important;
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants