Development notes

Build

• pnpm build - builds icons, JS modules, and CSS.

CSS

This package uses Tailwind CSS. Run pnpm build:css to compile the CSS file, which will run PostCSS with the Tailwind plugin against all .css files in the assets folder. The compiled CSS will be output to dist/assets/[filename].css.

When Sanity Studio imports the JS modules exported by our plugin, the Sanity Studio bundler will also automatically import any CSS files that our code imports, e.g. import '../dist/assets/optimize.css';

NOTE: be sure to set NODE_ENV=production if you want PostCSS to purge unused CSS.

Icons

If you want to import SVG icons as components in your code, do the following:

• Add the the SVG icon to the src/assets folder
• Run pnpm build:icons

This will generate React components for every SVG icon in the src/assets folder. You can then import the icons in other React components, e.g. import MyIcon from '../assets/MyIcon';.

Ideally, we could have import MyIcon from '../assets/my-icon.svg in our code and the SVG icon would automatically be converted to a React component at build time and our source code would be transformed to import the component. However, we're not using a bundler so it becomes challenging because we can't "hook" into the TypeScript build/transpile process. We could introduce a build tool like ESBuild or @babel/typescript and stop using tsc, but those options more tooling/overhead. We could also potentially use something like ttypescript (https://github.com/cevek/ttypescript) to create babel-esque plugins for TypeScript, but who knows how reliable that is and if we'd run into any issues in CI/testing.

So, for now, icons are somewhat of a manual process.

CommonJS

No CommonJS modules are exported from this package as the package is intended to be consumed by Sanity Studio and not used during SSR.