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

Use Lightning CSS in the PostCSS Plugin #10399

Merged
merged 11 commits into from
Jan 23, 2023
Merged

Conversation

RobinMalfait
Copy link
Contributor

This PR will add Lightning CSS to the PostCSS Plugin in the oxide engine. This also required a
little bit of fiddling around with tests because the stable version doesn't use that.

To solve this, we will run both version through Lightning CSS but purely in tests to get the same
output. It technically makes things a bit slower (but only in tests) and they are now also
consistent.

There is a confusing part though, if you use something like this:

expect(output).toMatchFormattedCss(css`
  .example {
    color: rgb(0, 0, 0);
  }
`)

Then the test will pass, but logging the output could look like:

.example {
  color: black;
}

Not sure if this is an actual problem right now or not...

@RobinMalfait RobinMalfait changed the title Use Lightning CSS in the PostCSS Plugin Use Lightning CSS in the PostCSS Plugin Jan 23, 2023
Now that we are using `lightningcss` and nesting in the new `oxide`
engine, the generated output _will_ be different in the majority of test
cases.

Using a combination of `prettier` and `lightningcss` will make the
output consistent.

The moment we are fully using the `oxide` engine, we can drop
`lightningcss` or `prettier` again to improve the performance of the
tests.
We will only fallback to prettier if lightningcss fails somehow.
Apply changes to integration tests now that we are using lightningcss
This will result in better diffs because diffs are typically per block
and/or per line. But lightningcss will simplify certain selectors and
the diff won't be as clear.

We will only apply the prettier formatting for failing tests in the diff
view so that diffs are cleaner and we don't pay for the additional
prettier calls when tests pass.
@RobinMalfait RobinMalfait merged commit 8e60a3c into master Jan 23, 2023
@RobinMalfait RobinMalfait deleted the feat/use-lightningcss branch January 23, 2023 19:44
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.

None yet

2 participants