Extract static evaluation modules to a standalone package

[giuseppeg]

Hi there friends!

For a CSS-in-JS library of mine I am writing a Babel plugin to extract styles to static. I did some research and it seems that you are doing exactly what I thought I should do to extract those styles.

Would you consider extracting the reusable pieces of https://github.com/callstack/linaria/tree/master/src/babel and make a standalone package? Otherwise I will depend on linaria itself :)

[satya164]

I think we would prefer to keep it in Linaria itself because it allows us to iterate faster, and we don't have a need to extract it out. Feel free to use the module from the linaria package, I think the only part specific to Linaria is the babel transform in the module.js file. But we could move it to a separate method which you could monkey patch or something.

[giuseppeg]

hi @satya164 thanks for the reply! Yeah I totally understand and I don't want to get in your way if that'd make things more complicated. Would there be away to inject those dependencies instead of monkey patching?

Also could you give me a very brief overview of the plugin architecture? Does it go through every Identifier and tries to resolve it with path.evaluate() before trying to determine whether it is an imported one and go and evaluate the module? Do you try to evaluate other things too like CallExpressions? eg importedHelper(someIdentifier_InTheFile_or_imported)? What about other expressions eg. ternaries etc?

Should I use babel/evaluate.js right away and feed the imported Identifier path, babel types and its module path?

[satya164]

Would there be away to inject those dependencies instead of monkey patching?

I think we could change the evaluate function to accept a transform function as an argument, using default arguments for our config.

Also could you give me a very brief overview of the plugin architecture? Does it go through every Identifier and tries to resolve it with path.evaluate() before trying to determine whether it is an imported one and go and evaluate the module?

The plugin doesn't go through every identifier. It tries to evaluate any expression it encounters with path.evaluate() first. But path.evaluate() is very limited, e.g. it will fail to evaluate anything containing a function even if it's in the scope.

Do you try to evaluate other things too like CallExpressions? eg importedHelper(someIdentifier_InTheFile_or_imported)? What about other expressions eg. ternaries etc?

Yeah, the plugin evaluates all kinds of expressions (expect FunctionExpression since we use it for dynamic values).

Should I use babel/evaluate.js right away and feed the imported Identifier path, babel types and its module path?

Yea, you can feed it any expression path. Doesn't have to be an identifier.

[giuseppeg]

oh awesome! @satya164 thanks so much for all the info. Have you tried to use babel-helper-evaluate-path instead of path.evaluate()? It should be a little more powerful but yea it won't work for imported stuff though.

I think we could change the evaluate function to accept a transform function as an argument, using default arguments for our config.

Would you have time to do this or do you want me to put together a PR when I have some free time?

[satya164]

Have you tried to use babel-helper-evaluate-path

I haven't, but maybe we can change path.evaluate to use that instead.

Would you have time to do this or do you want me to put together a PR when I have some free time?

If you can send a PR, that'll be awesome. Otherwise I'll do it when I have some time.

[giuseppeg]

✌️

[giuseppeg]

holy cow it works <3 https://github.com/giuseppeg/style-sheet/blob/master/test/babel/snapshots/index.js.md @satya164 do you clean up the module after evaluation? Like remove referenced expressions that have been resolved or imports/dependencies (I imagine you do this at least)?

[satya164]

@giuseppeg

do you clean up the module after evaluation

The evaluated modules are cached. So subsequent evaluations of the same module will use the cached result instead of re-evaluating. You can manually invalidate the cache when you need (we do it every time we evaluate a file):

Module.invalidate();

Like remove referenced expressions that have been resolved or imports/dependencies

We don't remove them ourselves. They should get removed during minification if not used anymore.

[giuseppeg]

They should get removed during minification if not used anymore.

good point! Thanks again for the help