DartSass - An installer for sass

mcrumm

Phoenix Core Team

If you would like to migrate away from node/npm/webpack while still using sass, the dart_sass package provides a installer and runner for Dart Sass via Mix.

This package follows the same structure esbuild– you add your configuration to config.exs:

config :dart_sass,
  version: "1.36.0",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ]

and then you can run it from your command line:

$ mix sass default --version
1.36.0

For any Phoenix projects currently using Sass via webpack, you can use dart_sass to model your asset pipeline in the upcoming style of the Phoenix v1.6 installer.

First, add DartSass as a watcher in config/dev.exs:

sass: {
    DartSass,
    :install_and_run,
    [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
  }

Note: this requires Phoenix > v1.5.9.

…and then create or add sass to your "assets.deploy" alias in mix.exs:

"assets.deploy": ["sass default --no-source-map --style=compressed", "phx.digest"]

You may refer to the README for more details, and if you are using dart_sass in a project, please let us know!

https://github.com/CargoSense/dart_sass

36 comments

/phoenix #library #dart-sass

21 6480 36

2023-06-27 23:59:47 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

tj0

This looks awesome. I can’t wait to not have to install node or npm ever again.

Post #1

wanton7

Maybe Elixir installation could include Wasm runtime in the future so these tools wouldn’t need its own. Then you could run these tools as wasm binaries in any OS. Dart for example is looking into Wasm compilation https://medium.com/dartlang/experimenting-with-dart-and-wasm-ef7f1c065577

Post #2

hauleth

While it seems awesome I would really like to see something like PostCSS with postcss-preset-env, so I would be able to use CSS-proposed nesting and other features from CSS proposals instead of SCSS “custom” solutions.

Post #3

chrismccord

Creator of Phoenix

The goal is to sidestep the node ecosystem and related baggage/reproducible builds by installing the precompiled binaries for DartSass in this case. If postcss could provide something similar that would be amazing, but afaik this is not something easily done given postcss’s node implementation.

Post #4

hauleth

I know. My question was more “maybe someone know something like PostCSS that is built into native executable”.

Post #5

chrismccord

Creator of Phoenix

Gotcha. Agree this would be amazing since I really love tailwind (which heavily builds on postcss), but the long term repeatability of my css builds years down the road is a concern without such a thing.

Post #6

tj0

You might want to check out GitHub - mnussbaumer/cssex: A native Elixir CSS pre-processor - similar to SCSS/SASS but different · GitHub . It supports nesting, etc. Still haven’t gotten around to really testing it, but the option is there. Not sure how it compares to postcss.

Post #7

derek-zhou

I love the idea. I’d suggest to build something that is source compatible to a curated subset of tailwind/postcss, usable without any Elixir specific syntax. This way it can have a much larger audience.

Post #8

mcrumm

Phoenix Core Team

I wonder if one could build a standalone PostCSS binary with something like vercel/pkg

Post #9

connorlay

Hypothetically speaking, if one were to port PostCSS to Deno, would that fulfill your goal of sidestepping Node? Or would the same issues regarding reproducible builds persist?

EDIT: Deno support · Issue #1430 · postcss/postcss · GitHub

Post #10

Load more posts (26 remaining)