compress-shader-literals weekly downloads statistics

compress-shader-literals

Size matters. Strip everything strippable from your GLSL & WGSL shaders at build time.

A tiny build-time minifier for GLSL & WGSL shaders written as template literals in your JS/TS. Strips comments + whitespace — any bundler, no renaming, no toolchain, no runtime cost.

Install

<!-- [](https://www.npmjs.com/package/compress-shader-literals) -->

bun add -d compress-shader-literals

About

• Removes comments, collapses whitespace, joins statements, and trims space around delimiters. Whitespace and comments only.
• No renaming, no dead-code removal, no operator-space removal — output stays valid.
• Runs before your bundler's own minifier.

Usage

One unplugin plugin, same API for every bundler:

import { compressShaderLiterals } from 'compress-shader-literals';

// vite.config.js
export default { plugins: [compressShaderLiterals.vite({ outputRatio: true })] };

For Rollup, webpack, esbuild, Rspack, Rolldown or Farm, call the matching method — .rollup(), .webpack(), .esbuild(), .rspack(), .rolldown(), .farm() — with the same options.

Finds tagged and comment-prefixed literals. The comment form keeps editor syntax highlighting:

const vert = glsl`
  // vertex shader  ← stripped
  precision highp float;
  void main() { gl_Position = vec4(0.0); }
`;

const frag = /* wgsl */ `
  /* fragment */
  fn main() {}
`;

Options

Option	Default	Description
tags	['glsl', 'wgsl', 'shader']	Tag names / comment markers to match
scan	'ast'	'ast' parses the file with Babel; 'loose' matches by regex — see below
include	[/\.[mc]?[jt]sx?$/]	Files to process — the JS/TS family Babel can parse
exclude	[/node_modules/, /dist/]	Files to skip — dependencies are skipped by default
outputRatio	false	Print a bytes-saved summary after build
transform	built-in minifyShader	Custom minifier — (shader: string) => string
transformBatch	none	Batch minifier — (shaders: string[]) => string[] | Promise<string[]>, one call per module, all its literals at once; wins over transform when set
debug	false	Log each file's discovered literals to the console
validate	false	Re-parse each changed shader and warn on build if one stops parsing

validate: true — re-parses every shader the plugin touches, before and after, and warns (via the bundler's normal warning channel) if one stopped parsing. Needs @shaderfrog/glsl-parser (GLSL) and/or wgsl_reflect (WGSL) installed — both are optional peer dependencies, loaded lazily so builds that don't opt in never pay for them:

compressShaderLiterals.vite({ validate: true });

scan: 'loose' — for files Babel can't parse (anything that isn't plain JS/TS: Svelte components, Astro components, etc). Instead of a whole-file AST parse, it matches the same tagged/comment-prefixed literal shapes by regex. Opt in and point include at the files yourself — there's no whole-file syntax guarantee, so a match is only touched once its content also looks like a real shader:

compressShaderLiterals.vite({ scan: 'loose', include: [/\.svelte$/] });

Programmatic API — the core helpers are exported for tooling authors (validators, ESLint rules, CLIs), no plugin required:

import { extractShaderLiterals, extractShaderLiteralsLoose, minifyShader } from 'compress-shader-literals';

extractShaderLiterals('const v = glsl`void main() {}`');
// → [{ tag: 'glsl', value: 'void main() {}', start: 14, end: 30 }]

extractShaderLiteralsLoose('<script>const v = glsl`void main() {}`</script>');
// → same shape, found by regex instead of a Babel parse

minifyShader('// comment\nvoid  main() {}'); // → 'void main() {}'

Stats…