apply-css-with-js
v1.0.2
Published
Library that allows applying CSS globally within JavaScript.
Downloads
6
Maintainers
Readme
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.