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.

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

Build-time optimisations via Bable-macros #67

Open
danieldelcore opened this issue May 28, 2020 · 0 comments
Open

Build-time optimisations via Bable-macros #67

danieldelcore opened this issue May 28, 2020 · 0 comments

Comments

@danieldelcore
Copy link
Owner

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?
@danieldelcore danieldelcore mentioned this issue Feb 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant