gatsby-plugin-otion

gatsby-plugin-otion

Gatsby plugin for otion, the atomic CSS-in-JS library.

Usage

1. Install the plugin and its peer dependencies with a package manager of choice, e.g.:

   npm install gatsby-plugin-otion otion react-otion

2. Add the newly installed plugin to gatsby-config.js, as shown through an example project:

   module.exports = {
     plugins: ["gatsby-plugin-otion"]
   };

Options

Additional configuration can be specified through shadowing:

/* src/gatsby-plugin-otion/options.js */

import { prefix as stylisPrefix } from "stylis"; // v4

export default {
  // Use a custom auto-prefixer, despite weighing more than the default
  prefix: (property, value) => {
    const declaration = `${property}:${value};`;
    return (
      // The trailing `;` is removed for cleaner results
      stylisPrefix(declaration, property.length).slice(0, -1)
    );
  }
};

Unfortunately, Gatsby plugin options cannot be used at this time, as function parameters are not supported.