A stylis plugin for integrating with rtl-css-js

rtlcssjs-stylis.js

// See https://github.com/thysultan/stylis.js#plugins for documentation on how stylis plugins work

function stylisPlugin(context, content) {
  if (context === 1) {
    // content is a single CSS rule, like 'background-color: pink'
    // RTL-CSS-JS requires the key + value to be passed in separately.
    const [key, value] = content.split(/:/, 2);

    // TODO: this is a bit onerous: rtlcssjs doesn't expose convertProperty, only the entire object convert
    // Create an object containing our one property
    const rtlInput = { [key]: value };
    // Get RTL-CSS-JS to process it
    const rtlOutput = rtlCssJS(rtlInput);
    
    // Extract the new key and value back out again
    const keys = Object.keys(rtlOutput);
    if (keys.length !== 1) {
      throw new Error(`Unexpected result from rtlCssJS`);
    }
    const rtlKey = keys[0];
    const rtlValue = rtlOutput[rtlKey];

    // Reconstruct the property + value string
    return `${rtlKey}: ${rtlValue}`;
  } else {
    return content;
  }
}