How does the creation of the vendor.css file work with addon dependencies

Ember CLI
1

We have an addon that we have created that contains this in its dependencies in the package.json file:

In an application that was using our addon I saw that we also had ember-spectrum-color-picker in its package.json file’s dependencies section so decided to remove it as it was in the addon’s dependencies section. However, the dist/assets/vendor.css file is not getting populated with the styles from ember-spectrum-color-picker anymore. If I add the ember-spectrum-color-picker back into the application’s dependencies section the styles are back in dist/assets/vendor.css.

Is this expected behaviour? When I run the application build and put console logs into ember-spectrum-color-picker’s index.js file when it is only in the addon’s dependencies section I can see it is populating the treeForVendor (or at least running that method anyway), but is this then ignored?

What do I need to put into our addon’s index.js file to make it add ember-spectrum-color-picker’s styling to the vendor.css file? Do I basically need to copy what is in the ember-spectrum-color-picker’s index.js file into our addon’s index.js file?

1 Like
2

For the time being I have added the following to our addon’s index.js file:

included() {
    ...

    // Ideally the style would be added to the application's vendor.css file, but because
    // ember-spectrum-color-picker is a dependency of this addon it doesn't seem to be added
    // so we have to manually import the style file here.
    this.import("node_modules/spectrum-colorpicker/spectrum.css");

    ...
}

...

treeForVendor(vendorTree) {
    trees = [];
    ...

    // Ideally the style would be added to the application's vendor.css file, but because
    // ember-spectrum-color-picker is a dependency of this addon it doesn't seem to be added
    // so we have to manually add the style file to the tree here.
    // Spectrum-colorpicker.
    const spectrumColorPickerTree = new Funnel(
        path.join(this.project.root, "node_modules", "spectrum-colorpicker"), {
            files: ["spectrum.css"]
        }
    );
    trees.push(spectrumColorPickerTree);

    ...
}