Skip to content

Commit 47fa48e

Browse files
committed
restructured the way to set default value according to tailwindcss documentation
1 parent ee0b3d2 commit 47fa48e

File tree

3 files changed

+17
-14
lines changed

3 files changed

+17
-14
lines changed

README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# tailwindcss-skeleton-screen
22

3-
Tailwindcss plugin to make skeleton screen easier than ever.
3+
Tailwindcss plugin to make skeleton screen.
44

55
[![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-skeleton-screen)](https://www.npmjs.com/package/@gradin/tailwindcss-skeleton-screen)
66
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-skeleton-screen)
@@ -29,7 +29,6 @@ module.exports = {
2929
plugins: [
3030
require('@gradin/tailwindcss-skeleton-screen'),
3131
],
32-
3332
}
3433
```
3534

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gradin/tailwindcss-skeleton-screen",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Tailwindcss plugin to make skeleton screen easier than ever.",
55
"main": "src/index.js",
66
"scripts": {},

src/index.js

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
const plugin = require('tailwindcss/plugin')
22

3-
module.exports = plugin(function ({ theme, addUtilities }) {
4-
let styleDefault = {
5-
'DEFAULT': {
6-
baseColor: '#c7c7c7',
7-
movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
8-
duration: '1s',
9-
timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
3+
const defaultConfig = {
4+
theme: {
5+
skeletonScreen: {
6+
'DEFAULT': {
7+
baseColor: '#c7c7c7',
8+
movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
9+
duration: '1s',
10+
timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
11+
},
1012
},
11-
}
12-
const styles = { ...styleDefault, ...theme('skeletonScreen', {}) }
13-
const utilities = Object.entries(styles).map(([key, value]) => {
13+
},
14+
}
15+
16+
module.exports = plugin(function ({ theme, addUtilities }) {
17+
const utilities = Object.entries(theme('skeletonScreen', {})).map(([key, value]) => {
1418
let className = '.loading' + (key === 'DEFAULT' ? '' : '-' + key)
1519

1620
return {
@@ -42,4 +46,4 @@ module.exports = plugin(function ({ theme, addUtilities }) {
4246
})
4347

4448
addUtilities(utilities)
45-
})
49+
}, defaultConfig)

0 commit comments

Comments
 (0)