A library to help find, modify and work with css rules easily.
« Explore the docs »
·
Report Bug
·
Request Feature
·
Sometimes, swapping out classes is not enough so you can instead modify the stylesheets themselves. change-css is a library that can help you do just that. This can be a very easy path to theming a dynamic site, especially if the theme variables are generated through JS.
To add the library to your project
The library has no dependencies, works with plain old HTML/CSS/JS.
-
Install the package from npm
npm install --save change-css
-
Also available as a CDN download.
Use getCSSRule() to search your document's stylesheets for a CSS Rule.
import { getCSSRule } from 'change-css';
const CSSRule = getCSSRule('.text-base');
// Returns a CSSRule if such a rule exists
// in any of the stylesheets in your document
// else returns false.
The modifyCSSRule() function makes it easier to modify a CSS Rule with a single function call.
import { modifyCSSRule } from 'change-css';
modifyCSSRule('body', { fontFamily: 'Inter' });
From version 0.3, Change CSS can now be used in the browser environment. Usage example can be found on codepen.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Surya Rajendhran - @SuryaRajendhran - [email protected]
Project Link: https://github.com/suryarajendhran/change-css
Thanks to