Styled-jsx: Do not apply styles when importing a component with a custom webpack

[Zimson]

Good day.

Sorry for my english.
I use styled-jsx in my component library. The components are already stylized, they began to be implemented in an already existing project. It uses webpack and babel.

There is a problem with the use of ready-made components - when you try to stylize the parent component into which the compiled component is imported, the styling of the component - component in the dev-mode breaks down. The imported component connects its styles without errors. If you run the assembly in production mode - in the assembled component - all styles are applied and work without problems.

If this helps: styles cease to apply, if there are several selectors in the tag - it does not matter, cascade, or separately. If in the tag to describe the rules for exactly one element - everything is in order.

In the Storybook - imports and styling work without problems.

Here's how it looks like:

import React, { Component} from 'react';
import CustomComponent from 'components-library/CustomComponent';

export default class App extends Component {
  /*
  * any code
  */

  render() {
    return (
      <div class="container">
        <div class="parent-wrapper">
          {/*
          *  The component styles are applied without problems
          */}
          <CustomComponent />
          <span>Inner text</span>
          <span class="blue-span">Inner text</span>
        </div>   

       { /*
       *  Multiple selectors do not work and throw out the warning in the console
       *  "StyleSheet: illegal rule: 
           .parent-wrapper span{color:red;}span.blue-span{color:blue;}
           See https://stackoverflow.com/q/20007992 for more info" 
       */}
        <style jsx global>{`
          .parent-wrapper span {
             color: red;
           }

          span.blue-span {
            color: blue;
          }
     ` }
      </style>
      </div>
    );
  }
}

Webpack settings:
webpack.config.js

File .babelrc:
.babelrc

Part of package.json:
package.json

[giuseppeg]

@Zimson hi! Could you make a simple and minimal testcase that I can clone and try out?

[Zimson]

@giuseppeg, hi.
I hope to arrange the option with a link to the repository.

style-demo

I tried to leave completely the structure of the project, where external components are imported(including the styled-jsx). The process of assembling and working - everything is as it is and made a small demo.

When assembled into a production - everything is perfectly assembled and applied, but it is not possible to fully develop it, even with the disconnection of "styled-jsx / babel".

I hope, at least some advice, until I can understand where it is not right.

[a-ignatov-parc]

@giuseppeg checked example. It fails because multiple rules are passed to sheet.insertRule(rule, index); at once:

rule value:

.inner-container{width:80%;margin:0 auto;}.inner-container p{color:black;font-weight:600;}.blue-text{color:blue;font-weight:normal;}.square-wrapper{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.square{margin:20px 10px;width:100px;height:100px;text-align:center;}

[giuseppeg]

I haven't checked the example yet but my guess is that the external component is transpiled and distributed for dev mode i.e. styled-jsx styles are transpiled without using optimizeForSpeed.

@Zimson would it be possible for you to use the external components library as-is and compile the components in your app?

[Zimson]

@giuseppeg,

I haven't checked the example yet but my guess is that the external component is transpiled and distributed for dev mode i.e. styled-jsx styles are transpiled without using optimizeForSpeed.

Yes, thanks for the direction - the reason is this. The forced inclusion in the dev-mode "optimizeForSpeed" solves part of the problem. Now I am trying to understand why this option does not work in assembling within the component library. Even forced inclusion does not help.

would it be possible for you to use the external components library as-is and compile the components in your app?

Yes, of course, there is the possibility to import directly, but this is not a little something for which the component library is being formed. Thanks for the recommendation.

[giuseppeg]

@Zimson this https://github.com/zeit/styled-jsx/issues/64 (which should be implemented with https://github.com/zeit/styled-jsx/issues/389) should solve the problem of consuming external components. In the meantime your only options are the ones from my previous comment.

[Zimson]

@giuseppeg As I understand, at the moment - these are the only possible solutions. In that case, thanks for the help.

[giuseppeg]

yep I will close this issue since #64 will fix it