### Setup with Custom Prefixer

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/setup.md

Provide a custom `prefixer` function to `setup` for custom CSS property transformations. This example uses a simple string concatenation.

```javascript
import React from 'react';
import { setup } from 'goober';

const customPrefixer = (key, value) => `${key}: ${value};
`;

setup(React.createElement, customPrefixer);
```

--------------------------------

### Setup with Custom ForwardProps Logic

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/setup.md

Implement custom logic for forwarding props to the DOM by providing a `forwardProps` function to `setup`. This example removes the 'size' prop.

```javascript
import React from 'react';
import { setup, styled } from 'goober';

setup(React.createElement, undefined, undefined, (props) => {
    for (let prop in props) {
        // Or any other conditions.
        // This could also check if this is a dev build and not remove the props
        if (prop === 'size') {
            delete props[prop];
        }
    }
});
```

--------------------------------

### Basic Setup with React Pragma

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/setup.md

Call `setup` once with React's `createElement` function as the pragma. This is essential for correct element transformation.

```javascript
import React from 'react';
import { setup } from 'goober';

setup(React.createElement);
```

--------------------------------

### Goober Setup with Transient Props Handling

Source: https://github.com/cristianbote/goober/blob/master/README.md

Handle transient props (prefixed with '$') by providing a `forwardProps` function to `setup`. This example removes props starting with '$'.

```javascript
import React from 'react';
import { setup, styled } from 'goober';

setup(React.createElement, undefined, undefined, (props) => {
    for (let prop in props) {
        if (prop[0] === '$') {
            delete props[prop];
        }
    }
});
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/cristianbote/goober/blob/master/docs/README.md

Installs the necessary dependencies for the project using Yarn.

```console
yarn install
```

--------------------------------

### Start Local Development Server

Source: https://github.com/cristianbote/goober/blob/master/docs/README.md

Starts a local development server for live previewing changes. Changes are reflected without server restarts.

```console
yarn start
```

--------------------------------

### Setup with Theme Context

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/setup.md

Integrate a theme by passing a `theme` function to `setup`. This function should return the theme object, allowing styled components to access it.

```javascript
import React from 'react';
import { setup, styled } from 'goober';

const theme = { primary: 'blue' };
const ThemeContext = createContext(theme);
const useTheme = () => useContext(ThemeContext);

setup(React.createElement, undefined, useTheme);

const ContainerWithTheme = styled('div')`
    color: ${(props) => props.theme.primary};
`;
```

--------------------------------

### Basic Styled Component Setup

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/introduction.md

Demonstrates how to set up Goober and define styled components using the `styled` function. Ensure `setup` is called once before using `styled`.

```jsx
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;
    }
`
```

--------------------------------

### Install CSS Prop Babel Plugin

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/css-prop.md

Install the necessary Babel plugin for the `css` prop functionality.

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

--------------------------------

### Install Goober

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/autoprefixer.md

Install the core `goober` package using npm or yarn.

```sh
npm install goober
# or
yarn add goober
```

--------------------------------

### Setup shouldForwardProp Addon

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/shouldForwardProp.md

Configure the shouldForwardProp addon by providing a function that determines which props to forward. This example prevents props starting with '$' from being forwarded.

```javascript
import { h } from 'preact';
import { setup } from 'goober';
import { shouldForwardProp } from 'goober/should-forward-prop';

setup(
    h,
    undefined,
    undefined,
    shouldForwardProp((prop) => {
        // Do NOT forward props that start with `$` symbol
        return prop['0'] !== '$';
    })
);
```

--------------------------------

### SSR with Preact and Goober Example

Source: https://github.com/cristianbote/goober/blob/master/README.md

This example demonstrates how to use Goober for Server-Side Rendering with Preact. It shows how to extract critical CSS for SSR.

```jsx
import styled from '<packageName>';

// Create the dynamic styled component
const Foo = styled('div')((props) => ({
    opacity: props.counter > 0.5 ? 1 : 0,
    '@media (min-width: 1px)': {
        rule: 'all'
    },
    '&:hover': {
        another: 1,
        display: 'space'
    }
}));

// Serialize the component
renderToString(<Foo counter={Math.random()} />);
```

--------------------------------

### Goober Setup with Theme Context

Source: https://github.com/cristianbote/goober/blob/master/README.md

Integrate Goober with a theme by providing a `useTheme` function to `setup`. This allows styled components to access theme properties.

```javascript
import React, { createContext, useContext, createElement } from 'react';
import { setup, styled } from 'goober';

const theme = { primary: 'blue' };
const ThemeContext = createContext(theme);
const useTheme = () => useContext(ThemeContext);

setup(createElement, undefined, useTheme);

const ContainerWithTheme = styled('div')`
    color: ${(props) => props.theme.primary};
`;
```

--------------------------------

### Install Goober and Gatsby Plugin

Source: https://github.com/cristianbote/goober/blob/master/packages/gatsby-plugin-goober/README.md

Install the necessary packages for goober and the Gatsby plugin using npm.

