grapesjs/packages/core/docs/api/css_composer.md

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

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

const css = editor.Css;

• addRules
• setRule
• getRule
• getRules
• remove
• clear

addRules

Add CssRules via CSS string.

Parameters

• css String CSS string of rules to add.

Examples

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<CssRule> Array of rules

setRule

Add/update the CssRule.

Parameters

• selectors String Selector string, eg. .myclass

• style Object Style properties and values. If the rule exists, styles will be replaced unless addStyles option is used. (optional, default {})

• opts Object Additional properties. (optional, default {})

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

Examples

// 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 Selector string, eg. .myclass:hover

• opts Object Additional properties (optional, default {})

  • opts.atRuleType String At-rule type, eg. media (optional, default '')
  • opts.atRuleParams String At-rule parameters, eg. '(min-width: 500px)' (optional, default '')

Examples

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

getRules

Get all rules or filtered by a matching selector.

Parameters

• selector String Selector, eg. .myclass (optional, default '')

Examples

// 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<CssRule>

remove

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

Parameters

• rule (String | CssRule | Array<CssRule>) CssRule or matching selector.
• opts any?

Examples

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

Returns Array<CssRule> Removed rules

clear

Remove all rules

Parameters

• opts (optional, default {})

Returns this