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

Add label property #442

Merged
merged 6 commits into from
Nov 3, 2017
Merged

Add label property #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a234ea
Add label property
emmatown Nov 3, 2017
5ba6ffd
Merge branch 'css-parse-meta-object' into label-property
emmatown Nov 3, 2017
2e054df
Update snapshots
emmatown Nov 3, 2017
9cbfe9e
Merge branch 'css-parse-meta-object' into label-property
emmatown Nov 3, 2017
c17c2b3
Update snapshots
emmatown Nov 3, 2017
e2b8ca2
Change stuff for styled
emmatown Nov 3, 2017
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
49 changes: 16 additions & 33 deletions packages/babel-plugin-emotion/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,19 +73,7 @@ export function replaceCssWithCallExpression(
.toExpressions()
.concat(
state.opts.meta && identifierName
? [
t.objectExpression([
t.objectProperty(
t.identifier('meta'),
t.objectExpression([
t.objectProperty(
t.identifier('identifierName'),
t.stringLiteral(identifierName.trim())
)
])
)
])
]
? [t.stringLiteral(`label:${identifierName.trim()};`)]
: []
)
)
Expand Down Expand Up @@ -138,26 +126,21 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
}

return t.callExpression(
t.callExpression(identifier, [tag]),
new ASTObject(minify(src), path.node.quasi.expressions, t)
.toExpressions()
.concat(
t.objectExpression(
state.opts.meta
? [
t.objectProperty(
t.identifier('meta'),
t.objectExpression([
t.objectProperty(
t.identifier('identifierName'),
t.stringLiteral(identifierName.trim())
)
])
)
]
: []
)
)
t.callExpression(
identifier,
state.opts.meta && identifierName
? [
tag,
t.objectExpression([
t.objectProperty(
t.identifier('label'),
t.stringLiteral(identifierName.trim())
)
])
]
: [tag]
),
new ASTObject(minify(src), path.node.quasi.expressions, t).toExpressions()
)
}

Expand Down
18 changes: 3 additions & 15 deletions packages/babel-plugin-emotion/test/__snapshots__/css-prop.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,7 @@ exports[`babel css prop id in class component 1`] = `

class ClsComp extends React.Component {
render() {
return <div className={/*#__PURE__*/_css(\\"foo\\", {
meta: {
identifierName: \\"ClsComp\\"
}
})}>Hello</div>;
return <div className={/*#__PURE__*/_css(\\"foo\\", \\"label:ClsComp;\\")}>Hello</div>;
}
}"
`;
Expand All @@ -84,11 +80,7 @@ exports[`babel css prop id in higher order component 1`] = `

const foo = W => class extends Component {
render() {
return <div className={/*#__PURE__*/_css(\\"color:brown;\\", {
meta: {
identifierName: \\"foo(Component)\\"
}
})}>Hello</div>;
return <div className={/*#__PURE__*/_css(\\"color:brown;\\", \\"label:foo(Component);\\")}>Hello</div>;
}
};"
`;
Expand All @@ -97,11 +89,7 @@ exports[`babel css prop id in stateless functional component 1`] = `
"import { css as _css } from \\"emotion\\";

const SFC = () => {
return <div className={/*#__PURE__*/_css(\\"color:brown;\\", {
meta: {
identifierName: \\"SFC\\"
}
})}>Hello</div>;
return <div className={/*#__PURE__*/_css(\\"color:brown;\\", \\"label:SFC;\\")}>Hello</div>;
};"
`;

