Consider adding sass as third-party module for Deno

[Bellarmine-Head]

Deno intro: https://deno.land/posts/v1

Deno third-party modules: https://deno.land/x

Possible of some use re. porting: https://dev.to/craigmorten/guide-to-porting-node-modules-to-deno-41cd

[fromaline]

@Andrew-Webb, hi! Could you explain the point of doing it right now? Do any Deno-based build tools exist?

[Bellarmine-Head]

Could you explain the point of doing it right now? Do any Deno-based build tools exist?

I'm not advocating doing it right now. But I think it's something that owners of JS codebases that currently require Node, npm and a (usually huge) node_modules folder to be installed so that their tool / library / framework can be run may wish to consider as a lighter alternative.

See the Deno intro link; I think the new approach makes a lot of sense. It appeals to me because I find the experience of Node + node_modules pretty horrid. I groan every time I have to install something Node based (React; Angular; whatever) because it usually involves an endless amount of Node techno-faff; a humungous node_modules folder; endless warnings from node modules that are dependenies of dependencies ("You shouldn't be using this; find something better"); breakages when I update; etc. etc. And I'm not the only one... the guys in my office often spend days fighting Node (and more especially Node modules) foul-ups.

Re. build tools, see the third link I posted. Or more specifically: https://github.com/garronej/denoify

[jathak]

Moved this to the dart-sass repo, since the sass/sass repo is for issues related to the Sass language as a whole.

This isn't something we're likely to have the bandwidth to work on ourselves anytime soon, but we'd be open to contributions from others. Note, we use dart_cli_pkg to build our release binaries, so it would need to be updated to support deploying as a Deno module too.

[zaydek]

@Andrew-Webb I don’t know how much help this would be but I noticed Aleph.js — a Next.js-like framework for Deno — recently added support for Sass (Dart Sass). Looks like in this file specifically: https://github.com/alephjs/aleph.js/blob/364bad17d257f83ffaeb4a08d960d6e23dbbf4f9/plugins/sass.ts.

Sorry for my confusion, but isn’t one of the points of Deno / ES modules that dependencies are URL-based? This expression seems to work for Aleph: import { renderSync } from 'https://esm.sh/[email protected]'.

[Bellarmine-Head]

@zaydek - interesting find.

one of the points of Deno / ES modules that dependencies are URL-based

That is my understanding.

[shadowtime2000]

@zaydek 👋

Hi, I am a maintainer of AlephJS. We use esm.sh to do conversions of NPM packages that currently don't have Deno support like React and Sass. Recently we have been running into some problems with sass because of esm.sh's conversion. esm.sh only works for small to medium sized packages.

I have never used Dart before, but I think something that could be done would be like using a tool like rollup to create a new file from the sass.dart.js to use ES module exports (maybe called sass.deno.js?). Then create like a deno.js which does some Node polyfills for stuff like process and __dirname and then reexports sass.deno.js. Then create a small repo on this sass org called like deno_sass released on deno.land/x/ and nest.land which just reexports that deno.js from a CDN like jsdelivr or unpkg. It should be noted that Deno provides built in Typescript support so we would still have to figure out a way to provide typings. I would love to help out on getting built in Deno support for Sass!

[Trackhe]

Any Updates? https://sass-lang.com/dart-sass

[shadowtime2000]

Not really any updates. If a maintainer could let me take this issue and approve the plan I made above, I could get started on this.

[jathak]

Feel free to go ahead on this. We don't have much context for Deno ourselves, so we probably won't be able to provide much support, but we're happy to merge if you get it working

[aiotter]

I'm interested in implementing this. I have zero knowledge of dart thou.

Does anyone know the current way of building dart-sass into node.js package on grinder? I wasn't able to find out where this pkg-npm-dev task is defined. https://github.com/sass/dart-sass/blob/5606602bfaa53161c16c4ffbfa6494bcb43ebec6/.github/workflows/ci.yml#L93-L94

[CanRau]

there's also this wasm version which looks interesting https://deno.land/x/denosass

update: tried successfully, though actually so far only .css files 😅

[traceypooh]

found denosass this week, too.

I've done a quick hack prototype conversion of ~15K lines of .less files, to .scss (using npx less-scss-convertor -- which is a bit crude & minor buggy...)

I then ran the ~15K lines (split over ~70 files, importing each other) through denosass and got CSS out (superfast, I might add) and have a prototype archive.org CSS working now.

(I'm lead at archive.org. Wasn't necessarily looking to move our LESS to SCSS... but OTOH since we're considering more node/npm & node_modules => deno... we needed something to compile our higher-level LESS/SCSS to CSS (and there's nothing I could find for .less).

Anyway, just figured I'd mention that so far, denosass (and less-scss-convertor) are looking pretty darn good.

[nex3]

