misc updates #3239

quantizor · 2020-08-28T00:34:04Z

pay attention to SC_VERSION when hashing to provide more effective component isolation when multiple SC instances are running on the page
Bundle size improvements
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

kitten · 2020-08-28T21:39:31Z

packages/styled-components/rollup.config.js

@@ -123,7 +131,8 @@ const browserConfig = {
  plugins: configBase.plugins.concat(
    replace({
      __SERVER__: JSON.stringify(false),
-    })
+    }),
+    minifierPlugin


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

styled-components/packages/styled-components/rollup.config.js

Lines 111 to 137 in d220a20

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

Shaved off 0.4kB!

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

packages/styled-components/src/models/ComponentStyle.js

packages/styled-components/src/utils/error.js

packages/styled-components/src/utils/flatten.js

massive perf gain for this use case (5ms chopped off per cycle on average)

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

Fixes #2993

styled-components/styled-components#3239

quantizor added 3 commits August 27, 2020 20:28

only collect coverage for pull requests

ae69a6e

update version number

7965fd4

take the styled-components version into account when hashing

16e7d9b

this helps prevent conflicts when multiple versions of the library are in use simultaneously

quantizor requested a review from kitten August 28, 2020 00:34

quantizor added 8 commits August 27, 2020 20:37

v5.2.0-test.3

08ab39f

ensure the static component ID receives the same isolation

05ca7ff

remove useDebugValue for prod

b92ddf1

use git.io URL shortening to reduce bundle size a bit

0fc21e6

pre-minify things a bit

91df992

v5.2.0-test.4

ecb96ac

fix keyframes not handling nested stylis

2396cc2

fixes #3163

v5.2.0-test.5

f3bef57

quantizor force-pushed the include-version-in-haser branch from 5392274 to f3bef57 Compare August 28, 2020 04:21

quantizor mentioned this pull request Aug 28, 2020

stylis plugin not working for keyframes since 5.0.0-rc3 #2936 #3163

Closed

quantizor changed the title ~~take the styled-components version into account when hashing~~ misc updates Aug 28, 2020

quantizor added the 5.2 label Aug 28, 2020

quantizor requested a review from mxstbr August 28, 2020 04:27

fix bad code

d220a20

kitten reviewed Aug 28, 2020

View reviewed changes

packages/styled-components/src/models/ComponentStyle.js Outdated Show resolved Hide resolved

kitten reviewed Aug 28, 2020

View reviewed changes

packages/styled-components/src/utils/error.js Show resolved Hide resolved

kitten reviewed Aug 28, 2020

View reviewed changes

packages/styled-components/src/utils/flatten.js Outdated Show resolved Hide resolved

kitten previously approved these changes Aug 28, 2020

View reviewed changes

quantizor added 3 commits August 29, 2020 20:57

prehash the SC_VERSION seed and then phash the component ID onto it

c45460f

add object-style benchmark

1883f54

iterate directly over style object

47ae905

massive perf gain for this use case (5ms chopped off per cycle on average)

quantizor dismissed kitten’s stale review via 47ae905 August 30, 2020 01:13

quantizor added 3 commits August 29, 2020 21:18

update changelog

fd02fba

v5.2.0-test.6

eb2c09c

add failing test for cGS strict mode

faa024c

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 added 6 commits August 29, 2020 22:00

fix test noise

8478ef6

make createGlobalStyle strict-mode compliant

f4fd56c

v5.2.0-test.7

b3438f7

remove browser code from server bundles

2214485

use yarn feature to alias npm-trunk version of styled-components

f5582d9

v5.2.0-test.8

b1f2632

quantizor force-pushed the include-version-in-haser branch from b8527e1 to b1f2632 Compare August 30, 2020 02:18

quantizor added 5 commits August 29, 2020 22:21

use __SERVER__ magic string

f12b943

fix some dev warnings being accidentally removed by the minifier

d85d99a

v5.2.0-test.9

e6ed8a9

preallocate global styles on cGS instantiation

70792e8

Fixes #2993

v5.2.0-test.10

6b0d0c5

quantizor requested a review from kitten August 30, 2020 16:43

quantizor added 5 commits August 30, 2020 12:46

add changelog entry for cGS behavioral modification

26d3dc5

switch tests to getRenderedCSS

5542717

add test to codify cGS injection order as part of the API

c8f1153

nicer inline snapshots for HTML

9e073e3

nicer snapshots

0f4c55f

quantizor merged commit 71c0fb8 into master Aug 30, 2020

quantizor deleted the include-version-in-haser branch August 30, 2020 18:49

quantizor mentioned this pull request Aug 31, 2020

5.2 feedback #3244

Closed

alexojegu mentioned this pull request Oct 2, 2020

5.2 createGlobalStyle mess up the globally created style #3293

Closed

sreetamdas added a commit to sreetamdas/sreetamdas.com that referenced this pull request Oct 19, 2020

fix: createGlobalStyle issues by upgrading SC, eslint fixes

b35ad77

styled-components/styled-components#3239

sreetamdas mentioned this pull request Oct 21, 2020

Wrapped styled-components don't update on Fast Refresh of imported modules vercel/next.js#16326

Open

This was referenced Mar 18, 2021

Bump styled-components from 5.1.0 to 5.2.1 Sbax/name-generator#15

Closed

Bump styled-components from 5.1.1 to 5.2.1 Sbax/lostintokyo#15

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

misc updates #3239

misc updates #3239

quantizor commented Aug 28, 2020 •

edited

kitten Aug 28, 2020

quantizor Aug 30, 2020

quantizor Aug 30, 2020 •

edited

	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
	),
	};

misc updates #3239

misc updates #3239

Conversation

quantizor commented Aug 28, 2020 • edited

kitten Aug 28, 2020

Choose a reason for hiding this comment

quantizor Aug 30, 2020

Choose a reason for hiding this comment

quantizor Aug 30, 2020 • edited

Choose a reason for hiding this comment

quantizor commented Aug 28, 2020 •

edited

quantizor Aug 30, 2020 •

edited