goober

goober is a lightweight (<1KB) CSS-in-JS solution. Its API is inspired by Emotion's styled function. To use it, you must call setup() exactly once before using the styled function. You pass the hyperscript function (like h from Preact or React.createElement) to setup to allow goober to work with your specific virtual DOM implementation.

Basic Usage Example

import { h } from 'preact';
import { styled, setup } from 'goober';

// Should be called here, and just once
setup(h);

const Icon = styled('span')`
    display: flex;
    flex: 1;
    color: red;
`;

const Button = styled('button')`
    background: dodgerblue;
    color: white;
    border: ${Math.random()}px solid white;

    &:focus,
    &:hover {
        padding: 1em;
    }

    .otherClass {
        margin: 0;
    }

    ${Icon} {
        color: black;
    }
`;

To control when styles are evaluated, you can wrap css in a function.

• Direct css call: Evaluated when the file/component is imported.
• Wrapped function: Evaluated when the function is called (e.g., during render).

If you are using extractCSS for Server-Side Rendering (SSR), use the wrapped function approach or the styled API to ensure consistent results between server and client.

import { css } from "goober";

const BtnClassName = (props) => css`
  border-radius: ${props.size}px;
`;

// vanilla JS
// BtnClassName({size:20}) -> returns class name
const btn = document.querySelector("#btn");
btn.classList.add(BtnClassName({ size: 20 }));

// JSX
const App = () => <button className={BtnClassName({ size: 20 })}>click</button>;

If you prefer the styled.div syntax, install babel-plugin-transform-goober to automatically translate it to the supported styled('div') syntax.

npm i --save-dev babel-plugin-transform-goober
# or
yarn add --dev babel-plugin-transform-goober

Add gatsby-plugin-goober to the plugins array in your gatsby-config.js file to enable the plugin and its built-in SSR support.

module.exports = {
    plugins: [`gatsby-plugin-goober`]
};

To activate the css prop functionality, add @agney/babel-plugin-goober-css-prop to your .babelrc configuration file under the plugins array.

{
  "plugins": [
    "@agney/babel-plugin-goober-css-prop"
  ]
}

Goober supports Content Security Policy nonces for inline styles. To use them, set window.__nonce__ before the library is loaded:

<script nonce="your-nonce-here">
  window.__nonce__ = 'your-nonce-here';
</script>

The nonce will be automatically added to goober's <style> element.

To use the styled.tag syntax (e.g., styled.div) instead of the standard styled("tag") call, install the Babel plugin as a development dependency.

npm i --save-dev babel-plugin-transform-goober
# or
yarn add --dev babel-plugin-transform-goober

You can use a custom css prop to pass styles directly to HTML elements by installing and configuring the @agney/babel-plugin-goober-css-prop Babel plugin. This allows you to pass CSS strings or template literals to the css attribute of any element.

npm install --save-dev @agney/babel-plugin-goober-css-prop

The babel-plugin-transform-goober is a babel-plugin-macros macro that rewrites styled.tag syntax (e.g., styled.div) into styled('tag') calls. This allows you to use the more ergonomic tagged template literal syntax while maintaining compatibility with the underlying library.

To use it, ensure you have babel-plugin-macros configured in your Babel setup, then change your imports from goober to goober/macro.

import { styled } from "goober/macro";

const Button = styled.button`
  margin: 0;
  padding: 1rem;
  font-size: 1rem;
  background-color: tomato;
`;

To use styled.div syntax with babel-plugin-macros, change your imports from goober to goober/macro.

import { styled } from 'goober/macro';

const Button = styled.button`
    background-color: tomato;
`;