lukehedger/sip

🍹 Small sips of CSS

Install

yarn add sip.css

Sip?

Sip takes micro styles and outputs real CSS:

Sip({ m:4 }) // ↣ { margin: 12px }

This can be used on components:

<Component sip={{ m:4 }} />

And processed with any CSS-in-JS implementation or simple inline styles:

import Sip from 'sip.css'

const Component = ({ sip }) => <div style={{ ...Sip(sip) }} />

Try Sip out on RunKit

Paradigm

CSS at scale === 😫. And scoping your styles to components isn't enough. You still end up with styles tightly coupled to logic. By enforcing an architecture that exposes only a minimal set of presentational components this coupling disappears. These primitive components (Button, Text, View and co) can then be fine-tuned when used by other functional components. Sip enables this through the use of atomic-like styles.

Read the origin story on Medium!

Refreshment

• Framework-agnostic - just outputs CSS objects
• Supports media queries - sip={{ m:2, m@md: 4 }}
• Component library and style-guide compatible
• Designed to work with a central set of reusable, presentational components
• Enables any level of application logic refactoring without losing design! And vice-versa.

Take a look at the examples

Contributing

Setup

yarn

Build

yarn build

Test

yarn test

sip's Issues

Add tests for media queries func

Add `test` command to `pre-commit` hook

https://github.com/lukehedger/sip/blob/master/package.json#L27

Setup CI tests on GitHub

Use CircleCI

Pass non-Sip props as `style`

Example:

<Component sip={{ m: 4, borderBottom: '1px solid' }} />

Add camelCase output option

Webpack2 import

I'm trying to use Sip.css with webpack 2 / react-create-app but the result of the import is a string.

import Sip from 'sip.css'

console.log(Sip) -> /static/media/sip.5c5e6212.mjs
console.log(typeof Sip) -> string

I am doing something wrong?

Proper release strategy

Examples

Add examples for:

• styled-components
• react-styleguidist
• react-storybook
• Jest snapshots w/snapguidist + storyshots
• Fela
• ReactXP/react-primitives/react-native-web
• reactide
• React Sketch.app
• glamor
• styled-jsx
• polished

Add Butternut compression

https://github.com/rollup/rollup-plugin-butternut

import butternut from 'rollup-plugin-butternut'

const isTest = process.env.TEST

export default {
  plugins: [
    !isTest && butternut(),
  ],
}

"scripts": {
  "build": "rollup -c,
  "pretest": "npm run build -- --environment TEST",
}

Documentation

• Lexicon
• Media Queries

Support media queries

Cool reference approach on minions.css