riot.js

const compiler= require("@riotjs/compiler")
const sass = require('node-sass')
const stylus = require('stulys')
import IF_COLORS_SUPPORT from '@guybrush/color/src/support';

compiler.registerPreprocessor('css', 'sass', function(code, { options }) {
    const { file } = options;
  
    console.log('Compile the sass code in', file);
  
    const result = sass.renderSync({
        file,
        data: code
    });
  
    return {
        code: result.css.toString(),
        map: null
    };
});

// or stylus

compiler.registerPreprocessor('css', 'stylus', function(code, { options }) {
    const { file } = options;
  
    console.log('Compile the stylus code in', file);
    const styl = stylus(code);
    const result = styl.render();
  
    return {
        code: result.toString(),
        map: null
    };
});


const { code } = compiler.compile(`
<my-component>
    <p>{ message }</p>
  <style type="sass">
p {
    color: ${IF_COLORS_SUPPORT.blue.rgb}
}
  </style>
  <style type="stylus">
p
  color ${IF_COLORS_SUPPORT.blue.rgb}

  </style>
  <script>
    export default {
      message: 'hello'
    }
  </script>
</my-component>
`)

console.log(code)