cargosense / dart_sass Goto Github PK

How do we configure multiple configuration profiles?

I recently tried out Elixir for the first time yesterday and decided to use an Alpine Linux Docker container for this test (as I do with many things that I try out). I wanted to add SASS support to Phoenix, but I didn't really want an entire Node ecosystem tagged on and lacked the Elixir understanding to do it myself. I found this project and it is great! Well done!

However, sadly my journey wasn't straight forward (details below) and it might be worth noting in the docs somewhere that this project requires bash and glibc (neither of which ship with Alpine or some other distros). In fact, apparently using glibc on Alpine is very naughty and the project that I used to add it to my (dev-only) container is rather unsafe (or at best unpredictable).

Details on what happens without these dependencies follows. My only error on boot (interspersed with many other messages) was:

env: can't execute 'bash': No such file or directory

(no indication that this had anything to do with SASS) and when I added bash it became:

/app/_build/dev/lib/dart_sass/priv/dart_sass.bash: line 13: /app/_build/sass: No such file or directory

Which is absolutely untrue, that file existed in my _build directory.

After some searching, I found that SASS relied upon gclib, so I added that in the clunkiest way possible (since Alpine uses musl):

ENV GLIBC_VERSION=2.34-r0
RUN wget -q -O /etc/apk/keys/sgerrand.rsa.pub https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub && \
    wget -q -O /tmp/glibc.apk https://github.com/sgerrand/alpine-pkg-glibc/releases/download/${GLIBC_VERSION}/glibc-${GLIBC_VERSION}.apk && \
    apk add /tmp/glibc.apk && \
    rm -rf /tmp/glibc.apk

And only then did the system build my CSS file.

In case you want to mirror esbuild: phoenixframework/esbuild@a8f5f1d

Otherwise, feel free to close this. :)

Already reported here: phoenixframework/esbuild#58

See phoenixframework/esbuild@e02a100

This is now a much shorter message than the one I had written about watch not working for dart-sass >= 1.50.0

https://github.com/CargoSense/dart_sass/blob/main/lib/dart_sass.ex#L189

As a test I removed the following as the note describes, recompiled and watch is working again.

    # TODO: Remove when dart-sass will exit when stdin is closed.
    # Link: https://github.com/sass/dart-sass/pull/1411
    path =
      if "--watch" in args and platform() != :windows do
        [script_path() | path]
      else
        path
      end

https://github.com/sass/dart-sass/releases/tag/1.50.0

Closing the standard input stream will now cause the --watch command to stop running.

It looks like you can go ahead and make these changes for watch now.

Thanks

Hi, thanks for this library, it helps to integrate DartSASS to Phoenix much easy 💜

Issue

I'm noticed that the auto recompiles the CSS doesn't work on the DartSASS 1.51.0, it also happens on 1.50.0 and 1.50.1

That feature is working well on 1.49.11 FYI.

As I have checked on the DartSASS release changelogs, could it be related to sass/dart-sass#1411 🤔

Step to reproduce

1/ Generate a new Phoenix 1.6.x project
2/ Add DartSASS following the README
3/ Tested with the 1.49.11 version by adjusting the app.css, the new CSS should be written in priv folder and the browser is reloaded
4/ Change the version to 1.50.0 or 1.51.0, adjust the app.css the output CSS file in priv folder didn't update.

Screencast

We're doing the assets.deploy step using dart_sass in a Dockerfile and don't want the runtime.exs configuration to be required (DB config vars and the like).

Looking at esbuild, it has that as an option:

https://github.com/phoenixframework/esbuild/blob/d4cf71f62f6c01234f8ab2d39467f1cce8dbeee7/lib/mix/tasks/esbuild.ex#L34-L46

Wondering if that's viable for dart_sass? Something like:

  def run([profile | args] = all) do
    switches = [runtime_config: :boolean]
    {opts, remaining_args} = OptionParser.parse_head!(args, switches: switches)

    if opts[:runtime_config] do
      Mix.Task.run("app.config")
    else
      Application.ensure_all_started(:dart_sass)
    end

    case DartSass.install_and_run(String.to_atom(profile), remaining_args) do
      0 -> :ok
      status -> Mix.raise("`mix sass #{Enum.join(all, " ")}` exited with #{status}")
    end

    Mix.Task.reenable("sass")
  end

