@niibase/uniwind 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+## What's Changed in 1.7.0
+
+
+
+### 🚀 Features
+
+* introduce responsive scaling support by @divineniiquaye
+
+### 🐛 Bug Fixes
+
+* reemove redundant constructor assignment from css processor by @divineniiquaye
+* dont parse flex: 1 (#543) by @Brentlok
+* deeply find themed variables (#535) by @Brentlok
+
+### 🔨 Refactoring
+
+* major bundler refactor (#523) by @Brentlok
+
+### 🏠 Chores
+
+* pass bundler config directly by @Brentlok
+* generate artifacts before compiling virtual code by @Brentlok
+* update version by @Brentlok
+* silent css variable warning for SSR (#539) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'updates' by @divineniiquaye
+* Fix !important modifier having no effect on native (#534) by @jezsung
+
+### New Contributors
+* @jezsung made their first contribution
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.4...v1.7.0
+
+
+## What's Changed in 1.6.4
+
+
+
+### 🚀 Features
+
+* getCSSVariable function to get css variable outside of react (#521) by @Brentlok
+* parse inline-start inline-end border to RN (#515) by @Brentlok
+
+### 🐛 Bug Fixes
+
+* join border radius to fix some components (#517) by @Brentlok
+* remove deprecated push notification ios export (#516) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'pre-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.3...v1.6.4
+
+
 ## What's Changed in 1.6.3
 
 

package/dist/common/{css → bundler/artifacts/css}/index.js

@@ -5,17 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildCSS = void 0;
 var _fs = _interopRequireDefault(require("fs"));
-var _path = _interopRequireDefault(require("path"));
 var _extraUtilities = require("./extraUtilities");
 var _insets = require("./insets");
 var _overwrite = require("./overwrite");
 var _themes = require("./themes");
 var _variants = require("./variants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
-const buildCSS = async (themes, input) => {
+const buildCSS = async (themes, input, cssFilePath) => {
   const themesCSS = await (0, _themes.generateCSSForThemes)(themes, input);
-  const cssFilePath = _path.default.join(dirname, "../../uniwind.css");
   const oldCSSFile = _fs.default.existsSync(cssFilePath) ? _fs.default.readFileSync(cssFilePath, "utf-8") : "";
   const newCssFile = [_variants.VARIANTS_CSS, _insets.INSETS_CSS, _overwrite.OVERWRITE_CSS, _extraUtilities.EXTRA_UTILITIES_CSS, themesCSS].join("\n");
   if (oldCSSFile === newCssFile) {

package/dist/common/{css → bundler/artifacts/css}/themes.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCSSForThemes = void 0;
+var _logger = require("@/bundler/logger");
 var _node = require("@tailwindcss/node");
 var _fs = _interopRequireDefault(require("fs"));
 var _lightningcss = require("lightningcss");
 var _path = _interopRequireDefault(require("path"));
-var _logger = require("../metro/logger");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const readFileSafe = filePath => {
   try {

package/dist/common/{utils/buildDtsFile.js → bundler/artifacts/dts.js}

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildDtsFile = void 0;
 var _fs = _interopRequireDefault(require("fs"));
-var _package = require("../../package.json");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const buildDtsFile = (dtsPath, stringifiedThemes) => {
   const oldDtsContent = _fs.default.existsSync(dtsPath) ? _fs.default.readFileSync(dtsPath, "utf-8") : "";
-  const dtsContent = [`// NOTE: This file is generated by ${_package.name} and it should not be edited manually.`, `/// <reference types="${_package.name}/types" />`, "", `declare module '${_package.name}' {`, `    export interface UniwindConfig {`, `        themes: readonly ${stringifiedThemes}`, `    }`, `}`, "", `export {}`, ""].join("\n");
+  const dtsContent = [`// NOTE: This file is generated by uniwind and it should not be edited manually.`, `/// <reference types="uniwind/types" />`, "", `declare module 'uniwind' {`, `    export interface UniwindConfig {`, `        themes: readonly ${stringifiedThemes}`, `    }`, `}`, "", `export {}`, ""].join("\n");
   if (oldDtsContent === dtsContent) {
     return;
   }

package/dist/common/bundler/config.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UniwindBundlerConfig = void 0;
+var _css = require("@/bundler/artifacts/css");
+var _dts = require("@/bundler/artifacts/dts");
+var _cssVisitor = require("@/bundler/css-visitor");
+var _consts = require("@/common/consts");
+var _utils = require("@/common/utils");
+var _path = _interopRequireDefault(require("path"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class UniwindBundlerConfig {
+  constructor(config, platform) {
+    this.config = config;
+    this.platform = platform;
+  }
+  static fromMetroConfig(config, platform) {
+    const getPlatform = () => {
+      if (!(0, _utils.isDefined)(platform)) {
+        return _consts.Platform.Native;
+      }
+      if (!config.isTV) {
+        return platform;
+      }
+      if (platform === _consts.Platform.Android) {
+        return _consts.Platform.AndroidTV;
+      }
+      if (platform === _consts.Platform.iOS) {
+        return _consts.Platform.AppleTV;
+      }
+      throw new Error(`Platform ${platform} not supported`);
+    };
+    if (typeof config === "undefined") {
+      throw new Error("Uniwind: You need to pass second parameter to withUniwindConfig");
+    }
+    if (typeof config.cssEntryFile === "undefined") {
+      throw new Error('Uniwind: You need to pass css css entry file to withUniwindConfig, e.g. withUniwindConfig(config, { cssEntryFile: "./global.css" })');
+    }
+    return new UniwindBundlerConfig(config, getPlatform());
+  }
+  static fromViteConfig(config) {
+    return new UniwindBundlerConfig(config, _consts.Platform.Web);
+  }
+  get cssPath() {
+    return _path.default.join(process.cwd(), this.config.cssEntryFile);
+  }
+  get themes() {
+    return Array.from(/* @__PURE__ */new Set(["light", "dark", ...(this.config.extraThemes ?? [])]));
+  }
+  get cssVisitor() {
+    return new _cssVisitor.UniwindCSSVisitor(this);
+  }
+  get polyfills() {
+    return this.config.polyfills;
+  }
+  get stringifiedThemes() {
+    return `[${this.themes.map(theme => `'${theme}'`).join(", ")}]`;
+  }
+  toMetroConfig() {
+    return this.config;
+  }
+  async generateArtifacts(cssArtifactPath) {
+    await (0, _css.buildCSS)(this.themes, this.config.cssEntryFile, cssArtifactPath);
+    (0, _dts.buildDtsFile)(this.config.dtsFile ?? "uniwind-types.d.ts", this.stringifiedThemes);
+  }
+}
+exports.UniwindBundlerConfig = UniwindBundlerConfig;

package/dist/common/bundler/css-compiler/compileCSS.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compileCSS = void 0;
+var _consts = require("@/common/consts");
+var _compileNativeCSS = require("./compileNativeCSS");
+var _compileTailwind = require("./compileTailwind");
+var _compileWebCSS = require("./compileWebCSS");
+const compileCSS = async bundlerConfig => {
+  const tailwindCSS = await (0, _compileTailwind.compileTailwind)(bundlerConfig);
+  if (bundlerConfig.platform === _consts.Platform.Web) {
+    return (0, _compileWebCSS.compileWebCSS)(bundlerConfig, tailwindCSS);
+  }
+  return (0, _compileNativeCSS.compileNativeCSS)(bundlerConfig, tailwindCSS);
+};
+exports.compileCSS = compileCSS;

package/dist/common/bundler/css-compiler/compileNativeCSS.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compileNativeCSS = void 0;
+var _cssProcessor = require("../css-processor");
+const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
+  const Processor = new _cssProcessor.ProcessorBuilder(bundlerConfig);
+  Processor.transform(tailwindCSS);
+  const stylesheet = (0, _cssProcessor.serializeJSObject)((0, _cssProcessor.addMetaToStylesTemplate)(Processor, bundlerConfig.platform), (key, value) => `"${key}": ${value}`);
+  const vars = (0, _cssProcessor.serializeJSObject)(Processor.vars, (key, value) => `get "${key}"() { return ${value} }`);
+  const keyframes = (0, _cssProcessor.serializeJSObject)(Processor.keyframes, (key, value) => `get "${key}"() { return ${value} }`);
+  const scopedVars = Object.fromEntries(Object.entries(Processor.scopedVars).map(([scopedVarsName, scopedVars2]) => [scopedVarsName, (0, _cssProcessor.serializeJSObject)(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)]));
+  const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
+  const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
+  return ["({", `scopedVars: ({ ${serializedScopedVars} }),`, `vars: ({ ${currentColorVar} ${vars} }),`, `stylesheet: ({ ${stylesheet} }),`, `keyframes: ({ ${keyframes} }),`, "})"].join("");
+};
+exports.compileNativeCSS = compileNativeCSS;

package/dist/common/bundler/css-compiler/compileTailwind.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compileTailwind = void 0;
+var _node = require("@tailwindcss/node");
+var _oxide = require("@tailwindcss/oxide");
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const compileTailwind = async bundlerConfig => {
+  const css = await _fs.default.promises.readFile(bundlerConfig.cssPath, "utf-8");
+  const compiler = await (0, _node.compile)(css, {
+    base: _path.default.dirname(bundlerConfig.cssPath),
+    onDependency: () => void 0
+  });
+  const scanner = new _oxide.Scanner({
+    sources: [...compiler.sources, {
+      negated: false,
+      pattern: "**/*",
+      base: _path.default.dirname(bundlerConfig.cssPath)
+    }]
+  });
+  return compiler.build(scanner.scan());
+};
+exports.compileTailwind = compileTailwind;

package/dist/common/bundler/css-compiler/compileWebCSS.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compileWebCSS = void 0;
+var _lightningcss = require("lightningcss");
+const compileWebCSS = (bundlerConfig, tailwindCSS) => {
+  return (0, _lightningcss.transform)({
+    code: Buffer.from(tailwindCSS),
+    filename: "uniwind.css",
+    visitor: bundlerConfig.cssVisitor
+  }).code.toString();
+};
+exports.compileWebCSS = compileWebCSS;

package/dist/common/{vite → bundler/css-compiler}/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _vite = require("./vite");
-Object.keys(_vite).forEach(function (key) {
+var _compileCSS = require("./compileCSS");
+Object.keys(_compileCSS).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _vite[key]) return;
+  if (key in exports && exports[key] === _compileCSS[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _vite[key];
+      return _compileCSS[key];
     }
   });
 });

package/dist/common/bundler/css-processor/addMetaToStylesTemplate.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addMetaToStylesTemplate = void 0;
+var _consts = require("@/common/consts");
+var _utils = require("@/common/utils");
+var _serialize = require("./serialize");
+var _utils2 = require("./utils");
+const extractVarsFromString = value => {
+  const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index);
+  return thisIndexes.map(index => {
+    const afterIndex = value.slice(index + 5);
+    const closingIndex = afterIndex.indexOf("]");
+    const varName = afterIndex.slice(0, closingIndex);
+    return varName.replace(/[`"\\]/g, "");
+  });
+};
+const makeSafeForSerialization = value => {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  return value;
+};
+const hasThemedVarDependency = (varName, Processor, visited = /* @__PURE__ */new Set()) => {
+  if (visited.has(varName)) {
+    return false;
+  }
+  visited.add(varName);
+  const isScopedVar = Object.values(Processor.scopedVars).some(scopedVars => varName in scopedVars);
+  if (isScopedVar) {
+    return true;
+  }
+  const globalVarValue = Processor.vars[varName];
+  if (typeof globalVarValue !== "string") {
+    return false;
+  }
+  return extractVarsFromString(globalVarValue).some(usedVarName => {
+    return hasThemedVarDependency(usedVarName, Processor, visited);
+  });
+};
+const addMetaToStylesTemplate = (Processor, currentPlatform) => {
+  const stylesheetsEntries = Object.entries(Processor.stylesheets).map(([className, stylesPerMediaQuery]) => {
+    const styles = stylesPerMediaQuery.map((style, index) => {
+      const {
+        platform,
+        rtl,
+        theme,
+        orientation,
+        minWidth,
+        maxWidth,
+        colorScheme,
+        important: _,
+        importantProperties,
+        active,
+        focus,
+        disabled,
+        dataAttributes,
+        ...rest
+      } = style;
+      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${(0, _serialize.serialize)(value)} }`]);
+      if (platform) {
+        const isTV = currentPlatform === _consts.Platform.AndroidTV || currentPlatform === _consts.Platform.AppleTV;
+        const commonPlatform = isTV ? _consts.Platform.TV : _consts.Platform.Native;
+        if (platform !== commonPlatform && platform !== currentPlatform) {
+          return null;
+        }
+      }
+      if (entries.length === 0) {
+        return null;
+      }
+      const dependencies = [];
+      const stringifiedEntries = JSON.stringify(entries);
+      const usedVars = extractVarsFromString(stringifiedEntries);
+      const isUsingThemedVar = usedVars.some(usedVarName => hasThemedVarDependency(usedVarName, Processor));
+      if (usedVars.length > 0) {
+        dependencies.push(_consts.StyleDependency.Variables);
+      }
+      if (theme !== null || isUsingThemedVar || stringifiedEntries.includes("rt.lightDark")) {
+        dependencies.push(_consts.StyleDependency.Theme);
+      }
+      if (orientation !== null) {
+        dependencies.push(_consts.StyleDependency.Orientation);
+      }
+      if (rtl !== null) {
+        dependencies.push(_consts.StyleDependency.Rtl);
+      }
+      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.makeResponsive") || stringifiedEntries.includes("rt.screen")) {
+        dependencies.push(_consts.StyleDependency.Dimensions);
+      }
+      if (stringifiedEntries.includes("rt.insets")) {
+        dependencies.push(_consts.StyleDependency.Insets);
+      }
+      if (stringifiedEntries.includes("rt.fontScale")) {
+        dependencies.push(_consts.StyleDependency.FontScale);
+      }
+      return {
+        entries,
+        minWidth,
+        maxWidth,
+        theme: makeSafeForSerialization(theme),
+        orientation: makeSafeForSerialization(orientation),
+        rtl,
+        colorScheme: makeSafeForSerialization(colorScheme),
+        native: platform !== null,
+        dependencies: dependencies.length > 0 ? dependencies : null,
+        index,
+        className: makeSafeForSerialization(className),
+        active,
+        focus,
+        disabled,
+        importantProperties: importantProperties?.map(property => property.startsWith("--") ? property : (0, _utils2.toCamelCase)(property)).map(makeSafeForSerialization) ?? [],
+        dataAttributes,
+        complexity: [minWidth !== 0, theme !== null, orientation !== null, rtl !== null, platform !== null, active !== null, focus !== null, disabled !== null, dataAttributes !== null].filter(Boolean).length
+      };
+    });
+    const filteredStyles = styles.filter(_utils.isDefined);
+    if (filteredStyles.length === 0) {
+      return null;
+    }
+    return [className, filteredStyles];
+  }).filter(_utils.isDefined);
+  const stylesheets = Object.fromEntries(stylesheetsEntries);
+  return stylesheets;
+};
+exports.addMetaToStylesTemplate = addMetaToStylesTemplate;

package/dist/common/bundler/css-processor/animation.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProcessedVarAnimation = exports.getProcessedAnimation = void 0;
+var _utils = require("./utils");
+const STATIC_TIMING_FUNCTIONS = /* @__PURE__ */new Set(["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"]);
+const DIRECTION_VALUES = /* @__PURE__ */new Set(["normal", "reverse", "alternate", "alternate-reverse"]);
+const FILL_MODE_VALUES = /* @__PURE__ */new Set(["none", "forwards", "backwards", "both"]);
+const PLAY_STATE_VALUES = /* @__PURE__ */new Set(["running", "paused"]);
+const isTimeString = x => {
+  if (typeof x === "number") return true;
+  return typeof x === "string" && /^-?\d*(?:\.\d+)?(?:e[+-]?\d+)?(ms|s)$/.test(x.trim());
+};
+const isTimingFunctionCustom = x => {
+  if (typeof x !== "string") return false;
+  return x.startsWith("rt.cubicBezier(") || x.startsWith("rt.steps(") || x.startsWith("rt.linear(");
+};
+const getProcessedVarAnimation = (declarationValue, styles, updateVar) => {
+  const tokens = declarationValue.replace(/\)/g, ") ").split(" ");
+  let duration = false;
+  for (const unprocessedToken of tokens) {
+    const token = unprocessedToken.replace(/^"|"$/g, "");
+    if (isTimeString(token) && !duration) {
+      styles["animation-duration"] = unprocessedToken;
+      duration = true;
+    } else if (isTimeString(token) && duration) {
+      styles["animation-delay"] = unprocessedToken;
+    } else if (STATIC_TIMING_FUNCTIONS.has(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (isTimingFunctionCustom(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (token === "infinite" || /^\d+$/.test(token)) {
+      styles["animation-iteration-count"] = unprocessedToken;
+    } else if (DIRECTION_VALUES.has(token)) {
+      styles["animation-direction"] = unprocessedToken;
+    } else if (FILL_MODE_VALUES.has(token)) {
+      styles["animation-fill-mode"] = unprocessedToken;
+    } else if (PLAY_STATE_VALUES.has(token)) {
+      styles["animation-play-state"] = unprocessedToken;
+    } else {
+      updateVar(`"${token}"`);
+    }
+  }
+};
+exports.getProcessedVarAnimation = getProcessedVarAnimation;
+const parseValues = (tokens, getProcessedValue) => {
+  const groups = [];
+  let group = [];
+  for (const token of tokens) {
+    if (token.type === "token" && token.value.type === "delim" && token.value.value === "|") {
+      if (group.length > 0) {
+        groups.push(group);
+        group = [];
+      }
+      continue;
+    }
+    group.push(token);
+  }
+  if (group.length > 0) {
+    groups.push(group);
+  }
+  const values = groups.map(groupTokens => tokensToText(groupTokens, getProcessedValue));
+  return values.length > 1 ? values : values[0];
+};
+const tokensToText = (tokens, getProcessedValue) => {
+  return tokens.map(token => {
+    const value = getProcessedValue(token);
+    if (typeof value === "string") {
+      return /^"[^"]+"$/.test(value) ? value : `"${value}"`;
+    }
+    return value;
+  }).join(" ").trim();
+};
+const getProcessedAnimation = (declarationValue, getProcessedValue) => {
+  const segments = [];
+  const result = [];
+  let current = [];
+  for (const token of declarationValue) {
+    if (token.type === "var") {
+      return getProcessedValue(token);
+    }
+    if (token.type === "token" && token.value.type === "comma") {
+      if (current.length > 0) {
+        segments.push(current);
+        current = [];
+      }
+      continue;
+    }
+    current.push(token);
+  }
+  if (current.length > 0) {
+    segments.push(current);
+  }
+  for (const segment of segments) {
+    const colonIndex = segment.findIndex(token => token.type === "token" && token.value.type === "colon");
+    if (colonIndex === -1) {
+      const nameValue = parseValues(segment, getProcessedValue);
+      result.push(["name", Array.isArray(nameValue) ? nameValue : [nameValue]]);
+      continue;
+    }
+    const keyTokens = segment.slice(0, colonIndex);
+    const valueTokens = segment.slice(colonIndex + 1);
+    const rawKey = tokensToText(keyTokens, getProcessedValue);
+    const value = parseValues(valueTokens, getProcessedValue);
+    const key = (0, _utils.toCamelCase)(rawKey);
+    result.push([key, value]);
+  }
+  return result;
+};
+exports.getProcessedAnimation = getProcessedAnimation;

package/dist/common/bundler/css-processor/color.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Color = void 0;
+var _culori = require("culori");
+var _logger = require("../logger");
+var _utils = require("./utils");
+class Color {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  toRgb = (0, _culori.converter)("rgb");
+  black = "#000000";
+  logger = new _logger.Logger("Color");
+  processColor(color) {
+    if (typeof color === "string") {
+      const parsed = (0, _culori.parse)(color);
+      if (parsed === void 0) {
+        const colorFunction = color.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/)?.[1];
+        if (colorFunction === void 0) {
+          this.logger.error(`Failed to convert color ${color}`);
+          return this.black;
+        }
+        const colorValue = color.replace(colorFunction, "").slice(1, -1);
+        return `rt.parseColor("${colorFunction}", ${colorValue})`;
+      }
+      return this.format(parsed);
+    }
+    try {
+      if (color.type === "currentcolor") {
+        return 'this["currentColor"]';
+      }
+      if (color.type === "rgb" || color.type === "srgb") {
+        const alpha = typeof color.alpha === "number" ? color.alpha : (0, _utils.pipe)(color.alpha)(x => this.Processor.CSS.processValue(x), Number, x => isNaN(x) ? 1 : x);
+        return this.format({
+          r: color.r / 255,
+          g: color.g / 255,
+          b: color.b / 255,
+          alpha,
+          mode: "rgb"
+        });
+      }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
+      const result = this.toRgb({
+        mode: colorType,
+        ...color
+      });
+      return this.format(result);
+    } catch {
+      this.logger.error(`Failed to convert color ${JSON.stringify(color)}`);
+      return this.black;
+    }
+  }
+  isColor(value) {
+    return typeof value === "string" && (0, _culori.parse)(value) !== void 0;
+  }
+  format(color) {
+    if (color.alpha === 1 || color.alpha === void 0) {
+      return (0, _culori.formatHex)(color);
+    }
+    return (0, _culori.formatHex8)(color);
+  }
+}
+exports.Color = Color;