Theme build fails when referencing font files in node_modules

[tomdye]

When building the material theme we wish to reference the material icon font file in node_modules. To do this, we are importing the font files via our font-face definition ie.

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'),
        url('material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
        url('material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
        url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}

Where the material-design-icons folder is within node_modules. When building the theme, the build cannot find these files.

If I add a ~ in front of the file path, the build script can find the files but cannot load them.

[agubler]

A repro for the issue can be found here https://github.com/agubler/dojo-build-theme-external-assets

To reproduce:

1) Clone the project 1) Run npm install 1) run dojo build theme

Using cli-build-app works, this can be seen in the project by running dojo build app.

[agubler]

Error:

./src/theme/failing-theme/Button.m.css
Module build failed (from ./node_modules/@dojo/cli-build-theme/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './material-design-icons/iconfont/MaterialIcons-Regular.ttf' in '~/development/testbeds/failing-theme/src/theme/failing-theme'

[agubler]

I think this is caused by number of things:

1) To support css-loader importing from node_modules without ~ (same as cli-build-app), the command needs to use an older version of the package (matching the version in cli-build-app ideally, 1.0.1). As it seems ~ was made required in later versions. 1) The file-loader should not be restricted to only assets from the theme path 1) A file-loader is required per theme using the "issuer" to test is for the correct theme 1) Update the file-loader configuration to use theme when imported from outside the theme directory, for example node_modules to ensure that the assets are written correctly.

Example build output with the changes:

Example button css output:

@font-face {
    font-family: dojo2BaseTheme;
    src: 
        url(fonts/S2UYQ7E1.ttf) format("truetype"), 
        url(fonts/aCEZMEux.woff) format("woff"),
        url(fonts/211VRmiO.svg#dojo2) format("svg");
    font-weight: 400;
    font-style: normal
}

.Button-m__root__yHTU7 {
    width: 50%;
    height: 50%;
    background: red
}

Built theme css output:

@font-face {
    font-family: dojo2BaseTheme;
    src: 
        url(fonts/S2UYQ7E1.ttf) format("truetype"), 
        url(fonts/aCEZMEux.woff) format("woff"), 
        url(fonts/211VRmiO.svg#dojo2) format("svg");
    font-weight: 400;
    font-style: normal
}

.Button-m__root__yHTU7 {
    width: 50%;
    height: 50%;
    background: red
}

@font-face {
    font-family: Material Icons;
    font-style: normal;
    font-weight: 400;
    src: local("Material Icons"), local("MaterialIcons-Regular"),
        url(material-design-icons/iconfont/3-h-59eA.woff2) format("woff2"), 
        url(material-design-icons/iconfont/2eT-IHtp.woff) format("woff"), 
        url(material-design-icons/iconfont/3yZww5P1.ttf) format("truetype")
}

.OtherButton-m__root__12nW6 {
    width: 75%;
    height: 75%;
    background: #00f
}

.OtherButton-m__input__gHk9a {
    border-radius: 2px
}

WIP Changes

https://github.com/dojo/cli-build-theme/compare/master...agubler:external-assets