```bash
npm install --save goober gatsby-plugin-goober
```

--------------------------------

### Install Babel Plugin

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/babel-plugin.md

Install the babel-plugin-transform-goober package as a development dependency using npm or yarn.

```sh
npm i --save-dev babel-plugin-transform-goober
```

```sh
yarn add --dev babel-plugin-transform-goober
```

--------------------------------

### setup

Source: https://github.com/cristianbote/goober/blob/master/README.md

Initializes Goober. This function should be called only once, typically at the entry point of your project. It accepts optional `prefixer`, `theme`, and `forwardProps` functions to customize styling behavior.

```APIDOC
## `setup(pragma: Function, prefixer?: Function, theme?: Function, forwardProps?: Function)`

### Description
Initializes the Goober library. This function should be called only once at the entry file of your project. It requires a `pragma` function (like `React.createElement` or `h`) and can optionally accept `prefixer`, `theme`, and `forwardProps` functions for advanced customization.

### Parameters
#### `pragma` (Function) - Required
The function used for creating elements (e.g., `React.createElement` for React, `h` for Preact).

#### `prefixer` (Function) - Optional
A function that customizes CSS property prefixes.

#### `theme` (Function) - Optional
A function that provides theme context to styled components.

#### `forwardProps` (Function) - Optional
A function that controls which props are forwarded to the DOM element. It receives all props and should return the subset of props to be forwarded.

### Usage Examples
#### Basic Setup
```javascript
import React from 'react';
import { setup } from 'goober';

setup(React.createElement);
```

#### With Prefixer
```javascript
import React from 'react';
import { setup } from 'goober';

const customPrefixer = (key, value) => `${key}: ${value}\n`;
setup(React.createElement, customPrefixer);
```

#### With Theme
```javascript
import React, { createContext, useContext, createElement } from 'react';
import { setup, styled } from 'goober';

const theme = { primary: 'blue' };
const ThemeContext = createContext(theme);
const useTheme = () => useContext(ThemeContext);

setup(createElement, undefined, useTheme);

const ContainerWithTheme = styled('div')`
    color: ${(props) => props.theme.primary};
`;
```

#### With `forwardProps`
```javascript
import React from 'react';
import { setup, styled } from 'goober';

setup(React.createElement, undefined, undefined, (props) => {
    for (let prop in props) {
        if (prop === 'size') {
            delete props[prop];
        }
    }
});
```

#### With Transient Props (`$`) using `forwardProps`
```javascript
import React from 'react';
import { setup, styled } from 'goober';

setup(React.createElement, undefined, undefined, (props) => {
    for (let prop in props) {
        if (prop[0] === '$') {
            delete props[prop];
        }
    }
});
```

#### Using `goober/should-forward-prop` addon
```javascript
import React from 'react';
import { setup, styled } from 'goober';
import { shouldForwardProp } from 'goober/should-forward-prop';

setup(
    React.createElement,
    undefined,
    undefined,
    shouldForwardProp((prop) => {
        return prop !== 'size';
    })
);
```
```

--------------------------------

### Install Babel Plugin for styled.tag Syntax

Source: https://github.com/cristianbote/goober/blob/master/README.md

Install the babel-plugin-transform-goober to use the styled.tag syntax, which is then translated to Goober's styled('tag') calls.

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

--------------------------------

### setup

Source: https://github.com/cristianbote/goober/blob/master/README.md

