<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Css

This module manages CSS rules in the canvas.
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]

```js
const editor = grapesjs.init({
 cssComposer: {
   // options
 }
})
```

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

```js
const css = editor.Css;
```

*   [addRules][2]
*   [setRule][3]
*   [getRule][4]
*   [getRules][5]
*   [remove][6]
*   [clear][7]

[CssRule]: css_rule.html

## addRules

Add CssRules via CSS string.

### Parameters

*   `css` **[String][8]** CSS string of rules to add.

### Examples

```javascript
const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
// Check rules
console.log(addedRules.map(rule => rule.toCSS()));
```

Returns **[Array][9]<[CssRule]>** Array of rules

## setRule

Add/update the CssRule.

### Parameters

*   `selectors` **[String][8]** Selector string, eg. `.myclass`
*   `style` **[Object][10]** Style properties and values. If the rule exists, styles will be replaced unless `addStyles` option is used. (optional, default `{}`)
*   `opts` **[Object][10]** Additional properties. (optional, default `{}`)

    *   `opts.atRuleType` **[String][8]** At-rule type, eg. `media`. (optional, default `''`)
    *   `opts.atRuleParams` **[String][8]** At-rule parameters, eg. `(min-width: 500px)`. (optional, default `''`)
    *   `opts.addStyles` **[Boolean][11]** If the rule exists already, merge passed styles instead of replacing them. (optional, default `false`)

### Examples

```javascript
// Simple class-based rule
const rule = css.setRule('.class1.class2', { color: 'red' });
console.log(rule.toCSS()) // output: .class1.class2 { color: red }
// With state and other mixed selector
const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
// output: .class1.class2:hover, div#myid { color: red }
// With media
const rule = css.setRule('.class1:hover', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)',
});
// output: `@media (min-width: 500px) { .class1:hover { color: red } }`

// Update styles of existent rule
css.setRule('.class1', { color: 'red', background: 'red' });
css.setRule('.class1', { color: 'blue' }, { addStyles: true });
// output: .class1 { color: blue; background: red }
```

Returns **[CssRule]** The new/updated CssRule.

## getRule

Get the CssRule.

### Parameters

*   `selectors` **[String][8]** Selector string, eg. `.myclass:hover`
*   `opts` **[Object][10]** Additional properties (optional, default `{}`)

    *   `opts.atRuleType` **[String][8]** At-rule type, eg. `media` (optional, default `''`)
    *   `opts.atRuleParams` **[String][8]** At-rule parameters, eg. '(min-width: 500px)' (optional, default `''`)

### Examples

```javascript
const rule = css.getRule('.myclass1:hover');
const rule2 = css.getRule('.myclass1:hover, div#myid');
const rule3 = css.getRule('.myclass1', {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)',
});
```

Returns **[CssRule]**&#x20;

## getRules

Get all rules or filtered by a matching selector.

### Parameters

*   `selector` **[String][8]** Selector, eg. `.myclass` (optional, default `''`)

### Examples

```javascript
// Take all the component specific rules
const id = someComponent.getId();
const rules = css.getRules(`#${id}`);
console.log(rules.map(rule => rule.toCSS()))
// All rules in the project
console.log(css.getRules())
```

Returns **[Array][9]<[CssRule]>**&#x20;

## remove

Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)

### Parameters

*   `rule` **([String][8] | [CssRule] | [Array][9]<[CssRule]>)** CssRule or matching selector.
*   `opts` **any?**&#x20;

### Examples

```javascript
// Remove by CssRule
const toRemove = css.getRules('.my-cls');
css.remove(toRemove);
// Remove by selector
css.remove('.my-cls-2');
```

Returns **[Array][9]<[CssRule]>** Removed rules

## clear

Remove all rules

### Parameters

*   `opts`   (optional, default `{}`)

Returns **this**&#x20;

[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/css_composer/config/config.ts

[2]: #addrules

[3]: #setrule

[4]: #getrule

[5]: #getrules

[6]: #remove

[7]: #clear

[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean