apply-css-with-js v1.0.2

apply-css-with-js Library Documentation

The apply-css-with-js library offers a convenient way to apply, manage, and remove global CSS styling in web applications.

Table of Contents

• Importing the Library
• Applying Global Styling
• Removing Global Styling
• Replacing Existing Styling
• Toggle Styling
• Exposing CSS Cache Globally
• Error Handling

Importing the Library

import { applyCSSString, removeCSSString } from "apply-css-with-js";
// OR
const { applyCSSString, removeCSSString } = require("apply-css-with-js");

Applying Global Styling

You can apply global styling using the applyCSSString function. This function uses an 'id' attribute to uniquely identify the styling, which is prefixed with @apply-css-with-js/:

applyCSSString(
  `
    .container:hover {
        background-color: rgb(var(--primary-color));
        transition: all ease-in-out 1s;
    }
    
    .text-white:hover {
        color: white;
    }
  `,
  "random-id-that-is-up-to-you"
);

Removing Global Styling

To remove previously applied global styling, use the removeCSSString function:

removeCSSString("random-id-that-is-up-to-you");

Replacing Existing Styling

Update the CSS content of an existing style tag using replaceCSSString:

replaceCSSString(".new-css-rules {}", "random-id-that-is-up-to-you");

Toggle Styling

Enable, disable, or toggle styling using toggleStyling:

toggleStyling("random-id-that-is-up-to-you", "show"); // options: 'show', 'hide', 'toggle'

Exposing CSS Cache Globally

Expose the cache of CSS strings for global access:

exposeCSSStringsCacheGlobally(); // window.$ACWJStyleCache

Error Handling

The library comes with built-in error messages that can be thrown if issues are encountered during operations. This provides better debugging and easier identification of problems during the styling application or removal processes.