CssRule

Extends StyleableModel

Parameters

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

Properties

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

selectorsToString

Return selectors of the rule as a string

Parameters

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

  • opts.skipState Boolean (opens new window)? 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 (opens new window)

getDeclaration

Get declaration block (without the at-rule statement)

Parameters

• opts Object (opens new window) 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 (opens new window)

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 (opens new window) 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 (opens new window) CSS string