search

nanoc / features

Collection of feature requests
2 stars 1 forks source link

LibSass/Dart Sass support #45

Closed denisdefreyne closed 1 year ago

denisdefreyne commented 6 years ago

Sassc support is not currently available, but it is something I’d like to have. The main area of difficulty is integrating it with Nanoc’s dependency tracker; while this was somewhat easy with Ruby Sass, it might be difficult (or impossible) to do with non-Ruby Sass implementations.

For example, given:

Assuming that screen.css imports _fonts.css, then Nanoc needs to know that there is a dependency, so that if _fonts.css changes, Nanoc knows to recompile screen.css.

Some ideas I have around making this work:

CC @moll

moll commented 6 years ago

This has to be a problem faced by other watcher-style implementation as well. Worse case, it --- getting a list of dependencies --- is certainly something libsass could/should provide.

Fortunately, with a bit of searching, I came upon a commit from 2014 (https://github.com/sass/libsass/commit/2a57715e30f2399638353ab7cfda90014754db3f) supposedly referring to getting a list of included files prior to compilation (by only parsing Sass files). I'm not certain, but the functions after sass_compiler_get_import_stack_size in https://github.com/sass/libsass/blob/master/docs/api-context.md seem to be what we're after. I'm not sure if there's a Ruby gem with direct bindings to libsass that exposes that functionality, but at least it already seems possible without having to go through compilation or source maps.

denisdefreyne commented 6 years ago

That looks like what we need!

There is also sass_option_set_importer which could be useful to handle the way imports work (e.g. allow importing from non-filesystem data sources).

DivineDominion commented 5 years ago

There's sassc-ruby that should be easy to integrate 🤔 https://github.com/sass/sassc-ruby#readme

denisdefreyne commented 5 years ago

@DivineDominion Unfortunately not, because sassc-ruby needs an importer API, and that’s still pending (https://github.com/sass/sassc-ruby/issues/72)

nex3 commented 5 years ago

Heads up: Ruby Sass has officially reached end-of-life.

FYI, we're working on an embedded Sass protocol which will allow Dart Sass to be used within any host environment, including full importer support.

denisdefreyne commented 5 years ago

Hey Natalie, thank you for following up! I’m keeping my eyes open on Sass development and looking forward to having the embedded Sass protocol in place!

jarrodldavis commented 5 years ago

I just got a sassc filter working, including support for source maps and imports: https://gist.github.com/jarrodldavis/72d450c636ffed67a0a8a3c31d261387

Ecco commented 5 years ago

Just a quick sarcastic comment:

Be able to mark items as “always dirty” — and therefore always recompiled, no matter what. Not so nice, but a workable last resort.

Apparently, according to nanoc/nanoc#1451, this was somehow already the case. Yield bad performances though 😄

denisdefreyne commented 5 years ago

Ooh, this is super interesting. Do you mind if I put this in the standard Nanoc distribution?

On Sat, Jul 27, 2019 at 9:19 AM Jarrod Davis notifications@github.com wrote:

I just got a sassc filter working, including support for source maps and imports: https://gist.github.com/jarrodldavis/72d450c636ffed67a0a8a3c31d261387

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nanoc/features/issues/45?email_source=notifications&email_token=AAABQ7KJSSZKW4XD2MBSR6DQBPZJXA5CNFSM4FMMCEN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD26FVGI#issuecomment-515660441, or mute the thread https://github.com/notifications/unsubscribe-auth/AAABQ7NAQTZGZYIWLVTZAC3QBPZJXANCNFSM4FMMCENQ .

jarrodldavis commented 5 years ago

@ddfreyne Sure. Would you like me to make a pull request or do you want to copy it over?

denisdefreyne commented 4 years ago

@jarrodldavis I’ll copy it over! (I need to find a chunk of spare time so I might not get around to it right away.)

benediktahrens commented 3 years ago

@ddfreyne @jarrodldavis : Could you describe how to use the code at https://gist.github.com/jarrodldavis/72d450c636ffed67a0a8a3c31d261387 in an existing nanoc site to switch from sass to sassc? It is probably obvious for those who understand nanoc well, but it is not for me.

denisdefreyne commented 3 years ago

@benediktahrens You can take the contents of the sassc_filter.rb file (in the Gist), and put it anywhere in the lib/ directory of your Nanoc site, e.g. lib/filters/sassc.rb. That should make the :sassc filter available.

I haven’t tested the sassc filter thoroughly yet, and it might not work as well as you’d expect it to.

benediktahrens commented 3 years ago

@ddfreyne : Thanks a lot for the information. With the sassc filter I get

Loading site… done
Captain! We’ve been hit!
Nanoc::Core::Errors::CannotUseTextualFilter: The “Nanoc::Filters::SassCFilter” filter cannot be used to filter the “/stylesheet.sass” item (rep “default”), because textual filters cannot be used on binary items.
Current item: /stylesheet.sass (:default representation)
  0. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/executor.rb:112:in `filter_for_filtering'
  1. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/executor.rb:13:in `filter'
  2. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/compilation_phases/recalculate.rb:32:in `block in run'
  3. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/action_sequence.rb:49:in `block in each'
  4. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/action_sequence.rb:49:in `each'
  5. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/action_sequence.rb:49:in `each'
  6. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/compilation_phases/recalculate.rb:29:in `run'
  7. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/compilation_phases/abstract.rb:23:in `call'
  8. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/compilation_phases/abstract.rb:25:in `block in call'
  9. /usr/local/bundle/gems/nanoc-core-4.11.19/lib/nanoc/core/compilation_phases/cache.rb:25:in `run'
  ... 4 lines omitted (see crash.log for details)
A detailed crash log has been written to ./crash.log.

I'll revert to the obsolete sass for the moment.

denisdefreyne commented 3 years ago

@benediktahrens Take a look here: https://nanoc.ws/doc/troubleshooting/#error-cannot-use-textual-filter. Nanoc by default doesn’t know about the sass extension, and assumes that the files is binary. You can add the extension to the list of text extensions; see https://nanoc.ws/doc/reference/config/#text-extensions.

benediktahrens commented 3 years ago

@ddfreyne : Thanks a lot for the pointer. I had been overly eager in replacing sass by sassc, doing the replacement in text_extensions where it should have remained sass.

Now I am running into another error with sassc:

$ bundle exec nanoc
Loading site… done
Captain! We’ve been hit!
SassC::SyntaxError: Error: Invalid CSS after "$menu_top_space": expected 1 selector or at-rule, was ": 50px"
        on line 2:1 of content/stylesheet.sass
>> $menu_top_space: 50px
   ^
Current item: /stylesheet.sass (:default representation)
  0. /builds/<repo>/content/stylesheet.sass:2
  1. /usr/local/bundle/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
  2. lib/filters/sassc.rb:21:in `render'

This is the beginning of my file stylesheet.sass:

$top_space: 50px
$menu_top_space: 50px
$main_width: 500px
$sidebar_width: 200px
$total_width: 750px
$margin: 10px

$darkblue: #161D5F
$lightblue: #4B54AF
$fadeblue: #656CAF
$green: #4A5705
$lightgreen: #74850F
$palegreen: #B4C264
$red: #8A2710
$darkred: #591505

This might not be the right place to discuss this issue - please let me know if I should stop posting here.

denisdefreyne commented 3 years ago

@benediktahrens I think that’s a bit out of my league. It looks like there might be a distinction between Sass and SCSS, perhaps?

sdalu commented 3 years ago

Look like libsass is also deprecated, only Dart Sass remains. https://sass-lang.com/blog/libsass-is-deprecated

denisdefreyne commented 1 year ago

Here’s a WIP implementation of a dart_sass filter: https://github.com/nanoc/nanoc/pull/1627

gpakosz commented 1 year ago

@denisdefreyne Will this new Sass filter implementation keep being able to @import items by identifier?

denisdefreyne commented 1 year ago

@gpakosz Yes! At the moment, @import '/assets/style/_colors.*' will work (and import from ./content/assets/style/_colors.scss when you’re using the filesystem data source).

denisdefreyne commented 1 year ago

The nanoc-dart-sass gem, providing the :dart_sass filter, now has its v1.0.0 release. I’ll close this issue now; future enhancements (such as sourcemaps) can be added later and could have their own issue in the nanoc/features repository.

See also: https://github.com/nanoc/nanoc/issues/1545.