Update to dart-sass - Githubissues

wethegit / sweet-potato

We The Collective's static website generator.

https://wethegit.github.io/sweet-potato/

5 stars 0 forks source link

Update to dart-sass #53

Closed andrewrubin closed 2 weeks ago

andrewrubin commented 2 years ago

https://sass-lang.com/documentation/js-api

⚠️ some implications here to be aware of:

We will lose node-sass asset functions like image-width(), image-url(), et al.
/ division operator is deprecated; now it's @use sass:math and math.div(x, y)

Reasons I would like to update this:

It's the official implementation
@use rule. It has some useful advantages over @import

marlonmarcello commented 2 years ago

It's much much faster too! ⚡

marlonmarcello commented 2 years ago

Should be pretty straight forward to convert the functions: https://github.com/fetch/node-sass-asset-functions/blob/master/lib/processor.js

andrewrubin commented 2 years ago

Nice 😎 , thanks for the link. I find myself using the asset functions less and less, so I kind of feel like porting them over might just cause unnecessary bloat. Thoughts?

For what it's worth, you could potentially use the sweet-potato/spices plugin for getting the image size in Pug, and just pass the result as an inline CSS custom prop. Something like this (I know, it's convoluted, but maybe an acceptable alternative)?

.my-cool-div(
  style=`--bg-size: ${functions.imageSize('./path/to/image.jpg').width}`
)

marlonmarcello commented 2 years ago

That seems perfectly reasonable! Someone might argue that you are splitting your concerns. Like, CSS stuff should be with CSS stuff but I think it's okay in this case as it's very common to have the image path/name inside the yaml files.