krasimir
commented
6 years ago That is absolutely possible. All we need to do is to write a CSS emitter. It's a script that runs on the page and fetches information about the CSS styles. Then construct an object (state) and send it to Kuker via window.postMessage. I just played a little bit and here is what happened:
It's in this CodePen https://codepen.io/krasimir/pen/paErGV?editors=0010
The tricky parts in such emitter are:
- Do we know when the CSS changes. If yes then this is half of the work. At this moment we have to call
window.postMessage. - Can we easily construct a tree which represents the styles on the page. (that is the other half)
Here is some code:
function sendMessage(css) {
window.postMessage({
kuker: true,
type: 'CSS_UPDATE',
time: (new Date()).getTime(),
state: css
}, '*');
}
function extractCSS() {
var css = {};
for (let i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
var rules = ('cssRules' in sheet) ? sheet.cssRules : sheet.rules;
for (let j = 0; j<rules.length; j++) {
let rule = rules[j];
css[rule.selectorText] = Object.keys(rule.style).reduce((result, prop) => {
if (rule.style[prop] !== '' && prop.toString().length >= 3) {
result[prop] = rule.style[prop];
}
return result;
}, {});
}
}
return css;
}
const cssPlaceholder = document.querySelector('#js-driven-styles');
document.querySelector('button').addEventListener('click', function () {
cssPlaceholder.innerHTML = `button { background: ${ getRandomColor() }; font-family: ${ getRandomFont() } }`;
sendMessage(extractCSS());
});
sendMessage(extractCSS());
streamich
@krasimir Would you consider adding a panel that shows CSS devtools, more specifically CSS-in-JS devtools, I would be happy to write an adapter for
freestyler.