Moved icons to component layer

This is more accurate and also allows them to be. auto sorted at the beginning of the class list by the official class name sorter

Author: JohnCampionJr

src/index.ts

@@ -36,10 +36,10 @@ export function createPluginIcons(options: IconsOptions = {}): PluginCreator {
     return JSON.parse(svg)
   }
 
-  return function ({ matchUtilities }) {
+  return function ({ matchComponents }) {
     const _prefix = (options.prefix || 'i-').replace(/-$/, '')
 
-    matchUtilities({
+    matchComponents({
       [_prefix]: (value: string) => getCSS(value, 'def'),
       [_prefix + '-bg']: (value: string) => getCSS(value, 'bg'),
       [_prefix + '-auto']: (value: string) => getCSS(value, 'auto'),

tests/index.test.js

@@ -3,7 +3,7 @@ const iconsPlugin = require('../dist/index.js')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
 
-function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
+function run(config, css = '@tailwind components', plugin = tailwindcss) {
   let { currentTestName } = expect.getState()
   config = {
     ...{
@@ -25,36 +25,25 @@ it('makesIcon', () => {
     content: [{ raw: String.raw`<div class="i-[carbon-add]"></div>` }],
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const h1 = String.raw`--tw-icon`
-    const width = String.raw`width: 1em; height: 1em`
+  return run(config).then(result => {
+    const icon = String.raw`--tw-icon`
+    const width = String.raw`width: 1em;
+    height: 1em`
 
-    expect(result.css).toContain(h1)
+    expect(result.css).toContain(icon)
     expect(result.css).toContain(width)
   })
 })
 
-it('makesIcon', () => {
-  const config = {
-    content: [{ raw: String.raw`<div class="i-[carbon-add]"></div>` }],
-  }
-
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const h1 = String.raw`--tw-icon`
-
-    expect(result.css).toContain(h1)
-  })
-})
-
 it('ignoresBadIcons', () => {
   const config = {
     content: [{ raw: String.raw`<div class="i-[carbon-ad]"></div>` }],
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const h1 = String.raw`--tw-icon`
+  return run(config).then(result => {
+    const icon = String.raw`--tw-icon`
 
-    expect(result.css).toEqual(expect.not.stringContaining(h1))
+    expect(result.css).toEqual(expect.not.stringContaining(icon))
   })
 })
 
@@ -63,11 +52,11 @@ it('makesBgIcon', () => {
     content: [{ raw: String.raw`<div class="i-bg-[carbon-add]"></div>` }],
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const h1 = String.raw`--tw-icon`
+  return run(config).then(result => {
+    const icon = String.raw`--tw-icon`
     const bg = String.raw`background: url("data:image/svg+`
 
-    expect(result.css).toEqual(expect.not.stringContaining(h1))
+    expect(result.css).toEqual(expect.not.stringContaining(icon))
     expect(result.css).toContain(bg)
   })
 })
@@ -80,8 +69,9 @@ it('usesUnits', () => {
     },
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const width = String.raw`width: 1px; height: 1px`
+  return run(config).then(result => {
+    const width = String.raw`width: 1px;
+    height: 1px`
     expect(result.css).toContain(width)
   })
 })
@@ -94,8 +84,9 @@ it('usesScale', () => {
     },
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const width = String.raw`width: 1.2em; height: 1.2em`
+  return run(config).then(result => {
+    const width = String.raw`width: 1.2em;
+    height: 1.2em`
     expect(result.css).toContain(width)
   })
 })
@@ -109,8 +100,9 @@ it('usesScaleAndUnits', () => {
     },
   }
 
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const width = String.raw`width: 20px; height: 20px`
+  return run(config).then(result => {
+    const width = String.raw`width: 20px;
+    height: 20px`
     expect(result.css).toContain(width)
   })
 })