inserting-rules.md

Inserts

You can insert class delcarations using javascript. Very useful when producing dynamic sheets.

Inserting class-like selector names and an CSS delcaration:

pc.insertClassProps('demo-box', { 'font-size': '1.5em'})

Resulting in the available CSS class:

.demo-box {
    font-size: 1.5em;
}

Insert Rules

a rule is similar to an insertClassProps, however allows a different syntax when creating declarations

v = pc.insertRules([
    ['body',
        ['background', '#333']
        , ['color', '#991111']
    ]
]);

v.renderAll()

If you supply something editable, changes to the original reference will alter Polyclass delcarations:

let propInfo = { background: '#111' }

b = pc.insertRules({
    body: [
        {color: '#11AA11'}
        , propInfo
    ]
});

propInfo.background = '#000'
propInfo.color = 'red'
b[0].replace()

Inserting "Active" Rules

Create JavaScript functional handlers to detect when a class is created. The receiver can do interesting things, such as download and install fonts:

pc.insertReceiver(['font','pack'], function(splitObj){
    console.log('font-pack receiver', arguments)
    const values = splitObj.values
        , origin = splitObj.origin
        ;
    origin.classList.add('add-a-class')
    console.log(values.join('_'))
})

Anything after your discovery selector within your class-name becomes a property:

<div polyclass>
    <div class="font-pack-roboto-100 font-roboto-400">
        the "Fontpack" function handles special strings formatted similar to the google font string.
    </div>
</div>