lightning_css

lightning_css is an Elixir package to integrate Lightning CSS into an Elixir project.

Installation

If available in Hex, the package can be installed by adding lightning_css to your list of dependencies in mix.exs:

def deps do
  [
    {:lightning_css, "~> 0.4.0"}
  ]
end

Usage

After installing the package, you’ll have to configure it in your project:

# config/config.exs
config :lightning_css,
  version: "1.22.1",
  default: [
    args: ~w(assets/css/app.css --bundle --output-file=priv/static/styles/bundle.css),
    watch_files: "assets/css/**/*.css",
    cd: Path.expand("..", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Configuration options

• version: Indicates the version that the package will download and use. When absent, it defaults to the value of @latest_version at lib/lightning_css.ex.
• profiles: Additional keys in the configuration keyword list represent profiles. Profiles are a combination of attributes the Lightning CSS can be executed with. You can indicate the profile to use when invoking the Mix task by using the --profile flag, for example mix lightning_css --profile dev. A profile is represented by a keyword list with the following attributes:
  • args: An list of strings representing the arguments that will be passed to the Lightning CSS executable.
  • watch_files (optional): A glob pattern that will be used when Lightning CSS is invoked with --watch to match the file changes against it.
  • cd (optional): The directory from where Lightning CSS is executed. When absent, it defaults to the project’s root directory.
  • env (optional): A set of environment variables to make available to the Lightning CSS process.

Phoenix

If you are using the Phoenix framework, we recommend doing an integration similar to the one Phoenix proposes by default for Tailwind and ESBuild.

After adding the dependency and configuring it as described above with at least one profile, adjust your app’s endpoint configuration to add a new watcher:

config :my_app, MyAppWeb.Endpoint,
  # ...other attributes
  watchers: [
    # :default is the name of the profile. Update it to match yours.
    css: {LightningCSS, :install_and_run, [:default, ~w(), [watch: true]]}
  ]

Then update the aliases of your project’s mix.exs file:

defp aliases do
  [
    # ...other aliases
    "assets.setup": [
      # ...other assets.setup tasks
      "lightning_css.install --if-missing"
    ],
    "assets.build": [
      # ...other assets.build tasks
      "lightning_css default",
    ],
    "assets.deploy": [
      # ...other deploy tasks
      "lightning_css default",
    ]
  ]
end