chore(tailwind): render common selector as component

plugins-demo/tailwind-demo/src/index.html

@@ -37,6 +37,9 @@
 				<span
 					class="iconify-nosize mdi-light--home h-12 w-12 text-blue-600"
 				></span>
+				<span
+					class="iconify mdi-light--home h-12 w-12 text-red-600"
+				></span>
 			</p>
 		</section>
 		<section class="mb-2">

plugins/tailwind/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/tailwind",
 	"description": "Iconify plugin for Tailwind CSS",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"license": "MIT",
 	"main": "./dist/plugin.js",
 	"types": "./dist/plugin.d.ts",

plugins/tailwind/src/plugin.ts

@@ -6,7 +6,11 @@ import type {
 	DynamicIconifyPluginOptions,
 	IconifyPluginOptions,
 } from './helpers/options';
-import { getCSSRulesForPlugin } from './preparsed';
+import {
+	cleanupIconifyPluginOptions,
+	getCSSComponentsForPlugin,
+	getCSSRulesForPlugin,
+} from './preparsed';
 
 /**
  * Generate styles for dynamic selector
@@ -39,23 +43,11 @@ export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) {
  * Usage in HTML: <span class="iconify mdi-light--home" />
  */
 export function addIconSelectors(options: IconifyPluginOptions) {
-	const maskSelector =
+	const fullOptions = cleanupIconifyPluginOptions(options);
-		'maskSelector' in options ? options.maskSelector : '.iconify';
+
-	const backgroundSelector =
-		'backgroundSelector' in options
-			? options.backgroundSelector
-			: '.iconify-color';
-	const {
-		[maskSelector]: iconify,
-		[backgroundSelector]: iconifyColor,
-		...icons
-	} = getCSSRulesForPlugin(options);
 	return plugin(({ addComponents, addUtilities }) => {
-		addComponents({
+		addComponents(getCSSComponentsForPlugin(fullOptions));
-			[maskSelector]: iconify,
+		addUtilities(getCSSRulesForPlugin(fullOptions));
-			[backgroundSelector]: iconifyColor,
-		});
-		addUtilities(icons);
 	});
 }
 

plugins/tailwind/src/preparsed.ts

@@ -13,23 +13,29 @@ import type {
 import { loadIconSet } from './helpers/loader';
 
 /**
- * Get CSS rules for main plugin
+ * Convert plugin options to object
  */
-export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
+export function cleanupIconifyPluginOptions(
-	const rules = Object.create(null) as Record<string, Record<string, string>>;
+	options: IconifyPluginOptions
-
+): IconifyPluginOptionsObject {
-	// Convert options to object
+	return Array.isArray(options)
-	const fullOptions: IconifyPluginOptionsObject = Array.isArray(options)
 		? {
 				prefixes: options,
 		  }
 		: options;
+}
+
+/**
+ * Get CSS rules for main plugin (components)
+ */
+export function getCSSComponentsForPlugin(options: IconifyPluginOptionsObject) {
+	const rules = Object.create(null) as Record<string, Record<string, string>>;
 
 	// Variable name, default to 'svg' (cannot be empty string)
-	const varName = fullOptions.varName || 'svg';
+	const varName = options.varName || 'svg';
 
 	// Scale icons
-	const scale = fullOptions.scale ?? 1;
+	const scale = options.scale ?? 1;
 	const adjustScale = (obj: Record<string, string>) => {
 		if (!scale) {
 			// Delete width and height
@@ -44,9 +50,8 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 	};
 
 	// Add common rules
-	const maskSelector = fullOptions.maskSelector ?? '.iconify';
+	const maskSelector = options.maskSelector ?? '.iconify';
-	const backgroundSelector =
+	const backgroundSelector = options.backgroundSelector ?? '.iconify-color';
-		fullOptions.backgroundSelector ?? '.iconify-color';
 	if (maskSelector) {
 		rules[maskSelector] = Object.assign(
 			adjustScale(
@@ -55,7 +60,7 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 					varName,
 				})
 			),
-			fullOptions.extraMaskRules || {}
+			options.extraMaskRules || {}
 		);
 	}
 	if (backgroundSelector) {
@@ -66,14 +71,26 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 					varName,
 				})
 			),
-			fullOptions.extraBackgroundRules || {}
+			options.extraBackgroundRules || {}
 		);
 	}
 
-	// Add icon sets
+	return rules;
-	const iconSelector = fullOptions.iconSelector || '.{prefix}--{name}';
+}
 
-	fullOptions.prefixes?.forEach((item) => {
+/**
+ * Get CSS rules for main plugin (utilities)
+ */
+export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
+	const rules = Object.create(null) as Record<string, Record<string, string>>;
+
+	// Variable name, default to 'svg' (cannot be empty string)
+	const varName = options.varName || 'svg';
+
+	// Add icon sets
+	const iconSelector = options.iconSelector || '.{prefix}--{name}';
+
+	options.prefixes?.forEach((item) => {
 		let prefix: string;
 		let iconSet: IconifyJSON | undefined;
 		let iconsList: IconsListOption | undefined;
@@ -131,8 +148,8 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 			// Customise icon
 			const body = customise
 				? customise(data.body, name)
-				: fullOptions.customise
+				: options.customise
-				? fullOptions.customise(data.body, name, prefix)
+				? options.customise(data.body, name, prefix)
 				: data.body;
 
 			// Generate CSS