❤
npm
Sign UpSign In

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.

Readme

Keywords

Package Sidebar

Install

npm i heptapod

Repository

github.com/emotion-js/facepaint

Homepage

github.com/emotion-js/facepaint

Weekly Downloads

0

Version

2.0.0

License

MIT

Last publish

Collaborators

  • tkh44
  • emmatown
Try on RunKit
Report malware