extract generated css in file(s)

[themouette]

I'm wondering if there is a way to collect generated css in the process and generate it in a single file or in separate files.

I'm using babel-plugin-webpack-loaders for this, but having to setup webpack is a real pain.

[michalkvasnicak]

Sorry there is no way to extract generated css to files at the moment. I can't imagine how should something like that work.

Maybe save css files when babel finishes parsing.

Do you have any ideas how to do that and how config should look?

[themouette]

I do not have deep understanding on how css-modules-require-hook or postcss works.

Since you asked I looked into both and came up with the genuine idea it is possible to leverage processorOpts from css-modules-require-hook and lazyResult.then from postcss.

It might require some addition to css-require-module-hook, so I opened css-modules/css-modules-require-hook#65 just to be sure.

[michalkvasnicak]

Ok, so next question is, how you would configure .babelrc to output css file/files somewhere? Can you provide some example of .babelrc file with this configuration?

[themouette]

I can imagine 3 ways the css might be extracted:

• no extraction
• into a single file
• into separate files

No extraction

no configuration change required

Single Css File

This is my current use case.

{
    "plugins": [
        [
            "css-modules-transform", { 
                "generateScopedName": "[name]__[local]___[hash:base64:5]", // in case you don't want to use a function
                // ...
                "prepend": [
                    "npm-module-name",
                    "./path/to/module-exporting-a-function.js"
                ],
                // Generate a single css file with all content
                "output": "dist/stylesheets/main.css"
            }
        ]
    ]
}

Multiple CSS Files

User might want to keep the directory hierarchy or output all files in a single location.

{
    "plugins": [
        [
            "css-modules-transform", { 
                "generateScopedName": "[name]__[local]___[hash:base64:5]", // in case you don't want to use a function
                // ...
                "prepend": [
                    "npm-module-name",
                    "./path/to/module-exporting-a-function.js"
                ],
                "output": {
                  // path where to place css files
                  "path": "dist/stylesheets/",
                  // filename to use. Available markers are `[name]`
                  "filename": "[name].css",
                  // If true, the relative path will be kept. src/foo/bar.css -> dist/stylesheets/foo/bar/css
                  // Alternative to this would be to provide [path] token to filename
                  "preserveFilePath": true
                }
            }
        ]
    ]
}

[michalkvasnicak]

Thank you :) I'll dive into it in the couple of a days or you can if you have time. We need to find hook which babel calls when parsing is finished and our extraction should be there I think.

[DekusDenial]

I am using babel-plugin-react-intl for one of my projects and like many other babel plugins it extract information during runtime and export them at dedicated location defined in plugin option

see
https://github.com/yahoo/babel-plugin-react-intl/blob/master/src/index.js#L149-L174

[michalkvasnicak]

@DekusDenial thank you! I'll take a closer look, but currently I don't have much time. Maybe in next few days I hope.

[michalkvasnicak]

Hi. So, I made some changes yesterday in pull request #6. But then I encountered few problems:

• in first build using this babel plugin, we'll create css file / files - OK, but Program.enter and Program.exit visitors are called for every javascript file processed by babel, so we can easily create css file for each javascript file, but if we want only single file, we need to append contents to existing file (problem 2).
• in second and next builds, how would you clean existing css files from previous builds? If we are using single output css file, we need to append contents to css file, but if it exists, it will just grow bigger.

Do you have any ideas how to solve those problems? Is there any babel hook which we can use to call something on start and finish of whole processing?

[michalkvasnicak]

https://github.com/michalkvasnicak/babel-plugin-css-modules-transform/blob/extract-css-to-file/src/index.js#L157 there we can easily save styles for each javascript file.

[themouette]

Maybe the concatenation can be done in another part of the build, babel is a transpiler after all, not a bundler.

WDYT?

[michalkvasnicak]

Im my projects I am using webpack for client side build and babel for server side. I don't need to extract css using babel in that case.

What you are proposing is something like a wrapper around babel or something like that if I understand you right.

Why you need something like that? :) What's your use case?

[DekusDenial]

I think @themouette just want to use a single tool for multiple purposes. I have to set up postcss task to extract css-modules and tweak require hook to work on the server side because I have async postcss plugins, which does not work with css-modules-require-hook. If you do webpack for the client, you won't see that problem because it handles everything with the right loaders in chain