diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
deleted file mode 100644
index 228b19ad..00000000
--- a/.github/workflows/docs.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-name: docs
-
-on:
- push:
- branches:
- - master
-
-jobs:
- deploy:
- runs-on: ubuntu-18.04
- defaults:
- run:
- working-directory: ./docs
- steps:
- - uses: actions/checkout@v2
-
- - name: Setup Node
- uses: actions/setup-node@v2-beta
- with:
- node-version: '12.x'
-
- - name: Get yarn cache
- id: yarn-cache
- run: echo "::set-output name=dir::$(yarn cache dir)"
-
- - name: Cache dependencies
- uses: actions/cache@v2
- with:
- path: ${{ steps.yarn-cache.outputs.dir }}
- key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- ${{ runner.os }}-yarn-
-
- - run: yarn install --frozen-lockfile
- - run: yarn build
-
- - name: Deploy
- uses: peaceiris/actions-gh-pages@v3
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./docs/build
- force_orphan: true
diff --git a/CNAME b/CNAME
deleted file mode 100644
index 0c387456..00000000
--- a/CNAME
+++ /dev/null
@@ -1 +0,0 @@
-goober.js.org
\ No newline at end of file
diff --git a/README.md b/README.md
index 0dfe1484..82b5bb7c 100644
--- a/README.md
+++ b/README.md
@@ -14,13 +14,9 @@
[](https://codecov.io/github/cristianbote/goober?branch=master)
[](https://join.slack.com/t/gooberdev/shared_invite/enQtOTM5NjUyOTcwNzI1LWUwNzg0NTQwODY1NDJmMzQ2NzdlODI4YTM3NWUwYjlkY2ZkNGVmMTFlNGMwZGUyOWQyZmI4OTYwYmRiMzE0NGQ)
-# πͺ The Great Shave Off Challenge
-
-Can you shave off bytes from goober? Do it and you're gonna get paid! [More info here](https://goober.rocks/the-great-shave-off)
-
# Motivation
-I've always wondered if you could get a working solution for css-in-js with a smaller footprint. While I was working on a side project I wanted to use styled-components, or more accurately the `styled` pattern. Looking at the JavaScript bundle sizes, I quickly realized that I would have to include ~12kB([styled-components](https://github.com/styled-components/styled-components)) or ~11kB([emotion](https://github.com/emotion-js/emotion)) just so I can use the `styled` paradigm. So, I embarked on a mission to create a smaller alternative for these well established APIs.
+I've always wondered if you could get a working solution for css-in-js with a smaller footprint. This library provides a minimal, lightweight alternative focused on the core functionality of CSS-in-JS without the overhead of larger libraries.
# Why the peanuts emoji?
@@ -40,73 +36,56 @@ It's a pun on the tagline.
- [Usage](#usage)
- [Examples](#examples)
-- [Tradeoffs](#comparison-and-tradeoffs)
- [SSR](#ssr)
-- [Benchmarks](#benchmarks)
- - [Browser](#browser)
- - [SSR](#ssr-1)
- [API](#api)
- - [styled](#styledtagname-string--function-forwardref-function)
- - [setup](#setuppragma-function-prefixer-function-theme-function-forwardprops-function)
- - [With prefixer](#with-prefixer)
- - [With theme](#with-theme)
- - [With forwardProps](#with-forwardProps)
- - [css](#csstaggedtemplate)
+ - [css](#css)
+ - [glob](#glob)
+ - [keyframes](#keyframes)
+ - [setup](#setup)
- [targets](#targets)
- - [extractCss](#extractcsstarget)
+ - [extractCss](#extractcss)
- [createGlobalStyles](#createglobalstyles)
- - [keyframes](#keyframes)
- - [shouldForwardProp](#shouldForwardProp)
-- [Integrations](#integrations)
- - [Babel Plugin](#babel-plugin)
- - [Babel Macro Plugin](#babel-macro-plugin)
- - [Next.js](#nextjs)
- - [Gatsby](#gatsby)
- - [Preact CLI Plugin](#preact-cli-plugin)
- - [CSS Prop](#css-prop)
- [Features](#features)
- - [Sharing Style](#sharing-style)
- [Autoprefixer](#autoprefixer)
- [TypeScript](#typescript)
- - [Content Security Policy (CSP)](#content-security-policy-csp)-
+ - [Content Security Policy (CSP)](#content-security-policy-csp)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
# Usage
-The API is inspired by emotion `styled` function. Meaning, you call it with your `tagName`, and it returns a vDOM component for that tag. Note, `setup` needs to be ran before the `styled` function is used.
+goober provides a lightweight css-in-js solution using object syntax. You use the `css` function to generate class names, and apply them to your elements.
```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;
- }
+import { css } from 'goober';
- .otherClass {
- margin: 0;
+const buttonClass = css({
+ background: 'dodgerblue',
+ color: 'white',
+ border: '1px solid white',
+ padding: '1em',
+ '&:focus, &:hover': {
+ padding: '1.5em'
}
+});
- ${Icon} {
- color: black;
- }
-`;
+const Button = (props) => ;
+```
+
+You can also use dynamic styles by passing a function:
+
+```jsx
+import { css } from 'goober';
+
+const Button = ({ color, children }) => {
+ const buttonClass = css({
+ background: color,
+ color: 'white',
+ padding: '1em'
+ });
+
+ return ;
+};
```
# Examples
@@ -117,358 +96,83 @@ const Button = styled('button')`
- [SSR with Preact](https://codesandbox.io/s/7m9zzl6746)
- [Fre](https://codesandbox.io/s/fre-goober-ffqjv)
-# Comparison and tradeoffs
-
-In this section I would like to compare goober, as objectively as I can, with the latest versions of two most well known css-in-js packages: styled-components and emotion.
-
-I've used the following markers to reflect the state of each feature:
-
-- β Supported
-- π‘ Partially supported
-- π Not supported
-
-Here we go:
-
-| Feature name | Goober | Styled Components | Emotion |
-| ---------------------- | ------- | ----------------- | ------- |
-| Base bundle size | 1.25 kB | 12.6 kB | 7.4 kB |
-| Framework agnostic | β | π | π |
-| Render with target \*1 | β | π | π |
-| `css` api | β | β | β |
-| `css` prop | β | β | β |
-| `styled` | β | β | β |
-| `styled.` | β \*2 | β | β |
-| default export | π | β | β |
-| `as` | β | β | β |
-| `.withComponent` | π | β | β |
-| `.attrs` | π | β | π |
-| `shouldForwardProp` | β | β | β |
-| `keyframes` | β | β | β |
-| Labels | π | π | β |
-| ClassNames | π | π | β |
-| Global styles | β | β | β |
-| SSR | β | β | β |
-| Theming | β | β | β |
-| Tagged Templates | β | β | β |
-| Object styles | β | β | β |
-| Dynamic styles | β | β | β |
-
-Footnotes
-
-- [1] `goober` can render in _any_ dom target. Meaning you can use `goober` to define scoped styles in any context. Really useful for web-components.
-- [2] Supported only via `babel-plugin-transform-goober`
-
# SSR
You can get the critical CSS for SSR via `extractCss`. Take a look at this example: [CodeSandbox: SSR with Preact and goober](https://codesandbox.io/s/7m9zzl6746) and read the full explanation for `extractCSS` and `targets` below.
-# Benchmarks
-
-The results are included inside the build output as well.
-
-## Browser
-
-Coming soon!
-
-## SSR
-
-The benchmark is testing the following scenario:
-
-```jsx
-import styled from '';
-
-// 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();
-```
-
-The results are:
-
-```
-goober x 200,437 ops/sec Β±1.93% (87 runs sampled)
-styled-components@5.2.1 x 12,650 ops/sec Β±9.09% (48 runs sampled)
-emotion@11.0.0 x 104,229 ops/sec Β±2.06% (88 runs sampled)
-
-Fastest is: goober
-```
-
# API
-As you can see, goober supports most of the CSS syntax. If you find any issues, please submit a ticket, or open a PR with a fix.
-
-### `styled(tagName: String | Function, forwardRef?: Function)`
-
-- `@param {String|Function} tagName` The name of the DOM element you'd like the styles to be applied to
-- `@param {Function} forwardRef` Forward ref function. Usually `React.forwardRef`
-- `@returns {Function}` Returns the tag template function.
-
-```js
-import { styled } from 'goober';
-
-const Btn = styled('button')`
- border-radius: 4px;
-`;
-```
-
-#### Different ways of customizing the styles
-
-##### Tagged templates functions
-
-```js
-import { styled } from 'goober';
-
-const Btn = styled('button')`
- border-radius: ${(props) => props.size}px;
-`;
-
-;
-```
+goober supports most CSS syntax. If you find any issues, please submit a ticket, or open a PR with a fix.
-##### Function that returns a string
-
-```js
-import { styled } from 'goober';
-
-const Btn = styled('button')(
- (props) => `
- border-radius: ${props.size}px;
-`
-);
-
-;
-```
-
-##### JSON/Object
-
-```js
-import { styled } from 'goober';
-
-const Btn = styled('button')((props) => ({
- borderRadius: props.size + 'px'
-}));
-
-;
-```
-
-##### Arrays
-
-```js
-import { styled } from 'goober';
-
-const Btn = styled('button')([
- { color: 'tomato' },
- ({ isPrimary }) => ({ background: isPrimary ? 'cyan' : 'gray' })
-]);
-
-; // This will render the `Button` with `background: gray;`
-; // This will render the `Button` with `background: cyan;`
-```
-
-##### Forward ref function
-
-As goober is JSX library agnostic, you need to pass in the forward ref function for the library you are using. Here's how you do it for React.
-
-```js
-const Title = styled('h1', React.forwardRef)`
- font-weight: bold;
- color: dodgerblue;
-`;
-```
-
-### `setup(pragma: Function, prefixer?: Function, theme?: Function, forwardProps?: Function)`
-
-The call to `setup()` should occur only once. It should be called in the entry file of your project.
-
-Given the fact that `react` uses `createElement` for the transformed elements and `preact` uses `h`, `setup` should be called with the proper _pragma_ function. This was added to reduce the bundled size and being able to bundle an esmodule version. At the moment, it's the best tradeoff I can think of.
-
-```js
-import React from 'react';
-import { setup } from 'goober';
-
-setup(React.createElement);
-```
-
-#### With prefixer
-
-```js
-import React from 'react';
-import { setup } from 'goober';
-
-const customPrefixer = (key, value) => `${key}: ${value};\n`;
-
-setup(React.createElement, customPrefixer);
-```
-
-#### With theme
-
-```js
-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
-
-The `forwardProps` function offers a way to achieve the same `shouldForwardProps` functionality as emotion and styled-components (with transient props) offer. The difference here is that the function receives the whole props and you are in charge of removing the props that should not end up in the DOM.
-
-This is a super useful functionality when paired with theme object, variants, or any other customisation one might need.
-
-```js
-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];
- }
- }
-});
-```
-
-The functionality of "transient props" (with a "\$" prefix) can be implemented as follows:
-
-```js
-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];
- }
- }
-});
-```
-
-Alternatively you can use `goober/should-forward-prop` addon to pass only the filter function and not have to deal with the full `props` object.
-
-```js
-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';
- })
-);
-```
-
-### `css(taggedTemplate)`
+### `css(styles)`
+- `@param {Object|Function} styles` - CSS object or function returning CSS object
- `@returns {String}` Returns the className.
-To create a className, you need to call `css` with your style rules in a tagged template.
+To create a className, call `css` with a style object:
```js
-import { css } from "goober";
+import { css } from 'goober';
-const BtnClassName = css`
- border-radius: 4px;
-`;
+const BtnClassName = css({
+ borderRadius: '4px'
+});
// vanilla JS
-const btn = document.querySelector("#btn");
+const btn = document.querySelector('#btn');
// BtnClassName === 'g016232'
btn.classList.add(BtnClassName);
// JSX
// BtnClassName === 'g016232'
-const App =>
+const App = () => ;
```
-#### Different ways of customizing `css`
+#### Dynamic styles
-##### Passing props to `css` tagged templates
+You can pass dynamic values directly in the object:
```js
import { css } from 'goober';
-// JSX
-const CustomButton = (props) => (
+const CustomButton = ({ size }) => (
);
```
-##### Using `css` with JSON/Object
+Or create reusable style functions:
```js
import { css } from 'goober';
+
const BtnClassName = (props) =>
css({
background: props.color,
borderRadius: props.radius + 'px'
});
-```
-
-**Notice:** using `css` with object can reduce your bundle size.
-
-We can also declare styles at the top of the file by wrapping `css` into a function that we call to get the className.
-
-```js
-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 }));
+btn.classList.add(BtnClassName({ color: 'red', radius: 20 }));
// JSX
-// BtnClassName({size:20}) -> g016360
-const App = () => ;
+const App = () => ;
```
-The difference between calling `css` directly and wrapping into a function is the timing of its execution. The former is when the component(file) is imported, the latter is when it is actually rendered.
-
-If you use `extractCSS` for SSR, you may prefer to use the latter, or the `styled` API to avoid inconsistent results.
-
### `targets`
-By default, goober will append a style tag to the `` of a document. You might want to target a different node, for instance, when you want to use goober with web components (so you'd want it to append style tags to individual shadowRoots). For this purpose, you can `.bind` a new target to the `styled` and `css` methods:
+By default, goober will append a style tag to the `` of a document. You might want to target a different node, for instance, when you want to use goober with web components (so you'd want it to append style tags to individual shadowRoots). For this purpose, you can `.bind` a new target to the `css` method:
```js
import * as goober from 'goober';
const target = document.getElementById('target');
const css = goober.css.bind({ target: target });
-const styled = goober.styled.bind({ target: target });
```
If you don't provide a target, goober always defaults to `` and in environments without a DOM (think certain SSR solutions), it will just use a plain string cache to store generated styles which you can extract with `extractCSS`(see below).
@@ -488,222 +192,90 @@ const styleTag = ``;
// 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
```
+### `glob(styles)`
+
+Define global styles that apply to the entire document:
+
+```js
+import { glob } from 'goober';
+
+glob({
+ html: {
+ background: 'light'
+ },
+ body: {
+ background: 'light'
+ },
+ '*': {
+ boxSizing: 'border-box'
+ }
+});
+```
+
### `createGlobalStyles`
-To define your global styles you need to create a `GlobalStyles` component and use it as part of your tree. The `createGlobalStyles` is available at `goober/global` addon.
+To define your global styles as a component, use `createGlobalStyles` from the `goober/global` addon:
```js
import { createGlobalStyles } from 'goober/global';
-const GlobalStyles = createGlobalStyles`
- html,
- body {
- background: light;
- }
-
- * {
- box-sizing: border-box;
- }
-`;
+const GlobalStyles = createGlobalStyles({
+ html: {
+ background: 'light'
+ },
+ body: {
+ background: 'light'
+ },
+ '*': {
+ boxSizing: 'border-box'
+ }
+});
export default function App() {
return (
-
-
+
+
- )
+ );
}
```
-#### How about using `glob` function directly?
+### `keyframes(styles)`
-Before the global addon, `goober/global`, there was a method named `glob` that was part of the main package that would do the same thing, more or less. Having only that method to define global styles usually led to missing global styles from the extracted css, since the pattern did not enforce the evaluation of the styles at render time. The `glob` method is still exported from `goober/global`, in case you have a hard dependency on it. It still has the same API:
+Define reusable animations:
```js
-import { glob } from 'goober';
-
-glob`
- html,
- body {
- background: light;
- }
-
- * {
- box-sizing: border-box;
- }
-`;
-```
-
-### `keyframes`
-
-`keyframes` is a helpful method to define reusable animations that can be decoupled from the main style declaration and shared across components.
+import { css, keyframes } from 'goober';
-```js
-import { keyframes } from 'goober';
-
-const rotate = keyframes`
- from, to {
- transform: rotate(0deg);
- }
-
- 50% {
- transform: rotate(180deg);
+const rotate = keyframes({
+ from: {
+ transform: 'rotate(0deg)'
+ },
+ to: {
+ transform: 'rotate(180deg)'
}
-`;
-
-const Wicked = styled('div')`
- background: tomato;
- color: white;
- animation: ${rotate} 1s ease-in-out;
-`;
-```
-
-### `shouldForwardProp`
-
-To implement the `shouldForwardProp` without the need to provide the full loop over `props` you can use the `goober/should-forward-prop` addon.
-
-```js
-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'] !== '$';
- })
-);
-```
-
-# Integrations
-
-## Babel plugin
-
-You're in love with the `styled.div` syntax? Fear no more! We got you covered with a babel plugin that will take your lovely syntax from `styled.tag` and translate it to goober's `styled("tag")` call.
-
-```sh
-npm i --save-dev babel-plugin-transform-goober
-# or
-yarn add --dev babel-plugin-transform-goober
-```
-
-Visit the package in here for more info (https://github.com/cristianbote/goober/tree/master/packages/babel-plugin-transform-goober)
-
-## Babel macro plugin
-
-A babel-plugin-macros macro for [π₯goober][goober], rewriting `styled.div` syntax to `styled('div')` calls.
-
-### Usage
-
-Once you've configured [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros), change your imports from `goober` to `goober/macro`.
-
-Now you can create your components using `styled.*` syntax:.
-
-```js
-import { styled } from 'goober/macro';
-
-const Button = styled.button`
- margin: 0;
- padding: 1rem;
- font-size: 1rem;
- background-color: tomato;
-`;
-```
-
-## [Next.js](https://github.com/vercel/next.js)
-
-Want to use `goober` with Next.js? We've got you covered! Follow the example below or from the main [examples](https://github.com/vercel/next.js/tree/canary/examples/with-goober) directory.
-
-```sh
-npx create-next-app --example with-goober with-goober-app
-# or
-yarn create next-app --example with-goober with-goober-app
-```
-
-## [Gatsby](https://github.com/gatsbyjs/gatsby)
-
-Want to use `goober` with Gatsby? We've got you covered! We have our own plugin to deal with styling your Gatsby projects.
-
-```sh
-npm i --save goober gatsby-plugin-goober
-# or
-yarn add goober gatsby-plugin-goober
-```
-
-## Preact CLI plugin
-
-If you use Goober with Preact CLI, you can use [preact-cli-goober-ssr](https://github.com/gerhardsletten/preact-cli-goober-ssr)
-
-```sh
-npm i --save-dev preact-cli-goober-ssr
-# or
-yarn add --dev preact-cli-goober-ssr
-
-# preact.config.js
-const gooberPlugin = require('preact-cli-goober-ssr')
-
-export default (config, env) => {
- gooberPlugin(config, env)
-}
-```
-
-When you build your Preact application, this will run `extractCss` on your pre-rendered pages and add critical styles for each page.
-
-## CSS Prop
-
-You can use a custom `css` prop to pass in styles on HTML elements with this Babel plugin.
-
-Installation:
-
-```sh
-npm install --save-dev @agney/babel-plugin-goober-css-prop
-```
-
-List the plugin in `.babelrc`:
-
-```
-{
- "plugins": [
- "@agney/babel-plugin-goober-css-prop"
- ]
-}
-```
+});
-Usage:
-
-```javascript
-
-
Goober
-
+const wickedClass = css({
+ background: 'tomato',
+ color: 'white',
+ animation: `${rotate} 1s ease-in-out`
+});
```
# Features
- [x] Basic CSS parsing
- [x] Nested rules with pseudo selectors
-- [x] Nested styled components
-- [x] [Extending Styles](#sharing-style)
- [x] Media queries (@media)
- [x] Keyframes (@keyframes)
- [x] Smart (lazy) client-side hydration
-- [x] Styling any component
- - via `` const Btn = ({className}) => {...}; const TomatoBtn = styled(Btn)`color: tomato;` ``
-- [x] Vanilla (via `css` function)
-- [x] `globalStyle` (via `glob`) so one would be able to create global styles
-- [x] target/extract from elements other than ``
-- [x] [vendor prefixing](#autoprefixer)
+- [x] Vanilla CSS via `css` function
+- [x] Global styles via `glob` and `createGlobalStyles`
+- [x] Target/extract from elements other than ``
+- [x] [Vendor prefixing](#autoprefixer)
# Content Security Policy (CSP)
@@ -717,53 +289,6 @@ goober supports Content Security Policy nonces for inline styles. Set `window.__
The nonce will be added to goober's ``;
-
-// 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
-```
diff --git a/docs/docs/api/keyframes.md b/docs/docs/api/keyframes.md
deleted file mode 100644
index 8ec66c10..00000000
--- a/docs/docs/api/keyframes.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-id: keyframes
-title: keyframes
-sidebar_label: keyframes
----
-
-`keyframes`
-
-`keyframes` is a helpful method to define reusable animations that can be decoupled from the main style declaration and shared across components.
-
-```js
-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;
-`;
-```
diff --git a/docs/docs/api/setup.md b/docs/docs/api/setup.md
deleted file mode 100644
index d55841ab..00000000
--- a/docs/docs/api/setup.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-id: setup
-title: setup
-sidebar_label: setup
----
-
-`setup(pragma: Function, prefixer?: Function, theme?: Function, forwardProps?: Function)`
-
-The call to `setup()` should occur once only. It should be called in the entry file of you project.
-
-Given the fact that `react` uses `createElement` for the transformed elements and `preact` uses `h`, `setup` should be called with the proper _pragma_ function. This was added to reduce the bundled size and being able to bundle esmodule version. At the moment I think it's the best tradeoff we can have.
-
-```js
-import React from 'react';
-import { setup } from 'goober';
-
-setup(React.createElement);
-```
-
-## With prefixer
-
-```js
-import React from 'react';
-import { setup } from 'goober';
-
-const customPrefixer = (key, value) => `${key}: ${value};\n`;
-
-setup(React.createElement, customPrefixer);
-```
-
-## With theme
-
-```js
-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};
-`;
-```
-
-## With forwardProps
-
-The `forwardProps` function, offers a way to achieve the same `shouldForwardProps` functionality as emotion and styled-components(with transient props) offer. The difference in here is that the function receives the whole props and you are in charge of removing the props that are should not end-up in the dom.
-
-This is a super useful functionality when paired with theme object, variants or any other customisation one might need.
-
-```js
-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];
- }
- }
-});
-```
-
-Alternatively you can use `goober/should-forward-prop` addon, to pass only the filter function and not have to deal with the full `props` object.
-
-```js
-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';
- })
-);
-```
diff --git a/docs/docs/api/shouldForwardProp.md b/docs/docs/api/shouldForwardProp.md
deleted file mode 100644
index cb9ffa21..00000000
--- a/docs/docs/api/shouldForwardProp.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-id: shouldForwardProp
-title: shouldForwardProp
-sidebar_label: shouldForwardProp
----
-
-`shouldForwardProp`
-
-To seamingly implement the `shouldForwardProp` without the need to provide the full loop over `props` you can use the `goober/should-forward-prop` addon.
-
-```js
-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'] !== '$';
- })
-);
-```
diff --git a/docs/docs/api/styled.md b/docs/docs/api/styled.md
deleted file mode 100644
index 01c1f404..00000000
--- a/docs/docs/api/styled.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: styled
-title: styled
-sidebar_label: styled
----
-
-`styled(tagName: String | Function, forwardRef?: Function)`
-
-- `@param {String|Function} tagName` The name of the dom element you'd like the styled to be applied to
-- `@param {Function} forwardRef` Forward ref function. Usually `React.forwardRef`
-- `@returns {Function}` Returns the tag template function.
-
-```js
-import { styled } from "goober";
-
-const Btn = styled("button")`
- border-radius: 4px;
-`;
-```
-
-## Different ways of customizing the styles
-
-### Tagged templates functions
-
-```js
-import { styled } from "goober";
-
-const Btn = styled("button")`
- border-radius: ${(props) => props.size}px;
-`;
-
-;
-```
-
-### Function that returns a string
-
-```js
-import { styled } from "goober";
-
-const Btn = styled("button")(
- (props) => `
- border-radius: ${props.size}px;
-`
-);
-
-;
-```
-
-### JSON/Object
-
-```js
-import { styled } from "goober";
-
-const Btn = styled("button")((props) => ({
- borderRadius: props.size + "px",
-}));
-
-;
-```
-
-### Arrays
-
-```js
-import { styled } from "goober";
-
-const Btn = styled("button")([
- { color: "tomato" },
- ({ isPrimary }) => ({ background: isPrimary ? "cyan" : "gray" }),
-]);
-
-; // This will render the `Button` with `background: gray;`
-; // This will render the `Button` with `background: cyan;`
-```
-
-### Forward ref function
-
-As goober is JSX library agnostic, you need to pass in the forward ref function for the library you are using. Here's how you do it for React.
-
-```js
-const Title = styled("h1", React.forwardRef)`
- font-weight: bold;
- color: dodgerblue;
-`;
-```
-
-### Conditional styling
-
-If the value of a property is `undefined` or `null`, goober will ommit them.
-
-```js
-const Btn = styled("button")(
- (props) => `
- border-radius: ${props.rounded};
-`
-);
-
-; // => `border-radius: 2;`
-
-let isRounded = false
-; // => `border-radius: null;`
-
-; // => `border-radius: undefined;`
-```
diff --git a/docs/docs/api/targets.md b/docs/docs/api/targets.md
deleted file mode 100644
index d9322c3f..00000000
--- a/docs/docs/api/targets.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-id: targets
-title: targets
-sidebar_label: targets
----
-
-`targets`
-
-By default, goober will append a style tag to the `` of a document. You might want to target a different node, for instance, when you want to use goober with web components (so you'd want it to append style tags to individual shadowRoots). For this purpose, you can `.bind` a new target to the `styled` and `css` methods:
-
-```js
-import * as goober from "goober";
-const target = document.getElementById("target");
-const css = goober.css.bind({ target: target });
-const styled = goober.styled.bind({ target: target });
-```
-
-If you don't provide a target, goober always defaults to `` and in environments without a DOM (think certain SSR solutions), it will just use a plain string cache to store generated styles which you can extract with `extractCSS`(see below).
diff --git a/docs/docs/contributing.md b/docs/docs/contributing.md
deleted file mode 100644
index a135cb4b..00000000
--- a/docs/docs/contributing.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-id: contributing
-title: Contributing
-sidebar_label: Contributing
----
-
-Feel free to try it out and checkout the examples. If you wanna fix something feel free to open a issue or a PR.
-
-## Backers
-
-Thank you to all our backers! π
-
-
-## Sponsors
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
-
diff --git a/docs/docs/features/autoprefixer.md b/docs/docs/features/autoprefixer.md
deleted file mode 100644
index b157d99e..00000000
--- a/docs/docs/features/autoprefixer.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-id: autoprefixer
-title: Autoprefixer
-sidebar_label: Autoprefixer
----
-
-Autoprefixing is a helpful way to make sure the generated css will work seamlessly on the whole spectrum of browsers. With that in mind, the core `goober` package can't hold that logic to determine the autoprefixing needs, so we added a new package that you can choose to address them.
-
-```sh
-npm install goober
-# or
-yarn add goober
-```
-
-After the main package is installed it's time to bootstrap goober with it:
-
-```js
-import { setup } from 'goober';
-import { prefix } from 'goober/prefixer';
-
-// Bootstrap goober
-setup(React.createElement, prefix);
-```
-
-And voila! It is done!
diff --git a/docs/docs/features/checklist.md b/docs/docs/features/checklist.md
deleted file mode 100644
index 87ba31c5..00000000
--- a/docs/docs/features/checklist.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-id: checklist
-title: Checklist
-sidebar_label: Checklist
----
-
-- [x] Basic CSS parsing
-- [x] Nested rules with pseudo selectors
-- [x] Nested styled components
-- [x] [Extending Styles](#sharing-style)
-- [x] Media queries (@media)
-- [x] Keyframes (@keyframes)
-- [x] Smart(lazy) client-side hydration
-- [x] Styling any component
- - via `` const Btn = ({className}) => {...}; const TomatoBtn = styled(Btn)`color: tomato;` ``
-- [x] Vanilla(via `css` function)
-- [x] `globalStyle`(via `glob`) so one would be able to create global styles
-- [x] target/extract from elements other than ``
-- [x] [vendor prefixing](#autoprefixer)
diff --git a/docs/docs/features/sharing-style.md b/docs/docs/features/sharing-style.md
deleted file mode 100644
index 57bd6686..00000000
--- a/docs/docs/features/sharing-style.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-id: sharing-style
-title: Sharing Style
-sidebar_label: Sharing Style
----
-
-There are a couple of ways to effectly share/extend styles across components.
-
-## Extending
-
-One can simply extend the desired component that needs to be enrich or overwriten with another set of css rules.
-
-```js
-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;
-`;
-```
-
-## Using `as` prop
-
-Another helpful way to extend a certain component is with the `as` property. Given our example above we could modify it like:
-
-```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
- //
-
-// Or using the `Container`
- //
-```
diff --git a/docs/docs/features/typescript.md b/docs/docs/features/typescript.md
deleted file mode 100644
index 34ad97e5..00000000
--- a/docs/docs/features/typescript.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-id: typescript
-title: TypeScript
-sidebar_label: TypeScript
----
-
-`goober` comes with types included, making developing with TypeScript easy.
-
-## Prop Types
-
-If you're utilising custom props and wish to style based on them, you can do so when initialising as follows:
-
-```ts
-interface Props {
- size: number;
-}
-
-styled('div')`
- border-radius: ${(props) => props.size}px;
-`;
-
-// This also works!
-
-styled('div')`
- border-radius: ${(props) => props.size}px;
-`;
-```
-
-## Extending Theme
-
-If you're using a [custom theme](../api/setup.md#with-theme) with goober, to add types to it you should create a declaration file at the base of your project.
-
-```ts
-// goober.d.t.s
-
-import 'goober';
-
-declare module 'goober' {
- export interface DefaultTheme {
- colors: {
- primary: string;
- };
- }
-}
-```
-
-You should now have autocompletion for your theme.
-
-```ts
-const ThemeContainer = styled('div')`
- background-color: ${(props) => props.theme.colors.primary};
-`;
-```
-
-#### Note when using Preact
-
-If utilising Preact, add the following into a declaration file at the root of your project to enable typing:
-
-```ts
-// preact.d.ts
-
-import JSX = preact.JSX;
-```
diff --git a/docs/docs/integrations/babel-macro-plugin.md b/docs/docs/integrations/babel-macro-plugin.md
deleted file mode 100644
index 513b248e..00000000
--- a/docs/docs/integrations/babel-macro-plugin.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: babel-macro-plugin
-title: Babel Macro Plugin
-sidebar_label: Babel Macro Plugin
----
-
-A babel-plugin-macros macro for π₯goober, rewriting `styled.div` syntax to `styled('div')` calls.
-
-## Usage
-
-Once you've configured babel-plugin-macros, change your imports from `goober` to `goober/macro`.
-
-Now you can create your components using `styled.*` syntax:.
-
-```js
-import { styled } from "goober/macro";
-
-const Button = styled.button`
- margin: 0;
- padding: 1rem;
- font-size: 1rem;
- background-color: tomato;
-`;
-```
diff --git a/docs/docs/integrations/babel-plugin.md b/docs/docs/integrations/babel-plugin.md
deleted file mode 100644
index 2f996606..00000000
--- a/docs/docs/integrations/babel-plugin.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-id: babel-plugin
-title: Babel Plugin
-sidebar_label: Babel Plugin
----
-
-You're in love with the `styled.div` syntax? Fear no more! We got you covered with a babel plugin that will take your lovely syntax from `styled.tag` and translate it to goober's `styled("tag")` call.
-
-```sh
-npm i --save-dev babel-plugin-transform-goober
-# or
-yarn add --dev babel-plugin-transform-goober
-```
-
-Visit the package in here for more info (https://github.com/cristianbote/goober/tree/master/packages/babel-plugin-transform-goober)
diff --git a/docs/docs/integrations/css-prop.md b/docs/docs/integrations/css-prop.md
deleted file mode 100644
index e1d43f0b..00000000
--- a/docs/docs/integrations/css-prop.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: css-prop
-title: CSS Prop
-sidebar_label: CSS Prop
----
-
-## CSS Prop
-
-You can use a custom `css` prop to pass in styles on HTML elements with this Babel plugin.
-
-Installation:
-
-```sh
-npm install --save-dev @agney/babel-plugin-goober-css-prop
-```
-
-List the plugin in `.babelrc`:
-
-```
-{
- "plugins": [
- "@agney/babel-plugin-goober-css-prop"
- ]
-}
-```
-
-Usage:
-
-```javascript
-
-
(tag: string): Tagged<
- P & Partial
- >;
-
- // used to create a styled component from a JSX element (both functional and class-based)
- (
- tag: T,
- forwardRef?: ForwardRefFunction
- ): Tagged
;
- }
-
- // used when creating a styled component from a native HTML element with the babel-plugin-transform-goober parser
- type BabelPluginTransformGooberStyledFunction = {
- [T in keyof React.JSX.IntrinsicElements]: Tagged<
- React.JSX.LibraryManagedAttributes &
- Theme
- >;
- };
-
- type ForwardRefFunction = {
- (props: any, ref: any): any;
- };
-
- type ForwardPropsFunction = (props: object) => void;
-
- const styled: StyledFunction & BabelPluginTransformGooberStyledFunction;
- function setup(
- val: T,
- prefixer?: (key: string, val: any) => string,
- theme?: Function,
- forwardProps?: ForwardPropsFunction
- ): void;
+ function setup(prefixer?: (key: string, val: any) => string): void;
function extractCss(target?: Element): string;
- function glob(
- tag: CSSAttribute | TemplateStringsArray | string,
- ...props: Array
- ): void;
- function css(
- tag: CSSAttribute | TemplateStringsArray | string,
- ...props: Array
- ): string;
- function keyframes(
- tag: CSSAttribute | TemplateStringsArray | string,
- ...props: Array
- ): string;
-
- type StyledVNode = ((props: T, ...args: any[]) => any) & {
- defaultProps?: T;
- displayName?: string;
- };
-
- type StylesGenerator
-
-## Sponsors
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
-
diff --git a/docs/docs/features/autoprefixer.md b/docs/docs/features/autoprefixer.md
deleted file mode 100644
index b157d99e..00000000
--- a/docs/docs/features/autoprefixer.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-id: autoprefixer
-title: Autoprefixer
-sidebar_label: Autoprefixer
----
-
-Autoprefixing is a helpful way to make sure the generated css will work seamlessly on the whole spectrum of browsers. With that in mind, the core `goober` package can't hold that logic to determine the autoprefixing needs, so we added a new package that you can choose to address them.
-
-```sh
-npm install goober
-# or
-yarn add goober
-```
-
-After the main package is installed it's time to bootstrap goober with it:
-
-```js
-import { setup } from 'goober';
-import { prefix } from 'goober/prefixer';
-
-// Bootstrap goober
-setup(React.createElement, prefix);
-```
-
-And voila! It is done!
diff --git a/docs/docs/features/checklist.md b/docs/docs/features/checklist.md
deleted file mode 100644
index 87ba31c5..00000000
--- a/docs/docs/features/checklist.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-id: checklist
-title: Checklist
-sidebar_label: Checklist
----
-
-- [x] Basic CSS parsing
-- [x] Nested rules with pseudo selectors
-- [x] Nested styled components
-- [x] [Extending Styles](#sharing-style)
-- [x] Media queries (@media)
-- [x] Keyframes (@keyframes)
-- [x] Smart(lazy) client-side hydration
-- [x] Styling any component
- - via `` const Btn = ({className}) => {...}; const TomatoBtn = styled(Btn)`color: tomato;` ``
-- [x] Vanilla(via `css` function)
-- [x] `globalStyle`(via `glob`) so one would be able to create global styles
-- [x] target/extract from elements other than ``
-- [x] [vendor prefixing](#autoprefixer)
diff --git a/docs/docs/features/sharing-style.md b/docs/docs/features/sharing-style.md
deleted file mode 100644
index 57bd6686..00000000
--- a/docs/docs/features/sharing-style.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-id: sharing-style
-title: Sharing Style
-sidebar_label: Sharing Style
----
-
-There are a couple of ways to effectly share/extend styles across components.
-
-## Extending
-
-One can simply extend the desired component that needs to be enrich or overwriten with another set of css rules.
-
-```js
-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;
-`;
-```
-
-## Using `as` prop
-
-Another helpful way to extend a certain component is with the `as` property. Given our example above we could modify it like:
-
-```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
-