Skip to content

Build-time optimisations via Bable-macros #67

@danieldelcore

Description

@danieldelcore

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions