Merge with 1.2.0 and requireCss prop support +modules.css support

[alex-shamshurin]

Could you merge with 1.2.0, I need requireCss=false. How to use with modules.css?

What about react theming support?

[KyleAMathews]

Not sure what you mean by 1.2.0.

Also not sure what modules.css is.

What do you mean by "react theming support"? You can already override the spinner styles by adding custom css.

[alex-shamshurin]

I need the one commit to be merged https://github.com/KyleAMathews/react-spinkit/releases/tag/v1.2.0

Modules css is a css isolating level for style names.

Styles are divided into global and component levels namespaces. To import your styles I have to wrap it with :global namespace in order to make them work. So importing styles by default under webpack is bad. Because they imported into component level and style name becomes like modules-step1-containters-spinner-bounce___1YJ6 for example.

[KyleAMathews]

1.2.0 was released on accident — the latest release is 1.1.11.

Oh, "CSS Modules" is what you mean.

You use it like normal:

var Spinner = require('react-spinkit')
var spinnerStyles = require('spinner-styles.css')

<Spinner spinnerName='double-bounce' className={spinnerStyles} />

[alex-shamshurin]

Ok

[alex-shamshurin]

So does your component automatically imports styles? Does I really need var spinnerStyles = require('spinner-styles.css') ?

[KyleAMathews]

It does automatically import styles.

You asked how to use CSS Modules — spinner-styles.css is a css module.

[alex-shamshurin]

<Spinner spinnerName='double-bounce' className={spinnerStyles} />

Failed prop type: Invalid prop className of type object supplied to Spinner, expected string.

[KyleAMathews]

My mistake, css modules return an object of class names.

[alex-shamshurin]

spinner-styles.css is a css module

I think not, it's just a css file imported by webpack and style names are normal, not with hashed name. If I import this with webpack loader with modules support then styles do not match.

Here's my loader config:

{
        test  : /\.styl$/,
        //loader: 'style!css!stylus?include css&paths[]=someFolder,paths[]=anotherFolder'
        loader: 'isomorphic-style-loader!css?modules&importLoaders=1&localIdentName=[path][local]___[hash:base64:5]!' +
        'stylus?paths[]=node_modules&include css&resolve url'
      },

It's stylus, but plain css config is the same.

[KyleAMathews]

I'm not familiar with isomorphic-style-loader. Also this issue has strayed rather far from react-spinkit :-) so I'm going to close this issue now. Please continue your investigation into this issue in the stylus/isomorphic-style-loader communities.

[alex-shamshurin]

It does the same css-loader do, but works without problems on server. But I think react-spinkit should support modules styles, using object keys with classes names instead of className in string. It will make it compatible with modules.

[smshuja]

Bummer. Facing the same issue. Not able to use with CSS modules.

[alex-shamshurin]

BTW, Beware! react-spinkit imports all styles for all spinnig types into your bundle. In weback we need

  new InlineEnviromentVariablesPlugin([
    'NODE_ENV',
     { REACT_SPINKIT_NO_STYLES: true },
   ]),