Skip to content

Commit 24ecebc

Browse files
hacknughacknug
committed
Add support for Tailwindcss v1.x
1 parent 85bb758 commit 24ecebc

File tree

5 files changed

+4025
-58
lines changed

5 files changed

+4025
-58
lines changed

‎index.js‎

Lines changed: 66 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,70 @@
1-
module.exports = function(variants) {
2-
return function({ addUtilities }) {
3-
addUtilities(
4-
{
5-
// Mix Blend Mode
6-
'.blend-normal': { mixBlendMode: 'normal' },
7-
'.blend-multiply': { mixBlendMode: 'multiply' },
8-
'.blend-screen': { mixBlendMode: 'screen' },
9-
'.blend-overlay': { mixBlendMode: 'overlay' },
10-
'.blend-darken': { mixBlendMode: 'darken' },
11-
'.blend-lighten': { mixBlendMode: 'lighten' },
12-
'.blend-color-dodge': { mixBlendMode: 'color-dodge' },
13-
'.blend-color-burn': { mixBlendMode: 'color-burn' },
14-
'.blend-hard-light': { mixBlendMode: 'hard-light' },
15-
'.blend-soft-light': { mixBlendMode: 'soft-light' },
16-
'.blend-difference': { mixBlendMode: 'difference' },
17-
'.blend-exclusion': { mixBlendMode: 'exclusion' },
18-
'.blend-hue': { mixBlendMode: 'hue' },
19-
'.blend-saturation': { mixBlendMode: 'saturation' },
20-
'.blend-color': { mixBlendMode: 'color' },
21-
'.blend-luminosity': { mixBlendMode: 'luminosity' },
1+
var _ = require('lodash')
2+
var flatten = require('flat')
223

23-
// Background Blend Mode
24-
'.bg-blend-normal': { backgroundBlendMode: 'normal' },
25-
'.bg-blend-multiply': { backgroundBlendMode: 'multiply' },
26-
'.bg-blend-screen': { backgroundBlendMode: 'screen' },
27-
'.bg-blend-overlay': { backgroundBlendMode: 'overlay' },
28-
'.bg-blend-darken': { backgroundBlendMode: 'darken' },
29-
'.bg-blend-lighten': { backgroundBlendMode: 'lighten' },
30-
'.bg-blend-color-dodge': { backgroundBlendMode: 'color-dodge' },
31-
'.bg-blend-color-burn': { backgroundBlendMode: 'color-burn' },
32-
'.bg-blend-hard-light': { backgroundBlendMode: 'hard-light' },
33-
'.bg-blend-soft-light': { backgroundBlendMode: 'soft-light' },
34-
'.bg-blend-difference': { backgroundBlendMode: 'difference' },
35-
'.bg-blend-exclusion': { backgroundBlendMode: 'exclusion' },
36-
'.bg-blend-hue': { backgroundBlendMode: 'hue' },
37-
'.bg-blend-saturation': { backgroundBlendMode: 'saturation' },
38-
'.bg-blend-color': { backgroundBlendMode: 'color' },
39-
'.bg-blend-luminosity': { backgroundBlendMode: 'luminosity' },
4+
module.exports = function () {
5+
return function ({
6+
addUtilities, addComponents, addBase, addVariant,
7+
e, prefix, theme, variants, config,
8+
}) {
9+
const buildObjectFromTheme = themeKey => {
10+
const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
11+
const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry))
12+
return _.fromPairs(themeEntries)
13+
}
4014

41-
// Isolate
42-
'.isolate': { isolation: 'isolate' },
43-
'.isolate-none': { isolation: 'auto' },
44-
},
45-
variants
46-
)
15+
const pluginUtilities = {
16+
'blend': {
17+
'normal': { mixBlendMode: 'normal' },
18+
'multiply': { mixBlendMode: 'multiply' },
19+
'screen': { mixBlendMode: 'screen' },
20+
'overlay': { mixBlendMode: 'overlay' },
21+
'darken': { mixBlendMode: 'darken' },
22+
'lighten': { mixBlendMode: 'lighten' },
23+
'color-dodge': { mixBlendMode: 'color-dodge' },
24+
'color-burn': { mixBlendMode: 'color-burn' },
25+
'hard-light': { mixBlendMode: 'hard-light' },
26+
'soft-light': { mixBlendMode: 'soft-light' },
27+
'difference': { mixBlendMode: 'difference' },
28+
'exclusion': { mixBlendMode: 'exclusion' },
29+
'hue': { mixBlendMode: 'hue' },
30+
'saturation': { mixBlendMode: 'saturation' },
31+
'color': { mixBlendMode: 'color' },
32+
'luminosity': { mixBlendMode: 'luminosity' },
33+
},
34+
'bg-blend': {
35+
'normal': { backgroundBlendMode: 'normal' },
36+
'multiply': { backgroundBlendMode: 'multiply' },
37+
'screen': { backgroundBlendMode: 'screen' },
38+
'overlay': { backgroundBlendMode: 'overlay' },
39+
'darken': { backgroundBlendMode: 'darken' },
40+
'lighten': { backgroundBlendMode: 'lighten' },
41+
'color-dodge': { backgroundBlendMode: 'color-dodge' },
42+
'color-burn': { backgroundBlendMode: 'color-burn' },
43+
'hard-light': { backgroundBlendMode: 'hard-light' },
44+
'soft-light': { backgroundBlendMode: 'soft-light' },
45+
'difference': { backgroundBlendMode: 'difference' },
46+
'exclusion': { backgroundBlendMode: 'exclusion' },
47+
'hue': { backgroundBlendMode: 'hue' },
48+
'saturation': { backgroundBlendMode: 'saturation' },
49+
'color': { backgroundBlendMode: 'color' },
50+
'luminosity': { backgroundBlendMode: 'luminosity' },
51+
},
52+
'isolation': {
53+
'isolate': { isolation: 'isolate' },
54+
'auto': { isolation: 'auto' },
55+
}
56+
}
57+
58+
Object.entries(pluginUtilities)
59+
.filter(([ modifier, values ]) => !_.isEmpty(values))
60+
.forEach(([ modifier, values ]) => {
61+
const variantName = Object.keys(Object.entries(values)[0][1])[0]
62+
const utilities = flatten(
63+
{ [`.${e(`${modifier}`)}`]: values },
64+
{ delimiter: '-', maxDepth: 2 },
65+
)
66+
67+
addUtilities(utilities, variants(variantName, ['responsive']))
68+
})
4769
}
4870
}

