css-hooks-basic

This is a utility library for simplifying the usage of CSS Hooks, providing a basic API for styling components without advanced conditions.

Installation

npm install css-hooks-basic

Usage

Option 1: Global `css` function

If you prefer to avoid using advanced conditions (the on field) entirely, you can convert your global css function to use the basic API provided by this library:

Import the basic function in your CSS module.
Apply it to the css function produced by createHooks.
Export the resulting function as css.

// src/css.ts

import { createHooks } from "@css-hooks/react";
import { basic } from "css-hooks-basic";

const { styleSheet, css: cssAdvanced } = createHooks({
  // ...configuration...
});

export { styleSheet };

export const css = basic(cssAdvanced);

Now, you can use the basic version of the css function throughout your project, providing an easier way to define styles.

Option 2: Case by case

Alternatively, you can use the basic API on a case-by-case basis. This allows you to mix basic and advanced styling conditions according to your needs.

In a component module, simply import css from your CSS module and the basic function from css-hooks-basic; and then use them together to style your component:

// src/easy-button.tsx

import { css } from "./css";
import { basic } from "css-hooks-basic";

export const EasyButton = () => (
  <button
    style={basic(css)({
      color: "black",
      "&:enabled": {
        "&:hover": {
          color: "blue",
        },
        "&:active": {
          color: "red",
        },
      },
      "&:disabled": {
        color: "gray",
      },
    })}
  >
    Easy
  </button>
);

With this approach, you have the flexibility to choose between basic and advanced styling conditions for different components as needed.

Contributing

Contributions to css-hooks-basic are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.