Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Leooo opened this issue Dec 2, 2019 · 2 comments
Open

Comments

@Leooo
Copy link

Leooo commented Dec 2, 2019

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.

@webark
Copy link
Owner

webark commented Dec 2, 2019

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

@Leooo
Copy link
Author

Leooo commented Dec 2, 2019

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.

@webark webark pinned this issue Dec 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants