Skip to content

misc updates#3239

Merged
quantizor merged 34 commits intomasterfrom
include-version-in-haser
Aug 30, 2020
Merged

misc updates#3239
quantizor merged 34 commits intomasterfrom
include-version-in-haser

Conversation

@quantizor
Copy link
Copy Markdown
Contributor

@quantizor quantizor 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

this helps prevent conflicts when multiple versions of the library
are in use simultaneously
@quantizor quantizor requested a review from kitten August 28, 2020 00:34
@quantizor quantizor force-pushed the include-version-in-haser branch from 5392274 to f3bef57 Compare August 28, 2020 04:21
@quantizor quantizor changed the title take the styled-components version into account when hashing misc updates Aug 28, 2020
@quantizor quantizor added the 5.2 label Aug 28, 2020
@quantizor quantizor requested a review from mxstbr August 28, 2020 04:27
__SERVER__: JSON.stringify(false),
})
}),
minifierPlugin
Copy link
Copy Markdown
Member

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
Copy Markdown
Contributor Author

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
Copy Markdown
Contributor Author

@quantizor quantizor 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
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
@quantizor quantizor force-pushed the include-version-in-haser branch from b8527e1 to b1f2632 Compare August 30, 2020 02:18
@quantizor quantizor requested a review from kitten August 30, 2020 16:43
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