essence-of-prompurr Svelte Themes

Essence Of Prompurr

Playing around with esbuild, postcss autoprefixer, and better svelte preprocessing defaults

Essence of Prompurr

Esbuild

We can configure Svelte preprocess to use esbuild (written in Go) to compile typescript files instead of tsc. This is a fairly drop-in replacement in svelte that just requires

  1. # Basically just installing esbuild as a dependency
    pnpm add -D esbuild
    
  2. // Then just adding this, which is bascially taking a typescript string and calling the esbuild API to convert it and return a js string
    const createPreprocessors = () =>
      sveltePreprocess({
        typescript({ content }) {
          const { code, map } = transformSync(content, {
            loader: 'ts',
          });
          return { code, map };
        },
      });
        ```
    

PostCSS

The autoprefixer in PostCSS is so good, it should be illegal not to use it. Adding it is easy as

  1. # Basically just installing postcss and autoprefixer as dependencies
    pnpm add -D postcss autoprefixer
    
  2. // Then just add this to preprocess
    postcss: {
      // map: production ? ctx.map : false,
      // Not needed unless we're adding more plugins I think
      // syntax: require('postcss-scss'),
      // parser: require('postcss-scss'),
      plugins: [require('autoprefixer')],
    },
    

Better defaults

I'm tired of writing lang=ts and lang=scss since I'll be using it for every singlee file anyway. Better to just add these as defaults to the rollup.config.js file once!

defaults: {
  script: 'ts',
  style: 'scss',
},

Conclusion

Was it worth the 4 hours to set this up instead of just actually writing a website? No. Of course not. I might save like 3ms per week from esbuild, 2-3 hours of pure frustration from CSS cross-browser compatability, and 3s per week from better defaults. On the other hand, I learned of a lot more cool open sourced projects and made a first "actual" PR.

Top categories

Loading Svelte Themes