Covalent: Exported components should be usable without importing platform.css

[dbettini]

When using angular/material2 components, it's only needed to import the module for a specific component, and use a theme (custom or prebuilt). When using covalent for components that are not implemented in angular/material2, like steps for example, the styling is broken unless '@covalent/core/common/platform.css' is included. Why is this the case? Or am I doing something wrong? The reason why this is a problem is because that css can conflict with other, existing style rules throughout the app, so it's not an option.

Expected behavior: custom covalent components should be usable separately, just like angular/material2 components are, with full component style implementation existing in the component style.

[emoralesb05]

Is it conflicting?

material does somewhat the same but its implicit because they do @include mat-core() which includes their core css styles.

In our case, we do it explicitly and have more utility classes to help out with development (which we leverage in our components)

That being said, if you have any rules that are clashing, please let us know which ones so we can try and make the classes more unique.

But for the most part you can leverage them too if you want to. Which include almost everything in:

https://teradata.github.io/covalent/#/style-guide

I do agree that the components should be able to be stand alone to some degree. Or maybe a way to include only the utilities you need on demand.

[dbettini]

Let me describe in more detail what I'm talking about, since maybe this wasn't the anticipated use case in the first place. For example, I'm using angular/material directly for card, and then using covalent for steps. So, I do:

import { MdButtonModule, MdCardModule } from "@angular/material";
import { CovalentStepsModule } from "@covalent/core";

import "@covalent/core/common/platform.css";
import "@covalent/core/theming/prebuilt/blue-orange.css";
// import "@angular/material/prebuilt-themes/deeppurple-amber.css"; // covered by covalent

What happens is, platform.css has this inside, which is a more specialized selector, so it overrides .mat-card styles coming from md-card component, making the padding 0 etc.
My expectation was that all components are usable by themselves, without having to use platform.css, just like angular/material components are. Having a global style mandatory in the app seems like it beats the purpose of using isolated modules in the first place. Thoughts?

[emoralesb05]

Well, the .mat-card thing was actually intentional, but i agree that people might not want it. At the time it made sense since md-card by default uses negative margins.

You do bring up a good point which we ignored (forgot) for a while since we got used to using the platform.scss and its been that way since we were alpha.. which is to make the modules truly modular.

Im gonna keep this issue as an epic for that. Thanks for the heads up!

[emoralesb05]

Closing this epic since now platform.scss is optional, but you can still include it if you want the layout, utility classes, etc etc