Expand Down
32 changes: 4 additions & 28 deletions packages/babel-plugin-emotion/test/__snapshots__/css.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,40 +132,16 @@ const cls2 = /*#__PURE__*/css(\\"margin:12px 48px;color:#ffffff;\\", className,
exports[`babel css inline meta 1`] = `
"
function test() {
const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media(min-width:420px){color:blue;\\", /*#__PURE__*/css(\\"width:96px;height:96px;\\", {
meta: {
identifierName: \\"cls1\\"
}
}), \\";line-height:26px;}background:green;\\", { backgroundColor: \\"hotpink\\" }, \\";\\", {
meta: {
identifierName: \\"cls1\\"
}
});
const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media(min-width:420px){color:blue;\\", /*#__PURE__*/css(\\"width:96px;height:96px;\\", \\"label:cls1;\\"), \\";line-height:26px;}background:green;\\", { backgroundColor: \\"hotpink\\" }, \\";\\", \\"label:cls1;\\");

const cls2 = /*#__PURE__*/css({ color: 'blue' }, {
meta: {
identifierName: \\"cls2\\"
}
});
const cls2 = /*#__PURE__*/css({ color: 'blue' }, \\"label:cls2;\\");

const cls3 = /*#__PURE__*/css(\\"display:flex;&:hover{color:hotpink;}\\", {
meta: {
identifierName: \\"cls3\\"
}
});
const cls3 = /*#__PURE__*/css(\\"display:flex;&:hover{color:hotpink;}\\", \\"label:cls3;\\");
function inner() {
const styles = { color: \\"darkorchid\\" };
const color = 'aquamarine';

const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";\\", () => ({ color: \\"darkorchid\\" }), \\";\\", () => ({ color }), \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, {
meta: {
identifierName: \\"cls4\\"
}
}), \\";\\", {
meta: {
identifierName: \\"cls4\\"
}
});
const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";\\", () => ({ color: \\"darkorchid\\" }), \\";\\", () => ({ color }), \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, \\"label:cls4;\\"), \\";\\", \\"label:cls4;\\");
}
}"
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,11 +98,11 @@ const someOtherVar = _thisDoesNotExist;"
exports[`babel macro styled tagged template literal function 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;', {});"
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;

exports[`babel macro styled tagged template literal member 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;', {});"
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;
2 changes: 1 addition & 1 deletion packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,4 @@ exports[`source maps styled object styles source map 1`] = `
}, '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNNIiwiZmlsZSI6ImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICBzdHlsZWQoJ2RpdicpKHtcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgIl19 */');"
`;

exports[`source maps styled source map 1`] = `"const Avatar = /*#__PURE__*/styled('img')('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */', {});"`;
exports[`source maps styled source map 1`] = `"const Avatar = /*#__PURE__*/styled('img')('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */');"`;
26 changes: 13 additions & 13 deletions packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,18 @@ styled(\\"h1\\", {

exports[`babel styled component extract no use 2`] = `""`;

exports[`babel styled component inline basic 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';', {});"`;
exports[`babel styled component inline basic 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';');"`;

exports[`babel styled component inline composition based on props 1`] = `
"const cls1 = /*#__PURE__*/css('width:20px;');
const H1 = /*#__PURE__*/styled('h1')(props => {
return props.a ? cssA : cssB;
}, ';font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');', {});"
}, ';font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');');"
`;

exports[`babel styled component inline dynamic fns 1`] = `"const Avatar = /*#__PURE__*/styled('img')('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';', {});"`;
exports[`babel styled component inline dynamic fns 1`] = `"const Avatar = /*#__PURE__*/styled('img')('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';');"`;

exports[`babel styled component inline function call 1`] = `"/*#__PURE__*/styled(MyComponent)('font-size:', fontSize + 'px', ';', {});"`;
exports[`babel styled component inline function call 1`] = `"/*#__PURE__*/styled(MyComponent)('font-size:', fontSize + 'px', ';');"`;

exports[`babel styled component inline hoisting 1`] = `
"var _ref = {
Expand All @@ -52,10 +52,10 @@ const Profile = () => {

exports[`babel styled component inline interpolation in different places 1`] = `
"
const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');height1:', something, 'wow;width:w', something, 'ow;transform:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform1:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform2:translateX(', props => props.translateX, ') ', props => props.translateX, ';', {});"
const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');height1:', something, 'wow;width:w', something, 'ow;transform:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform1:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform2:translateX(', props => props.translateX, ') ', props => props.translateX, ';');"
`;

exports[`babel styled component inline media query 1`] = `"const H1 = /*#__PURE__*/styled(\\"h1\\")(\\"@media print{font-size:10pt}@media screen{.child-selector{font-size:13px}}@media screen,print{&:hover + &{line-height:1.2}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.child-selector{line-height:1.4}}\\", {});"`;
exports[`babel styled component inline media query 1`] = `"const H1 = /*#__PURE__*/styled(\\"h1\\")(\\"@media print{font-size:10pt}@media screen{.child-selector{font-size:13px}}@media screen,print{&:hover + &{line-height:1.2}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.child-selector{line-height:1.4}}\\");"`;

exports[`babel styled component inline meta 1`] = `
"
Expand All @@ -74,13 +74,13 @@ const Profile = () => {
};"
`;

exports[`babel styled component inline more than 10 dynamic values 1`] = `"const H1 = /*#__PURE__*/styled('h1')('text-decoration:', 'underline', ';border-right:solid blue ', 54, 'px;background:', 'white', ';color:', 'black', ';display:', 'block', ';border-radius:', '3px', ';padding:', '25px', ';width:', '500px', ';z-index:', 100, ';font-size:', '18px', ';text-align:', 'center', ';border-left:', p => p.theme.blue, ';', {});"`;
exports[`babel styled component inline more than 10 dynamic values 1`] = `"const H1 = /*#__PURE__*/styled('h1')('text-decoration:', 'underline', ';border-right:solid blue ', 54, 'px;background:', 'white', ';color:', 'black', ';display:', 'block', ';border-radius:', '3px', ';padding:', '25px', ';width:', '500px', ';z-index:', 100, ';font-size:', '18px', ';text-align:', 'center', ';border-left:', p => p.theme.blue, ';');"`;

exports[`babel styled component inline nested 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';& div{color:blue;& span{color:red}}', {});"`;
exports[`babel styled component inline nested 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';& div{color:blue;& span{color:red}}');"`;

exports[`babel styled component inline no dynamic 1`] = `"/*#__PURE__*/styled(\\"h1\\")(\\"color:blue;\\", {});"`;
exports[`babel styled component inline no dynamic 1`] = `"/*#__PURE__*/styled(\\"h1\\")(\\"color:blue;\\");"`;

exports[`babel styled component inline no use 1`] = `"/*#__PURE__*/styled(\\"h1\\")({});"`;
exports[`babel styled component inline no use 1`] = `"/*#__PURE__*/styled(\\"h1\\")();"`;

exports[`babel styled component inline objects based on props 1`] = `
"
Expand Down Expand Up @@ -114,7 +114,7 @@ const H1 = /*#__PURE__*/styled('h1')({
exports[`babel styled component inline random expressions 1`] = `
"
const a = () => /*#__PURE__*/css(\\"font-size:1rem\\");
/*#__PURE__*/styled(\\"h1\\")(\\"margin:12px 48px;\\", /*#__PURE__*/css(\\"font-size:32px\\"), \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\", {});"
/*#__PURE__*/styled(\\"h1\\")(\\"margin:12px 48px;\\", /*#__PURE__*/css(\\"font-size:32px\\"), \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\");"
`;

exports[`babel styled component inline shorthand property 1`] = `"const H1 = /*#__PURE__*/styled(\\"h1\\")({ fontSize });"`;
Expand Down Expand Up @@ -169,6 +169,6 @@ const Figure = /*#__PURE__*/styled(\\"figure\\")({
});"
`;

exports[`babel styled component renamed import: inline config rename 1`] = `"/*#__PURE__*/what(\\"h1\\")(\\"color:blue;\\", {});"`;
exports[`babel styled component renamed import: inline config rename 1`] = `"/*#__PURE__*/what(\\"h1\\")(\\"color:blue;\\");"`;

exports[`babel styled component renamed import: inline variable import: no dynamic 1`] = `"import what from 'emotion'; /*#__PURE__*/what('h1')('color:blue;', {});"`;
exports[`babel styled component renamed import: inline variable import: no dynamic 1`] = `"import what from 'emotion'; /*#__PURE__*/what('h1')('color:blue;');"`;
11 changes: 6 additions & 5 deletions packages/emotion/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ function isLastCharDot(string) {
let hash
let name

const labelPattern = /label:\s*([^\s;\n]+)\s*[;\n]/g

function createStyles(strings, ...interpolations) {
let stringMode = true
let styles = ''
Expand All @@ -135,11 +137,6 @@ function createStyles(strings, ...interpolations) {
}

interpolations.forEach(function(interpolation, i) {
if (typeof interpolation === 'object' && 'meta' in interpolation) {
identifierName = `-${interpolation.meta.identifierName}`
return
}

styles += handleInterpolation.call(
this,
interpolation,
Expand All @@ -149,6 +146,10 @@ function createStyles(strings, ...interpolations) {
styles += strings[i + 1]
}
}, this)
styles = styles.replace(labelPattern, (match, p1) => {
identifierName += `-${p1}`
return ''
})
hash = hashString(styles + identifierName)
name = hash + identifierName
return styles
Expand Down
16 changes: 16 additions & 0 deletions packages/emotion/test/__snapshots__/css.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,22 @@ exports[`css handles objects 1`] = `
/>
`;

exports[`css manually use label property 1`] = `
.glamor-0 {
color: hotpink;
}

<div
className="glamor-0"
/>
`;

exports[`css manually use label property 2`] = `
".css-1qqiudg-wow {
color: hotpink;
}"
`;

exports[`css media query specificity 1`] = `
".css-mfslnr {
width: 32px;
Expand Down
10 changes: 10 additions & 0 deletions packages/emotion/test/css.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,4 +357,14 @@ describe('css', () => {
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
})
test('manually use label property', () => {
flush()
const cls1 = css`
color: hotpink;
label: wow;
`
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
expect(sheet).toMatchSnapshot()
})
})
16 changes: 16 additions & 0 deletions packages/emotion/test/meta/__snapshots__/meta.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,22 @@ exports[`meta css prop correctly adds the id 4`] = `
}"
`;

exports[`meta manually use label property 1`] = `
.glamor-0 {
color: blue;
}

<div
className="glamor-0"
/>
`;

exports[`meta manually use label property 2`] = `
".css-1sy7nqn-wow-cls1 {
color: blue;
}"
`;

exports[`meta multiple classes with the same styles 1`] = `
.glamor-0 {
display: -webkit-box;
Expand Down
9 changes: 9 additions & 0 deletions packages/emotion/test/meta/meta.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,13 @@ describe('meta', () => {
.toJSON()
expect(tree).toMatchSnapshot()
})
test('manually use label property', () => {
const cls1 = css`
color: blue;
label: wow;
`
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
expect(sheet).toMatchSnapshot()
})
})
Loading