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

Reduce bundle size #2

Merged
merged 4 commits into from
Mar 4, 2022
Merged

Reduce bundle size #2

merged 4 commits into from
Mar 4, 2022

Conversation

kidonng
Copy link
Contributor

@kidonng kidonng commented Feb 28, 2022

Importing styles directly from @primer/css results in tons of unused CSS variables and rules being included in the bundle.

This PR tries to reduce the bundle size by patching the colors stylesheet to only include colors we actually use:

- dist/main.css    115.8 KB    1.21s
+ dist/main.css    14.2 KB    845ms

style/main.scss Outdated
Comment on lines 11 to 17
ol {
list-style: decimal;
}

ul {
list-style: disc;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is added in f4c4470 and actually not necessary.

I assume you looked at a website with CSS reset (e.g. Tailwind's Preflight) and made the wrong assumption that they are needed.

Copy link
Member

Choose a reason for hiding this comment

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

Why is this not needed? If you are using this on a site with Tailwind's preflight, won't the list style be unset?

Copy link
Contributor Author

@kidonng kidonng Mar 4, 2022

Choose a reason for hiding this comment

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

@kidonng kidonng changed the title Replace @primer/css with github-markdown-css Reduce bundle size Mar 2, 2022
Copy link
Member

@lucacasonato lucacasonato left a comment

Choose a reason for hiding this comment

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

Looks great!

style/makefile Outdated
Comment on lines 1 to 10
patch:
mkdir -p dist
# Extract variables used by Markdown
grep -Eoh -- "--[[:alnum:]-]+" node_modules/@primer/css/markdown/*.scss | sort -u > dist/variables
# Extract variables used by ourselves
grep -Eoh -- "--[[:alnum:]-]+" main.scss | sort -u >> dist/variables
# Patch light colors
echo "@mixin primer-colors-light {\n & {\n`grep -f dist/variables node_modules/@primer/primitives/dist/scss/colors/_light.scss`\n }\n}" > node_modules/@primer/primitives/dist/scss/colors/_light.scss
# Patch dark colors
echo "@mixin primer-colors-dark {\n & {\n`grep -f dist/variables node_modules/@primer/primitives/dist/scss/colors/_dark.scss`\n }\n}" > node_modules/@primer/primitives/dist/scss/colors/_dark.scss
Copy link
Member

Choose a reason for hiding this comment

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

Instead of this being a makefile, could you turn this into a Deno script?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

@deno-deploy deno-deploy bot had a problem deploying to Preview March 4, 2022 17:01 Failure
Copy link
Member

@lucacasonato lucacasonato left a comment

Choose a reason for hiding this comment

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

LGTM, thanks a lot!

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.

2 participants