Babel-cli watch mode

[kevinsimper]

I tried using this together with the babel-cli and it does only extract the CSS when it is run the first time, every later change is not picked up even though babel does transpile the .js files.

I did try enable the devMode but it did not work.

[michalkvasnicak]

@kevinsimper I will look into it but I don't have enough free time these days. :-/

[michalkvasnicak]

@kevinsimper this is probably problem with babel-cli which watches for changes only in javascript files. So it is not aware that css file has changed. In the atom editor, you can trigger change by saving javascript file but in IDE like the Jetbrains Webstorm this will not cause an update because this IDE saves file only if is its content is really changed.

Unfortunately I can't find a way how to force babel-cli to retranspile javascript file according to css file change.

[michalkvasnicak]

Babel is not following imports / requires. Only way to trigger css update is to update javascript file which is importing it.

Unfortunately this plugin is not intended to extract css or to substitute webpack. It should be used with webpack (which watches imports / required).

[kevinsimper]

@michalkvasnicak Okay, that is a bit annoying that babel-cli doesn't do that.

The problem with webpack is that on the server-side there is no need to bundle them all together, but it seems I have to do that if I want to import css.

But thanks for looking into it and now other people also know if they search the issues.

[michalkvasnicak]

@kevinsimper You need webpack only for development purposes. But you can benefit from compiled server side javascript too. It can increase the performance of a server side application by bundling everything except system libraries to one file. This will eliminate file system usage in require calls.

We are using this at work for our siteproject. I created an application (create-js-app) for that to simplify bootstraping of new projects and development. It is highly influenced by create-react-app but is not dedicated only for react development.

There is an universal plugin + simple universal template but you can create your own plugins for your project or technologies. But this package is still under development because it was created as a tool to satisfy need in my company. Feel free to ask anything if you are interested.

[pronebird]

CSS remains the same even if I change corresponding JS file. I can remove generated file and hit save once again, and I get 404, which means that import for styles runs only once.

Log output:

[BS] File changed: build/components/Login.css
[BS] File changed: build/components/Login.js
!!VISITOR: path: undefined
!!ImportDefaultSpecifier: react
!!ImportDefaultSpecifier: ./Login.css
!!ImportDefaultSpecifier: babel-runtime/helpers/inherits
!!ImportDefaultSpecifier: babel-runtime/helpers/possibleConstructorReturn
!!ImportDefaultSpecifier: babel-runtime/helpers/createClass
!!ImportDefaultSpecifier: babel-runtime/helpers/classCallCheck
!!ImportDefaultSpecifier: babel-runtime/core-js/object/get-prototype-of
app/components/Login.js -> build/components/Login.js

But CSS is not being saved into file specified in extractCss

[michalkvasnicak]

@pronebird do you have devMode enabled?

[Undistraction]

I have the same problem. CSS is only compiled on first run. Not when I edit the CSS and not when I edit the JS.

babel src --watch --out-dir lib

And

{
  "presets": [
    "react",
    [
      "env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
  ],
  "plugins": [
    ["css-modules-transform",
      {
        "extractCss": {
          "dir": "./lib/",
          "relativeRoot": "./src/",
          "filename": "[path]/[name].css"
        },
        "devMode": true,
      }
    ],
    "transform-object-rest-spread"
  ],
}

[michalkvasnicak]

@Undistraction yeah @pronebird tried to resolve this in #34 but it is a bit harder than that because we need to rewrite whole css file on every change. This can cause performance problems if CSS is big.

[Undistraction]

I'm trying to get away with using this in place of a much heavier Webpack config, but looks like I'll have to go down that route. Thanks though.

[michalkvasnicak]

@Undistraction resolved in #38 . You can install it using next version to try it. It does not watch the css files but regenerates whole css if you change corrensponding javascript file.

[Undistraction]

Brilliant. Thanks

[michalkvasnicak]

@Undistraction don't forget to set devMode to true. And please it would be really helpful if you try it and checks if everything work as expected so I can merge the PR.

[Undistraction]

I ended up building with Webpack because of this issue, but will try and look on Monday.

…

On Sat, 11 Mar 2017, 15:00 Michal Kvasničák, ***@***.***> wrote: @Undistraction <https://github.com/Undistraction> don't forget to set devMode to true. And please it would be really helpful if you try it and checks if everything work as expected so I can merge the PR. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ20Wi8LUJiJB2AMYAuiigNJPH_cI2Hks5rkrb5gaJpZM4KnMAZ> .

[michalkvasnicak]

Released as 1.2.6 but is not tested properly so bugs can occur.

[pronebird]

@michalkvasnicak I tested it and it works fine. Thanks for this release! 🎉

Important that it won't work with babel's --skip-initial-build since babel-plugin-css-modules-transform needs to scan all sources with CSS imports to find all available CSS classes.

This is currently a major blocker for me to adopt this babel plugin.

As I probably mentioned before, the reason that I use --skip-initial-build is because of browser sync that goes crazy if I transpile sources at the same, and there is no hook to know when initial build is finished so we run separate build, then after: watch (with --skip-initial-build) + browser sync at the same time

[michalkvasnicak]

@pronebird I see. In this case I cannot do anything to improve because --skip-initial-build is basically telling babel to not do anything so this plugin is not used until next build.