grapesjs/docs/api/css_rule.md

CssRule

Extends StyleableModel

Parameters

• props CssRuleProperties
• opt any (optional, default {})

Properties

• selectors Array<Selector> Array of selectors
• style Object Object containing style definitions
• selectorsAdd String? Additional string css selectors
• atRuleType String? Type of at-rule, eg. media, 'font-face'
• mediaText String? At-rule value, eg. (max-width: 1000px)
• singleAtRule Boolean? This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
• state String? State of the rule, eg: hover, focused
• important (Boolean | Array<String>)? If true, sets !important on all properties. You can also pass an array to specify properties on which use important
• stylable Boolean? Indicates if the rule is stylable from the editor[Device]: device.html[State]: state.html[Component]: component.html

getAtRule

Returns the at-rule statement when exists, eg. @media (...), @keyframes

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getAtRule(); // "@media (min-width: 500px)"

Returns String

selectorsToString

Return selectors of the rule as a string

Parameters

• opts Object? Options (optional, default {})

  • opts.skipState Boolean? Skip state from the result

Examples

const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
cssRule.selectorsToString(); // ".class1:hover"
cssRule.selectorsToString({ skipState: true }); // ".class1"

Returns String

getDeclaration

Get declaration block (without the at-rule statement)

Parameters

• opts Object Options (same as in selectorsToString) (optional, default {})

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getDeclaration() // ".class1{color:red;}"

Returns String

getDevice

Get the Device the rule is related to.

Examples

const device = rule.getDevice();
console.log(device?.getName());

Returns ([Device] | null)

getState

Get the State the rule is related to.

Examples

const state = rule.getState();
console.log(state?.getLabel());

Returns ([State] | null)

getComponent

Returns the related Component (valid only for component-specific rules).

Examples

const cmp = rule.getComponent();
console.log(cmp?.toHTML());

Returns ([Component] | null)

toCSS

Return the CSS string of the rule

Parameters

• opts Object Options (same as in getDeclaration) (optional, default {})

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"

Returns String CSS string