From c4552da0e4e9eae854ad4b67bf89c8e7e865e152 Mon Sep 17 00:00:00 2001 From: lttb Date: Tue, 25 Apr 2017 13:56:01 +0300 Subject: [PATCH 1/3] Rewrite composeClasses --- src/injectStyled.js | 2 +- src/styled.js | 4 ++-- src/utils/composeClasses.js | 9 ++++++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/injectStyled.js b/src/injectStyled.js index c53d2d1..3e3174a 100644 --- a/src/injectStyled.js +++ b/src/injectStyled.js @@ -11,7 +11,7 @@ const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass) = const classes = [...classNames] .reduce((acc, name) => ({ ...acc, - [name]: composeClasses(staticSheet.classes[name], dynamicSheet.classes[name]), + [name]: composeClasses([staticSheet.classes[name], dynamicSheet.classes[name]]), }), {}) return (props: Object) => createElement(InnerComponent, {classes, ...props}) diff --git a/src/styled.js b/src/styled.js index 4fba7c7..da8caeb 100644 --- a/src/styled.js +++ b/src/styled.js @@ -69,11 +69,11 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => { const {children, className, ...attrs} = this.props const props = filterProps(attrs) - const tagClass = composeClasses( + const tagClass = composeClasses([ this.staticSheet.classes[staticTagName], this.dynamicSheet.classes[this.dynamicTagName], className - ) + ]) return createElement(tagName, {...props, className: tagClass}, children) } diff --git a/src/utils/composeClasses.js b/src/utils/composeClasses.js index 03bd4e0..15c5a85 100644 --- a/src/utils/composeClasses.js +++ b/src/utils/composeClasses.js @@ -1 +1,8 @@ -export default (...args: any) => args.filter(Boolean).join(' ') +export default (classes: Array) => { + const filtered = [] + for (let len = classes.length, index = 0; index < len; index++) { + if (classes[index]) filtered.push(classes[index]) + } + + return filtered.join(' ') +} From a9751d801017bd3e70a10a56e98935d60d1d7d52 Mon Sep 17 00:00:00 2001 From: lttb Date: Wed, 26 Apr 2017 12:44:09 +0300 Subject: [PATCH 2/3] Update jss --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 98168b2..467139b 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "homepage": "https://github.com/cssinjs/styled-jss#readme", "dependencies": { "is-react-prop": "^0.1.1", - "jss": "^7.1.0", + "jss": "^7.1.1", "jss-preset-default": "^2.0.0" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 3c0e32a..68794a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2576,9 +2576,9 @@ jss-vendor-prefixer@^5.0.0: dependencies: css-vendor "^0.3.8" -jss@^7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.0.tgz#8528213f868f05d0ef41deaeb02269bb82780e4b" +jss@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.1.tgz#b04ce8bfa60123a8b423e0edf17af8d008a5e8e5" dependencies: is-in-browser "1.0.2" warning "3.0.0" From 5d1aea076723e6719df80181596f957847ccedb7 Mon Sep 17 00:00:00 2001 From: lttb Date: Wed, 26 Apr 2017 12:45:21 +0300 Subject: [PATCH 3/3] Improve mount performance --- src/styled.js | 24 +++++++++------- src/tests/__snapshots__/index.spec.jsx.snap | 32 ++++++++++----------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/styled.js b/src/styled.js index da8caeb..edbc02e 100644 --- a/src/styled.js +++ b/src/styled.js @@ -22,6 +22,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => { const dynamicStyle = getDynamicStyles(elementStyle) const staticTagName = generateTagName(tagName) + const availableDynamicTagNames = [] + return class StyledElement extends PureComponent { static tagName: string = tagName static style: ComponentStyleType = elementStyle @@ -34,8 +36,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => { constructor(props: StyledElementPropsType) { super(props) - if (!this.dynamicTagName) { - this.dynamicTagName = generateTagName(tagName) + if (!this.dynamicTagName && dynamicStyle) { + this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName) } } @@ -46,15 +48,13 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => { this.staticSheet.addRule(staticTagName, elementStyle) } - if (dynamicStyle && !this.dynamicSheet.getRule(this.dynamicTagName)) { - this.dynamicSheet - .detach() - .addRule(this.dynamicTagName, dynamicStyle) - this.dynamicSheet - .update(this.dynamicTagName, this.props) - .attach() - .link() + if (!dynamicStyle) return + + if (!this.dynamicSheet.getRule(this.dynamicTagName)) { + this.dynamicSheet.addRule(this.dynamicTagName, dynamicStyle) } + + this.dynamicSheet.update(this.dynamicTagName, this.props) } componentWillReceiveProps(nextProps: StyledElementPropsType) { @@ -63,6 +63,10 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => { } } + componentWillUnmount() { + availableDynamicTagNames.push(this.dynamicTagName) + } + render() { if (!this.staticSheet) return null diff --git a/src/tests/__snapshots__/index.spec.jsx.snap b/src/tests/__snapshots__/index.spec.jsx.snap index 7bb0a82..664eecf 100644 --- a/src/tests/__snapshots__/index.spec.jsx.snap +++ b/src/tests/__snapshots__/index.spec.jsx.snap @@ -1,26 +1,26 @@ exports[`test renders correctly App with default Styled 1`] = `
+ className="div-9-0-9">
+ className="header-10-0-10">

+ className="h1-13-0-11"> Title

+ className="section-11-0-12">
+ className="section-12-0-16"> Another section
@@ -39,11 +39,11 @@ exports[`test renders correctly App with default styled 1`] = `
@@ -58,27 +58,27 @@ exports[`test renders correctly App with injectStyled 1`] = `
+ className="div-17-0-19">
+ className="header-18-0-20">

+ className="h1-21-0-21"> Title

+ className="section-19-0-22">
+ className="section-20-0-26"> Another section