[bug] bud-postcss with SugarSS not working

[hybridvision]

Agreement

• [X] This is not a duplicate of an existing issue
• [X] I have read the guidelines for Contributing to Roots Projects
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

I've been unable to get SugarSS to work with Bud (bud-postcss) despite many attempts and extensive searching. 🤯

This may be more of a documentation issue than an actual bug but since the official docs hint at SugarSS being supported in bud-postcss, I thought it was worth reporting.

What is required to make SugarSS work with Bud and more specifically, with Sage?

Bonus: on the Roots Discourse, there's this unanswered post about SugarSS

Expected Behavior

I expect that SugarSS files (*.sss) to be processed correctly, much like Sass.

Actual Behavior

Running yarn build, I get the error Module parse failed: Unexpected token (1:0)

Steps To Reproduce

1. Installed bud-postcss (yarn add @roots/bud-postcss --dev)
2. Created app.sss and put some simple SugarSS code in it
3. In bud.config.js, added app.sss as an entry point and set app.postcss.setParser('sugarss') and app.postcss.setSyntax('sugarss')

(the above is done from a Sage installation)

I imagine I'm missing something important but I can't figure out what that is. Any pointers would be appreciated and while we're at it, maybe we can improve the documentation :)

version

6.23.3

Logs

No response

Configuration

No response

Relevant .budfiles

No response

[kellymears]

This is not a bug; it is a feature request. Does sugarss not work with the standard .css extension?

bud.js doesn't parse .sss files by default, and postcss isn't going to be applied to .sss files. It sounds like you have configured postcss with the appropriate parser, so your next step is likely to see if it works in a .css file.

If it does, and you want to use the .sss extension, you'll need to configure the css build rule accordingly:

app.build.rules.css.setTest(/\.sss$/);

Full support would be best handled in an extension, with a new rule added that applies sugarss only to .sss files. See documentation on adding a new rule here: https://bud.js.org/learn/general-use/customizing-loaders#rules.

It's probably something like:

app.build.setRule(`sss`, {
  include: [({path}) => path(`@src`)],
  test: /\.sss$/,
  use: ['precss', 'css', 'postcss'],
})