Multiple Output files with cssbundling-rails and Tailwind

#ruby #rails #css #tailwindcss

The default build:css for cssbundling-rails using Tailwind will take app/stylesheets/application.tailwind.css and output it to app/assets/builds/application.css ready for inclusion using the asset pipeline.

However, often you’ll want multiple entry points or output files - say, one for your application and one for your public site that’s a bit smaller.

You could change the command in package.json to use && and join two calls to the Tailwind CLI, but this approach has a couple of issues - cssbundling-rails is expecting to be able to append --watch to commands that are run in development so that rebuilds happen as you change files, AND use the command to prep your css once before running a deploy or integration test.

Enter npm-run-all, which will let you run commands with a glob-style syntax, in parallel, and passing through arguments. Just change the "scripts" section of your package.json to include tasks like this:

"scripts": {
  "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
  "build:css:application": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
  "build:css:static": "tailwindcss -i ./app/assets/stylesheets/static-pages.tailwind.css -o ./app/assets/builds/static-pages.css"
}

Now when you run yarn build:css you’ll end up with two output files in your build (in this case, "application.css" and "static-pages.css") and when you want to run it in watch mode, yarn build:css --watch will pass that argument down to each individual build and run them in parallel.

It’s the build:css command that's doing the magic:

"npm-run-all --parallel \"build:css:* {@}\" --"

Essentially this is saying "run anything matching build:css:*, in parallel, and passing all arguments through from the original invocation" (that's the {@} syntax from npm-run-all)

Enjoy!

Top comments (3)

Mahfuzur Rahman • Sep 7 '23

Thanks, I am using cssbuilding-rails gem
updated package.json for two layouts application.scss and site.scss
and it works!

Old code:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  }

New code:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:l_css:application_compile": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:l_css:application_prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:p_css:application": "yarn build:l_css:application_compile && yarn build:l_css:application_prefix",

    "build:l_css:site_compile": "sass ./app/assets/stylesheets/site.scss:./app/assets/builds/site.css --no-source-map --load-path=node_modules",
    "build:l_css:site_prefix": "postcss ./app/assets/builds/site.css --use=autoprefixer --output=./app/assets/builds/site.css",
    "build:p_css:site": "yarn build:l_css:site_compile && yarn build:l_css:site_prefix",

    "build:css": "npm-run-all --parallel \"build:p_css:* {@}\" --",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  }