Note that Denosass isn't an official implementation and as far as I know doesn't run against the official Sass language test suite, so it's likely to be subtly incompatible with the official implementation. The best solution here would still be for someone to update cli_pkg to deploy to the deno package repo and update Dart Sass to use Deno's filesystem APIs.

[dpeter99]

Any news on this? An official scss lib for deno would be awesome!

[Antonio476587]

I am sharing what I could find.

I was trying to use sass in my project, but I would throw me an error each time I wanted to compile a file with sass.compile("foo.sass") or async sass.compileAsync("foo.sass"), it did not matter from where I was importing sass from (npm, skypack or esm). It didn't worked and was throwing me this error

error: Uncaught UnsupportedError {
  message: "'Uri.base' is not supported",
  "$thrownJsError": Unsupported operation: 'Uri.base' is not supported
    at Object.wrapException (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:1247:17)
    at Object.Uri_base (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:5377:15)
    at Object.Style__getPlatformStyle (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:7576:13)
    at file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:101043:68
    at Object.holder.<computed> [as $get$Style_platform] (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:258:21)
    at file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:101039:92
    at Object.holder.<computed> [as $get$context] (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:258:21)
    at Object.absolute (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:23678:16)
    at file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:15495:22
    at _wrapJsFunctionForAsync_closure.$protected (file:///home/seo/.cache/deno/npm/registry.npmjs.org/sass/1.57.1/sass.dart.js:3738:15)
}

Then I tried to use sass with the string methods sass.compileString and await sass.compileStringAsync, so I was opening the file with Deno, and passing the content as an argument to the method. It was working well with single files with no import, @import or @forward statements inside, when the file had those statements, it would throw me the same error as above.

I was figuring out how to resolve this issue, and I had two ideas, the first one was to create an adapter to Dart Sass or using the https://deno.land/x/[email protected] module. I compared both;

If I was going to implement an adapter, it will cost me more time, but I would create just a wrapper that would be using the Dart Sass implementation and it would be very customizable.

By the other hand, I could use the denosass module, but it is not related to Dart Sass, so it won't have the latest updates and a community as big as Sass.

Hopefully, there is already a Javascript wrapper for Dart Sass maintained by the sass team, so I picked it up, and it worked!!! everything has been compiling fine. But there is a concern to resolve, when I import the sass-embedded module from a CDN like esm or skypack it throw me an error, a different one for esm and skypack.

with ESM:

Deno 1.30.2
exit using ctrl+d, ctrl+c, or close()
REPL is running with all permissions allowed.
To specify permissions, run `deno repl` with allow flags.
> import sass from "https://esm.sh/sass-embedded"

============================================================
Deno has panicked. This is a bug in Deno. Please report this
at https://github.com/denoland/deno/issues/new.
If you can reliably reproduce this panic, include the
reproduction steps and re-run with the RUST_BACKTRACE=1 env
var set and include the backtrace in your report.

Platform: linux x86_64
Version: 1.30.2
Args: ["deno"]

thread 'main' panicked at 'internal error: entered unreachable code', cli/lsp/documents.rs:1455:7
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

with Skypack

Deno 1.30.2
exit using ctrl+d, ctrl+c, or close()
REPL is running with all permissions allowed.
To specify permissions, run `deno repl` with allow flags.
> import sass from "https://cdn.skypack.dev/sass-embedded"
Uncaught Error: [Package Error] "punycode" does not exist. (Imported by "sass-embedded").
    at https://cdn.skypack.dev/error/node:punycode?from=sass-embedded:14:7

I will try to debug it, but I think that this thread can be closed and create another one for this problem.

[rdmurphy]

Wanted to share how I've had a bit more luck trying to interface with sass-embedded as an alternative! First the versions of things I'm working with:

Deno: 1.30.3 npm:sass-embedded: 1.57.1

If you import sass-embedded using the new-ish npm support and stick to using the async methods it appears to be working okay. I'm still kicking the tires on it but I've been able to @use and @import other files just fine.

It does however crash and burn if you attempt to use any of the sync calls. Deno has done a great job of embedding polyfills for Node APIs to help with things like this but the implementation of worker_threads is pretty sparse. Here you can see they punt on implementing receiveMessageOnPort() — this is where sass-embedded errors out on the sync path in sync-message-port.js:

error: Uncaught Error: Not implemented: receiveMessageOnPort
  throw new Error(message);
        ^
    at notImplemented (https://deno.land/[email protected]/node/_utils.ts:23:9)
    at receiveMessageOnPort (https://deno.land/[email protected]/node/worker_threads.ts:221:3)
    at new SyncMessagePort (file:///private/tmp/deno-rollup/node_modules/.deno/[email protected]/node_modules/sass-embedded/dist/lib/src/sync-process/sync-message-port.js:62:72)

I imagine this will eventually get better and maybe address itself on the Deno side as they continue to flesh out that polyfill layer. Alternatively it could be neat if something like sass-embedded-host-deno existed in the same spirit as other versions like Ruby's.