KyleAMathews/react-spinkit

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

alex-shamshurin opened this issue · 13 comments

alex-shamshurin commented

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

What about react theming support?

KyleAMathews commented

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 commented

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 commented

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 commented

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

KyleAMathews commented

It does automatically import styles.

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

alex-shamshurin commented

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

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

KyleAMathews commented

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

alex-shamshurin commented

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 commented

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 commented

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 commented

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

alex-shamshurin commented

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 },
   ]),