heptapod
npm i heptapod

heptapod

Responsive style values for css-in-js.

by emotion-js

2.0.0 (see all)License:MITTypeScript:Not Found
npm i heptapod
Readme

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 emotions css` function. This function can be partially applied to add further media query styles.

Downloads/wk

2

GitHub Stars

564

LAST COMMIT

4yrs ago

MAINTAINERS

2

CONTRIBUTORS

6

OPEN ISSUES

9

OPEN PRs

2
VersionTagPublished
2.0.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial