alex996 / react-css-spinners Goto Github PK

Hey @alex996, thanks for putting together this repo. I found your videos on Youtube really helpful. One thing I noticed when trying to implement this approach for building a library is that if you set any static properties on components (such as you would for setting defaultProps or propTypes, those components cannot tree shaken. Are you familiar with any solutions to work around this problem?

e.g.

This one tree shakes fine:

import React from 'react'
import styles from './styles.css'

const Ripple = props => (
  <>
    <style>{styles}</style>
    <div className="lds-ripple">
      <div />
      <div />
    </div>
  </>
)

export default Ripple

However, this one won't:

import React from 'react'
import PropTypes from 'prop-types';
import styles from './styles.css'

const Ripple = props => (
  <>
    <style>{styles}</style>
    <div className="lds-ripple">
      <div />
      <div />
    </div>
  </>
)

Ripple.propTypes = {
  className: PropTypes.string,
}

Ripple.defaultProps = {
  className: "lds-ripple",
};

export default Ripple

Should your lint-staged configuration in the package.json include .ts extensions?
Here's an example:

...
 "lint-staged": { 
    "*.{ts, js}": [
      "npm run lint:fix",
      "npm run test:staged",
      "git add"
    ]
  },
...

See #18 for context and the list of commands to fix

Wouldn't it be better to define the default value of the CSS variables in the CSS file and to not define them via the style prop?
That way, it's easy to modify them in another CSS file (without having to use !important).
If styling props are passed, define them individually via style.

Hi,

thanks for this lib. I think you should remove the engine requirement, its not needed in this library and preventing installation with yarn.

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.15.0"
error Found incompatible module.