Css Composer

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