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

modernize Babel config #1721

Merged
merged 3 commits into from
May 22, 2021
Merged

modernize Babel config #1721

merged 3 commits into from
May 22, 2021

Conversation

hasparus
Copy link
Member

@hasparus hasparus commented May 6, 2021

First commit of this PR hase the same configuration for @babel/preset-env Emotion uses (if I'm not wrong — emotion/babel-preset-emotion-dev/src/index.js).

Enabling loose resulted with 20% reduction in build size compared to current develop.

Release notes

All Theme UI package became on average 34% lighter! 🪶 It's 9.5kB if you sum all of them!

The trade-off is, Babel config has changed and it no longer supports Internet Explorer 11.
If you need to support legacy browsers, you can transpile node_modules (e.g. with next-transpile-modules).


Published prerelease version: v0.9.0-develop.1

Changelog

Release Notes

modernize Babel config (#1721)

All Theme UI package became on average 34% lighter! 🪶 It's 9.5kB if you sum all of them!

The trade-off is, Babel config has changed and it no longer supports Internet Explorer 11.
If you need to support legacy browsers, you can transpile node_modules (e.g. with next-transpile-modules).


🚀 Enhancement

  • @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/sidenav, @theme-ui/typography

🐛 Bug Fix

  • Stop dependabot from trying to run codechecks #1753 (@hasparus)
  • fix(ci): add branches to codechecks (@hasparus)
  • ci: add codechecks with build-size-watcher #1740 (@hasparus)
  • @theme-ui/components
    • fix(components): set Select's bgColor to "background" - fixes dark mode (@hasparus)

⚠️ Pushed to develop

  • chore(auto): add omit-commits plugin (@hasparus)
  • ci(codechecks): remove debug env var (@hasparus)
  • ci(codechecks): remove patch (@hasparus)
  • ci(codechecks): use yml (@hasparus)
  • ci(codechecks): turn speculativeBranchSelection on (@hasparus)
  • ci(codechecks): another patch (@hasparus)
  • ci(codechecks): patch - yeah, it can only be done on develop (@hasparus)
  • ci(codechecks): patch (@hasparus)
  • ci(codechecks): debug (@hasparus)
  • ci(codechecks): make output verbose (@hasparus)
  • ci(codechecks): turn off speculative branch selection (@hasparus)
  • @theme-ui/components
    • test(components): update Select tests (@hasparus)

📝 Documentation

Authors: 2

@vercel
Copy link

vercel bot commented May 6, 2021

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

🔍 Inspect: https://vercel.com/systemui/theme-ui/D6n2T9AAsVYD2SvYq11vsRpEXmZf
✅ Preview: https://theme-ui-git-preset-env-loose-systemui.vercel.app

@hasparus hasparus requested a review from lachlanjc May 6, 2021 21:44
@hasparus hasparus changed the title chore: enable loose transformations in @babel/preset-env enable loose transformations in @babel/preset-env May 6, 2021
@hasparus hasparus mentioned this pull request May 6, 2021
Copy link
Member

@lachlanjc lachlanjc left a comment

Choose a reason for hiding this comment

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

I don't have a lot of experience with this, so not really sure, but go for it!

@hasparus
Copy link
Member Author

lerna failed on canary release. Releasing so many packages is bit flaky, but this PR is a nice change to bundle size regardless.

https://github.com/system-ui/theme-ui/pull/1721/checks?check_run_id=2617831975
image

[breaking] Internet Explorer 11 is no longer supported.

Babel Preset Env configuration was changed to:

```
{
  bugfixes: true,
  loose: true,
  modules: false,
  targets: '> 0.25%, not dead, not ie 11',
}
```

If you're targetting old browsers, you can transpile your node_modules
to ensure full control and compatibility.

See Babel Preset Env docs: https://babeljs.io/docs/en/babel-preset-env
@hasparus
Copy link
Member Author

hasparus commented May 19, 2021

We're dropping almost 10 KB! @lachlanjc I'm almost ready to merge when you give it another look.

Build Size — Change: -9.56KB (-33.94%) Total: 18.61KB

To-Do for this PR:

Copy link
Member

@lachlanjc lachlanjc left a comment

Choose a reason for hiding this comment

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

Incredible! Let's do it

@hasparus hasparus changed the title enable loose transformations in @babel/preset-env modernize Babel config May 22, 2021
@hasparus hasparus merged commit 26b80c6 into develop May 22, 2021
@hasparus hasparus deleted the preset-env-loose branch May 22, 2021 19:09
@hasparus hasparus added the prerelease This change is available in a prerelease. label May 22, 2021
@hasparus
Copy link
Member Author

🚀 PR was released in v0.9.0 🚀

@hasparus hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels May 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Increment the minor version when merged released This issue/pull request has been released.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants