Best practices for styling a component using shared assets and resources

[themoch]

I was hoping somebody could point me to a good resource for styling components that will be used as part of a greater site. I want to have the component use a shared frameworks (materials), font icons (font-awesome/custom icons), and style guide (colors, paddings, etc.) but not have to load the entire resource every time the page renders a component. I know I can have the page load the css for these resources and then reference a global selector via ex: className={'fa fa-user'} (i'm using oc-template-react). My goal here is to have the component stand alone but still leverage these resources so that I can update them and have them propagate down to the components.

Ideally using something like:

/* style.css */

.myClass {
composes: otherSelector from "http://www.myURL.com"
}

One of the other big issue seems to be when a css file references a relative path. It wont even compile because it cannot find the path which does not exist via the path it is trying to find.

Any help with figuring out the best way to accomplish this would greatly be appreciated.

Who is the bug affecting?

importing external css classes or css sheets that contain relative paths

When does this occur?

During compilation

Where on the platform does it happen?

node cli during the registry build step

How do we replicate the issue?

1. run npm install font-awesome
2. at the top of of the style.css place @import "node_modules/font-awesome/css/font-awesome.css";
3. Save and restart the registry
4. Observe console output Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot'

If I import from a url (http://fontawesome.io/assets/font-awesome/css/font-awesome.css) in the top of styles.css I do not get this problem and everything renders fine, but loads the whole file into the top of style.css.

Expected behavior (i.e. solution)

There should be some way to pull in a single selector from style sheet external to the component so that developers can leverage shared styling assets

What version of OC, Node.js and OS are you using?

[email protected]
Node v8.9.3
Mac 10.13.2 (17C205)

[nickbalestra]

Moved to => opencomponents/oc-template-react#130