[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-image-rendering. Image-rendering utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-image-rendering
Fix generating wrong class name
Nestor Vera
(Jul 13, 2019, 8:37 PM +0200)
6740e779
c116fa1a
+35
-20
+19
-7
index.js
+19
-7
index.js
···
1
1
var _ = require('lodash')
2
2
var flatten = require('flat')
3
3
4
+
5
+
const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
6
+
const getName = name => name.split('-default').join('')
7
+
8
+
4
9
module.exports = function () {
5
10
return function ({
6
11
addUtilities, addComponents, addBase, addVariant,
7
12
e, prefix, theme, variants, config,
8
13
}) {
9
-
const buildObjectFromTheme = themeKey => {
14
+
const buildObjectFromTheme = (themeKey, ...fallbackKeys) => {
10
15
const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
11
-
const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry))
16
+
const getThemeSettings = (themeKey, fallbackKeys) => {
17
+
return theme(themeKey, false) || getThemeSettings([themeKey, ...fallbackKeys] = fallbackKeys)
18
+
}
19
+
const themeEntries = Object
20
+
.entries(flatten(getThemeSettings(themeKey, fallbackKeys), FLATTEN_CONFIG))
21
+
.map(entry => buildObject(entry))
22
+
12
23
return _.fromPairs(themeEntries)
13
24
}
14
25
···
25
36
Object.entries(pluginUtilities)
26
37
.filter(([ modifier, values ]) => !_.isEmpty(values))
27
38
.forEach(([ modifier, values ]) => {
39
+
const className = _.kebabCase(modifier)
28
40
const variantName = Object.keys(Object.entries(values)[0][1])[0]
29
-
const utilities = flatten(
30
-
{ [`.${e(`bg-${modifier}`)}`]: values },
31
-
{ delimiter: '-', maxDepth: 2 },
32
-
)
41
+
const utilities = flatten({ [`.${e(`${className}`)}`]: values }, FLATTEN_CONFIG)
33
42
34
-
addUtilities(utilities, variants(variantName, ['responsive']))
43
+
addUtilities(
44
+
_.mapKeys(utilities, (value, key) => getName(key)),
45
+
variants(variantName, ['responsive'])
46
+
)
35
47
})
36
48
}
37
49
}
+4
-1
pnpm-lock.yaml
+4
-1
pnpm-lock.yaml
···
6
6
jest-matcher-css: 1.0.3
7
7
postcss: 7.0.16
8
8
tailwindcss: 1.0.1
9
-
lockfileVersion: 5
9
+
lockfileVersion: 5.1
10
10
packages:
11
11
/@babel/code-frame/7.0.0:
12
12
dependencies:
···
1891
1891
node: '>=6'
1892
1892
peerDependencies:
1893
1893
jest-resolve: '*'
1894
+
peerDependenciesMeta:
1895
+
jest-resolve:
1896
+
optional: true
1894
1897
resolution:
1895
1898
integrity: sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
1896
1899
/jest-regex-util/24.3.0:
+12
-12
test.js
+12
-12
test.js
···
25
25
test('generates default utilities and responsive variants', () => {
26
26
const testConfig = {}
27
27
const expectedCss = `
28
-
.bg-rendering-auto { image-rendering: auto }
29
-
.bg-rendering-crisp-edges { image-rendering: crisp-edges }
30
-
.bg-rendering-pixelated { image-rendering: pixelated }
28
+
.rendering-auto { image-rendering: auto }
29
+
.rendering-crisp-edges { image-rendering: crisp-edges }
30
+
.rendering-pixelated { image-rendering: pixelated }
31
31
32
32
@media (min-width: 640px) {
33
-
.sm\\:bg-rendering-auto { image-rendering: auto }
34
-
.sm\\:bg-rendering-crisp-edges { image-rendering: crisp-edges }
35
-
.sm\\:bg-rendering-pixelated { image-rendering: pixelated }
33
+
.sm\\:rendering-auto { image-rendering: auto }
34
+
.sm\\:rendering-crisp-edges { image-rendering: crisp-edges }
35
+
.sm\\:rendering-pixelated { image-rendering: pixelated }
36
36
}
37
37
`
38
38
···
46
46
},
47
47
}
48
48
const expectedCss = `
49
-
.bg-rendering-auto { image-rendering: auto }
50
-
.bg-rendering-crisp-edges { image-rendering: crisp-edges }
51
-
.bg-rendering-pixelated { image-rendering: pixelated }
49
+
.rendering-auto { image-rendering: auto }
50
+
.rendering-crisp-edges { image-rendering: crisp-edges }
51
+
.rendering-pixelated { image-rendering: pixelated }
52
52
53
-
.hover\\:bg-rendering-auto:hover { image-rendering: auto }
54
-
.hover\\:bg-rendering-crisp-edges:hover { image-rendering: crisp-edges }
55
-
.hover\\:bg-rendering-pixelated:hover { image-rendering: pixelated }
53
+
.hover\\:rendering-auto:hover { image-rendering: auto }
54
+
.hover\\:rendering-crisp-edges:hover { image-rendering: crisp-edges }
55
+
.hover\\:rendering-pixelated:hover { image-rendering: pixelated }
56
56
`
57
57
58
58
return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss))