test(e2e): add test suite for sass, less and stylus

[pieh]

Description

This is to prevent scenarios like we had with #30038 where we introduced uncaught regression and had to revert

[ch26425]

[LekoArts]

LGTM. I like that you add the color on the wrapping div and test both with normal file + module file 👍

Did you want to to any assertion with hmrConsoleLog?

[pieh]

Did you want to to any assertion with hmrConsoleLog?

Implicit assertions with cy.waitForHmr() after I edit something part - I mostly care about waiting for HMR to finish on browser side so when asserting color change we know HMR did finish there already. I need to spy it myself because that's usually done setup with cy.visit in

gatsby/e2e-tests/development-runtime/cypress/support/commands.js

Lines 88 to 102 in f6d1c09

	// overwriting visit and creating a waitForHmr function to help us deal with HMR
	Cypress.Commands.overwrite("visit", (orig, url, options = {}) => {
	const newOptions = {
	...options,
	onBeforeLoad: win => {
	if (options.onBeforeLoad) {
	options.onBeforeLoad(win)
	}
	cy.spy(win.console, "log").as(`hmrConsoleLog`)
	},
	}
	return orig(url, newOptions)
	})

but I actually don't want to refresh / visit page - I want to make sure I visit once and then rely on HMR updates to see style changes reflected without need to refresh