Enable embedded CSS formatting on save

Author: askoufis

.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. This takes advantage of [prettier's embedded language formatting capabilities].
+
+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>
+```
+
+[custom scope]: https://github.com/seek-oss/playroom?tab=readme-ov-file#custom-scope
+[prettier's embedded language formatting capabilities]: https://prettier.io/docs/options#embedded-language-formatting

README.md

@@ -150,14 +150,45 @@ export default function FrameComponent({ theme, children }) {
 You can provide extra variables within the scope of your JSX via the `scope` option, which is a path to a file that exports a `useScope` Hook that returns a scope object. For example, if you wanted to expose a context-based `theme` variable to consumers of your Playroom:
 
 ```js
+// scope.js
+
 import { useTheme } from '../path/to/your/theming-system';
 
 export default function useScope() {
   return {
     theme: useTheme(),
   };
+}
+```
+
+### Embedded CSS Formatting
+
+By injecting a `css` template literal tag into your playroom scope, embedded CSS can be formatted on save thanks to [prettier's embedded language formatting capabilities]:
+
+```js
+// scope.js
+
+export default function useScope() {
+  return {
+    css: (css) => css,
+  };
+}
 ```
 
+The `css` function can then be used as a template literal tag to format CSS authored inside `style` tags:
+
+```jsx
+<style>
+  {css`
+    .foo {
+      color: red;
+    }
+  `}
+</style>
+```
+
+[prettier's embedded language formatting capabilities]: https://prettier.io/docs/options#embedded-language-formatting
+
 ## Theme Support
 
 If your component library has multiple themes, you can customise Playroom to render every theme simultaneously via the `themes` configuration option.

cypress/e2e/editor.cy.ts

@@ -1,3 +1,4 @@
+import dedent from 'dedent';
 import {
   formatCode,
   typeCode,
@@ -32,4 +33,19 @@ describe('Editor', () => {
     formatCode();
     assertCodePaneLineCount(6);
   });
+
+  it.only('formats css in a style block', () => {
+    typeCode(
+      '<style>{{}css`html {{} border: 1px solid red; {}}`{rightarrow}{backspace}{}}'
+    );
+    assertCodePaneLineCount(1);
+    formatCode();
+    assertCodePaneContains(dedent`
+      <style>{css\`
+        html {
+          border: 1px solid red;
+        }
+      \`}</style>\n
+    `);
+  });
 });

cypress/projects/basic/useScope.js

@@ -1,4 +1,6 @@
 export default () => ({
   hello: () => 'HELLO',
   world: () => 'WORLD',
+  // Identity function for formatting CSS
+  css: (s) => s,
 });

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