Javascript-driven CSS rules

css-rules.js

const capsRE = /([A-Z])/g;

const $styles = $('<style>').appendTo(document.head);

exports.addRule = function(selector, style) {
  $styles.append(formatRule(selector, style));
};

function formatRule(selector, style) {
  return [
    selector,
    ' {\n  ',
    css(style).join('\n  '),
    '\n}'
  ].join('');
}

function css(style) {
  return Object.keys(style).map(key => {
    return key.replace(capsRE, hyphenate) + ': ' + style[key] + ';';
  });
}

function hyphenate(caps) {
  return '-' + caps[0].toLowerCase();
}

Naïve example:

const styles = require('./css-rules');

// Increase font size on touch-enabled devices.
if ('ontouchstart' in document.documentElement) {
  styles.addRule('a', {
    fontSize: '16px'
  });
}

All values are converted into strings verbatim. Thus, you must add px manually.

Not yet sure how to yield to stylesheets added via <link rel="stylesheet">. May not be possible? If not, this solution is best for overriding existing styles.

jQuery is used, but not required (obviously).