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/themed/playroom.config.js

@@ -2,6 +2,7 @@ module.exports = {
   components: './components',
   snippets: './snippets',
   themes: './themes',
+  scope: './scope',
   outputPath: './dist',
   openBrowser: false,
   paramType: 'search',

cypress/projects/themed/scope.js

@@ -0,0 +1,5 @@
+export default () => {
+  return {
+    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