Initializes Goober by providing the VDOM implementation (e.g., Preact's `h` function). This must be called once before using other Goober functions.

```APIDOC
## setup

### Description
Initializes Goober by providing the VDOM implementation (e.g., Preact's `h` function). This must be called once before using other Goober functions.

### Method Signature
`setup(pragma: Function, [config]: Object)`

### Parameters
*   **pragma** (Function) - The VDOM function (e.g., `h` from Preact).
*   **config** (Object) - Optional. Configuration object for advanced features like prefixer, theme, and forwardProps.
    *   **prefixer** (Function) - Custom prefixer function.
    *   **theme** (Function) - Function to access the theme.
    *   **forwardProps** (Function) - Function to control which props are forwarded.

### Usage Example
```jsx
import { h } from 'preact';
import { setup } from 'goober';

setup(h);
```
```

--------------------------------

### Install preact-cli-goober-ssr

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/preact-cli-plugin.md

Install the preact-cli-goober-ssr package as a development dependency using npm or yarn.

```sh
npm i --save-dev preact-cli-goober-ssr
# or
yarn add --dev preact-cli-goober-ssr
```

--------------------------------

### CSP Nonce Setup

Source: https://github.com/cristianbote/goober/blob/master/README.md

Set the `window.__nonce__` variable before loading Goober to support Content Security Policy nonces for inline styles.

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

--------------------------------

### Setup Goober with Autoprefixer

Source: https://github.com/cristianbote/goober/blob/master/prefixer/README.md

Import necessary modules and configure Goober with the prefixer function. This setup enables automatic vendor prefixing for CSS styles.

```jsx
import React from 'react';
import { setup } from 'goober';
import { prefix } from 'goober/prefixer';

// Setup goober for react with autoprefixer
setup(React.createElement, prefix);
```

--------------------------------

### Basic Usage with Goober

Source: https://github.com/cristianbote/goober/blob/master/README.md

Demonstrates how to import and set up Goober for use with Preact. The `setup` function must be called once before using the `styled` function. This snippet shows defining styled components for a span and a button.

```jsx
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;
    }
`;
```

--------------------------------

### Install Goober and Gatsby Plugin

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/gatsby.md

Install the necessary packages for Goober and the Gatsby plugin. Choose either npm or yarn.

```sh
npm i --save goober gatsby-plugin-goober
```

```sh
yarn add goober gatsby-plugin-goober
```

--------------------------------

### Create Next.js App with Goober Integration

Source: https://github.com/cristianbote/goober/blob/master/README.md

Create a new Next.js application pre-configured with Goober using a provided example.

```sh
npx create-next-app --example with-goober with-goober-app
# or
yarn create next-app --example with-goober with-goober-app
```

--------------------------------

### styled

Source: https://github.com/cristianbote/goober/blob/master/README.md

Creates a vDOM component for a given HTML tag, allowing for styled elements. The `setup` function must be called before using `styled`.

```APIDOC
## styled

### Description
Creates a vDOM component for a given HTML tag, allowing for styled elements. The `setup` function must be called before using `styled`.

### Method Signature
`styled(tagName: string | Function, [forwardRef]: Function): Function`

### Parameters
*   **tagName** (string | Function) - The HTML tag name or a component to style.
*   **forwardRef** (Function) - Optional. A function to handle ref forwarding.

### Usage Example
```jsx
import { h } from 'preact';
import { styled, setup } from 'goober';

setup(h);

const MyComponent = styled('div')`
  color: blue;
`;
```
```

--------------------------------

### Goober Setup with Custom Prefix

Source: https://github.com/cristianbote/goober/blob/master/README.md

Configure Goober with a custom prefixer function to modify CSS property values. This example uses a simple function to append a newline to each value.

```javascript
import React from 'react';
import { setup } from 'goober';

const customPrefixer = (key, value) => `${key}: ${value};\n`;

setup(React.createElement, customPrefixer);
```

--------------------------------

### Setup with `shouldForwardProp` Addon

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/setup.md

Utilize the `goober/should-forward-prop` addon for a cleaner way to manage props that should be forwarded to the DOM. It accepts a filter function.

```javascript
import React from 'react';
import { setup, styled } from 'goober';
import { shouldForwardProp } from 'goober/should-forward-prop';

setup(
    React.createElement,
    undefined,
    undefined,
    // This package accepts a `filter` function. If you return false that prop
    // won't be included in the forwarded props.
    shouldForwardProp((prop) => {
        return prop !== 'size';
    })
);
```

--------------------------------

### Display Name Example Output

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Compares the output of a styled component with `displayName` set to false versus true.

```js
// with displayName: false
<button className="go1231232"></button>
// with displayName: true
<button className="Sidebar__Button-go-1 go1231232"></button>
```

--------------------------------

### Styled Component Usage

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Example of creating a styled component using the default `styled` identifier after applying the Babel plugin.

```jsx
import React from 'react';
import { styled } from 'goober';

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

--------------------------------

### Using styled.* Syntax with Goober Macro

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/babel-macro-plugin.md

Import `styled` from `goober/macro` to use the `styled.*` syntax for creating components. This example demonstrates creating a styled button component.

```javascript
import { styled } from "goober/macro";

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

--------------------------------

### Dynamic CSS with Props in Tagged Template

Source: https://github.com/cristianbote/goober/blob/master/README.md

Style components dynamically by passing props to the `css` tagged template. This example creates a button with a border-radius based on the `size` prop.

```javascript
import { css } from 'goober';

// JSX
const CustomButton = (props) => (
    <button
        className={css`
            border-radius: ${props.size}px;
        `}
    >
        click
    </button>
);
```

--------------------------------

### Custom Identifier Usage

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Example of using a custom identifier ('goober') for creating styled components.

```jsx
import React from 'react';
import { styled as goober } from 'goober';

const Button = goober.button`...`;
```

--------------------------------

### Create Styled Component with Goober

Source: https://github.com/cristianbote/goober/blob/master/packages/gatsby-plugin-goober/README.md

Example of creating a styled button component using goober's `styled` function within a React component.

```jsx
import React from 'react';
import { styled } from 'goober';

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

--------------------------------

### Extracting CSS with extractCss

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/extractCss.md

Call extractCss after your application has rendered to get a string containing all generated styles. This string can be wrapped in a style tag. It's recommended to use a specific ID for the style tag to enable hydration.

```javascript
const { extractCss } = require("goober");

// After your app has rendered, just call it:
const styleTag = `<style id="_goober">${extractCss()}</style>`;

// Note: To be able to `hydrate` the styles you should use the proper `id` so `goober` can pick it up and use it as the target from now on
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/cristianbote/goober/blob/master/docs/README.md

Builds the website and deploys it to the 'gh-pages' branch, suitable for GitHub Pages hosting. Ensure to replace <Your GitHub username> with your actual username.

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Global Styles with `glob`

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/checklist.md

Illustrates how to define global styles using the `glob` function. This is essential for setting up base styles, resets, or themes that apply across the entire application.

```javascript
import { setup } from 'goober'

setup({
  // ... other options
  glob: css`
    body {
      margin: 0;
    }
  `
})

```

--------------------------------

### Build Static Website Content

Source: https://github.com/cristianbote/goober/blob/master/docs/README.md

Generates the static content for the website into the 'build' directory, ready for hosting.

```console
yarn build
```

--------------------------------

### Use Babel Macro Plugin for styled.tag Syntax

Source: https://github.com/cristianbote/goober/blob/master/README.md

Configure babel-plugin-macros and import from 'goober/macro' to use the styled.* syntax for creating components.

```javascript
import { styled } from 'goober/macro';

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

--------------------------------

### Bootstrap Goober with Autoprefixer

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/autoprefixer.md

Import and use the `prefix` function from `goober/prefixer` to set up Goober with autoprefixing capabilities.

```js
import { setup } from 'goober';
import { prefix } from 'goober/prefixer';

// Bootstrap goober
setup(React.createElement, prefix);
```

--------------------------------

### Vanilla CSS with `css` function

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/checklist.md

Shows how to use the `css` function for styling components in a vanilla CSS manner. This is useful for applying styles directly without creating new styled components.

```javascript
const TomatoBtn = styled('button')`
  color: tomato;
`
```

--------------------------------

### Styled Component with Forward Ref for React

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Shows how to create a styled component that accepts a forward ref, specifically for React.

```javascript
const Title = styled("h1", React.forwardRef)`
  font-weight: bold;
  color: dodgerblue;
`;
```

--------------------------------

### Customizing Styles with Functions Returning Strings

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Shows how to customize styles by providing a function that returns a CSS string.

```javascript
import { styled } from "goober";

const Btn = styled("button")(
  (props) => `
  border-radius: ${props.size}px;
`
);

<Btn size={20} />;
```

--------------------------------

### Customizing Styles with Arrays

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Demonstrates using arrays to combine multiple style objects and functions for dynamic styling.

```javascript
import { styled } from "goober";

const Btn = styled("button")([
  { color: "tomato" },
  ({ isPrimary }) => ({ background: isPrimary ? "cyan" : "gray" }),
]);

<Btn />; // This will render the `Button` with `background: gray;`
<Btn isPrimary />; // This will render the `Button` with `background: cyan;`
```

--------------------------------

### Customizing Styles with Tagged Templates

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Demonstrates customizing styles using tagged template literals with dynamic properties.

```javascript
import { styled } from "goober";

const Btn = styled("button")`
  border-radius: ${(props) => props.size}px;
`;

<Btn size={20} />;
```

--------------------------------

### Basic Babel Configuration

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Configure your Babel environment to use the transform-goober plugin.

```json
{
  "presets": [...],
  "plugins": ["babel-plugin-transform-goober"]
}
```

--------------------------------

### SSR Dynamic Styled Component

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/introduction.md

Demonstrates creating and rendering a dynamic styled component with Goober for Server-Side Rendering. Ensure 'package' is correctly imported as 'styled'.

```jsx
import styled from 'package';

// Create the dynamic styled component
const Foo = styled('div')((props) => ({
    opacity: props.counter > 0.5 ? 1 : 0,
    '@media (min-width: 1px)': {
        rule: 'all'
    },
    '&:hover': {
        another: 1,
        display: 'space'
    }
}));

// Serialize the component
renderToString(<Foo counter={Math.random()} />);
```

--------------------------------

### Customizing Styles with JSON/Object

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Illustrates customizing styles using a function that returns a JSON object.

```javascript
import { styled } from "goober";

const Btn = styled("button")((props) => ({
  borderRadius: props.size + "px",
}));

<Btn size={20} />;
```

--------------------------------

### Configure Babel for CSS Prop

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/css-prop.md

Add the `@agney/babel-plugin-goober-css-prop` to your Babel configuration file (`.babelrc`).

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

--------------------------------

### Extending Styled Components

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/checklist.md

Demonstrates how to extend an existing component with styled-goober. Use this when you need to apply specific styles to a pre-defined component structure.

```javascript
const Btn = ({className}) => {...};
const TomatoBtn = styled(Btn)`color: tomato;`
```

--------------------------------

### Pure Annotation Opt-Out Configuration

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Configure the plugin to disable the automatic insertion of `#__PURE__` annotations, which can lead to larger bundle sizes.

```json
{
  "presets": [...],
  "plugins": [["babel-plugin-transform-goober", { "pure" : false }]]
}
```

--------------------------------

### createGlobalStyles

Source: https://github.com/cristianbote/goober/blob/master/README.md

A function to create global CSS styles that apply to the entire document.

```APIDOC
## createGlobalStyles

### Description
A function to create global CSS styles that apply to the entire document.

### Method Signature
`createGlobalStyles(template: TaggedTemplateLiteral)`

### Usage Example
```jsx
import { createGlobalStyles } from 'goober';

const GlobalStyles = createGlobalStyles`
  body {
    margin: 0;
    font-family: sans-serif;
  }
`;
```
```

--------------------------------

### styled(tagName, forwardRef)

Source: https://github.com/cristianbote/goober/blob/master/README.md

Creates a styled component. It accepts a tag name (string or function) and an optional forwardRef function. It returns a tag template function that can be used to define styles.

```APIDOC
## styled(tagName: String | Function, forwardRef?: Function)

### Description
Creates a styled component that can be used to apply styles to DOM elements or other components.

### Parameters
#### Path Parameters
- **tagName** (String|Function) - Required - The name of the DOM element or component to style.
- **forwardRef** (Function) - Optional - A function for forwarding refs, typically `React.forwardRef`.

### Returns
- **Function** - Returns the tag template function used for defining styles.
```

--------------------------------

### Goober Styled Component with Dynamic Styles (Tagged Template)

Source: https://github.com/cristianbote/goober/blob/master/README.md

Demonstrates dynamic styling in Goober using tagged template literals, where styles are based on component props.

```js
import { styled } from 'goober';

const Btn = styled('button')`
    border-radius: ${(props) => props.size}px;
`;

<Btn size={20} />;
```

--------------------------------

### Goober Styled Component with Forward Ref (React)

Source: https://github.com/cristianbote/goober/blob/master/README.md

Shows how to integrate Goober with React's `forwardRef` to create styled components that can receive ref props.

```js
const Title = styled('h1', React.forwardRef)`
    font-weight: bold;
    color: dodgerblue;
`;
```

--------------------------------

### css with props

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/css.md

Dynamically applies styles based on component props using tagged template literals.

```APIDOC
## css with props (Tagged Template)

### Description
Dynamically applies styles based on component props using tagged template literals. This allows for responsive and dynamic styling within components.

### Method
`css` (function)

### Parameters
#### Tagged Template Literal
- **styles** (string) - Required - CSS rules that can include expressions evaluating to prop values.

### Example
```javascript
import { css } from "goober";

const CustomButton = (props) => (
  <button
    className={css`
      border-radius: ${props.size}px;
    `}
  >
    click
  </button>
);
```
```

--------------------------------

### Goober Styled Component with Dynamic Styles (Function)

Source: https://github.com/cristianbote/goober/blob/master/README.md

Shows how to apply dynamic styles to a Goober component using a function that returns a CSS string, driven by props.

```js
import { styled } from 'goober';

const Btn = styled('button')( (props) => `
  border-radius: ${props.size}px;
` );

<Btn size={20} />;
```

--------------------------------

### Define and Use Reusable Keyframes

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/keyframes.md

Use the `keyframes` utility to define a reusable animation sequence. Then, apply this animation to a styled component using the `animation` CSS property.

```javascript
import { keyframes } from "goober";

const rotate = keyframes`
    from, to {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
`;

const Wicked = styled("div")`
  background: tomato;
  color: white;
  animation: ${rotate} 1s ease-in-out;
`;
```

--------------------------------

### Goober Styled Component with Array Styles

Source: https://github.com/cristianbote/goober/blob/master/README.md

Demonstrates using an array of styles in Goober, combining static object styles with dynamic styles determined by props.

```js
import { styled } from 'goober';

const Btn = styled('button')([
    { color: 'tomato' },
    ({ isPrimary }) => ({ background: isPrimary ? 'cyan' : 'gray' })
]);

<Btn />; // This will render the `Button` with `background: gray;`
<Btn isPrimary />; // This will render the `Button` with `background: cyan;`
```

--------------------------------

### Goober Styled Component with Object Styles

Source: https://github.com/cristianbote/goober/blob/master/README.md

Illustrates styling a Goober component using a JavaScript object for styles, allowing for dynamic property values based on props.

```js
import { styled } from 'goober';

const Btn = styled('button')((props) => ({
    borderRadius: props.size + 'px'
}));

<Btn size={20} />;
```

--------------------------------

### Enabling Typing for Preact

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/typescript.md

If you are using Preact, add a specific import statement to a declaration file at the root of your project to enable proper typing.

```typescript
// preact.d.ts

import JSX = preact.JSX;
```

--------------------------------

### Styled Component with Tagged Template Literals

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Define styles using tagged template literals for a concise and readable syntax.

```APIDOC
## styled(tagName: String | Function)

### Description
Creates a styled component using tagged template literals.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.

### Request Example
```js
import { styled } from "goober";

const Btn = styled("button")`
  border-radius: ${(props) => props.size}px;
`;

<Btn size={20} />;
```
```

--------------------------------

### Display Name Option Configuration

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Enable the `displayName` option in the Babel plugin to add richer component names and CSS classes for better debugging.

```json
{
  "presets": [...],
  "plugins": [["babel-plugin-transform-goober", { "displayName" : true }]]
}
```

--------------------------------

### Define Global Styles Directly with glob

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/createGlobalStyles.md

The `glob` function, available from `goober/global`, can also be used to define global styles directly. This method was the precursor to `createGlobalStyles` and is maintained for backward compatibility.

```javascript
import { glob } from "goober";

glob`
  html,
  body {
    background: light;
  }

  * {
    box-sizing: border-box;
  }
`;
```

--------------------------------

### Create Global Styles Component with createGlobalStyles

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/createGlobalStyles.md

Use `createGlobalStyles` to define a reusable component for your application's global styles. This component should be rendered within your application's tree.

```javascript
import { createGlobalStyles } from 'goober/global';

const GlobalStyles = createGlobalStyles`
  html,
  body {
    background: light;
  }

  * {
    box-sizing: border-box;
  }
`;

export default function App() {
    return (
        <div id="root">
            <GlobalStyles />
            <Navigation>
            <RestOfYourApp>
        </div>
    )
}
```

--------------------------------

### Create Global Styles Component

Source: https://github.com/cristianbote/goober/blob/master/README.md

Define global styles using the createGlobalStyles component from the goober/global addon. This component should be rendered in your application's tree.

```javascript
import { createGlobalStyles } from 'goober/global';

const GlobalStyles = createGlobalStyles`
  html, 
  body {
    background: light;
  }

  * {
    box-sizing: border-box;
  }
`;

export default function App() {
    return (
        <div id="root">
            <GlobalStyles />
            <Navigation>
            <RestOfYourApp>
        </div>
    )
}
```

--------------------------------

### Usage of CSS Prop for Styling

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/css-prop.md

Apply styles directly to HTML elements using the `css` prop with template literals or string values.

```javascript
<main css={`display: flex; min-height: 100vh; justify-content: center; align-items: center;`}>
  <h1 css="color: dodgerblue">Goober</h1>
</main>
```

--------------------------------

### Extend Styles with `styled`

Source: https://github.com/cristianbote/goober/blob/master/README.md

Extend existing styled components by passing them as the first argument to `styled`. This allows for composition and overwriting styles.

```javascript
import { styled } from 'goober';

// Let's declare a primitive for our styled component
const Primitive = styled('span')`
    margin: 0;
    padding: 0;
`;

// Later on we could get the primitive shared styles and also add our owns
const Container = styled(Primitive)`
    padding: 1em;
`;
```

--------------------------------

### Configure Preact CLI for Goober SSR

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/integrations/preact-cli-plugin.md

Configure your preact.config.js file to include the preact-cli-goober-ssr plugin. This enables critical CSS extraction for prerendered pages.

```javascript
# preact.config.js
const gooberPlugin = require('preact-cli-goober-ssr')
export default (config, env) => {
  gooberPlugin(config, env)
}
```

--------------------------------

### Styled Component with Function Returning String

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Define styles using a function that returns a CSS string. This allows for dynamic styling based on props.

```APIDOC
## styled(tagName: String | Function)

### Description
Creates a styled component using a function that returns a CSS string.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.

### Request Example
```js
import { styled } from "goober";

const Btn = styled("button")(
  (props) => `
  border-radius: ${props.size}px;
`
);

<Btn size={20} />;
```
```

--------------------------------

### Configure Gatsby Plugin

Source: https://github.com/cristianbote/goober/blob/master/packages/gatsby-plugin-goober/README.md

Add gatsby-plugin-goober to your Gatsby project's configuration file.

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

--------------------------------

### Conditional Styling with Undefined/Null Properties

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Explains that Goober omits properties with `undefined` or `null` values, demonstrating conditional styling.

```javascript
const Btn = styled("button")(
  (props) => `
  border-radius: ${props.rounded};
`
);

<Btn rounded="2px" />; // => `border-radius: 2;`

let isRounded = false
<Btn rounded={isRounded ? "4px" : null} />; // => `border-radius: null;`

<Btn>; // => `border-radius: undefined;`
```

--------------------------------

### Styled Component with Array of Styles

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Define styles using an array of style objects or functions. This allows for combining multiple style definitions.

```APIDOC
## styled(tagName: String | Function)

### Description
Creates a styled component using an array of style objects or functions.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.

### Request Example
```js
import { styled } from "goober";

const Btn = styled("button")([
  { color: "tomato" },
  ({ isPrimary }) => ({ background: isPrimary ? "cyan" : "gray" }),
]);

<Btn />; // This will render the `Button` with `background: gray;`
<Btn isPrimary />; // This will render the `Button` with `background: cyan;`
```
```

--------------------------------

### JSON/Object styles

Source: https://github.com/cristianbote/goober/blob/master/README.md

Define styles using JavaScript objects or arrays of objects. This method supports dynamic styling based on props.

```APIDOC
## JSON/Object styles

### Description
Define styles using JavaScript objects or arrays of objects. Supports dynamic styling based on props.

### Usage
```js
import { styled } from 'goober';

const Btn = styled('button')((props) => ({
    borderRadius: props.size + 'px'
}));

<Btn size={20} />;
```
```

--------------------------------

### Styled Component with JSON/Object Styles

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Define styles using a function that returns a JSON object. This is useful for complex style objects.

```APIDOC
## styled(tagName: String | Function)

### Description
Creates a styled component using a function that returns a JSON object of styles.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.

### Request Example
```js
import { styled } from "goober";

const Btn = styled("button")((props) => ({
  borderRadius: props.size + "px",
}));

<Btn size={20} />;
```
```

--------------------------------

### Using the 'as' Prop for Style Extension

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/sharing-style.md

Utilize the 'as' prop to dynamically change the underlying HTML element or component type of a styled component, effectively extending its styles. This allows for flexible composition at render time.

```jsx
import { styled } from 'goober';

// Our primitive element
const Primitive = styled('span')`
    margin: 0;
    padding: 0;
`;

const Container = styled('div')`
    padding: 1em;
`;

// At composition/render time
<Primitive as={'div'} /> // <div class="go01234" />

// Or using the `Container`
<Primitive as={Container} /> // <div class="go01234 go56789" />
```

--------------------------------

### css(taggedTemplate)

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/css.md

Creates a CSS class name from a tagged template literal. The styles defined within the template are processed and a unique class name is returned.

```APIDOC
## css(taggedTemplate)

### Description
Creates a CSS class name from a tagged template literal. The styles defined within the template are processed and a unique class name is returned.

### Method
`css` (function)

### Parameters
#### Tagged Template Literal
- **styles** (string) - Required - CSS rules defined within a tagged template literal.

### Returns
- **String** - A unique class name representing the provided styles.

### Example
```javascript
import { css } from "goober";

const BtnClassName = css`
  border-radius: 4px;
`;

// Usage:
// BtnClassName === 'g016232'
```
```

--------------------------------

### CSS Styling with JSON/Object Syntax

Source: https://github.com/cristianbote/goober/blob/master/README.md

Use the `css` function with a JavaScript object for styling. This approach can reduce bundle size and is useful for dynamic styles based on props.

```javascript
import { css } from 'goober';
const BtnClassName = (props) =>
    css({
        background: props.color,
        borderRadius: props.radius + 'px'
    });
```

--------------------------------

### Basic Styled Component

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Defines a basic styled button component using a tagged template literal.

```javascript
import { styled } from "goober";

const Btn = styled("button")`
  border-radius: 4px;
`;
```

--------------------------------

### Custom Identifier Configuration

Source: https://github.com/cristianbote/goober/blob/master/packages/babel-plugin-transform-goober/README.md

Configure the plugin to use a custom identifier name for Goober, such as 'goober' instead of 'styled'.

```json
{
  "presets": [...],
  "plugins": [["babel-plugin-transform-goober", { "name" : "goober" }]]
}
```

--------------------------------

### TypeScript Theme Extension Declaration

Source: https://github.com/cristianbote/goober/blob/master/README.md

Create a declaration file (e.g., `goober.d.t.s`) to extend Goober's `DefaultTheme` interface with custom theme types.

```typescript
// goober.d.t.s

import 'goober';

declare module 'goober' {
    export interface DefaultTheme {
        colors: {
            primary: string;
        };
    }
}
```

--------------------------------

### css

Source: https://github.com/cristianbote/goober/blob/master/README.md

Generates a unique CSS class name for the provided style rules. It can be used directly with the `className` attribute or with the `styled` API.

```APIDOC
## `css(taggedTemplate)`

### Description
Generates a unique CSS class name from a tagged template literal containing style rules. This class name can then be applied to DOM elements.

### Returns
- `String`: The generated CSS class name.

### Usage Examples
#### Basic Usage
```javascript
import { css } from "goober";

const BtnClassName = css`
  border-radius: 4px;
`;

// Applying to a DOM element
const btn = document.querySelector("#btn");
btn.classList.add(BtnClassName);

// Applying in JSX
const App => <button className={BtnClassName}>click</button>
```

#### Passing Props to `css` Tagged Templates
```javascript
import { css } from 'goober';

const CustomButton = (props) => (
    <button
        className={css`
            border-radius: ${props.size}px;
        `}
    >
        click
    </button>
);
```

#### Using `css` with JSON/Object Syntax
```javascript
import { css } from 'goober';

const BtnClassName = (props) =>
    css({
        background: props.color,
        borderRadius: props.radius + 'px'
    });
```

#### Declaring Styles with a Wrapper Function
```javascript
import { css } from 'goober';

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

// Usage in vanilla JS
const btn = document.querySelector('#btn');
btn.classList.add(BtnClassName({ size: 20 }));

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

**Note:** Using the object syntax for `css` can potentially reduce bundle size. Wrapping `css` in a function allows styles to be evaluated at render time, which can be beneficial for Server-Side Rendering (SSR) when used with `extractCSS` or the `styled` API to ensure consistent results.
```

--------------------------------

### Styled Component with Forward Ref

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

Pass a forward ref function (e.g., `React.forwardRef`) to the `styled` function to enable ref forwarding for the created component.

```APIDOC
## styled(tagName: String | Function, forwardRef: Function)

### Description
Creates a styled component that supports ref forwarding.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.
- **forwardRef** (Function) - Required - The forward ref function (e.g., `React.forwardRef`).

### Request Example
```js
const Title = styled("h1", React.forwardRef)`
  font-weight: bold;
  color: dodgerblue;
`;
```
```

--------------------------------

### styled Function Signature

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/styled.md

The `styled` function takes a tag name (string or function) and an optional forward ref function. It returns a tag template function that can be used to create styled components.

```APIDOC
## styled(tagName: String | Function, forwardRef?: Function)

### Description
Creates a styled component by applying CSS to a specified tag name.

### Parameters
#### Path Parameters
- **tagName** (String | Function) - Required - The name of the DOM element or component to apply styles to.
- **forwardRef** (Function) - Optional - A function to handle refs, typically `React.forwardRef`.

### Returns
- **Function** - A tag template function that can be used to define styles.
```

--------------------------------

### keyframes

Source: https://github.com/cristianbote/goober/blob/master/README.md

Defines CSS keyframes for animations.

```APIDOC
## keyframes

### Description
Defines CSS keyframes for animations.

### Method Signature
`keyframes` tagged template literal

### Usage Example
```jsx
import { keyframes } from 'goober';

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;
```
```

--------------------------------

### extractCss

Source: https://github.com/cristianbote/goober/blob/master/README.md

Extracts all generated CSS from the target.

```APIDOC
## extractCss

### Description
Extracts all generated CSS from the target.

### Method Signature
`extractCss(target?: string): string`

### Parameters
*   **target** (string) - Optional. The target to extract CSS from. Defaults to 'goober'.

### Usage Example
```javascript
import { extractCss } from 'goober';

const cssString = extractCss();
```
```

--------------------------------

### Extending Goober Theme with TypeScript

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/features/typescript.md

To add types to a custom theme, create a declaration file (e.g., goober.d.t.s) and declare the theme's structure within the 'goober' module. This enables autocompletion for theme properties.

```typescript
// goober.d.t.s

import 'goober';

declare module 'goober' {
    export interface DefaultTheme {
        colors: {
            primary: string;
        };
    }
}
```

```typescript
const ThemeContainer = styled('div')`
    background-color: ${(props) => props.theme.colors.primary};
`
```

--------------------------------

### css(object)

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/css.md

Creates a CSS class name from a JavaScript object. This method can potentially reduce bundle size compared to tagged template literals.

```APIDOC
## css(object)

### Description
Creates a CSS class name from a JavaScript object. This method can potentially reduce bundle size compared to tagged template literals.

### Method
`css` (function)

### Parameters
#### Object
- **styles** (object) - Required - An object where keys are CSS properties and values are their corresponding values.

### Returns
- **String** - A unique class name representing the provided styles.

### Example
```javascript
import { css } from "goober";

const BtnClassName = (props) => css({
  background: props.color,
  borderRadius: props.radius + "px",
});

// Usage:
// BtnClassName({ color: 'blue', radius: 10 })
```
```

--------------------------------

### Define Reusable Keyframes Animation

Source: https://github.com/cristianbote/goober/blob/master/README.md

Define reusable animations using the keyframes utility. These animations can then be applied to styled components.

```javascript
import { keyframes } from 'goober';

const rotate = keyframes`
    from, to {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
`;

const Wicked = styled('div')`
    background: tomato;
    color: white;
    animation: ${rotate} 1s ease-in-out;
;
```

--------------------------------

### Create Dynamic CSS Class Name with Function and Tagged Template

Source: https://github.com/cristianbote/goober/blob/master/docs/docs/api/css.md

Wrap the `css` tagged template literal in a function to defer style generation until runtime. This is useful for dynamic styles that depend on props and can help avoid inconsistencies with SSR.

```javascript
import { css } from "goober";

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

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

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

--------------------------------

### css

Source: https://github.com/cristianbote/goober/blob/master/README.md

A tagged template literal function that allows writing CSS directly within JavaScript, returning a class name.

```APIDOC
## css

### Description
A tagged template literal function that allows writing CSS directly within JavaScript, returning a class name.

### Method Signature
`css` tagged template literal

### Usage Example
```jsx
import { css } from 'goober';

const blue = 'blue';
const styles = css`
  color: ${blue};
  &:hover {
    text-decoration: underline;
  }
`;
```
```

--------------------------------

### Goober Basic Styled Component

Source: https://github.com/cristianbote/goober/blob/master/README.md

Defines a basic styled button component using Goober's `styled` API with a tagged template literal.

```js
import { styled } from 'goober';

const Btn = styled('button')`
    border-radius: 4px;
`;
```