New: Add custom className option (#103)

Fixes #28

Author: stormwarning

.changeset/empty-flies-exist.md

@@ -0,0 +1,9 @@
+---
+'tailwindcss-capsize': minor
+---
+
+Allow custom activation class via `className` option
+
+```js
+require('tailwindcss-capsize')({ className: 'leading-trim' })
+```

README.md

@@ -50,15 +50,27 @@ module.exports = {
 }
 ```
 
+## Usage
+
+The new `.capsize` utility class should be applied to the _direct parent_ element surrounding a text node. This class only provides the neccessary styles for trimming whitespace, utility classes for setting `font-family`, `font-size`, and `line-height` will need to be applied as well.
+
+## Options
+
+### rootSize
+
 The plugin assumes a root font-size of `16px` when converting from rem values. To use a different value, pass it in (without units) to the plugin options.
 
 ```js
 require('tailwindcss-capsize')({ rootSize: 12 })
 ```
 
-## Usage
+### className
 
-The new `.capsize` utility class should be applied to the _direct parent_ element surrounding a text node. This class only provides the neccessary styles for trimming whitespace, utility classes for setting `font-family`, `font-size`, and `line-height` will need to be applied as well.
+The default `.capsize` utility class can be replaced with a custom class name if preferred.
+
+```js
+require('tailwindcss-capsize')({ className: 'leading-trim' })
+```
 
 [npm-url]: https://www.npmjs.com/package/tailwindcss-capsize
 [npm-img]: https://img.shields.io/npm/v/tailwindcss-capsize.svg?style=flat-square

__tests__/plugin.test.ts

@@ -325,4 +325,48 @@ describe('Plugin', () => {
                 `)
             })
     })
+
+    it('generates utility classes with a custom activation class', async () => {
+        return await postcss(
+            tailwindcss({
+                theme: {
+                    ...THEME_CONFIG,
+                    fontSize: {
+                        sm: '1rem',
+                    },
+                    lineHeight: {
+                        md: '1.5',
+                    },
+                },
+                corePlugins: false,
+                plugins: [capsizePlugin({ className: 'leading-trim' })],
+            }),
+        )
+            .process('@tailwind components; @tailwind utilities', {
+                from: undefined,
+            })
+            .then((result) => {
+                expect(result.css).toMatchCss(`
+                    .font-sans.text-sm.leading-md.leading-trim::before,
+                    .font-sans .text-sm.leading-md.leading-trim::before,
+                    .font-sans .text-sm .leading-md.leading-trim::before,
+                    .text-sm .font-sans.leading-md.leading-trim::before,
+                    .text-sm .font-sans .leading-md.leading-trim::before {
+                        content: '';
+                        margin-bottom: -0.3864em;
+                        display: table;
+                    }
+
+                    .font-sans.text-sm.leading-md.leading-trim::after,
+                    .font-sans .text-sm.leading-md.leading-trim::after,
+                    .font-sans .text-sm .leading-md.leading-trim::after,
+                    .text-sm .font-sans.leading-md.leading-trim::after,
+                    .text-sm .font-sans .leading-md.leading-trim::after {
+                        content: '';
+                        margin-top: -0.3864em;
+                        display: table;
+                    }
+                `)
+            })
+    })
 })

package-lock.json

@@ -7,11 +7,13 @@ import { makeCssSelectors, normalizeValue } from './utils'
 
 export interface PluginOptions {
     /** The root font-size, in pixels */
-    rootSize: number
+    rootSize?: number
+    /** Custom utility classname */
+    className?: string
 }
 
 export default plugin.withOptions<Partial<PluginOptions>>(
-    ({ rootSize = 16 } = {}) => {
+    ({ rootSize = 16, className = 'capsize' } = {}) => {
         return function ({ addUtilities, theme }) {
             let fontMetrics = theme('fontMetrics', {}) as Record<
                 string,
@@ -43,7 +45,12 @@ export default plugin.withOptions<Partial<PluginOptions>>(
                         })
 
                         utilities[
-                            makeCssSelectors(fontFamily, sizeName, leading)
+                            makeCssSelectors(
+                                fontFamily,
+                                sizeName,
+                                leading,
+                                className,
+                            )
                         ] = {
                             '&::before': before,
                             '&::after': after,

src/plugin.ts

@@ -37,12 +37,13 @@ export function makeCssSelectors(
     fontFamily: string,
     sizeName: string,
     leading: string,
+    className: string,
 ): string {
     return (
-        `.font-${fontFamily}.text-${sizeName}.leading-${leading}.capsize,` +
-        `.font-${fontFamily} .text-${sizeName}.leading-${leading}.capsize,` +
-        `.font-${fontFamily} .text-${sizeName} .leading-${leading}.capsize,` +
-        `.text-${sizeName} .font-${fontFamily}.leading-${leading}.capsize,` +
-        `.text-${sizeName} .font-${fontFamily} .leading-${leading}.capsize`
+        `.font-${fontFamily}.text-${sizeName}.leading-${leading}.${className},` +
+        `.font-${fontFamily} .text-${sizeName}.leading-${leading}.${className},` +
+        `.font-${fontFamily} .text-${sizeName} .leading-${leading}.${className},` +
+        `.text-${sizeName} .font-${fontFamily}.leading-${leading}.${className},` +
+        `.text-${sizeName} .font-${fontFamily} .leading-${leading}.${className}`
     )
 }