Skip to content

Latest commit

 

History

History
127 lines (88 loc) · 3.38 KB

README.md

File metadata and controls

127 lines (88 loc) · 3.38 KB

glamor-jss

Use glamor flavored CSS with jss under the hood…

Install

yarn add glamor-jss

Features

  • 📦 Zero configuration (just like glamor).
  • ⚡️ Server side rendering ready.
  • 💭 Caching mechanisms
  • 🕸 Hoist static style rules with babel plugin.
  • 🏎💨 Blazingly fast, thanks to JSS behind scenes.

Reasoning

I'm a big fan of glamor.
Unfortunately it seems like a stale project, but I don't want to give up on it just yet. my idea was to keep the simple and hands on usage of glamor and back it up with something bigger in the background.

That's why I created glamor-jss. It's not a plugin but more kind of like a wrapper around it.

I wanted to make it possible to use as many styles as possible but in the end to only produce a single class name. And of course I wanted it fast. And I wanted it to be smart.

Of course I couldn't lift these heavy tasks all alone. I did some thorough research to back up this project with a bunch of great other projects:

  • hash-it: blazing fast hash calculations for objects (check /perf if you're interested) to cache the 💩 out of it.
  • memoize-weak: combined with the hoisting plugin for babel this produces even better caching possibilites (uses WeakMap if possible).

and of course, let's not forget

  • jss: Does all the heavy lifting in the CSSOM

Usage

🎊 See the demo 🎉

For further documentation on how to declare styles, I'd like to refer to the glamor API guidelines.

🍨 Vanilla

import css from 'glamor-jss'
// oldschool require:
// const css = require('glamor-jss').default

const myClass = css({ color: 'red' })
document.body.innerHTML = `<div class="${myClass}">RED 🎈</div>`

🔋 React

import React from 'react'
import css from 'glamor-jss'

const AwesomeComponent = () => (
  <div {...css({ color: 'red' )}>RED 🎈</div>

  // will result in the same as:
  // <div className={css({ color: 'red' )} />
)

💁‍♀️ Server side rendering (SSR)

It's to add the generated styles on the server side (also see example/src/server.js):

// …
import { renderToString } from 'glamor-jss'

// … eventually
res.status(200).send(`
  <!doctype html>
  <html>
    <style>${renderToString()}</style>
  </html>
`)

🐠 Babel plugin

// .babelrc
{
  "plugins": ["glamor-jss/hoist"]
}

What does it do? 🤔

Every statically declared rule will be moved to the outermost scope. This opens up the possibility for heavy caching.

For example:

In

import css from 'glamor-jss'

const Component = props => (
  <div {...css({ width: 100, height: 100 })}>
    <div {...css({ ':after': { content: "'*'" } })} />
	<div {...css({ background: props.background })} />
  </div>
)

Out

import css from 'glamor-jss'

var _ref = { width: 100, height: 100 };
var _ref2 = { ':after': { content: "'*'" } };

const Component = props => (
  <div {...css(_ref)}>
    <div {...css(_ref2)} />
	<div {...css({ background: props.background })} />
  </div>
)