Styled attribute styles with multiple entries

[dpoerschke]

At first 'mange tak!' for this cool project @silind :-) I'm not sure if this is a bug - just in case that it is not can you please consider it as feature request? Otherwise: what could be a solution to this problem?

Describe the bug
When using multiple entries for styles-attribute of Styled-Element only the last one is used, the first will be ignored:
<Styled styles={styles, semanticui}>

To reproduce
Steps to reproduce the behavior:

1. Create simple project via 'direflow create', 'npm install' as described here: https://direflow.io/get-started
2. Add semantic-ui-css via 'npm install semantic-ui-css'
3. Add import of that css to imports in App.js:

...
import styles from './App.css';
import semanticui from 'semantic-ui-css/semantic.min.css';   <--- This is new
...

4. In line 22 of App.js add semanticui to the list and a ui-component at the end:

...
return (
<Styled styles={styles, semanticui}>
      <div className='app'>
...
         <div class="ui label">
           <i aria-hidden="true" class="mail icon"></i>
           Test
         </div>
      </div>
</Styled>
...

Expected behavior
Both styles, 'styles' and 'semanticui', should take effect.

Package Manager:
To install Direflow, I used npm

Update 1:

As a workaround I'm currently using the external-loader (https://direflow.io/plugins#external-loader) to load semantic via CDN instead of packaging it with my react-component. The only problem is that with this workaround no icons (semantic includes fontawesome) are displayed.

Update 2:

Just adding
import 'semantic-ui-css/semantic.min.css';
at the top of App.js is not working as well when using direflow. In my original react-app it is working that way.

[SimonHoiberg]

Hi @dpoerschke! 'Tak' for showing interest in Direflow and creating this issue 🙂

This is not a bug. The <Styled> wrapper component takes one set of styles in the styles prop.
Using a comma separator inside a code block of JSX is not a valid syntax.
What you would want to do is pass an array to the styles prop, something like:

<Styled styles={[ styles, semanticui ]}>

However, that is not currently supported either, but could be a nice feature.
I'll change this one to a feature request and include this in a future release 👍

Solution

To get a solution going at the moment, try stringifying both styles and concatenating them.
You can do that shorthand like this:

<Styled styles={`${styles} ${semanticui}`}>

It's not quite as pretty as the array-solution, but it should work.

Update 1:

Yes, the external-loader can partially solve this problem, however, it is best to import the .css as a module which will be built into the bundle at compile-time, rather than loaded at runtime.
Also, as you mention, icons may be a problem.

Update 2:

Under normal circumstances, this would work, yes.
But since a Web Component is built to be completely self-contained, it cannot be depending on an external css-file at runtime.
The css needs to be "baked" into the DOM of the Web Component, which is exactly what the <Styled> wrapper component does.

I hope this clears things up a bit 😊

[dpoerschke]

Thank you very much for your explanations @silind and for changing this to a feature-request 🙂 Your solution

<Styled styles={${styles} ${semanticui}}>

worked (the result is the same as with the external-loader approach). The only thing left which gives me a headache now is the problem regarding semanticui's missing icons. Since you wrote..

it is best to import the .css as a module which will be built into the bundle at compile-time

..I added semantic.min.css and icon.min.css now directly to my project instead of using a npm-package (I hope I did not misunderstood you):

import semanticui from '../semantic.min.css';
import icons from './icon.min.css'; // belongs to semantic-ui

... after that I got compile errors because the font-files where missing (sure, I expected that). I added those fonts as well to the project and the error-messages dissapeared. But after reloading the page in the browser the icons are still missing (that surprised me). Is it possible that direflow ignores font-files referenced by css-sheets? At least the given info in the doc makes me guess so (I know, it's about external-loader but maybe the styles-attribute of Styled works similar.. I don't know):

The external-loader plugin allows us to load external resources and include them in the Direflow Setup. Paths must consist of either css or js files.
(https://direflow.io/plugins#external-loader)

When I build my project, the direflowBundle.js is about 3.086 KB. If I remove the imports from above and change Styled back to
<Styled styles={styles}>
and build the project again, the direflowBundle.js is much smaller: 1.755KB. Based on the size I assume that the fonts are contained in the first build (which would mean it is not ignored by direflow), since the size of semantic.min.css is 'only' about 614KB and icons.min.css is about 66KB and the difference 3086 to 1755 is 1331.
(I know: the total size is big, I will optimize my project later when the basics are working :-))

Any ideas how to make icons work? Not sure if I'm doing something wrong here or if what I'm trying to do is just not supported.

[SimonHoiberg]

Ok, I see.
I can't figure out exactly what is going on here, but I haven't actually tested the setup with Semantic UI, so it is very possible that there is an actual problem here.
I will have a look at this as soon as possible.

Is your project public? If yes, would you mind pasting a link to the project here, so I can have a closer look? - Otherwise, I will try to use your reproduction steps above.

[dpoerschke]

Sure, thank you very much for having a look into it :-)
Unfortunately my project is not public, but I've uploaded some demo-code to show the icon-problem here:
https://github.com/dpoerschke/iconProblemDemo
I hope it's helpful.

[SimonHoiberg]

Thanks a lot for creating a problem demo 👍

I've been investigating this problem, and it turns out, that it is a well know problem with webfonts (which are used for the icons) and the shadow DOM implementation.

Currently, the best fix for this problem is to disable the shadow root for your component.
That will make the icons render correctly.
There is a new way of doing this in the recent version of Direflow. See here.

On another note, you can now use the icon pack from material design.
This requires a new plugins. See here.
However, there is still the same problem with the shadow root 😞

On a whole other note, the initial request of this issue is now included in the newest version of Direflow.
So you are now able to add multiple styles to the Styled component like this:

<Styled styles={[ styles, semanticui ]}>

I will close this issue since it was originally about providing multiple styles, but I'll open another issue regarding the icon issue.

[imikemiller]

I am seeing this issue on a new Typescript Direflow project. When I include my styles the CSS is not stringified properly and ends up in the page as below.

I followed the same steps but using the react-image-lightbox package and importing styles from there. Any help much appreciated!