JSON to CSS in JavaScript

Question

I'm working on a JSON to CSS converter in NodeJS, which takes a .json file and generates a .css file with its utility classes from it.

.json example

 } "breakpoints-map": { "default": "0", "sm": "only screen and (min-width: 508px)", "md": "only screen and (min-width: 768px)" }, "bg-repeat-map": { "bg-repeat": "repeat", "bg-repeat-y": "repeat-y", "bg-no-repeat": "no-repeat", "bg-repeat-x": "repeat-x" }, "bg-position-map": { "bg-pos-top": "top", "bg-pos-right-top": "top right", "bg-pos-right-center": "right", "bg-pos-right-bottom": "right bottom", "bg-pos-bottom": "bottom", "bg-pos-left-bottom": "left bottom", "bg-pos-left": "left", "bg-pos-left-top": "left top", "bg-pos-center": "center center" }, "bg-attachment-map": { "bg-att-scroll": "scroll", "bg-att-fixed": "fixed" }, "border-style-map": { "border-dotted": "dotted", "border-dashed": "dashed", "border-solid": "solid", "border-double": "double" } } 

.js code

 module.exports = (fileName) => { let cssWriter = fs.createWriteStream('style.css', { flags: 'a' }); fs.readFile(fileName, (error, data) => { if (error) { functions.logIt("The file cannot be found or is unreadable.", error); } else { try { const dataJson = JSON.parse(data); const breakpointMap = dataJson["breakpoints-map"] delete dataJson["breakpoints-map"]; Object.entries(breakpointMap).forEach(([breakpointKey, breakpointValue]) => { if (functions.isDefault(breakpointKey) == false) { cssWriter.write("@media " + breakpointValue + " {\n"); } Object.entries(dataJson).forEach(([mapKey, mapValues]) => { let breakpoint = (functions.isDefault(breakpointKey) == true ? "" : breakpointKey + "\\:"); let property = functions.getProperty(mapKey); Object.entries(mapValues).forEach(([classKey, classValue]) => { cssWriter.write("." + breakpoint + classKey + "{ " + property + ": " + classValue + "}\n"); }) }) if (functions.isDefault(breakpointKey) == false) { cssWriter.write("}\n"); } }) } catch (error) { functions.logIt("The file could not be parsed to JSON.", error); } } cssWriter.end(); }); }; 

The isDefault function just checks whether the given parameter is equal to "default", in order to not put a media query around it.

The getProperty function just links the right CSS property depending on the map name (width-map => width, bg-repeat-map => background-position).

Answer 1

The main problem I see is that it's not obvious what the output is because there's too much auxiliary code that effectively obfuscates the logic.

• Offload some of the code into a function.
• Use template strings.

If the data amount isn't in multi-megabyte range I would write a single string to improve readability:

const dataJson = JSON.parse(data); const breakpointMap = dataJson['breakpoints-map']; delete dataJson['breakpoints-map']; const entryToCss = ([mapKey, mapValues], breakpoint) => { const property = functions.getProperty(mapKey); return Object.entries(mapValues) .map(([k, v]) => `.${breakpoint}${k}{ ${property}: ${v}}\n`) .join(''); }; cssWriter.write( Object.entries(breakpointMap).map(([bpKey, bpVal]) => { const breakpoint = functions.isDefault(bpKey) ? `${bpKey}\\:` : ''; return `${ breakpoint ? `@media ${bpVal} {\n` : '' }${ Object.entries(dataJson) .map(entry => entryToCss(entry, breakpoint)) .join('') }${ breakpoint ? '}\n' : '' }`; }).join('') );