Format the CSS using cssbeautify

Also: Avoid processing empty strings. Trim the API result.

Author: ADTC

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^1.0.6",
     "autoprefixer": "^10.4.7",
+    "cssbeautify": "^0.3.1",
     "next": "13.4.9",
     "postcss": "^8.4.25",
     "postcss-js": "^4.0.1",
@@ -22,6 +23,7 @@
     "tailwindcss": "^3.0.24"
   },
   "devDependencies": {
+    "@types/cssbeautify": "^0.3.5",
     "@types/node": "^17.0.36",
     "@types/react": "^18.0.9",
     "eslint": "8.16.0",

pages/api/generate-css.ts

@@ -2,6 +2,7 @@ import postcss from "postcss";
 import tailwindcss from "tailwindcss";
 import autoprefixer from "autoprefixer";
 import { NextApiRequest, NextApiResponse } from "next";
+import cssbeautify from "cssbeautify";
 
 interface RequestBody {
   classes: string;
@@ -41,11 +42,14 @@ export default async function handler(
           css = "no: result;";
         }
 
-        // Format the CSS
-        css = css.replace(/^\s+/gm, "  ");
-        css = css.replace(/^\s*\.generated/gm, ".generated");
+        // Format the CSS using cssbeautify
+        css = cssbeautify(css, {
+          indent: "  ",
+          openbrace: "end-of-line",
+          autosemicolon: true,
+        });
 
-        return css;
+        return css.trim();
       });
 
     res.status(200).send(result);

pages/index.tsx

@@ -19,6 +19,7 @@ export default function App() {
 	useEffect(() => {
 		setResult('');
 		setResultJSS('');
+		if (!input.trim()) return;
 
 		const handler = setTimeout(async () => {
 			const resultCss = await getConvertedClasses(input);
@@ -87,7 +88,7 @@ export default function App() {
 						value={result}
 						readOnly
 					></textarea>
-					<CopyToClipboard text={result.trim()} onCopy={() => toast.success('Copied!')}>
+					<CopyToClipboard text={result} onCopy={() => toast.success('Copied!')}>
 						<ClipboardCopyIcon className="w-6 h-6 mt-3 text-gray-500 cursor-pointer md:mr-1" />
 					</CopyToClipboard>
 				</div>

yarn.lock

@@ -190,6 +190,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/cssbeautify@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@types/cssbeautify/-/cssbeautify-0.3.5.tgz#b44fe836901b4277be27027b90ca1f9f54fd2538"
+  integrity sha512-bkxuJdUu7Liw14EouI8IFNvJXvd5IioAZdDvlCFBXv+Sel8uPK9rcxfvOchQKqw2AtppxRvcYaWmimi0t0Yuow==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -596,6 +601,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cssbeautify@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cssbeautify/-/cssbeautify-0.3.1.tgz#12dd1f734035c2e6faca67dcbdcef74e42811397"
+  integrity sha512-ljnSOCOiMbklF+dwPbpooyB78foId02vUrTDogWzu6ca2DCNB7Kc/BHEGBnYOlUYtwXvSW0mWTwaiO2pwFIoRg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"