createStyleSheet.createCSSRule

[lindelwa122]

createStyleSheet.createCSSRule

createStyleSheet

The createStyleSheet module facilitates the creation and application of CSS styles to elements. It's important to note that this module isn't intended to replace traditional CSS, but rather to provide an API for efficiently adding CSS rules to elements using JavaScript when it's the most suitable approach.

createCSSRule

Parameters/Inputs:

• rules: object
• save: boolean (optional)

The createStyleSheet module contains a private array named CSSRule. If save is set to true (which is the default behaviour), the function will push the provided rules to CSSRule. If save is set to false, it will not.

The function should iterate through the keys and values of the rules object. Each key represents a selector, and the corresponding value represents a declaration. For each selector and declaration, the function should invoke addStyle(selector, declaration).

For handling states and media queries, other functions like createMediaQueryRule and configureStateRule should be utilized to handle the job.

Here's an example of how the function should operate:

import { createStyleSheet } from '@dom-manipulation-library/dml'

createStyleSheet.createCSSRule({
   'body': {
       color: '#f8f8f8',
       backgroundColor: '#0fa',
   },

   '#main > .content': {
       overflow: 'hidden',
   },
});