ember-component-css icon indicating copy to clipboard operation
ember-component-css copied to clipboard

Help if you have time: tree-shake out some ember-component-css styles files

Open Leooo opened this issue 6 years ago • 2 comments

Hi there, not an ember-component-css issue I think, but still a question related to using this addon together with other ones.

I'm in the process of creating an addon with several slots-picker components, where the consuming apps can pick up only those they want to use using tree-shaking based on broccoli-funnel etc.

I didn't manage to do the tree-shaking in my addon run before ember-component-css's _allPodStyles is set. So when I use @import "pod-styles" in it fails as it's looking for files that I have excluded from my tree-shaking. Instead I found a dirty hack where I do an @import (optional) of each of my component's stylesheets in addon.less instead of @import "pod-styles", but it's not ideal.

Any idea of a better way of doing that? Thanks a lot.

Leooo avatar Dec 02 '19 15:12 Leooo

how are you including the other style files you have imported? or do those get picked up automatically with broccoli-less?

webark avatar Dec 02 '19 18:12 webark

We are using ember-cli-less so I guess it imports automatically addon.less yes (all other style files are now imported from addon.less). Also I'm making sure that addon.less is always in the included files in my index.js tree-shaking.

Now the tree-shaking settings for our addon are done through the ember-cli-build of the consuming apps. One example:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const EmberAppOptions = require('ember-commons/lib/broccoli/ember-app/options');

module.exports = function(defaults) {

  const options = EmberAppOptions;

  options.fingerprint = {
    enabled: true,
    generateAssetMap: true
  };

  options['ember-appointment-slots-pickers'] = {
      bundles: {
        exclude: ['bg', 'mobile', 'cards']
      },
      exclude: [
        /clock-reloader/
      ]
    });

and the options['ember-appointment-slots-pickers'] part is handled by the different treeForXX hooks in the addon and additional broccoli-funnel trees / funnels. Unfortunately those hooks seem to be run after ember-component-css's ones.

I thought looking at your comment in here of trying to load the addon before ember-component-css does, but it's not solving the issue.

Leooo avatar Dec 02 '19 20:12 Leooo