From e74982952334bcb1b102772c8c22def1fd29f18f Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin
Date: Mon, 13 May 2024 19:53:45 +0300
Subject: [PATCH] chore(tailwind): render common selector as component
---
plugins-demo/tailwind-demo/src/index.html | 3 ++
plugins/tailwind/package.json | 2 +-
plugins/tailwind/src/plugin.ts | 26 ++++-------
plugins/tailwind/src/preparsed.ts | 53 +++++++++++++++--------
4 files changed, 48 insertions(+), 36 deletions(-)
diff --git a/plugins-demo/tailwind-demo/src/index.html b/plugins-demo/tailwind-demo/src/index.html
index 534cdfa..e798c82 100644
--- a/plugins-demo/tailwind-demo/src/index.html
+++ b/plugins-demo/tailwind-demo/src/index.html
@@ -37,6 +37,9 @@
+
diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json
index 3d200e5..b2edb64 100644
--- a/plugins/tailwind/package.json
+++ b/plugins/tailwind/package.json
@@ -2,7 +2,7 @@
"name": "@iconify/tailwind",
"description": "Iconify plugin for Tailwind CSS",
"author": "Vjacheslav Trushkin (https://iconify.design)",
- "version": "1.1.0",
+ "version": "1.1.1",
"license": "MIT",
"main": "./dist/plugin.js",
"types": "./dist/plugin.d.ts",
diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts
index 736e8ed..f166782 100644
--- a/plugins/tailwind/src/plugin.ts
+++ b/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:
*/
export function addIconSelectors(options: IconifyPluginOptions) {
- const maskSelector =
- 'maskSelector' in options ? options.maskSelector : '.iconify';
- const backgroundSelector =
- 'backgroundSelector' in options
- ? options.backgroundSelector
- : '.iconify-color';
- const {
- [maskSelector]: iconify,
- [backgroundSelector]: iconifyColor,
- ...icons
- } = getCSSRulesForPlugin(options);
+ const fullOptions = cleanupIconifyPluginOptions(options);
+
return plugin(({ addComponents, addUtilities }) => {
- addComponents({
- [maskSelector]: iconify,
- [backgroundSelector]: iconifyColor,
- });
- addUtilities(icons);
+ addComponents(getCSSComponentsForPlugin(fullOptions));
+ addUtilities(getCSSRulesForPlugin(fullOptions));
});
}
diff --git a/plugins/tailwind/src/preparsed.ts b/plugins/tailwind/src/preparsed.ts
index 69df4a8..68ec33d 100644
--- a/plugins/tailwind/src/preparsed.ts
+++ b/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) {
- const rules = Object.create(null) as Record>;
-
- // Convert options to object
- const fullOptions: IconifyPluginOptionsObject = Array.isArray(options)
+export function cleanupIconifyPluginOptions(
+ options: IconifyPluginOptions
+): IconifyPluginOptionsObject {
+ return 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>;
// 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) => {
if (!scale) {
// Delete width and height
@@ -44,9 +50,8 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
};
// Add common rules
- const maskSelector = fullOptions.maskSelector ?? '.iconify';
- const backgroundSelector =
- fullOptions.backgroundSelector ?? '.iconify-color';
+ const maskSelector = options.maskSelector ?? '.iconify';
+ const backgroundSelector = options.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
- const iconSelector = fullOptions.iconSelector || '.{prefix}--{name}';
+ return rules;
+}
- fullOptions.prefixes?.forEach((item) => {
+/**
+ * Get CSS rules for main plugin (utilities)
+ */
+export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
+ const rules = Object.create(null) as Record>;
+
+ // 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
- ? fullOptions.customise(data.body, name, prefix)
+ : options.customise
+ ? options.customise(data.body, name, prefix)
: data.body;
// Generate CSS