Multiple global styles on stencil

[dgesteves]

I am trying to use multiple files to separate all the different kind of pallets, but when i am trying to use globalStyle:[ ' ...' ,'...' ......] i can't because it only accepts a string. How can i set multiple global files?

[peiris]

@EstevesDiogo You can include all your partial files in a single global scss file and include that global scss file with globalStyle[]

[dgesteves]

Thank you @peiris

[rtpHarry]

this can be closed?

[davejsdev]

Can we revisit this? Here's our use case:

We'd like to ship multiple components with a global stylesheet for each one.

Why not just use styleUrl in the component decorator? We want to let the consumer of the component decide if they want to import the default styles we've defined, or write their own custom styles.

[peiris]

Can we revisit this? Here's our use case:

We'd like to ship multiple components with a global stylesheet for each one.

Why not just use styleUrl in the component decorator? We want to let the consumer of the component decide if they want to import the default styles we've defined, or write their own custom styles.

@davidleger95 I had this use-case. What I ended up with is, I styled each component with css-variables for crucial properties. that way, If I want to customize the styles of the component, I could always override the css-variable value from wherever I use the component.

[peiris]

@Component({
  tag: 'kpw-blog-card',
  styleUrl: 'kpw-blog-card.scss',
  shadow: false
})
export class KpwBlogCard {
  @Prop() hasTitle = false;
  @Prop() hasImage = true;
  @Prop() hasTags = true;
  @Prop() heading = 'Blog card heading';
  @Prop() imageHeight = 380;

:root {
  // KPW block vars
  --kpw-block-card-bg-color: transparent;
  --kpw-block-card-padding-top: 24px;
  --kpw-block-card-padding-right: 24px;
  --kpw-block-card-padding-bottom: 24px;
  --kpw-block-card-padding-left: 24px;

  --kpw-block-card-heading-margin-bottom: 10px;
  --kpw-block-card-heading-font-size: 24px;
  --kpw-block-card-heading-line-height: 24px;
  --kpw-block-card-heading-font-weight: 800;
  --kpw-block-card-heading-color: #43DBF1;

  --kpw-block-card-desc-font-size: 14px;
  --kpw-block-card-desc-line-height: 18px;
  --kpw-block-card-desc-font-weight: 400;
  --kpw-block-card-desc-color: #000000;

  --kpw-block-card-border-shape-width: 100px;
  --kpw-block-card-border-shape-height: 100px;
  --kpw-block-card-border-shape-border-size: 3px;
  --kpw-block-card-border-shape-border-color: #43DBF1;
}

.kpw-block-card {
  position: relative;
  padding-top: var(--kpw-block-card-padding-top);
  padding-right: var(--kpw-block-card-padding-right);
  padding-bottom: var(--kpw-block-card-padding-bottom);
  padding-left: var(--kpw-block-card-padding-left);
  background-color: var(--kpw-block-card-bg-color);

  // Heading
  &__heading {
    margin-bottom: var(--kpw-block-card-heading-margin-bottom);
    color: var(--kpw-block-card-heading-color);
    font-size: var(--kpw-block-card-heading-font-size);
    font-weight: var(--kpw-block-card-heading-font-weight);
    line-height: var(--kpw-block-card-heading-line-height);
  }

Component stylesheet gets a bit too large & ugly sometimes. But it gets the work done. @davidleger95

[davejsdev]

Thanks for the suggestion @peiris, however, we've already been down the CSS variables road 😅

Here's our current theming system using CSS variables: https://ui.sandbox.manifold.co/advanced/theming

We decided to step away from shadow DOM and just namespace all our classes to allow full customization without having to maintain variables for every property. Really hoping the Shadow Parts spec gets into Safari soon! Then we'd be set.

[SheepFromHeaven]

I would like to push this ticket. There are usecases, where you want to have multiple css files. E.g. we have to provide the default bundle.css but also an extra css file with styles only being loaded in the CMS environment, to adapt the positions of editor bars etc.

[reda-alaoui]

I think this issue relates to https://github.com/ionic-team/stencil/issues/2550 . The associated PR was rejected 😢

[SheepFromHeaven]

@adamdbradley as you rejected ionic-team/stencil#2552 and you seemed to have thought about multiple css files, do you have by any chance also a solution for this case I mentioned?

[claviska]

For context, the PR was closed with the following comment.

Sorry, but originally this is how we have the global styles and eventually decided it was better for the compiler to just have one global css file entry for the index file to include. This way prerendering knows which file to optimize and the filename it's going to use. Instead we recommending having one global css file, and from within that file you can add multiple css imports. The css imports will be grouped together, rather than separate http requests. Thank you for the PR, but decided to close this for now.

I'm not suggesting the use cases mentioned above are invalid, but this issue wasn't closed without thought. If you want to push forward with this, it will help to open a new ticket on Stencil's issue tracker — this one is for Stencil's website.

[janrembold]

As this is still open I would like to give it another perspective. I have a problem that could simply be solved with multiple global stylesheets.

We (sadly) need to support IE11 but heavily depend on different themes for our components. Usually I would simply use scoped CSS custom variables that works smoothly in all modern browsers. But for IE11 we need to add the css_vars_ponyfill. This also works pretty good but not for scoped :root selectors. So writing all the themes in a scoped way into a single file doesn't work here.

So the simplest idea I came up with would be to configure multiple global style entry points like ["global/theme1.scss", "global/theme2.scss"]that all contain a :root selector with all variables relevant for the given theme. With those outputs it would be as simple as including the correct theme stylesheet into the website/application.

Or are there any solutions for such a scenario that doesn't smell hacky or like a dirty workaround?

[oncode]

I also have a use case where I would like to have a variables.css with the css properties and a fonts.css with the font files inlined. In this way I could give the library consumers the option to load the fonts with their own strategy and only include the variables.css file.

@janrembold We also have different themes. I define a theme class and overwrite the variables there. To get it working in IE11, I had to use the class on the html tag, otherwise it didn't work. I used the ie11CustomProperties polyfill though.

[alexandertrefz]

I have the same font-loading use case. A simple list of global files would do the trick, as well as enable most of the other needs discussed in this thread.

[rwaskiewicz]

👋 I apologize that this issue hasn't been officially acknowledged by a member of the team and has sat in limbo while https://github.com/ionic-team/stencil/pull/2552#issuecomment-662718565 was closed. At this time, we don't plan on pursuing this feature request. As a result, I'm going to close this out to keep our stance consistent with https://github.com/ionic-team/stencil/pull/2552. Thanks!