v0.1.0, added configuration via theme to add more colors

Author: christhofer

.eslintrc.js

@@ -4,6 +4,9 @@ module.exports = {
     browser: true,
     es6: true,
   },
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
   rules: {
     'brace-style': 'warn', // [1tbs default, stroustrup, allman]
     'comma-dangle': ['warn', 'always-multiline'],

README.md

@@ -6,7 +6,7 @@ Tailwindcss plugin to make skeleton screen easier than ever.
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-skeleton-screen)
 ![npm](https://img.shields.io/npm/dw/@gradin/tailwindcss-skeleton-screen)
 
-[Live Demo](https://play.tailwindcss.com/YSl180l7et)
+[Live Demo](https://play.tailwindcss.com/dcAoaNpFYu)
 
 ## Installation
 
@@ -25,8 +25,58 @@ module.exports = {
   theme: {
     // ...
   },
+
   plugins: [
     require('@gradin/tailwindcss-skeleton-screen'),
   ],
+
+}
+```
+
+## Customization
+
+You can change the color and animation via `theme` settings.
+
+The object keys will be appended to the end of the `.loading` class.
+The base `.loading` class can be configured by `DEFAULT` key.
+
+```js
+module.exports = {
+  theme: {
+    skeletonScreen: {
+      DEFAULT: { // .loading
+        baseColor: '#c7c7c7',
+        movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
+        duration: '1s',
+        timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+      },
+      // specify another color to have multiple loading colors.
+      blue: { // .loading-blue
+        baseColor: 'blue',
+        movingColor: 'linear-gradient(to right, transparent 0%, lightblue 50%, transparent 100%)',
+        duration: '.3s',
+        timing: 'ease',
+      },
+    },
+  },
+}
+```
+
+Or you can use `theme.extend` to add another color in addition to the default.
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      skeletonScreen: {
+        red: { // .loading-red
+          baseColor: 'red',
+          movingColor: 'pink',
+          duration: '3s',
+          timing: 'ease',
+        },
+      },
+    },
+  },
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradin/tailwindcss-skeleton-screen",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Tailwindcss plugin to make skeleton screen easier than ever.",
   "main": "src/index.js",
   "scripts": {},
@@ -28,4 +28,4 @@
     "eslint": "^7.24.0",
     "tailwindcss": "^2.1.1"
   }
-}
+}

src/index.js

@@ -1,34 +1,45 @@
 const plugin = require('tailwindcss/plugin')
 
-module.exports = plugin(
-  function ({ addUtilities }) {
-    addUtilities([
-      {
-        '.loading': {
-          position: 'relative',
-          overflow: 'hidden',
-          backgroundColor: '#c7c7c7',
-        },
-        '.loading::after': {
-          display: 'block',
-          position: 'absolute',
-          height: '100%',
-          top: 0,
+module.exports = plugin(function ({ theme, addUtilities }) {
+  let styleDefault = {
+    'DEFAULT': {
+      baseColor: '#c7c7c7',
+      movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
+      duration: '1s',
+      timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+    },
+  }
+  const styles = { ...styleDefault, ...theme('skeletonScreen', {}) }
+  const utilities = Object.entries(styles).map(([key, value]) => {
+    let className = '.loading' + (key === 'DEFAULT' ? '' : '-' + key)
+
+    return {
+      [className]: {
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: value.baseColor,
+      },
+      [`${className}::after`]: {
+        display: 'block',
+        position: 'absolute',
+        height: '100%',
+        top: 0,
+        left: '-10rem',
+        width: '10rem',
+        content: "''",
+        background: value.movingColor,
+        animation: `skeletonloading ${value.duration} ${value.timing} infinite`,
+      },
+      '@keyframes skeletonloading': {
+        from: {
           left: '-10rem',
-          width: '10rem',
-          content: "''",
-          background: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
-          animation: 'skeletonloading 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite',
         },
-        '@keyframes skeletonloading': {
-          from: {
-            left: '-10rem',
-          },
-          to: {
-            left: '100%',
-          },
+        to: {
+          left: '100%',
         },
       },
-    ])
-  }
-)
+    }
+  })
+
+  addUtilities(utilities)
+})