utils/reason/src/generateValue.js
import { hyphenateProperty } from 'css-in-js-utils'
import { generateValue as generateCSSValue } from '@elodin/utils-css'
const inlineFns = {
add: ' + ',
sub: ' - ',
mul: ' * ',
div: ' / ',
percentage: true,
}
const stringFns = {
rgb: true,
rgba: true,
hsl: true,
hsla: true,
}
export default function generateValue(node, property, dynamic) {
const floatingPercentage = property === 'opacity'
if (!dynamic) {
return wrapInString(generateCSSValue(node, property))
}
if (node.type === 'FunctionExpression') {
return generateFunction(node, floatingPercentage)
}
if (node.type === 'Integer') {
return (node.negative ? '-' : '') + node.value
}
if (node.type === 'Float') {
return (node.negative ? '-' : '') + node.integer + '.' + node.fractional
}
if (node.type === 'Identifier') {
return hyphenateProperty(node.value)
}
return node.value
}
function generateFunction(node, floatingPercentage = false) {
if (stringFns[node.callee]) {
return wrapInString(
node.callee +
'(' +
node.params
.map(param => {
if (
param.type === 'Variable' ||
(param.type === 'FunctionExpression' && inlineFns[param.callee])
) {
return (
'" ++ string_of_int(' + generateValue(param, true) + ') ++ "'
)
}
return generateValue(param, true)
})
.join(', ') +
')'
)
}
if (node.callee === 'percentage') {
if (floatingPercentage) {
return (
'string_of_int((' +
generateValue(node.params[0], floatingPercentage) +
') / 100)'
)
}
return (
'string_of_int(' +
generateValue(node.params[0], floatingPercentage) +
') ++ "%"'
)
}
if (node.callee === 'raw') {
return generateValue(node.params[0], floatingPercentage)
}
if (inlineFns[node.callee]) {
return wrapInParens(
node.params
.map(value => generateValue(value, floatingPercentage, true))
.join(inlineFns[node.callee])
)
}
}
function wrapInString(value) {
return '"' + value + '"'
}
function wrapInParens(value) {
return '(' + value + ')'
}