Convert @emotion/css-prettifier's source code to TypeScript (#3278)

* Convert `@emotion/css-prettifier`'s source code to TypeScript

* use .ts

* fixed changeset content

.changeset/grumpy-suits-cough.md

@@ -2,4 +2,4 @@
 '@emotion/use-insertion-effect-with-fallbacks': minor
 ---
 
-Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.
+Source code has been migrated to TypeScript.

.changeset/young-ears-give.md

@@ -0,0 +1,5 @@
+---
+'@emotion/css-prettifier': minor
+---
+
+Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.

packages/css-prettifier/package.json

@@ -8,6 +8,7 @@
   "author": "Mateusz Burzyński <mateuszburzynski@gmail.com> (https://github.com/Andarist)",
   "main": "dist/emotion-css-prettifier.cjs.js",
   "module": "dist/emotion-css-prettifier.esm.js",
+  "types": "dist/emotion-css-prettifier.cjs.d.ts",
   "exports": {
     ".": {
       "types": {
@@ -20,19 +21,20 @@
     },
     "./package.json": "./package.json"
   },
-  "types": "types/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css-prettifier",
   "dependencies": {
     "@emotion/memoize": "^0.9.0",
     "stylis": "4.2.0"
   },
+  "devDependencies": {
+    "@types/stylis": "^4.2.6"
+  },
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "src",
-    "dist",
-    "types/*.d.ts"
+    "dist"
   ]
 }

packages/css-prettifier/src/index.ts

@@ -0,0 +1,62 @@
+import memoize from '@emotion/memoize'
+import {
+  compile,
+  serialize,
+  combine,
+  tokenize,
+  type Middleware,
+  type Element
+} from 'stylis'
+
+// adjusted https://github.com/thysultan/stylis.js/blob/68b9043427c177b95a0fd6a2a13f5b636bf80236/src/Serializer.js#L26-L34
+const prettyStringify = memoize(
+  (indentation): Middleware =>
+    (element, index, children, callback) => {
+      switch (element.type) {
+        case '@import':
+          return (element.return = element.return || element.value) + '\n\n'
+        case 'decl':
+          return (element.return =
+            element.return || `${element.props}: ${element.children};\n`)
+        case 'comm':
+          return ''
+        case '@media':
+        case '@supports':
+          element.value = combine(
+            tokenize(element.value),
+            (value, index, children) => {
+              // (
+              if (value.charCodeAt(0) === 40 && children[index - 1] !== ' ') {
+                return ' ' + value
+              }
+              return value
+            }
+          )
+          break
+        case 'rule':
+          element.value = (element.props as string[]).join(
+            element.root &&
+              (element.root.type === '@keyframes' ||
+                element.root.type === '@-webkit-keyframes')
+              ? ', '
+              : ',\n'
+          )
+      }
+
+      const serialized = serialize(element.children as Element[], callback)
+      return serialized.length
+        ? (element.return =
+            element.value +
+            ' {\n' +
+            serialized
+              .trim()
+              .replace(/^/gm, indentation)
+              .replace(/^\s+$/gm, '') +
+            '\n}\n\n')
+        : ''
+    }
+)
+
+export default function prettify(styles: string, indentation = '  ') {
+  return serialize(compile(styles), prettyStringify(indentation)).trim()
+}

yarn.lock

@@ -2724,6 +2724,7 @@ __metadata:
   resolution: "@emotion/css-prettifier@workspace:packages/css-prettifier"
   dependencies:
     "@emotion/memoize": ^0.9.0
+    "@types/stylis": ^4.2.6
     stylis: 4.2.0
   languageName: unknown
   linkType: soft
@@ -6467,6 +6468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:^4.2.6":
+  version: 4.2.6
+  resolution: "@types/stylis@npm:4.2.6"
+  checksum: 3a1685f2b465eb943805252b5b2934fc8054fe8706f76e3e28544f69532296f42c042d0b402fadc486ef8e86cc3d8a2c66d2345241e0af8e07974dd36d85a79c
+  languageName: node
+  linkType: hard
+
 "@types/tapable@npm:^1, @types/tapable@npm:^1.0.5":
   version: 1.0.8
   resolution: "@types/tapable@npm:1.0.8"