We should look into this as a way to reduce runtime costs!
And set us up for zero-config SSR:
https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
so using the babel macro we could go from this:
/** @jsx jsx */
import { css, jsx} from '@trousers/core'
const styles = css`
color: white;
`;
const Button = props => {
const classNames = useStyles(styles, props);
return <button className={buttonClassNames}>{props.children}</button>;
};
export default Button;
to this:
/** @jsx jsx */
import { css, jsx} from '@trousers/macro'
const styles = css`
color: white;
`;
const Button = props => {
return <button css={styles}>{props.children}</button>;
};
export default Button;
- So we'll swap our JSX pragma for one that can support zero runtime
- Allows us to keep the current API for people who don't want to opt into the CSS prop etc
- Perform optimisations on the CSS like
- Removing comments
- Vendor prefixing
- Other cool stuff?
We should look into this as a way to reduce runtime costs!
And set us up for zero-config SSR:
https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
so using the babel macro we could go from this:
to this: