feat: support vanilla extract (#187)

Author: stipsan

README.md

@@ -7,7 +7,7 @@ An environment for designing, reviewing, and quality-testing React components.
 npm install @sanity/ui-workshop -D
 
 # Install peer dependencies
-npm install @sanity/icons @sanity/ui react react-dom styled-components
+npm install @sanity/ui react react-dom styled-components
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui-workshop.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui-workshop)
@@ -88,6 +88,85 @@ function TestStory() {
 }
 ```
 
+## Styling
+
+In addition to the [CSS features that `vite` supports](https://vite.dev/guide/features.html#css), you can also use [Vanilla Extract](https://vanilla-extract.style/) for styling.
+
+First install the `@vanilla-extract/css` package:
+
+```sh
+npm install @vanilla-extract/css
+```
+
+Then, add a `style.css.ts` file for your workshop:
+
+```ts
+// src/__workshop__/style.css.ts
+
+import {style} from '@vanilla-extract/css'
+
+export const container = style({
+  display: 'grid',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%',
+})
+```
+
+And finally, import the `container` className and use it in your workshop:
+
+```diff
+import {
+  defineScope,
+  useBoolean,
+  useNumber,
+  useSelect,
+  useString,
+  useText,
+} from '@sanity/ui-workshop'
++import {container} from './style.css'
+
+export default defineScope({
+  name: 'test',
+  title: 'Test',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: TestStory,
+    },
+  ],
+})
+
+const options = {
+  None: '',
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+}
+
+function TestStory() {
+  const text = useText('Text', 'Hello, world')
+  const boolean = useBoolean('Boolean', true)
+  const number = useNumber('Number', 1234)
+  const string = useString('String', '...')
+  const option = useSelect('Select option', options)
+
+  return (
+-    <div>
++    <div className={container}>
+      <h1>This is my first story.</h1>
+      <p>Some text: {text}</p>
+      <p>A boolean: {boolean ? 'true' : 'false'}</p>
+      <p>A number: {number}</p>
+      <p>A string: {string}</p>
+      <p>An option: {option}</p>
+    </div>
+  )
+}
+```
+
 ## License
 
 [MIT](LICENSE)

package.config.ts

@@ -17,4 +17,5 @@ export default defineConfig({
   babel: {reactCompiler: true, styledComponents: true},
   reactCompilerOptions: {target: '19'},
   dts: 'rolldown',
+  strictOptions: {noImplicitSideEffects: 'off'},
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-workshop",
-  "version": "3.1.2",
+  "version": "3.1.3-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -20,7 +20,6 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -73,7 +72,7 @@
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
     "prepare": "husky install",
-    "prepublishOnly": "pnpm run build",
+    "prepack": "pnpm run build",
     "release": "semantic-release",
     "test": "vitest",
     "watch": "pkg watch --strict",
@@ -106,6 +105,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^3.7.4",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.7.0",
     "axe-core": "^4.10.3",
     "cac": "^6.7.14",

pnpm-lock.yaml

@@ -2,7 +2,7 @@ const ROOT_PATH = (() => {
   // Wrap in try/catch to avoid throwing exception in environments that don’t have `process.env`.
   try {
     return process.env.ROOT_PATH
-  } catch (_) {
+  } catch {
     return undefined
   }
 })()

src/core/frame/formatStack.ts

@@ -10,7 +10,7 @@ export function encodeValue(val: Record<string, unknown>): string {
 export function decodeValue(val: string): Record<string, unknown> {
   try {
     return JSON.parse(decode(val))
-  } catch (_) {
+  } catch {
     return EMPTY_RECORD
   }
 }

src/core/plugins/props/helpers.ts

@@ -1,7 +1,7 @@
 import {createRequire} from 'node:module'
 
-import {WorkshopConfigOptions} from '@sanity/ui-workshop'
-import {TransformOptions} from 'esbuild'
+import type {WorkshopConfigOptions} from '@sanity/ui-workshop'
+import type {TransformOptions} from 'esbuild'
 
 import {_findConfigFile} from './_findConfigFile'
 

src/runtime/config/_loadConfig.ts

@@ -1,7 +1,7 @@
 import {createRequire} from 'node:module'
 
-import {WorkshopRuntimeOptions} from '@sanity/ui-workshop'
-import {TransformOptions} from 'esbuild'
+import type {WorkshopRuntimeOptions} from '@sanity/ui-workshop'
+import type {TransformOptions} from 'esbuild'
 
 import {_findRuntimeFile} from './_findRuntimeFile'
 

src/runtime/config/_loadRuntime.ts

@@ -6,7 +6,7 @@ export function _fileExists(file: string): boolean {
     accessSync(file)
 
     return true
-  } catch (_) {
+  } catch {
     return false
   }
 }

src/runtime/lib/_fileExists.ts

@@ -1,3 +1,4 @@
+import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 import {UserConfig} from 'vite'
@@ -26,6 +27,7 @@ export function createViteConfig(options: {
       },
     },
     plugins: [
+      vanillaExtractPlugin(),
       react({
         babel: {plugins: [['babel-plugin-react-compiler', {target: '19'}]]},
       }),