Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A stylis plugin for integrating with rtl-css-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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment