Atomic Smash compiler

Source code: packages/packages/compiler at main · AtomicSmash/packages

NPM package: @atomicsmash/compiler – npm

While working at Atomic Smash, we had many different projects with multiple different build setups. Some projects used Gulp, and others used Laravel Mix which was deprecated.

I investigated a way to consolidate all our projects onto a single build process with a focus on convention over configuration. I decided on building an NPM package using my existing blocks compiler as a base. I established a convention for the src folders to reduce configuration and consolidate all projects under the same workflow.

Webpack was selected because it was more of a file bundler than something like Vite (which is more of a dev environment) which meant it was closer to what we were currently doing, and also WordPress Scripts runs off of Webpack which provided a good reference and also WordPress uses a dependency extractor to handle files already found in core, which we wanted to use to help keep production bundle size down while allowing using WP packages locally for TypeScript support.

The compiler itself supports raw CSS and SCSS files in a ‘styles’ folder, TypeScript and JavaScript in a ‘scripts’ folder, SVG source files (which get compiled into a sprite) in an ‘icons’ folder, and due to some legacy projects, ‘images’ and ‘fonts’ folders for copying images and fonts into the build folder.