How to compile custom standalone CLI

[davidalejandroaguilar]

Question: Can we compile a custom standalone CLI?

I'm trying to add an arbitrary npm package to be included in the standalone CLI, such as daisyUI.

I wonder if I could:

1. Fork the project.
2. Add an arbitrary npm package to be included in the CLI to the standalone.js file.
3. Compile the standalone executable.

If so, any pointer about how would I go about doing the above? I see no instructions on how to compile the executable. I see some oxide, cargo/Rust thing, but not sure how to proceed. Any pointers are welcome!

(Hope this is not a typical xy problem)

Alternative: Extending the CLI

Maybe instead of me doing a custom build of the standalone CLI. We could extend it allow it to locate packages installed locally.

Why?

I'm trying to use daisyUI with the standalone CLI (via tailwindcss-rails) using importmaps (no npm/yarn).

When adding require('daisyui') to config/tailwind.config.js on a brand new Rails 7.1 installation:

// config/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('daisyui'), // New line
  ]
}

I get an error when compiling/starting the server:

Error: Cannot find module 'tailwindcss/defaultTheme'
Require stack:
- /Users/david/src/repos/tailwind-cli/config/tailwind.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
    at /Users/david/src/repos/tailwind-cli/config/tailwind.config.js:1:97
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
    at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
    at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
    at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/david/src/repos/tailwind-cli/config/tailwind.config.js' ]
}

This is because importmaps in Rails is actually ✨ no build ✨. Thus, when the standalone CLI does a require, there is no node_modules folder to look for packages. daisyUI hasn't even been downloaded anywhere (this happens on the browser).

I've taken a look at this repo's standalone.js file and I see 2 things:

1. On that file, we can find the default plugins that come bundled with the standalone CLI.
2. If the required plugin isn't on that list of default plugins, the usual require function is called.

I've also tried downloading daisyUI locally (via Rails ./bin/importmap pin daisyui --download), however, I get the same error because, as mentioned on #2, the CLI is using the original require if it can't find the plugin on that local list, and thus when node_modules is absent due to the lack of build, it fails.

Thus, the solution I think, is to compile a custom standalone CLI that has daisyUI added within it's internal node_modules and use that in tailwindcss-rails, since it allows using a custom executable.

[dobicinaitis]

I had the same itch, so I wrote a GitHub Actions workflow that will repackage the standalone CLI and bundle daisyUI whenever either of the projects gets a new release. Feel free to use tailwind-cli-extra till we get a better upstream solution.

If you would like to compile the CLI yourself, then here are the steps to do so:

• clone the tailwindcss repository and checkout the latest release tag
• install Node version 16 (I used nvm for this):

  nvm install 16
  # switch to the stable engine
  node ./scripts/swap-engines.js

• build Tailwind CSS:

  #  install dependencies
  npm install
  # build
  npm run build

• install standalone CLI dependencies:

  cd standalone-cli
  npm install

• add daisyUI as a dependency:

  npm install -D daisyui@latest

• add daisyUI to the standalone.js file by hand or using this sed command:

  sed -i "/let localModules/a \  daisyui: require('daisyui')," standalone.js

• build the standalone CLI

  npm run build

• That's it! Executables for all platforms will be created in the dist directory.

[rupurt]

Thanks @dobicinaitis.

Repacking with Nix could be an option. There's currently a standalone Nix package that works well. We could use that as the base to package up tailwindcss-extra.

[davidalejandroaguilar]

@dobicinaitis You. Are. Awesome.