update all style files to be css modules and exported a new version of the library

Author: JoshK2

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": [["react-app", { "absoluteRuntime": false }]]
-}
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.prettierrc.json

@@ -1,7 +1,7 @@
 {
     "trailingComma": "es5",
-    "tabWidth": 4,
+    "tabWidth": 2,
     "semi": false,
     "singleQuote": true,
     "printWidth": 120
-}
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spinners-css",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -53,10 +53,13 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "classnames": "^2.2.6",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/preset-react": "^7.10.1",
     "@bit/joshk.jotils.get-random-color": "^2.0.8",
     "prettier": "^1.18.2",
     "react": "^16.8.6",

package.json

@@ -1,27 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './style.css'
+import classNames from 'classnames'
+import styles from './style.module.css'
 
 export default function Circle({ color, size, className, style }) {
-    return (
-        <div className={`lds-circle ${className}`} style={{ background: color, width: size, height: size, ...style }} />
-    )
+  return (
+    <div
+      className={classNames(styles['lds-circle'], className)}
+      style={{ background: color, width: size, height: size, ...style }}
+    />
+  )
 }
 
 Circle.propTypes = {
-    /** hex color */
-    color: PropTypes.string,
-    /** size in pixel */
-    size: PropTypes.number,
-    /** class name  */
-    className: PropTypes.string,
-    /** style object */
-    style: PropTypes.object,
+  /** hex color */
+  color: PropTypes.string,
+  /** size in pixel */
+  size: PropTypes.number,
+  /** class name  */
+  className: PropTypes.string,
+  /** style object */
+  style: PropTypes.object,
 }
 
 Circle.defaultProps = {
-    color: '#7f58af',
-    size: 64,
-    className: '',
-    style: {},
+  color: '#7f58af',
+  size: 64,
+  className: '',
+  style: {},
 }

src/components/Circle/index.js

@@ -1,33 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './style.css'
+import classNames from 'classnames'
+import styles from './style.module.css'
 
 export default function Default({ color, className, style, size }) {
-    const circles = [...Array(12)].map((_, index) => (
-        <div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
-    ))
+  const circles = [...Array(12)].map((_, index) => (
+    <div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
+  ))
 
-    return (
-        <div className={`lds-default ${className}`} style={{ height: size, width: size, ...style }}>
-            {circles}
-        </div>
-    )
+  return (
+    <div className={classNames(styles['lds-default'], className)} style={{ height: size, width: size, ...style }}>
+      {circles}
+    </div>
+  )
 }
 
 Default.propTypes = {
-    /** hex color */
-    color: PropTypes.string,
-    /** size in pixel */
-    size: PropTypes.number,
-    /** class name  */
-    className: PropTypes.string,
-    /** style object */
-    style: PropTypes.object,
+  /** hex color */
+  color: PropTypes.string,
+  /** size in pixel */
+  size: PropTypes.number,
+  /** class name  */
+  className: PropTypes.string,
+  /** style object */
+  style: PropTypes.object,
 }
 
 Default.defaultProps = {
-    color: '#7f58af',
-    size: 80,
-    className: '',
-    style: {},
+  color: '#7f58af',
+  size: 80,
+  className: '',
+  style: {},
 }

src/components/Circle/style.css src/components/Circle/style.module.css

@@ -0,0 +1,85 @@
+.lds-default {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-default div {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  animation: lds-default 1.2s linear infinite;
+}
+.lds-default div:nth-child(1) {
+  animation-delay: 0s;
+  top: 46.25%;
+  left: 82.5%;
+}
+.lds-default div:nth-child(2) {
+  animation-delay: -0.1s;
+  top: 27.5%;
+  left: 77.5%;
+}
+.lds-default div:nth-child(3) {
+  animation-delay: -0.2s;
+  top: 13.75%;
+  left: 65%;
+}
+.lds-default div:nth-child(4) {
+  animation-delay: -0.3s;
+  top: 8.75%;
+  left: 46.25%;
+}
+.lds-default div:nth-child(5) {
+  animation-delay: -0.4s;
+  top: 13.75%;
+  left: 27.5%;
+}
+.lds-default div:nth-child(6) {
+  animation-delay: -0.5s;
+  top: 27.5%;
+  left: 13.75%;
+}
+.lds-default div:nth-child(7) {
+  animation-delay: -0.6s;
+  top: 46.25%;
+  left: 8.75%;
+}
+.lds-default div:nth-child(8) {
+  animation-delay: -0.7s;
+  top: 65%;
+  left: 13.75%;
+}
+.lds-default div:nth-child(9) {
+  animation-delay: -0.8s;
+  top: 77.5%;
+  left: 27.5%;
+}
+.lds-default div:nth-child(10) {
+  animation-delay: -0.9s;
+  top: 82.5%;
+  left: 46.25%;
+}
+.lds-default div:nth-child(11) {
+  animation-delay: -1s;
+  top: 77.5%;
+  left: 65%;
+}
+.lds-default div:nth-child(12) {
+  animation-delay: -1.1s;
+  top: 65%;
+  left: 77.5%;
+}
+@keyframes lds-default {
+  0%,
+  20%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}

src/components/Default/index.js

@@ -1,37 +1,38 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './style.css'
+import classNames from 'classnames'
+import styles from './style.module.css'
 
 export default function DualRing({ color, className, style, size }) {
-    return (
-        <div className={`lds-dual-ring ${className}`} style={{ width: size, height: size, ...style }}>
-            <div
-                className="lds-dual-ring-after"
-                style={{
-                    borderColor: `${color} transparent`,
-                    borderWidth: size * 0.1,
-                    width: size * 0.7 - 6,
-                    height: size * 0.7 - 6,
-                }}
-            ></div>
-        </div>
-    )
+  return (
+    <div className={classNames(styles['lds-dual-ring'], className)} style={{ width: size, height: size, ...style }}>
+      <div
+        className={classNames(styles['lds-dual-ring-after'])}
+        style={{
+          borderColor: `${color} transparent`,
+          borderWidth: size * 0.1,
+          width: size * 0.7 - 6,
+          height: size * 0.7 - 6,
+        }}
+      ></div>
+    </div>
+  )
 }
 
 DualRing.propTypes = {
-    /** hex color */
-    color: PropTypes.string,
-    /** class name  */
-    className: PropTypes.string,
-    /** style object */
-    style: PropTypes.object,
-    /** size in pixel */
-    size: PropTypes.number,
+  /** hex color */
+  color: PropTypes.string,
+  /** class name  */
+  className: PropTypes.string,
+  /** style object */
+  style: PropTypes.object,
+  /** size in pixel */
+  size: PropTypes.number,
 }
 
 DualRing.defaultProps = {
-    color: '#7f58af',
-    className: '',
-    style: {},
-    size: 80,
+  color: '#7f58af',
+  className: '',
+  style: {},
+  size: 80,
 }

src/components/Default/style.css

@@ -4,7 +4,7 @@
   height: 80px;
 }
 .lds-dual-ring-after {
-  content: " ";
+  content: ' ';
   display: block;
   width: 64px;
   height: 64px;
@@ -21,4 +21,4 @@
   100% {
     transform: rotate(360deg);
   }
-}
+}