Best practices for styling a component using shared assets and resources

[nickbalestra]

Moving here an an issue opened by @themoch within the OC repo that seems more specific to the react-template. Original text below

---

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]

Thanks @themoch for bringing this up.
It seems that webpack is not able to resolve and therefore load/bundle the font-file references in the font-awesome.css you importing.

This happen cause at the moment the oc-template-react-compiler's webpack configuration doesn't come with any file loader to handle for example .eot files.

Ad this template is given as an opinionated reference as it will be hard for us to support any desired configuration there are a couple of things we might want to discuss here:

• add file loader support to the webpack config within this template
• rework templates so that will be easier to fork/create your own (this is something you could already do at the moment, but I think we could make it easier and smoother for people to do it, with documentation, blog post, tutorial ecc) - we already discussed this last point

Would love to hear what are your thoughts
cc @kmcrawford @matteofigus @Kimtaro @chriscartlidge @jakeclements

[themoch]

@nickbalestra
Even when I go and add the file loader for various fonts manually (including font-loader) it still cannot find the path. my hypothesis is this:

1. css modules goes and finds the referenced file
2. the file contains a relative path
3. in styles.css the referenced file is imported "as-is" without repointing the reference
4. styles.css is loaded as part of the component
5. a call is made to the relative path ie: ../fonts/font-name.eot from inside the component and, because that path does not exist (because maybe it lives in node_modules and it is not accessible from the root via this path), it fails

As an aside:

This brings up another issue I have been pondering, which is it might make sense to have a configurations file with a node in it for custom webpack loaders. this way if that config exists, the compiler can check and pull in those loaders dynamically similar to how the const for cssLoader is done inside webpackConfigurator.js. It would then be on the user to make sure that the correct loaders are npm installed for their project though.

To my original point though, I am unclear how to best pull in shared assets. I would like to have a method of pulling in just what is needed from these shared assets so as not to have duplication of potentially large files (like fonts, frameworks or style guides).

This method might include having an env var for localhost which injects a configurable list of assets into the style block before styles.css. This way a developer could still develop locally outside of their front-end, but then have those libraries removed once it is in it's final location.