css-hooks-basic

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 choose to 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.

License

css-hooks-basic is licensed under the MIT License. See the LICENSE file for details.