Nine Percent Milk

    css-template

    0.2.3 • Public • Published

    css-template

    Reduce context-switching when defining style in React Component.

    To use inline styles in React, you often find yourself writing this type of code:

    const styles = {
      title: {
        borderBottomLeftRadius: '10px',
        //    ^     ^   ^       ^    ^^
        //    |     |   |       |    ||___ annoying trailing comma
        //    |     |   |       |____|____ annoying JS quotes
        //    |_____|___|_________________ annoying camel case
        //
        //    (╯°□°)╯︵ ┻━┻ I WANT CSS BACK!!!
      }
    }

    With css-template, those times are gone! Instead of writing this:

    // THIS IS BAD FOR YOUR EYES
    const styles = {
      title: {
        marginTop: '10px',
        fontSize: '120%',
        lineHeight: '1.5',
        textAlign: 'center',
        backgroundColor: 'rgba(100, 255, 100, 0.7)',
      },
      footer: {
        width: 'calc(100% - 16px)',
        textAlign: 'right',
        marginTop: '20px',
      }
    };

    you can write something like this

    // THIS IS BETTER
    const styles = {
      title: css`{
        margin-top: 10px;
        font-size: 120%;
        line-height: 1.5;
        text-align: center;
        background-color: rgba(100, 255, 100, 0.7);
      }`,
      footer: css`{
        width: calc(100% - 16px);
        text-align: right;
        margin-top: 20px;
      }`,
    };

    Supported Features

    • translate snake-case to camelCase

        css`margin-top: 20px` // will be translated to { marginTop: '20px' }
    • multiple lines with optional brackets for better visuals

        css`{
          padding: 10px;
          margin: 10px;
        }`
       
        // is equivalent to
        css`
          padding: 10px;
          margin: 10px;
        `
    • optional final semicolon

        css`padding: 10px`
       
        // is equivalent to
        css`padding: 10px;`
    • multiple rules in one line

        css`padding: 10px; margin: 10px`
    • compose other style objects

        const bigFont = css`font-size: 200%`
        const underlined = css`text-decoration: underline`
       
        const myStyle = css`{
          composes: ${bigFont};
          composes: ${underlined};
          padding: 10px;
          margin: 10px;
        }`
       

    Installation

    npm i -S css-template

    Usages

    import css from 'css-template';
     
    const COLOR_MAIN = 'white';
    const BACKGROUND_MAIN = '#336699';
    const awesomeStyles = css`font-size: 200%`;
     
    const styles = {
      header: css`{
        padding: 10px 0 20px 10px;
        text-align: center;
      }`,
      main: css`{
        composes: ${awesomeStyles};
        color: ${COLOR_MAIN};
        background-color: ${BACKGROUND_MAIN};
      }`
    };
     
    const MyComponent = (props) => (
      <div>
        <div style={styles.header}>
          {props.header}
        </div>
        <div style={styles.main}>
          {props.main}
        </div>
      </div>
    );

    ROADMAP

    • composes: ${otherStyles}; just like postcss composes feature
    • optional auto-prefixer
    • spread numeric values like padding: ${[10, 20, 0, 10]}px;

    Install

    npm i css-template

    DownloadsWeekly Downloads

    177

    Version

    0.2.3

    License

    ISC

    Last publish

    Collaborators

    • tungv