Making SugarSS syntax work with Bud

bud
1

Hello!

As a former Stylus user, I’m in search of a more modern alternative for use with Sage / Bud. My research has lead me to SugarSS, which seems to fit the bill nicely but despite several hours of trying, I haven’t been able to get it to work.

Here’s my setup and what I’ve tried so far with a fresh install:

  • Sage (10.3.1)
  • Bud (6.6.1)

I added SugarSS like so in my Sage theme folder:

yarn add --dev sugarss

Next, I proceeded to get thoroughly lost with the constantly-evolving way of doing things in the Javascript ecosystem :exploding_head:

I don’t know if this is the best approach (reference) but since I just want to add *.sss support, I put the following in my bud.config.mjs:

app.build
    .setLoader('sugarss', 'postcss-loader')
    .setItem('sugarss', {
        loader: 'sugarss',
        options: {
          postcssOptions: {
            parser: 'sugarss',
        },
      }
    })
    .setRule('sugarss', {test: /\.sss$/, use: ['sugarss']});

I also set a test entry point for my test.sss file:

app.entry({
      test: ["@styles/test.sss"],
})

And this is what is in test.sss:

.test
    color: red

    .zzz
        color: green

When I run yarn bud build, I get the following error:

✘  sage ./public [76f545a0a799cdfe2ea5]
│
├─ ✘ error
│ Module parse failed: Unexpected token (1:0)
│ File was processed with these loaders:
│  * ./node_modules/postcss-loader/dist/cjs.js
│ You may need an additional loader to handle the result of these loaders.
│ > .test {
│ |     color: red;
│ |

From what I can see, the SugarSS syntax is being converted to CSS (note the brace and semicolon) but what I can’t figure out is why postcss-loader is choking on it… :thinking:

I think I need to take a step away from this now but I’d really love to get it working. I don’t want to give up and have to use SASS instead.

If anyone can give me any pointers, it would be much appreciated!

Thanks!