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

misc updates #3239

Merged
merged 34 commits into from Aug 30, 2020
Merged

misc updates #3239

merged 34 commits into from Aug 30, 2020

Conversation

probablyup
Copy link
Contributor

@probablyup probablyup commented Aug 28, 2020

  1. pay attention to SC_VERSION when hashing to provide more effective component isolation when multiple SC instances are running on the page

  2. Bundle size improvements

  3. Fix keyframes not receiving nested stylis context, and therefore missing plugins if applicable

Fixes #3008 #3076 #2993 #3163
Probably fixes #2074

probablyup added 3 commits Aug 28, 2020
this helps prevent conflicts when multiple versions of the library
are in use simultaneously
@probablyup probablyup requested a review from kitten Aug 28, 2020
@probablyup probablyup force-pushed the include-version-in-haser branch from 5392274 to f3bef57 Compare Aug 28, 2020
@probablyup probablyup changed the title take the styled-components version into account when hashing misc updates Aug 28, 2020
@probablyup probablyup added the 5.2 label Aug 28, 2020
@probablyup probablyup requested a review from mxstbr Aug 28, 2020
@@ -123,7 +131,8 @@ const browserConfig = {
plugins: configBase.plugins.concat(
replace({
__SERVER__: JSON.stringify(false),
})
}),
minifierPlugin
Copy link
Member

@kitten kitten Aug 28, 2020

Choose a reason for hiding this comment

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

If we're minifying all output bundles (which I'm a fan of) I'd love to make sure to also try out Closure Compiler, which is pretty amazing

const serverConfig = {
...configBase,
output: [
getESM({ file: 'dist/styled-components.esm.js' }),
getCJS({ file: 'dist/styled-components.cjs.js' }),
],
plugins: configBase.plugins.concat(
replace({
__SERVER__: JSON.stringify(true),
}),
minifierPlugin
),
};
const browserConfig = {
...configBase,
output: [
getESM({ file: 'dist/styled-components.browser.esm.js' }),
getCJS({ file: 'dist/styled-components.browser.cjs.js' }),
],
plugins: configBase.plugins.concat(
replace({
__SERVER__: JSON.stringify(false),
}),
minifierPlugin
),
};

This is what we're currently doing for urql at least, where we try to squeeze out a lot of bytes here and there https://github.com/FormidableLabs/urql/blob/e031f9b887960a8113890777e8a100973068a36c/scripts/rollup/plugins.js#L98-L137

Copy link
Contributor Author

@probablyup probablyup Aug 30, 2020

Choose a reason for hiding this comment

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

Shaved off 0.4kB!

Copy link
Contributor Author

@probablyup probablyup Aug 30, 2020

Choose a reason for hiding this comment

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

So although it reduced the bundle size, something that terser is doing actually regressed perf here. Going to hold off on it for now.

kitten
kitten previously approved these changes Aug 28, 2020
probablyup added 3 commits Aug 30, 2020
not sure how to fix this at the moment since SM runs render
twice without providing the backing hook data to the second pass,
effectively we have no idea if it's a second instance or not
@probablyup probablyup force-pushed the include-version-in-haser branch from b8527e1 to b1f2632 Compare Aug 30, 2020
@probablyup probablyup requested a review from kitten Aug 30, 2020
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.

Global styles does not work in React.StrictMode Problem with hot module reloading & createGlobalStyle
2 participants