Nondeterministic Postrequisite Metaprotocol

    heptapod

    2.0.0 • Public • Published

    Heptapod

    Experiments with tagged template literals and custom css functions for emotion

    Install

    npm i heptapod -S

    or

    yarn add heptapod

    import createResponsiveCss from 'heptapod'
     
    const css = createResponsiveCss([
      '@media(min-width: 420px)',
      '@media(min-width: 920px)',
    ])
     
    const cls3 = css`
      font-size: 16px;
      background: rgba(45, 213, 47, 0.11);
      color: aquamarine;
    ``
      background-color: hotpink;
    ``
      font-size: 16px;
      background: rgba(0, 0, 0, 0.11);
    `
     
    <div className={cls3.toString()}>Basic</div>
     

    This will insert the following styles into the current Stylesheet emotion is using.

    .emotion-0 {
      font-size: 16px;
      background: rgba(45,213,47,0.11);
      color: aquamarine;
    }
     
    @media (min-width:420px) {
      .emotion-0 {
        background-color: hotpink;
      }
    }
     
    @media (min-width:920px) {
      .emotion-0 {
        font-size: 16px;
        background: rgba(0,0,0,0.11);
      }
    }

    It works for both string and object based styles. The following object styles will output the same styles as the string variant above.

    const cls3 = css({
      fontSize: 16,
      background: 'rgba(45, 213, 47, 0.11)',
      color: 'aquamarine'
    })({ backgroundColor: 'hotpink' })({
      fontSize: 16,
      background: 'rgba(0, 0, 0, 0.11)'
    })
     
    <div className={cls3.toString()}>Basic</div>

    API

    createResponsiveCss function

    import createResponsiveCss from 'heptapod'
     
    createResponsiveCss(selectors: Array<Selector>) : DynamicStyleFunction

    Arguments

    • breakpoints
      const customCssFunction = createResponsiveCss([
        '@media(min-width: 420px)',
        '@media(min-width: 920px)',
        '@media(min-width: 1120px)'
      ])

    Returns

    heptapod returns a function that can be used in place of emotionscss` function. This function can be partially applied to add further media query styles.

    Install

    npm i heptapod

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • tkh44
    • emmatown