Mjml: Non .mjml includes doesn't work with watch on cli

[dstN]

Using mjml -w index.mjml -o dist/index.html throws the error "File not found" for the CSS file which is clearly in my directory with following content:

body { background-color: #fff; }

It's also not showing up in my VSC-Preview-Container. If I get rid of the <mj-include path="./css/style.css" type="css" /> withinn the <mj-head> it's both working again (VSC Preview and CLI).

Steps to reproduce:

System: Windows 10 64 Bit
MJML-Core: 4.9.3
MJML-CLI: 4.9.3
Empty directory to start with
index.mjml with following code:

<mjml owa="desktop" lang="en">
  <mj-head>
    <mj-include path="./partials/head.mjml" />
    <mj-include path="./css/style.css" type="css" />
  </mj-head>
  <mj-body>
    <mj-include path="./partials/header.mjml" />
    <mj-section>
      <mj-column>
        <mj-text>
          Hello World
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

The Partials getting included correctly and are working also with VSC Preview, I'm also including a Google-Font in the head.mjml and that is also working without a problem. Just the CSS include is not working.

I don't see where the problem is.

[iRyusa]

Can you provide a minimal repo to reproduce please ?

[dstN]

Can you provide a minimal repo to reproduce please ?

https://github.com/dstN/mjmlBlank

[iRyusa]

Mhh that might be related to watch here 🤔

➜  test-mjml-include yarn mjml -w index.mjml -o dist/index.html
yarn run v1.22.4
$ /Users/maximebrazeilles/test-mjml-include/node_modules/.bin/mjml -w index.mjml -o dist/index.html
Now watching: index.mjml
File not found /Users/maximebrazeilles/test-mjml-include/css/style.css" type="css.mjml from /Users/maximebrazeilles/test-mjml-include/index.mjml
File not found /Users/maximebrazeilles/test-mjml-include/css/style.css" type="css.mjml from /Users/maximebrazeilles/test-mjml-include/index.mjml
File not found /Users/maximebrazeilles/test-mjml-include/css/style.css" type="css.mjml from /Users/maximebrazeilles/test-mjml-include/index.mjml

But

➜  test-mjml-include yarn mjml index.mjml 

Works just fine.

cc @kmcb777 any idea?

[dstN]

But

➜  test-mjml-include yarn mjml index.mjml 

Works just fine.

cc @kmcb777 any idea?

The style-tag itself gets included correctly if you watch here:

but in VSC it is not working in the Preview-Tab (official mjml-extension) and the console also calls it couldn't find the file which is wrong, how did it include the correct styles then?

[iRyusa]

Well that was easy to find https://github.com/mjmlio/mjml/blob/bd9bb7f10235ab473a0279c2768161504eace326/packages/mjml-cli/src/helpers/fileContext.js#L4

This regexp doesn't like the fact the file doesn't end with a .mjml...

but in VSC it is not working in the Preview-Tab (official mjml-extension)

I'm not sure that VSC is on 4.9.x yet

[dstN]

Well that was easy to find

https://github.com/mjmlio/mjml/blob/bd9bb7f10235ab473a0279c2768161504eace326/packages/mjml-cli/src/helpers/fileContext.js#L4

This regexp doesn't like the fact the file doesn't end with a .mjml...

How can I fix this? I have no clue about RegEx :D

but in VSC it is not working in the Preview-Tab (official mjml-extension)
I'm not sure that VSC is on 4.9.x yet

Well without including CSS everything worked just fine.

[iRyusa]

Not like something you can fix on your end yet :/ using .css.mjml might do the trick for now but we need to fix the regexp.

[dstN]

Is there maybe a webpack build or something that has better support for the live prototyping and development on the 2nd screen with hot reload?

[iRyusa]

You can also use Gulp with BrowserSync, MJML App, VSCode extension

[iRyusa]

@kmcb777 we need to discuss about this, it should be easy to fix I think 😬