@vue3-oop/tailwind-preset
Version:
vue3-oop tailwindcss预设插件
314 lines (302 loc) • 9.68 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name2 in all)
__defProp(target, name2, { get: all[name2], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
preset: () => preset
});
module.exports = __toCommonJS(index_exports);
var import_tailwindcss = require("tailwindcss");
var import_tailwindcss_rem2px_preset = require("tailwindcss-rem2px-preset");
var import_tailwindcss_safe_area = __toESM(require("tailwindcss-safe-area"), 1);
// src/color/index.ts
var import_plugin = __toESM(require("tailwindcss/plugin"), 1);
// src/utils.ts
function isArray(value) {
return Array.isArray(value);
}
function isObject(value) {
const type = typeof value;
return value != null && (type === "object" || type === "function") && !isArray(value);
}
function toKebabCase(value) {
return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/\s+/g, "-").toLowerCase();
}
function flatten(target, separator, maxDepth = Infinity) {
if (!isObject(target) && !Array.isArray(target) || !maxDepth) {
return target;
}
return Object.entries(target).reduce((result, [key, value]) => {
if (isObject(value)) {
Object.entries(flatten(value, separator, maxDepth - 1)).forEach(([childKey, childValue]) => {
result[`${key}${separator}${childKey}`] = childValue;
});
} else {
result[key] = value;
}
return result;
}, {});
}
function removeDefaultSuffix(token) {
return token.replace("-DEFAULT", "");
}
function createVarsFn(cssVarPrefix) {
return (token) => {
return `var(--${cssVarPrefix}${toKebabCase(removeDefaultSuffix(token.replace(/\./g, "-")))})`;
};
}
function isHexColor(hex) {
const HEX_REGEXP = /^#?([0-9A-F]{3}){1,2}$/i;
return HEX_REGEXP.test(hex);
}
function rgbColorChannel(hexColor) {
let hexString = hexColor.replace("#", "");
if (hexString.length === 3) {
const shorthandHex = hexString.split("");
hexString = [
shorthandHex[0],
shorthandHex[0],
shorthandHex[1],
shorthandHex[1],
shorthandHex[2],
shorthandHex[2]
].join("");
}
const parsed = parseInt(hexString, 16);
const r = parsed >> 16 & 255;
const g = parsed >> 8 & 255;
const b = parsed & 255;
return `${r},${g},${b}`;
}
// src/color/index.ts
function getCssVarPrefix(options) {
if (!(options == null ? void 0 : options.cssVarPrefix)) return "";
return options.cssVarPrefix + "-";
}
var colorPlugin = (options) => {
if (!(options == null ? void 0 : options.colors) || !Reflect.ownKeys((options == null ? void 0 : options.colors) || {}).length) return (0, import_plugin.default)(() => {
});
const cssVarPrefix = getCssVarPrefix(options);
const vars = createVarsFn(cssVarPrefix);
const finalColors = flatten(options.colors, "-");
const rootCssVars = {};
const colors = Object.keys(finalColors).reduce((acc, key) => {
const formattedKey = toKebabCase(removeDefaultSuffix(key));
acc[cssVarPrefix + formattedKey] = `rgba(${vars(key)},<alpha-value>)`;
rootCssVars["--" + cssVarPrefix + formattedKey] = isHexColor(finalColors[key]) ? rgbColorChannel(finalColors[key]) : finalColors[key];
return acc;
}, {});
return (0, import_plugin.default)(
({ addBase }) => {
addBase({
body: rootCssVars
});
},
{
theme: {
extend: {
colors
}
}
}
);
};
// src/font/index.ts
var import_plugin2 = __toESM(require("tailwindcss/plugin"), 1);
// package.json
var name = "@vue3-oop/tailwind-preset";
// src/font/index.ts
var numberFont = {
"d-din-pro": [
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-400-Regular.otf`,
weight: 400
},
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-500-Medium.otf`,
weight: 500
},
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-600-SemiBold.otf`,
weight: 600
},
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-700-Bold.otf`,
weight: 700
},
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-800-ExtraBold.otf`,
weight: 800
},
{
path: `${name}/font/D-DIN-PRO/D-DIN-PRO-900-Heavy.otf`,
weight: 900
}
]
};
function fontPlugin(options) {
if (!(options == null ? void 0 : options.useNumberFont) && !options.webFonts) return (0, import_plugin2.default)(() => {
});
const fontFamily = {};
if (options.useNumberFont) Object.assign(fontFamily, numberFont);
if (options.webFonts) Object.assign(fontFamily, options.webFonts);
const base = Object.entries(fontFamily).map(([key, val]) => {
return val.map((k) => {
const { path: path2, ...extra } = k;
const fontface = {
"font-family": key,
src: `url('${k.path}') format('opentype')`
};
Object.entries(extra).forEach((c) => fontface[`font-${c[0]}`] = c[1]);
return {
"@font-face": fontface
};
});
}).flat();
const family = Object.fromEntries(Object.keys(fontFamily).map((k) => [k, [k]]));
return (0, import_plugin2.default)(
({ addBase }) => {
addBase(base);
},
{
theme: {
extend: {
fontFamily: family
}
}
}
);
}
// src/icon/index.ts
var import_plugin3 = __toESM(require("tailwindcss/plugin"), 1);
// src/icon/icons.ts
var fs = __toESM(require("fs"), 1);
var path = __toESM(require("path"), 1);
var import_svgo = require("svgo");
function readDirectoryRecursively(directory, rootDir) {
const result = [];
try {
const files = fs.readdirSync(directory);
files.forEach((file) => {
const filePath = path.join(directory, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
result.push(...readDirectoryRecursively(filePath, rootDir));
} else {
try {
const source = fs.readFileSync(path.resolve(filePath), "utf-8");
const base64 = (0, import_svgo.optimize)(source, {
datauri: "base64",
multipass: true
}).data;
result.push({
base64,
name: filePath.replaceAll(rootDir + path.sep, "").replaceAll(".svg", "").replaceAll(path.sep, "/"),
isMask: source.includes("currentColor")
});
} catch (err) {
console.error(err);
console.warn("filepath:", filePath);
}
}
});
return result;
} catch (e) {
return result;
}
}
function getIcons(iconPath) {
const dir = path.resolve(iconPath);
const files = readDirectoryRecursively(dir, dir);
return Object.fromEntries(files.map((k) => [k.name, k]));
}
// src/icon/index.ts
function svgIconPlugin(options = {}) {
if ((options == null ? void 0 : options.useSvgIcon) === false) return (0, import_plugin3.default)(() => {
});
const { iconClassPrefix = "icon", iconPath = "src/icons" } = options;
const icons = getIcons(iconPath);
const defaultProps = {
display: "inline-block",
width: `1em`,
height: `1em`
};
return (0, import_plugin3.default)(({ matchComponents }) => {
matchComponents(
{
[iconClassPrefix]: (value) => {
if (typeof value !== "object") {
return {};
}
const isMask = value.isMask;
const props = {
"--icon": `url("${value.base64}")`,
"flex-shrink": 0,
...defaultProps,
...options.extraIconProps
};
if (isMask) {
return {
...props,
mask: "var(--icon) no-repeat",
"mask-size": "100% 100%",
"-webkit-mask": "var(--icon) no-repeat",
"-webkit-mask-size": "100% 100%",
"background-color": "currentColor"
};
}
return {
...props,
background: "var(--icon) no-repeat",
"background-size": "100% 100%",
"background-color": "transparent"
};
}
},
{
values: icons
}
);
});
}
// src/index.ts
function preset(options = {}) {
return {
corePlugins: {
// button的重置色会导致按钮失色
preflight: false
},
plugins: [colorPlugin(options), fontPlugin(options), svgIconPlugin(options), import_tailwindcss_safe_area.default],
presets: [(0, import_tailwindcss_rem2px_preset.createPreset)()]
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
preset
});