jgranstrom/sass-extract

Start babel plugin

Closed this issue · 2 comments

Although @jgranstrom other project, sass-extract-loader does great job as intended it may not always fit all needs.

My case:
I'm managing a bunch of internal company projects that use webpack but under that there's a layer of webpack-less configuration logic which have no access to webpack loaders. All those projects use tleunen/babel-plugin-module-resolver to resolve module aliases. I decided to configure it like that to allow fast parsing without a necessity for starting the entire webpack machinery which - for this use case - is too heavy and totally unnecessary.

Sadly: importing scss files that way is not possible because it's (at least for now) a webpack thing.
I had to move importing scss files using sass-extract-loader to a file that is not accessed using the pipeline I mentioned (which, in turn, is against designed architecture).

For a use case like mine it would be great to have a babel plugin which would do just the same as webpack loader does, yet outside of webpack.

I'm thinking about starting a babel-plugin-sass-extract (or something named in a similar way), or I'm willing to participate in a project of such scope

Thank you for the feedback. I definitely think a babel plugin can be useful in some cases.

There is a bunch of different ways this can be done. It might not be suitable to generate the variable objects in place where they are imported as if the sass files are imported multiple times that would cause a lot of duplication in the compiled code. A better approach might be to generate javascript files next to the the sass file like styles.scss -> styles.scss.vars.js and rewrite the import statements to that path. This way bundlers like webpack can manage how these are packaged into a bundle in a later stage.

I might look into this over the weekend, you are very welcome to join in. babel-plugin-css-modules-transform can be a good reference for a starting point.

I have put up a working prototype here which is also available on npm. Please continue the discussion in that repo.