Skip to content

Commit

Permalink
Shorten JSXStyle generated prop names. Fix #530
Browse files Browse the repository at this point in the history
  • Loading branch information
@shYkiSto
shYkiSto committed Dec 21, 2018
1 parent 2c58a3a commit 6a3e1aa
Show file tree
Hide file tree
Showing 12 changed files with 185 additions and 171 deletions.
2 changes: 1 addition & 1 deletion readme.md
View file
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
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
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
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
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
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
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

0 comments on commit 6a3e1aa

Please sign in to comment.