esnunes / riotjs-loader

riotjs module loader for webpack
MIT License
103 stars 41 forks source link

Are custom parsers possible? #35

Open JosephScript opened 7 years ago

JosephScript commented 7 years ago

Is there any way to add a custom css parser using this loader? For example:

preLoaders: [
      { 
        test: /\.tag$/,
        exclude: /node_modules/,
        loader: 'riotjs-loader',
        query: {
          type: 'es6',
          style: 'myparser',
          parsers: {
            css: {
              myparser: (tagName, css) => {
                return css.replace(/@tag/, tag)
              }
            }
          }
        }
     }
    ]

I've tried a handful of things, and always get the error Module build failed: Error: Riot parser "css. myparser" is not registered. when including the style type <style type='myparser'>.

Thanks!

JosephScript commented 7 years ago

I've updated to webpack 2 so the loader looks different (pre instead of preLoaders for example), but I've also tried both of these ways. According to the docs the compiler (http://riotjs.com/guide/compiler/) should accept either one of these to allow me to transform the css within the functions, but they're never executed. I see them being passed into the riot.compile function though, like expected:

module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.tag$/,
        exclude: /node_modules/,
        loader: 'riotjs-loader',
        options: {
          style: 'myparser',
          parsers: {
           css: {
               myparser: function (tagName, css, opts, url) {
                 var res = sass.renderSync({ data: css })
                 // do work here
                 return res.css.toString()
               }}},
          parserOptions: {
            style: function (tagName, css, opts, url) {
              var res = sass.renderSync({ data: css })
              // do work here
              return res.css.toString()
            }
          }
        }
      }
]