Enable embedded CSS formatting on save

.changeset/ninety-books-itch.md

@@ -0,0 +1,34 @@
+---
+'playroom': minor
+---
+
+Enable embedded CSS formatting on save
+
+CSS authored inside `style` tags inside a playroom will now be formatted as CSS when wrapped in a `css` template literal tag.
+
+A `css` template literal tag can be injected into your playroom scope via the [custom scope] feature:
+
+```js
+// customScope.js
+
+export default () => {
+  return {
+    css: (css) => css,
+  };
+};
+```
+
+This template literal tag can then be used in your playroom:
+
+```jsx
+<style>
+  {css`
+    .foo {
+      color: red;
+    }
+  `}
+</style>
+<div className="foo">Hello, world!</div>
+```
+
+[custom scope]: https://github.com/seek-oss/playroom?tab=readme-ov-file#custom-scope

cypress/projects/basic/useScope.js

@@ -1,4 +1,5 @@
 export default () => ({
   hello: () => 'HELLO',
   world: () => 'WORLD',
+  css: (css) => css,
 });

src/utils/formatting.ts

@@ -1,5 +1,6 @@
 import prettier from 'prettier/standalone';
 import babel from 'prettier/parser-babel';
+import postcss from 'prettier/parser-postcss';
 import type { CursorPosition } from '../StoreContext/StoreContext';
 import { insertAtCursor } from './cursor';
 
@@ -21,7 +22,7 @@ export const runPrettier = ({
     return prettier.formatWithCursor(code, {
       cursorOffset,
       parser: 'babel',
-      plugins: [babel],
+      plugins: [babel, postcss],
     });
   } catch (e) {
     // Just a formatting error so we pass