Skip to main content

Preprocessors

🧪 EXPERIMENTAL#

Advanced

Using this could break functionality. Proceed with caution.

Preprocessors allow you to create custom properties and syntax.

You can define your own parsers like so:

Skyle.setPreprocessor({
property: preprocessorFunction,
});
preprocessorFunction: (key: string, value: any) => { [newProperty: string]: any };

Note: Prefix property with _ to parse all properties. e.g.: _colorPreprocessor.


// Example
Skyle.setPreprocessor({
border: borderPreprocessor,
});
/**
* Transforms
*
* border: [5, 'solid', 'blue],
*
* to
*
* borderWidth: 5,
* borderStyle: 'solid',
* borderColor: 'blue,
*
* So React Native can process the styles.
**/
const borderPreprocessor = (key: string, value: any) => {
const valuesArr = Array.isArray(value) ? value : [];
// If value is array, split it into the expanded styles.
if (valuesArr.length) {
return {
[`${key}`]: undefined, // Remove the original property to avoid it rendering.
[`${key}Width`]: valuesArr[0],
[`${key}Style`]: valuesArr[1],
[`${key}Color`]: valuesArr[2],
};
}
// Return null to indicate no change.
return null;
};