Pass options to transforms

[derekr]

I didn't see it documented, but is there a supported way of passing options to a transform?

Similar to how browserify handlers is:

$ browserify main.js -o bundle.js -p [ parcelify -o bundle.css -t [ sass-css-stream --some-opt ] -d . ]

[dgbeck]

Hi @derekr ! Thanks for the question.

You can't pass transform options from the command line, but you can do so through the API by wrapping the transform in another function. For example,

var t_scss = require( 'sass-css-stream' );

p = parcelify( browserifyInstance, {
    appTransforms : [
        function( file ) {
            return t_scss( file, { includePaths : [ path.resolve( __dirname, 'sass-mixins' ) ] } );
        }
    ]
} );

Let me know if that doesn't work for your needs!

[mediafreakch]

@dgbeck Can options be passed in the package.json and if, how?

So far I have this:

{
   "transforms": [ "less-css-stream"]
}

[dgbeck]

HI @mediafreakch !

Right now there is no support for passing transfer options via package.json. Clearly if we were to add support, we could only support options that could be represented in json, which feels quite limited to me. Also, any way you cut it, the syntax would be kind of awkward.

What option specifically do you need to pass to less-css-stream?

[dgbeck]

Off topic, but @derekr just saw you on this ticket and remembered we have a pending coffee ! Hit me up via email !

[mediafreakch]

@dgbeck I was looking to pass some more paths to resolve @import statements correctly. I see that json-only representation might anyway not provide the flexibility I'm looking for. I'll try some other things.

Thanks for the fast reply!

[tjaartvdwalt]

I would like to see this issue reopened. I will try to explain why.

The Parcelify README states:

The safest and most portable way to apply transforms like sass -> css is using the transforms key in a package's package.json.

I agree with this, but being unable to pass options to the transform seems very limiting.

To solve this issue i would copy Browserify.

Passing arguments to transforms and plugins:

For -t, -g, and -p, you may use subarg syntax to pass options to the transforms or plugin function as the second parameter. For example:

-t [ foo -x 3 --beep ]

This is for the command line, but there is an equivalent syntax for package.json. I cannot seem to find the definition now, but if I look at previous examples I have written, I believe the example above would become:

  "browserify": {
    "transform": [["foo", {"x": 3}, "beep"]]
  }

[dgbeck]

Hi @tjaartvdwalt ,

Can you give an example of a case in which this would be useful?

I am still stuck on the following problems

1. The syntax is very awkward.
2. Options expressed in this manner would be limited to constants that can be represented in json, which would severely limit the cases in which this approach could be used.

An inventory / better understanding of real use cases could help.

Note that you can also define a transform in a .js file that is local to the package, so there is no requirement that global transform must be used when options need to be passed.

package.json:

{
  "transforms" : [ "./myWrappedTransform.js" ]
}

myWrappedTransform.js:

var t_scss = require( 'sass-css-stream' );

module.exports = function( file ) {
   return t_scss( file, { ... options ... } );
}

[tjaartvdwalt]

@dgbeck ah thank you, that helps a lot. I did not realize that you can define a transform using a .js file like your example. That would negate the need for me to define the configuration in package.json