# 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.

## Why `esbuild`?

Sanity does not transpile modules imported from `node_modules`, so if you have a dependency on any packages in the `node_modules` that _need_ to be transpiled to work in Sanity's environment, you are not in luck.

Therefore, we use `esbuild` to build _and_ bundle our plugin so that all relevant dependencies are included in the bundle and transpiled accordingly. TypeScript `tsc` does not have bundling capabilities, but we still use it for type-checking during the build process, because `esbuild` does not perform type-checking.