Thanks!

In case you want to do it for symmetry: phoenixframework/esbuild#27

A couple of packages that I use have css with entries like background-image: url('./font/somefont.woff2'); in them.

When I use dart_sass, these relative paths are still there and those images/fonts return 404s. Is there something I can configure to either rewrite them as a dataurl (like esbuild would), or to copy those into the output folder?

I don't know why version check exists in the first place, but I don't think that software should check versions of it's dependencies in runtime, that's a job for package managers.

It would be nice to have something like version: false handled.

I'm using a Docker build for deploys, happily based on hexpm/elixir tags.

Was working fine until this afternoon when our builds started failing with the following:

20:05:41.171 [notice] TLS :client: In state :hello_middlebox_assert at ssl_gen_statem.erl:736 generated CLIENT ALERT: Fatal - Unexpected Message
 - {:unexpected_msg, {:internal, {:encrypted_extensions, %{sni: {:sni, []}}}}}
** (RuntimeError) couldn't fetch https://objects.githubusercontent.com/github-production-release-asset-2e65be/72474275/7945012e-ed08-429b-a243-f203131fe2b5?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20220826%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220826T200541Z&X-Amz-Expires=300&X-Amz-Signature=faa383efd5b17a3e0633ad2104fa4086232ba172d03c49e068aab33682ba4032&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=72474275&response-content-disposition=attachment%3B%20filename%3Ddart-sass-1.54.5-linux-x64.tar.gz&response-content-type=application%2Foctet-stream:
      {:error, {:failed_connect, [{:to_address, {'objects.githubusercontent.com', 443}}, {:inet, [:inet], {:tls_alert, {:unexpected_message, 'TLS client: In state hello_middlebox_assert at ssl_gen_statem.erl:736 generated CLIENT ALERT: Fatal - Unexpected Message\n {unexpected_msg,{internal,{encrypted_extensions,\#{sni => {sni,[]}}}}}'}}}]}}
    (dart_sass 0.5.0) lib/dart_sass.ex:384: DartSass.fetch_body!/1
    (dart_sass 0.5.0) lib/dart_sass.ex:231: DartSass.install/0
    (dart_sass 0.5.0) lib/dart_sass.ex:210: DartSass.install_and_run/2
    (dart_sass 0.5.0) lib/mix/tasks/sass.ex:47: Mix.Tasks.Sass.install_and_run/1
    (mix 1.13.4) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.13.4) lib/mix/task.ex:455: Mix.Task.run_alias/5
    (mix 1.13.4) lib/mix/cli.ex:84: Mix.CLI.run_task/2

Docker image tag is hexpm/elixir:1.13.4-erlang-24.3.4.4-ubuntu-focal-20211006.

Update to add: may be related to https://elixirforum.com/t/github-ci-down-is-it-working-for-you/49661 ?

Hi, before esbuild i had bootstrap in node_modules folder and i could import it in app.scss with:
@import '~bootstrap/scss/bootstrap';

Now this instruction raise this error:
Error: Can't find stylesheet to import. ╷ 2 │ @import '~bootstrap/scss/bootstrap'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵
If i change it with:
@import '../node_modules/bootstrap/scss/bootstrap';
It works.

It is the right way?
Thanks

Watcher works on Mac, Linux, but fails on WSL2.

When I try to install dart_sass on Docker container built on M1 Macs, mix.install fails with the following message:

** (RuntimeError) could not download dart_sass for architecture: aarch64-unknown-linux-gnu
    (dart_sass 0.3.0) lib/dart_sass.ex:271: DartSass.target/0
    (dart_sass 0.3.0) lib/dart_sass.ex:211: DartSass.install/0
    (mix 1.12.2) lib/mix/task.ex:394: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.12.2) lib/mix/cli.ex:84: Mix.CLI.run_task/2
    (elixir 1.12.2) lib/code.ex:1261: Code.require_file/2

