var objectToCss = require("object-to-css");
var pascalCase = require("pascal-case");
function prettyCss(object) {
return objectToCss(object)
.replace(/;([^$])/g, ";\n $1")
.replace(/;$/g, ";\n")
.replace(/:/g, ": ");
}
function render(object) {
return Object.keys(object).reduce(
(result, key) =>
`${result}const ${pascalCase(key)} = styled.div\`\n ${prettyCss(object[key])}\`;\n\n`,
""
);
}
const StyleSheet = { create: render };
// Далльше вставляешь Афродита стайлшит и жмешь RUN
const styles = StyleSheet.create({
tooltipDot: {
position: "absolute",
top: 19,
left: -4,
transform: "translate(-0.5px, -0.5px)",
width: 9,
height: 9,
border: "1px solid #fff",
borderRadius: "50%",
backgroundColor: "#362f42",
backgroundClip: "padding-box"
},
upTooltipDot: {
backgroundColor: "#60a31c"
},
downTooltipDot: {
backgroundColor: "rgb(230,76,60)"
},
tooltip: {
position: "absolute",
top: -33,
left: "50%",
transform: "translateX(-50%)",
padding: "6px 8px",
fontSize: 14,
lineHeight: 1,
whiteSpace: "nowrap",
color: "#fff",
borderRadius: 3,
background: "#463e54",
backgroundClip: "padding-box",
":after": {
content: '""',
position: "absolute",
left: "50%",
bottom: -5,
transform: "translateX(-50%)",
border: "6px solid transparent",
borderBottom: "none",
borderTopColor: "#463e54"
}
},
upTooltip: {
color: "#60a31c"
},
downTooltip: {
color: "rgb(230,76,60)"
}
});
no comments
sign in to comment