ember-component-css
ember-component-css copied to clipboard
webark
Allow importing of styles and SASS maps from an addon into an app
Currently, I keep my styles in the app directory, so that I can allow the consumers of my addon to import them and override the styles with a SASS map. I would love support for this with this addon!
I talked to @webark about it in another issue, and agreed to open this enhancement request.
@webark I wanted to give this a bump. I don't know anything about broccoli or how to learn about broccoli, but I would assume this would just be a switch between using exclusively the addon tree, and using the app tree instead, if app/styles folders exist, rather than looking for addon.scss. If someone could help me on the right path to figuring this out, I am happy to play with it, I just need some direction 😄
@rwwagner90 i'll try to look into this, and garner enough information to layout a plan soon.
@webark thanks! Given any sort of direction on where to start digging or what to do, I am happy to put in work playing with it, I just don't know how to begin figuring out what to do here.
@rwwagner90 you may find this useful http://www.oligriffiths.com/2017/01/26/Eat-your-greens-A-beginners-guide-to-Broccoli-js/ 🤓
Just wanted to chime in and say that I would also like to have this support. @rwwagner90, have you been able to make any progress on it?
the rewrite that is under way could allow for this facilitation more.
A example of what you are looking for would also be helpful in fully understanding the desired functionality.
@webark the desired functionality is to use a sass map to override variables like we do in https://github.com/shipshapecode/ember-3d-nav#styles
Everything from the addon tree gets compiled to CSS and dropped in vendor, so we can't let the user @import the styles or override variables via a sass map currently. Ideally we can still have addon/components/my-component/styles.scss for styles for that component, but do not compile to CSS and merge into vendor.css, rather let the consuming app import the styles and override variables via a sass map.
hmm.. never used sass maps before. I'll look this over this weekend and get back to you.
@webark I'm open to other ways of passing and overriding variables, but the main idea is allow the consuming app to override variables, so they can change things like base theme colors from the addon, while keeping core styles in tact, and not needing to write a bunch of manual CSS overrides.
@rwwagner90 have you found a way to override the variables in the consuming app?
we’ve been doing our theming with css vars and just been letting ie11 rely on what you can polyfill (which is a good portion).. 😬 so we haven’t had a need for this, so i haven’t looked into it much :/
Thanks for the feedback. I'll see if we can go with the css variables too
I personally just like the syntax of scss instead of css variables, but I suppose css variables is the better, cross platform solution for the long run.
the ability to set a variable in the dom elements “style” attribute and have that get applied in that scope is a deal maker for me.
You just can’t do that with a preprocessor.