From 4666bde4c119fd8d56b25a3b4812ab0a2848dcd4 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Sun, 28 Jul 2024 10:22:39 +0300 Subject: [PATCH] chore(tailwind): add square option to plugin, fix lint --- plugins-demo/tailwind-demo/package.json | 1 + plugins-demo/tailwind-demo/src/index.html | 6 ++++ plugins-demo/tailwind-demo/tailwind.config.js | 9 +++++ plugins/tailwind/.eslintignore | 2 ++ plugins/tailwind/.eslintrc.cjs | 33 +++++++++++++++++++ plugins/tailwind/package.json | 2 +- plugins/tailwind/src/helpers/loader.ts | 22 +++++++++---- plugins/tailwind/src/helpers/options.ts | 3 ++ plugins/tailwind/src/plugin.ts | 2 +- plugins/tailwind/src/preparsed.ts | 14 +++++++- plugins/tailwind/tsconfig.json | 2 +- pnpm-lock.yaml | 10 ++++++ 12 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 plugins/tailwind/.eslintignore create mode 100644 plugins/tailwind/.eslintrc.cjs diff --git a/plugins-demo/tailwind-demo/package.json b/plugins-demo/tailwind-demo/package.json index 6c1556c..5e5abe0 100644 --- a/plugins-demo/tailwind-demo/package.json +++ b/plugins-demo/tailwind-demo/package.json @@ -9,6 +9,7 @@ }, "keywords": [], "devDependencies": { + "@iconify-json/fa6-regular": "^1.1.21", "@iconify-json/mdi-light": "^1.1.10", "@iconify-json/vscode-icons": "^1.1.36", "@iconify/tailwind": "workspace:*", diff --git a/plugins-demo/tailwind-demo/src/index.html b/plugins-demo/tailwind-demo/src/index.html index e798c82..57fc069 100644 --- a/plugins-demo/tailwind-demo/src/index.html +++ b/plugins-demo/tailwind-demo/src/index.html @@ -41,6 +41,12 @@ class="iconify mdi-light--home h-12 w-12 text-red-600" >

+

+ Scaled non-square icons: + +

Dynamic selectors plugin, custom options

diff --git a/plugins-demo/tailwind-demo/tailwind.config.js b/plugins-demo/tailwind-demo/tailwind.config.js index 38b00a0..45f7485 100644 --- a/plugins-demo/tailwind-demo/tailwind.config.js +++ b/plugins-demo/tailwind-demo/tailwind.config.js @@ -91,6 +91,15 @@ module.exports = { scale: 0, // No prefixes list: reusing data from plugin above }), + // Main plugin, no square and scale + addIconSelectors({ + maskSelector: '.fa6-mask', + backgroundSelector: '.fa6-bg', // unused + iconSelector: '.{prefix}-{name}', + square: false, + scale: 2, + prefixes: ['fa6-regular'], + }), // Plugin with clean selectors: requires writing all used icons in first parameter addCleanIconSelectors(['mdi-light:home']), // Plugin with dynamic selectors diff --git a/plugins/tailwind/.eslintignore b/plugins/tailwind/.eslintignore new file mode 100644 index 0000000..5f37ca5 --- /dev/null +++ b/plugins/tailwind/.eslintignore @@ -0,0 +1,2 @@ +lib +dist diff --git a/plugins/tailwind/.eslintrc.cjs b/plugins/tailwind/.eslintrc.cjs new file mode 100644 index 0000000..f559331 --- /dev/null +++ b/plugins/tailwind/.eslintrc.cjs @@ -0,0 +1,33 @@ +module.exports = { + env: { + browser: true, + es6: true, + node: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended-requiring-type-checking', + 'plugin:prettier/recommended', + ], + globals: { + Atomics: 'readonly', + SharedArrayBuffer: 'readonly', + }, + parser: '@typescript-eslint/parser', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['tsconfig.json', 'tests/tsconfig.json'], + extraFileExtensions: ['.cjs'], + }, + plugins: ['@typescript-eslint'], + rules: { + 'no-mixed-spaces-and-tabs': ['off'], + 'no-unused-vars': ['off'], + }, + overrides: [ + { + files: ['src/**/*.ts', 'tests/*.ts'], + }, + ], +}; diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json index f1b8d3a..171a93d 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.1", + "version": "1.1.2", "license": "MIT", "main": "./dist/plugin.js", "types": "./dist/plugin.d.ts", diff --git a/plugins/tailwind/src/helpers/loader.ts b/plugins/tailwind/src/helpers/loader.ts index 9c64e50..66f6307 100644 --- a/plugins/tailwind/src/helpers/loader.ts +++ b/plugins/tailwind/src/helpers/loader.ts @@ -19,7 +19,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined { main, info, }; - } catch {} + } catch { + // + } // Try `@iconify/json` try { @@ -27,7 +29,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined { return { main, }; - } catch {} + } catch { + // + } } /** @@ -45,13 +49,19 @@ const cache = Object.create(null) as Record; */ function loadIconSetFromFile(source: LocatedIconSet): IconifyJSON | undefined { try { - const result = JSON.parse(readFileSync(source.main, 'utf8')); + const result = JSON.parse( + readFileSync(source.main, 'utf8') + ) as IconifyJSON; if (!result.info && source.info) { // Load info from a separate file - result.info = JSON.parse(readFileSync(source.info, 'utf8')); + result.info = JSON.parse( + readFileSync(source.info, 'utf8') + ) as IconifyJSON['info']; } return result; - } catch {} + } catch { + // + } } /** @@ -75,7 +85,7 @@ export function loadIconSet( // Try to parse JSON if (source.startsWith('{')) { try { - return JSON.parse(source); + return JSON.parse(source) as IconifyJSON; } catch { // Invalid JSON } diff --git a/plugins/tailwind/src/helpers/options.ts b/plugins/tailwind/src/helpers/options.ts index 842bfbb..7933283 100644 --- a/plugins/tailwind/src/helpers/options.ts +++ b/plugins/tailwind/src/helpers/options.ts @@ -94,6 +94,9 @@ export interface IconifyPluginOptionsObject { // Scale for icons, defaults to 1 scale?: number; + // Make icons square, defaults to true + square?: boolean; + // Prefixes to load prefixes?: IconifyPluginListOptions; diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts index f166782..04fc77b 100644 --- a/plugins/tailwind/src/plugin.ts +++ b/plugins/tailwind/src/plugin.ts @@ -26,7 +26,7 @@ export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) { return getDynamicCSSRules(icon, options); } catch (err) { // Log error, but do not throw it - console.error(err.message); + console.error((err as Error).message); } }, }); diff --git a/plugins/tailwind/src/preparsed.ts b/plugins/tailwind/src/preparsed.ts index 68ec33d..e4c9e01 100644 --- a/plugins/tailwind/src/preparsed.ts +++ b/plugins/tailwind/src/preparsed.ts @@ -5,6 +5,7 @@ import { } from '@iconify/utils/lib/css/common'; import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; +import { calculateSize } from '@iconify/utils/lib/svg/size'; import type { IconifyPluginOptions, IconifyPluginOptionsObject, @@ -90,6 +91,12 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) { // Add icon sets const iconSelector = options.iconSelector || '.{prefix}--{name}'; + // Make icons square + const square = options.square !== false; + + // Scale + const scale = options.scale ?? 1; + options.prefixes?.forEach((item) => { let prefix: string; let iconSet: IconifyJSON | undefined; @@ -162,7 +169,7 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) { { mode: 'mask', // not used because varName is set, but required varName, - forceSquare: true, + forceSquare: square, } ); @@ -171,6 +178,11 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) { .replace('{prefix}', prefix) .replace('{name}', name); + // Scale non-square icons + if (!square && scale > 0 && scale !== 1 && iconRules.width) { + iconRules.width = calculateSize(iconRules.width, scale); + } + // Add to rules rules[selector] = iconRules; }); diff --git a/plugins/tailwind/tsconfig.json b/plugins/tailwind/tsconfig.json index 2db517c..dde8149 100644 --- a/plugins/tailwind/tsconfig.json +++ b/plugins/tailwind/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig-base.json", - "include": ["src/**/*.ts", ".eslintrc.js"], + "include": ["src/**/*.ts", ".eslintrc.cjs"], "compilerOptions": { "rootDir": "./src", "outDir": "./lib", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b9cca6..c762e69 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -832,6 +832,9 @@ importers: plugins-demo/tailwind-demo: devDependencies: + '@iconify-json/fa6-regular': + specifier: ^1.1.21 + version: 1.1.21 '@iconify-json/mdi-light': specifier: ^1.1.10 version: 1.1.10 @@ -2639,6 +2642,9 @@ packages: '@iconify-icons/uil@1.2.3': resolution: {integrity: sha512-+UlrTCKJ13k8MdZdBJUdJLwrys6r8/BG3MT+C09Vcqbzh5IKGxS9RdJ7G3XeTn+H2MrIJ/EHWCNNUANlDqLk6A==} + '@iconify-json/fa6-regular@1.1.21': + resolution: {integrity: sha512-xgKt8d9AeMXKc1gfaUUqhYpDZjmC++e6ETsNyW6G0g8n7m2pUsnlpiTDUXGEtalVt6zl7M+HSU9RKrq4ma0rHg==} + '@iconify-json/flat-color-icons@1.1.10': resolution: {integrity: sha512-tkkxTEPMYqDtss8tFij/gWfwrnt/NeChZoUGr6l71sWi7jYMwD35dYjFhM2bjtww5MCkVIAJaVx/3QJGUmMD/g==} @@ -11600,6 +11606,10 @@ snapshots: dependencies: '@iconify/types': 2.0.0 + '@iconify-json/fa6-regular@1.1.21': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/flat-color-icons@1.1.10': dependencies: '@iconify/types': 2.0.0