Allow prettifying of css

Author: Ives van Hoorne

src/app/components/sandbox/CodeEditor/index.js

@@ -288,9 +288,9 @@ export default class CodeEditor extends React.PureComponent {
     const { id, title, preferences } = this.props;
     const code = this.getCode();
     const mode = await this.getMode(title);
-    if (mode === 'jsx') {
+    if (mode === 'jsx' || mode === 'css') {
       try {
-        const newCode = await prettify(code, preferences.lintEnabled);
+        const newCode = await prettify(code, mode, preferences.lintEnabled);
 
         if (newCode !== code) {
           this.props.changeCode(id, newCode);
@@ -323,7 +323,7 @@ export default class CodeEditor extends React.PureComponent {
       addons: addon,
       syntax: newMode,
     });
-  }
+  };
 
   codemirror: typeof CodeMirror;
   server: typeof CodeMirror.TernServer;

src/app/utils/codemirror/prettify.js

@@ -1,11 +1,19 @@
-export default (async function prettify(code, eslintEnabled) {
+function getParser(mode) {
+  if (mode === 'jsx') return 'babylon';
+  if (mode === 'css') return 'postcss';
+
+  return 'babylon';
+}
+
+export default (async function prettify(code, mode, eslintEnabled) {
   const prettier = await System.import('prettier');
   const prettifiedCode = prettier.format(code, {
     singleQuote: true,
+    parser: getParser(mode),
     trailingComma: 'all',
   });
 
-  if (eslintEnabled) {
+  if (eslintEnabled && mode === 'jsx') {
     const { fix } = await System.import('app/utils/codemirror/eslint-lint');
     try {
       const lintedCode = fix(prettifiedCode).output;