View Source
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
atlib/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 examplemix 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