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.

Sign up for GitHub

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

Shorten JSXStyle generated prop names. Fix #530 #534

Merged
merged 1 commit into from
Dec 27, 2018
+185 −171
Merged

Shorten JSXStyle generated prop names. Fix #530 #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ import _JSXStyle from 'styled-jsx/style'
export default () => (
<div className="jsx-123">
<p className="jsx-123">only this paragraph will get the style :)</p>
<_JSXStyle styleId="123" css={`p.jsx-123 {color: red;}`} />
<_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
</div>
)
```
Expand Down
3 changes: 1 addition & 2 deletions src/_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export const GLOBAL_ATTRIBUTE = 'global'
export const STYLE_ATTRIBUTE = 'jsx'
export const STYLE_COMPONENT = '_JSXStyle'
export const STYLE_COMPONENT_CSS = 'css'
export const STYLE_COMPONENT_DYNAMIC = 'dynamic'
export const STYLE_COMPONENT_ID = 'styleId'
export const STYLE_COMPONENT_ID = 'id'
11 changes: 3 additions & 8 deletions src/_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
GLOBAL_ATTRIBUTE,
STYLE_COMPONENT_ID,
STYLE_COMPONENT,
STYLE_COMPONENT_CSS,
STYLE_COMPONENT_DYNAMIC
} from './_constants'

Expand Down Expand Up @@ -410,10 +409,6 @@ export const makeStyledJsxTag = (id, transformedCss, expressions = []) => {
t.jSXExpressionContainer(
typeof id === 'string' ? t.stringLiteral(id) : id
)
),
t.jSXAttribute(
t.jSXIdentifier(STYLE_COMPONENT_CSS),
t.jSXExpressionContainer(css)
)
]

Expand All @@ -427,9 +422,9 @@ export const makeStyledJsxTag = (id, transformedCss, expressions = []) => {
}

return t.jSXElement(
t.jSXOpeningElement(t.jSXIdentifier(STYLE_COMPONENT), attributes, true),
null,
[]
t.jSXOpeningElement(t.jSXIdentifier(STYLE_COMPONENT), attributes),
t.jSXClosingElement(t.jSXIdentifier(STYLE_COMPONENT)),
[t.jSXExpressionContainer(css)]
)
}

Expand Down
4 changes: 2 additions & 2 deletions src/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class JSXStyle extends Component {
// probably faster than PureComponent (shallowEqual)
shouldComponentUpdate(otherProps) {
return (
this.props.styleId !== otherProps.styleId ||
this.props.id !== otherProps.id ||
// We do this check because `dynamic` is an array of strings or undefined.
// These are the computed values for dynamic styles.
String(this.props.dynamic) !== String(otherProps.dynamic)
Expand All @@ -38,7 +38,7 @@ export default class JSXStyle extends Component {
// See https://github.com/zeit/styled-jsx/pull/484
if (this.shouldComponentUpdate(this.prevProps)) {
// Updates
if (this.prevProps.styleId) {
if (this.prevProps.id) {
styleSheetRegistry.remove(this.prevProps)
}
styleSheetRegistry.add(this.props)
Expand Down
16 changes: 9 additions & 7 deletions src/stylesheet-registry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,19 +171,21 @@ export default class StyleSheetRegistry {
}

getIdAndRules(props) {
if (props.dynamic) {
const styleId = this.computeId(props.styleId, props.dynamic)
const { children: css, dynamic, id } = props

if (dynamic) {
const styleId = this.computeId(id, dynamic)
return {
styleId,
rules: Array.isArray(props.css)
? props.css.map(rule => this.computeSelector(styleId, rule))
: [this.computeSelector(styleId, props.css)]
rules: Array.isArray(css)
? css.map(rule => this.computeSelector(styleId, rule))
: [this.computeSelector(styleId, css)]
}
}

return {
styleId: this.computeId(props.styleId),
rules: Array.isArray(props.css) ? props.css : [props.css]
styleId: this.computeId(id),
rules: Array.isArray(css) ? css : [css]
}
}

Expand Down
38 changes: 19 additions & 19 deletions test/__snapshots__/attribute.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,50 +9,50 @@ const styles2 = require('./styles2');
// external only
export const Test1 = () => <div className={\`jsx-\${styles.__hash} jsx-\${styles2.__hash}\`}>
<p className={\`jsx-\${styles.__hash} jsx-\${styles2.__hash}\`}>external only</p>
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle styleId={styles2.__hash} css={styles2} />
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
</div>;
// external and static
export const Test2 = () => <div className={'jsx-2982525546 ' + \`jsx-\${styles.__hash}\`}>
<p className={'jsx-2982525546 ' + \`jsx-\${styles.__hash}\`}>external and static</p>
<_JSXStyle styleId={\\"2982525546\\"} css={\\"p.jsx-2982525546{color:red;}\\"} />
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={\\"2982525546\\"}>{\\"p.jsx-2982525546{color:red;}\\"}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// external and dynamic
export const Test3 = ({ color }) => <div className={\`jsx-\${styles.__hash}\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>
<p className={\`jsx-\${styles.__hash}\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>external and dynamic</p>
<_JSXStyle styleId={\\"1947484460\\"} css={\`p.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={\\"1947484460\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// external, static and dynamic
export const Test4 = ({ color }) => <div className={\`jsx-\${styles.__hash}\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>
<p className={\`jsx-\${styles.__hash}\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>external, static and dynamic</p>
<_JSXStyle styleId={\\"3190985107\\"} css={\\"p.jsx-3190985107{display:inline-block;}\\"} />
<_JSXStyle styleId={\\"1336444426\\"} css={\`p.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-3190985107{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"1336444426\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// static only
export const Test5 = () => <div className={\\"jsx-1372669040\\"}>
<p className={\\"jsx-1372669040\\"}>static only</p>
<_JSXStyle styleId={\\"3190985107\\"} css={\\"p.jsx-1372669040{display:inline-block;}\\"} />
<_JSXStyle styleId={\\"2982525546\\"} css={\\"p.jsx-1372669040{color:red;}\\"} />
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-1372669040{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"2982525546\\"}>{\\"p.jsx-1372669040{color:red;}\\"}</_JSXStyle>
</div>;
// static and dynamic
export const Test6 = ({ color }) => <div className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>
<p className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>static and dynamic</p>
<_JSXStyle styleId={\\"3190985107\\"} css={\\"p.jsx-3190985107{display:inline-block;}\\"} />
<_JSXStyle styleId={\\"1336444426\\"} css={\`p.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-3190985107{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"1336444426\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
</div>;
// dynamic only
export const Test7 = ({ color }) => <div className={_JSXStyle.dynamic([['1947484460', [color]]])}>
<p className={_JSXStyle.dynamic([['1947484460', [color]]])}>dynamic only</p>
<_JSXStyle styleId={\\"1947484460\\"} css={\`p.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
<_JSXStyle id={\\"1947484460\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
</div>;
// dynamic with scoped compound variable
Expand All @@ -62,7 +62,7 @@ export const Test8 = ({ color }) => {
return <div className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>
<p className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>dynamic with scoped compound variable</p>
<_JSXStyle styleId={\\"1791723528\\"} css={\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`} dynamic={[innerProps.color]} />
<_JSXStyle id={\\"1791723528\\"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`}</_JSXStyle>
</div>;
}
};
Expand All @@ -73,7 +73,7 @@ export const Test9 = ({ color }) => {
return <div className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>
<p className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>dynamic with compound variable</p>
<_JSXStyle styleId={\\"248922593\\"} css={\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`} dynamic={[innerProps.color]} />
<_JSXStyle id={\\"248922593\\"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`}</_JSXStyle>
</div>;
};
Expand All @@ -82,13 +82,13 @@ const foo = 'red';
// dynamic with constant variable
export const Test10 = () => <div className={\\"jsx-461505126\\"}>
<p className={\\"jsx-461505126\\"}>dynamic with constant variable</p>
<_JSXStyle styleId={\\"461505126\\"} css={\`p.jsx-461505126{color:\${foo};}\`} />
<_JSXStyle id={\\"461505126\\"}>{\`p.jsx-461505126{color:\${foo};}\`}</_JSXStyle>
</div>;
// dynamic with complex scope
export const Test11 = ({ color }) => {
const items = Array.from({ length: 5 }).map((item, i) => <li key={i} className={_JSXStyle.dynamic([['2172653867', [color]]]) + ' ' + 'item'}>
<_JSXStyle styleId={\\"2172653867\\"} css={\`.item.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
<_JSXStyle id={\\"2172653867\\"} dynamic={[color]}>{\`.item.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
Item #{i + 1}
</li>);
Expand Down Expand Up @@ -140,7 +140,7 @@ export default (() => {
<Element className={\\"jsx-2886504620\\"} />
<Element className={\\"jsx-2886504620\\" + \\" \\" + \\"test\\"} />
<Element {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || \\"\\")} />
<_JSXStyle styleId={\\"2886504620\\"} css={\\"div.jsx-2886504620{color:red;}\\"} />
<_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>
</div>;
});"
`;
42 changes: 21 additions & 21 deletions test/__snapshots__/external.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,24 @@ export const foo = [\`div.jsx-2299908427{color:\${color};}\`];
foo.__hash = '2299908427';
({
styles: <_JSXStyle styleId={\\"1329679275\\"} css={[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']} />,
styles: <_JSXStyle id={\\"1329679275\\"}>{[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,
className: 'jsx-1329679275'
});
const b = {
styles: <_JSXStyle styleId={\\"1329679275\\"} css={[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']} />,
styles: <_JSXStyle id={\\"1329679275\\"}>{[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,
className: 'jsx-1329679275'
};
const dynamic = colors => {
const b = {
styles: <_JSXStyle styleId={\\"3325296745\\"} css={[\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}\`, 'a.__jsx-style-dynamic-selector{color:red;}']} dynamic={[colors.green.light]} />,
styles: <_JSXStyle id={\\"3325296745\\"} dynamic={[colors.green.light]}>{[\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}\`, 'a.__jsx-style-dynamic-selector{color:red;}']}</_JSXStyle>,
className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
};
};
export default {
styles: <_JSXStyle styleId={\\"3290112549\\"} css={['div.jsx-3290112549{font-size:3em;}', \`p.jsx-3290112549{color:\${color};}\`]} />,
styles: <_JSXStyle id={\\"3290112549\\"}>{['div.jsx-3290112549{font-size:3em;}', \`p.jsx-3290112549{color:\${color};}\`]}</_JSXStyle>,
className: 'jsx-3290112549'
};"
`;
Expand All @@ -62,7 +62,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function Test() {
return <div>
<_style.default styleId={_App.default.__hash} css={_App.default} />
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>
</div>;
}"
`;
Expand Down Expand Up @@ -106,7 +106,7 @@ exports[`injects JSXStyle for nested scope 1`] = `
function test() {
({
styles: <_JSXStyle styleId={\\"2886504620\\"} css={\\"div.jsx-2886504620{color:red;}\\"} />,
styles: <_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2886504620'
});
}"
Expand Down Expand Up @@ -142,24 +142,24 @@ export const foo = new String(\`div.jsx-2299908427{color:\${color};}\`);
foo.__hash = '2299908427';
({
styles: <_JSXStyle styleId={\\"1329679275\\"} css={\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`} />,
styles: <_JSXStyle id={\\"1329679275\\"}>{\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,
className: 'jsx-1329679275'
});
const b = {
styles: <_JSXStyle styleId={\\"1329679275\\"} css={\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`} />,
styles: <_JSXStyle id={\\"1329679275\\"}>{\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,
className: 'jsx-1329679275'
};
const dynamic = colors => {
const b = {
styles: <_JSXStyle styleId={\\"3325296745\\"} css={\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\`} dynamic={[colors.green.light]} />,
styles: <_JSXStyle id={\\"3325296745\\"} dynamic={[colors.green.light]}>{\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\`}</_JSXStyle>,
className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
};
};
export default {
styles: <_JSXStyle styleId={\\"3290112549\\"} css={\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:\${color};}\`} />,
styles: <_JSXStyle id={\\"3290112549\\"}>{\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:\${color};}\`}</_JSXStyle>,
className: 'jsx-3290112549'
};"
`;
Expand All @@ -173,7 +173,7 @@ export default (({ level = 1 }) => {
return <Element className={\`jsx-\${styles.__hash}\` + \\" \\" + \\"root\\"}>
<p className={\`jsx-\${styles.__hash}\`}>dynamic element</p>
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</Element>;
});"
`;
Expand All @@ -188,9 +188,9 @@ export default (() => <div>
<p>test</p>
<div>woot</div>
<p>woot</p>
<_JSXStyle styleId={styles2.__hash} css={styles2} />
<_JSXStyle styleId={styles3.__hash} css={styles3} />
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
Expand All @@ -200,7 +200,7 @@ import styles from './styles';
export default (() => <div className={\`jsx-\${styles.__hash}\`}>
<p className={\`jsx-\${styles.__hash}\`}>test</p>
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
Expand All @@ -213,18 +213,18 @@ import { foo as styles3 } from './styles';
export default (() => <div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\` + ' ' + 'foo'}>test</p>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>woot</p>
<_JSXStyle styleId={styles2.__hash} css={styles2} />
<_JSXStyle styleId={styles3.__hash} css={styles3} />
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>woot</div>
<_JSXStyle styleId={\\"1646697228\\"} css={\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"} />
<_JSXStyle styleId={styles.__hash} css={styles} />
<_JSXStyle id={\\"1646697228\\"}>{\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);
export const Test = () => <div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\` + ' ' + 'foo'}>test</p>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>woot</p>
<_JSXStyle styleId={styles3.__hash} css={styles3} />
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>woot</div>
<_JSXStyle styleId={\\"1646697228\\"} css={\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"} />
<_JSXStyle id={\\"1646697228\\"}>{\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"}</_JSXStyle>
</div>;"
`;
Loading