Fix generating wrong class name

Author: hacknug

index.js

@@ -1,14 +1,25 @@
 var _ = require('lodash')
 var flatten = require('flat')
 
+
+const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
+const getName = name => name.split('-default').join('')
+
+
 module.exports = function () {
   return function ({
     addUtilities, addComponents, addBase, addVariant,
     e, prefix, theme, variants, config,
   }) {
-    const buildObjectFromTheme = themeKey => {
+    const buildObjectFromTheme = (themeKey, ...fallbackKeys) => {
       const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
-      const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry))
+      const getThemeSettings = (themeKey, fallbackKeys) => {
+        return theme(themeKey, false) || getThemeSettings([themeKey, ...fallbackKeys] = fallbackKeys)
+      }
+      const themeEntries = Object
+        .entries(flatten(getThemeSettings(themeKey, fallbackKeys), FLATTEN_CONFIG))
+        .map(entry => buildObject(entry))
+
       return _.fromPairs(themeEntries)
     }
 
@@ -25,13 +36,14 @@ module.exports = function () {
     Object.entries(pluginUtilities)
       .filter(([ modifier, values ]) => !_.isEmpty(values))
       .forEach(([ modifier, values ]) => {
+        const className = _.kebabCase(modifier)
         const variantName = Object.keys(Object.entries(values)[0][1])[0]
-        const utilities = flatten(
-          { [`.${e(`bg-${modifier}`)}`]: values },
-          { delimiter: '-', maxDepth: 2 },
-        )
+        const utilities = flatten({ [`.${e(`${className}`)}`]: values }, FLATTEN_CONFIG)
 
-        addUtilities(utilities, variants(variantName, ['responsive']))
+        addUtilities(
+          _.mapKeys(utilities, (value, key) => getName(key)),
+          variants(variantName, ['responsive'])
+        )
       })
   }
 }

pnpm-lock.yaml

@@ -25,14 +25,14 @@ expect.extend({ toMatchCss: require('jest-matcher-css') })
 test('generates default utilities and responsive variants', () => {
   const testConfig = {}
   const expectedCss = `
-    .bg-rendering-auto { image-rendering: auto }
-    .bg-rendering-crisp-edges { image-rendering: crisp-edges }
-    .bg-rendering-pixelated { image-rendering: pixelated }
+    .rendering-auto { image-rendering: auto }
+    .rendering-crisp-edges { image-rendering: crisp-edges }
+    .rendering-pixelated { image-rendering: pixelated }
 
     @media (min-width: 640px) {
-      .sm\\:bg-rendering-auto { image-rendering: auto }
-      .sm\\:bg-rendering-crisp-edges { image-rendering: crisp-edges }
-      .sm\\:bg-rendering-pixelated { image-rendering: pixelated }
+      .sm\\:rendering-auto { image-rendering: auto }
+      .sm\\:rendering-crisp-edges { image-rendering: crisp-edges }
+      .sm\\:rendering-pixelated { image-rendering: pixelated }
     }
   `
 
@@ -46,13 +46,13 @@ test('variants can be customized', () => {
     },
   }
   const expectedCss = `
-    .bg-rendering-auto { image-rendering: auto }
-    .bg-rendering-crisp-edges { image-rendering: crisp-edges }
-    .bg-rendering-pixelated { image-rendering: pixelated }
+    .rendering-auto { image-rendering: auto }
+    .rendering-crisp-edges { image-rendering: crisp-edges }
+    .rendering-pixelated { image-rendering: pixelated }
 
-    .hover\\:bg-rendering-auto:hover { image-rendering: auto }
-    .hover\\:bg-rendering-crisp-edges:hover { image-rendering: crisp-edges }
-    .hover\\:bg-rendering-pixelated:hover { image-rendering: pixelated }
+    .hover\\:rendering-auto:hover { image-rendering: auto }
+    .hover\\:rendering-crisp-edges:hover { image-rendering: crisp-edges }
+    .hover\\:rendering-pixelated:hover { image-rendering: pixelated }
   `
 
   return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss))