Sage "9.1": Please test

sage
63

Recent dart-sass, which is now the reference SASS implementation, has deprecated the use of / for mathematical divisions, hence warning about its usage. When you don’t want to see these warnings, you have to disable them for dart-sass.


Edit: The quietDeps options should do exactly that - but sadly I found no way yet to enable it:

65

Me neither. Only solution I can come up with is donwgrading to sass 1.32.

//package.json devDependencies
"sass": "~1.32.0",
66

So the reason for why quietDeps option doesn’t prevent these deprecation notices is that the dart-sass JavaScript API currently doesn’t support the quietDeps option, even when sass-loader is passing it correctly to it.


With support for quietDeps added and a new release of dart-sass published, the issue should go away.
67

& @strarsis
Are you saying this should show me js/css errors in the console and browser? I’m familiar with using whoops for PHP debugging but I’m not sure we’re talking about the same thing here.

68

You mean the filp/whoops thing? Yes, I added it as a dependency to the update branch. Apparently requiring it is enough for using it. So when you use the latest update branch or require it yourself with composer, the improved error pages should show up.

69

yes, @Ekeler whoops is just for PHP, not js/css - js and css are handled by the linters in the build tool. Maybe I missed where css/js was mentioned in the conversation. I like having the visual PHP errors in the browser though.

@strarsis really? I actually had to add a function to get whoops working with sage 9.1

     /**
     * Whoops debug
     */
    function registerWhoops() {
      $whoops = new \Whoops\Run;
      $whoops->pushHandler(new \Whoops\Handler\PrettyPageHandler);
      $whoops->register();
    }
    if( WP_DEBUG ) registerWhoops();
70

You mean the friendly-errors-webpack-plugin?


It had to be removed for now as it is unmaintained and it is not compatible with webpack 5.
71

Yeah, I generally use WPS (GitHub - Rarst/wps: WordPress plugin for whoops error handler.) as a WP plugin for PHP error handling, that implements the whoops package as well. Installing it through composer is a better idea actually, though it doesn’t seem to work for me by just adding it as a dependancy. This is a different issue however than what I was previously alluding to so there might have been some miscommunication. In the official Sage 9 branch, whenever there are errors in SCSS or JS linting and the theme won’t compile, there is an error message that shows up full screen as a browser overlay and in the terminal on the watch process. Right now for me, it doesn’t show those but just doesn’t build which makes it very confusing to troubleshoot issues and I have to run “yarn lint” manually. Maybe I’m doing something wrong or is there a flag I’m missing?

72

@Ekeler; @erit: Alright, I re-added the Friendly-errors-webpack-plugin from a maintained, webpack 5-compatible fork.
@Jan-Klaas: This also solves the issue with latest dart-sass logging deprecation notices that can’t be disabled yet, as the plugin first clears the console and then prints the errors/warnings only.

73

Yes, amazing thank you so much! This new whoops implementation actually still doesn’t work for me but I haven’t tried it on a fresh project yet so it might be on me, I’ll keep using the WP plugin until I start a new theme.

74

Is it safe to change bootstrap to 5.0.1?

“dependencies”: {
“bootstrap”: “v5.0.1”,
}

I need the off canvas component :grimacing:

75

Yes, the recent update branch for Bootstrap 5 uses the stable Bootstrap release 5.0.1 (https://github.com/roots/sage-installer/pull/43/files#diff-bc95764a4ae20956139c7a6e0bd41a0e350be4204f461daa66b98d8a0b78830dR10).
So you can safely update to it. You also have to require @popperjs/core ^2.9.2' (https://github.com/roots/sage-installer/pull/43/files#diff-bc95764a4ae20956139c7a6e0bd41a0e350be4204f461daa66b98d8a0b78830dR11).

1 Like
76

Some of the reported stylelint errors could stem from a default stylelint ruleset that became too strict and split from the SCSS rules over recent releases.
See this great explanation from a stylelint member:

78

Update: New dart-sass just releasing now that supports the quietDeps option.
See this response (thanks to @nex3):

79

@strarsis Moving over to this version worked great! Handles everything as I would expect. Thank you! One thing I miss, kinda is stylelint on my watch config. Any Idea how I can add to my watch command/config?

80

watch doesn’t lint? If it had in Sage 9.x master, it should of course also lint on update branch.
I have to test it myself.

81

Watch does not lint, only lints on build. I typically have to run the lint command before pushing.

82

Hello @strarsis - and thanks for all this work - seems to have resolved a lot of problems that I was having. One issue that seems to be persistent is that my @font-face fonts aren’t loading. I’ve changed the directory from url("…/fonts/fontname.woff2") to url("/fonts/fontname.woff2") per an earlier comment in this thread so the build error is gone and the font is showing up in dist/fonts - but not loading through the css - browser showing net::ERR_EMPTY_RESPONSE. Have tried rebuilding, restarting and various other things - any help appreciated!

Also - previously I was using yarn build and yarn start - this post uses npm - any reason why?

Reading the above post from @diomededavid I notice that stylelint is missing too.

On MacBook Pro using Local for the server with bootstrap 4.6.

83

Some possible issues. Styllint is helpful, but will most likely not solve the issue you are having.
Just sone thoughts:

  • Is the font error because there is an error in your css and it is moving the front files to the public folder?
  • Try running lint, or lint:styles?
  • Try running build on your local to ensure assets are accessible to the site?

Also with he new version you can use the latest version of BS 5, which may or may not help depending o how far you are along in your project.

I

84

Hi @diomededavid - thanks for your reply. Have tried everything I can think of. The font was loading fine previously (with the 9.0.x Sage instal). Did a couple of builds and restarts, changed the URL, re-wrote the CSS etc. I normally use font serving services though so this is my first go with @font-face so not particularly familiar with it. Followed advice on this forum to work out best practice for calling the files. The browser error is showing the correct path for the dist/fonts/ directory and the files are in there - just not loading with err::ERR_EMPTY_RESPONSE - so I’m assuming the resources aren’t loading with the browser sync magic.

I shall try again later today with fresh font files, rewritten CSS, a rebuild and a reboot thrown in for good measure.

UPDATE: Resolved - the font file had a hyphen in the name - thought that wouldn’t matter -apparently, it does! What a waste of half a day.

1 Like