‎package.json‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,40 @@
22
"name": "tailwindcss-blend-mode",
33
"version": "0.1.2",
44
"description": "Blend-mode utilities for Tailwind CSS.",
5-
"main": "index.js",
6-
"repository": {
7-
"type": "git",
8-
"url": "git+https://github.com/hacknug/tailwindcss-blend-mode.git"
9-
},
105
"keywords": [
6+
"plugin",
117
"tailwind",
12-
"tailwindcss",
138
"tailwind css",
14-
"tailwindcss-plugin",
15-
"plugin"
9+
"tailwindcss",
10+
"tailwindcss-plugin"
1611
],
17-
"author": "Nestor Vera <nestorvera@me.com> (https://nestor.rip)",
18-
"license": "MIT",
12+
"homepage": "https://github.com/hacknug/tailwindcss-blend-mode#readme",
1913
"bugs": {
2014
"url": "https://github.com/hacknug/tailwindcss-blend-mode/issues"
2115
},
22-
"homepage": "https://github.com/hacknug/tailwindcss-blend-mode#readme"
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/hacknug/tailwindcss-blend-mode.git"
19+
},
20+
"license": "MIT",
21+
"author": {
22+
"name": "Nestor Vera",
23+
"email": "nestorvera@me.com",
24+
"url": "https://nestor.rip/"
25+
},
26+
"main": "index.js",
27+
"scripts": {
28+
"dev": "jest --watchAll",
29+
"test": "jest"
30+
},
31+
"dependencies": {
32+
"flat": "^4.1.0",
33+
"lodash": "^4.17.11"
34+
},
35+
"devDependencies": {
36+
"jest": "^24.8.0",
37+
"jest-matcher-css": "^1.0.3",
38+
"postcss": "^7.0.16",
39+
"tailwindcss": "^1.0.1"
40+
}
2341
}

0 commit comments

Comments
 (0)