The docker container was created from the official elixir 1.12.3 image, which is based on Debian 10 (buster).

This error seems to be happening only with dart-sass >= v1.58.0. Looks like there is no longer a standalone sass binary file like there was in < v1.58... the src/ directory is now required and the installer doesn't copy it over from the downloaded tarball.

Hi, thank you for this piece of work!

I tried to use the mix task in my build pipeline (upon hexpm/elixir:1.12.3-erlang-24.1.1-alpine-3.14.0). Unfortunatly it fails because of some lib bindings.

/build # mix sass default
** (Mix) `mix sass default` exited with 2

/build # ./_build/sass apps/web/assets/css/app.scss 
sh: ./_build/sass: not found

/build # ldd
musl libc (x86_64)
Version 1.2.2
Dynamic Program Loader
Usage: /lib/ld-musl-x86_64.so.1 [options] [--] pathname
/build # ldd ./_build/sass 
        /lib64/ld-linux-x86-64.so.2 (0x7f752da95000)
        libdl.so.2 => /lib64/ld-linux-x86-64.so.2 (0x7f752da95000)
        libpthread.so.0 => /lib64/ld-linux-x86-64.so.2 (0x7f752da95000)
        libm.so.6 => /lib64/ld-linux-x86-64.so.2 (0x7f752da95000)
        libc.so.6 => /lib64/ld-linux-x86-64.so.2 (0x7f752da95000)
Error loading shared library ld-linux-x86-64.so.2: No such file or directory (needed by ./_build/sass)
Error relocating ./_build/sass: __sbrk: symbol not found
Error relocating ./_build/sass: __isinf: symbol not found
/build # 

Hello, I'm trying to use dart_sass with Phoenix 1.7.6 on OpenBSD but I get this error:

** (Mix) Could not start application dart_sass: exited in: DartSass.start(:normal, [])
    ** (EXIT) an exception was raised:
        ** (RuntimeError) dart_sass is not available for osname: :openbsd
            (dart_sass 0.6.0) lib/dart_sass.ex:252: DartSass.platform/0
            (dart_sass 0.6.0) lib/dart_sass.ex:131: DartSass.bin_paths/0
            (dart_sass 0.6.0) lib/dart_sass.ex:151: DartSass.bin_version/0
            (dart_sass 0.6.0) lib/dart_sass.ex:70: DartSass.start/2
            (kernel 8.5.3) application_master.erl:293: :application_master.start_it_old/4

M1 Mac - ** (RuntimeError) could not download dart_sass for architecture: aarch64-apple-darwin20.5.0

It looks like the prebuilt arm64 binaries won't exist until they can be be built on Github Actions - which they can't currently, apparently:

sass/dart-sass#1125 (comment)

What's involved in manually getting this working (natively) on M1 Macs as a stopgap?

I have Erlang (installed through asdf) , Dart and Sass installed through brew running natively (arm64 - not through Rosetta).

Can I manually copy or symlink the dart and sass binaries into the _build directory?

When I run mix sass default assets/css/app.scss priv/static/assets/app.css, I'm seeing the following within the terminal:

Only two positional args may be passed.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

When I remove the default and use mix sass assets/css/app.scss priv/static/assets/app.css, I see the following within the terminal:

** (ArgumentError) unknown dart_sass profile. Make sure the profile is defined in your config files, such as:

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

    (dart_sass 0.4.0) lib/dart_sass.ex:105: DartSass.config_for!/1
    (dart_sass 0.4.0) lib/dart_sass.ex:176: DartSass.run/2
    (dart_sass 0.4.0) lib/mix/tasks/sass.ex:47: Mix.Tasks.Sass.install_and_run/1
    (mix 1.13.3) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.13.3) lib/mix/cli.ex:84: Mix.CLI.run_task/2

Finally, I have defined the following profile within the config/config.exs file:

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

Using the following dependencies:

Phoenix 1.6.6
Elixir 1.13.3
Erlang 24.2.2