Module
π₯ goober, a less than 1KB π css-in-js alternative with a familiar API
Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384const Benchmark = require('benchmark');
const react = require('react');const { renderToString: render } = require('react-dom/server');
const goober = require('../dist/goober.cjs');goober.setup(react.createElement);
const styled = require('styled-components').default;const styledVersion = require('styled-components/package.json').version;const emotion = require('@emotion/styled').default;const emotionVersion = require('@emotion/styled/package.json').version;
const inner = (props) => ({ opacity: props.counter > 0.5 ? 1 : 0, '@media (min-width: 1px)': { rule: 'all' }, '&:hover': { another: 1, display: 'space' }});const tagged = ` opacity: ${(props) => (props.counter > 0.5 ? 1 : 0)};
@media (min-width: 1px) { rule: all; }
&:hover { another: 1; display: space; }`;const def = () => inner;const arr = () => (props) => [ { opacity: 0, '@media (min-width: 1px)': { rule: 'all' }, '&:hover': { another: 1, display: 'space' } }, props.counter > 0.5 && { opacity: 1 }];
function renderComponent(Foo) { render(react.createElement(Foo, { counter: Math.random() }));}
function createSuite(name, arg) { const suite = new Benchmark.Suite(name); suite .add('goober', () => { renderComponent(goober.styled('div')(arg())); }) .add(`styled-components@${styledVersion}`, () => { renderComponent(styled.div(arg())); }) .add(`emotion@${emotionVersion}`, () => { renderComponent(emotion.div(arg())); }) .on('start', function (e) { console.log('\nStarting:', e.currentTarget.name); }) .on('error', (e) => console.log(e)) .on('cycle', function (event) { console.log('βΈ', String(event.target)); }) .on('complete', function () { const fastest = this.filter('fastest').map('name')[0]; console.log('\nFastest is: ' + fastest); }) .run();}
createSuite('styled:object', () => def());createSuite('styled:tagged', () => tagged);createSuite('styled:array', () => arr());