inline-style-prefixer

import { prefix, createPrefixer } from "inline-style-prefixer";
// For data generation (default export)
import generateData from "inline-style-prefixer/lib/generator";
// For individual plugins
import calc from "inline-style-prefixer/lib/plugins/calc";

const { prefix, createPrefixer } = require("inline-style-prefixer");
const generateData = require("inline-style-prefixer/lib/generator");
const calc = require("inline-style-prefixer/lib/plugins/calc");

import { prefix } from "inline-style-prefixer";

const style = {
  transition: '200ms all linear',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
};

const output = prefix(style);
// Result:
// {
//   WebkitTransition: '200ms all linear',
//   transition: '200ms all linear',
//   MozBoxSizing: 'border-box',
//   boxSizing: 'border-box',
//   display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'],
//   color: 'blue'
// }

{
  chrome: 80,
  android: 8,
  firefox: 70,
  ios_saf: 13,
  safari: 13,
  ie: 12,
  edge: 18,
  opera: 55,
  op_mini: 12,
  and_chr: 80
}

/**
 * Default prefixer function with modern browser support
 * Processes style objects and adds necessary vendor prefixes
 * @param {Object} style - Style object to prefix
 * @returns {Object} Prefixed style object
 */
function prefix(style: Object): Object;

/**
 * Creates a custom prefixer with specific prefix map and plugins
 * @param {Object} config - Configuration object
 * @param {Object} config.prefixMap - Mapping of properties to required prefixes
 * @param {Array} config.plugins - Array of plugin functions for value transformations
 * @returns {Function} Prefixer function
 */
function createPrefixer(config: {
  prefixMap: Object,
  plugins: Array<Function>
}): Function;

import { createPrefixer } from "inline-style-prefixer";
import generateData from "inline-style-prefixer/lib/generator";

// Generate data for specific browser support
const { prefixMap, plugins } = generateData({
  chrome: 70,
  firefox: 60,
  safari: 12
});

// Create custom prefixer
const customPrefix = createPrefixer({ prefixMap, plugins });

const style = { display: 'flex', userSelect: 'none' };
const prefixed = customPrefix(style);

/**
 * Basic plugin function interface (most plugins)
 * @param {string} property - CSS property name
 * @param {any} value - CSS property value
 * @returns {any|undefined} Transformed value(s) or undefined if no transformation needed
 */
type BasicPlugin = (
  property: string,
  value: any
) => any | undefined;

/**
 * Extended plugin function interface (plugins that modify style object)
 * @param {string} property - CSS property name
 * @param {any} value - CSS property value
 * @param {Object} style - Complete style object (modified by plugin)
 * @returns {any|undefined} Transformed value(s) or undefined (may modify style object)
 */
type ExtendedPlugin = (
  property: string,
  value: any,
  style: Object
) => any | undefined;

/**
 * Full plugin function interface (transition plugin)
 * @param {string} property - CSS property name
 * @param {any} value - CSS property value
 * @param {Object} style - Complete style object
 * @param {Object} propertyPrefixMap - Prefix map for properties
 * @returns {any|undefined} Transformed value(s) or undefined
 */
type FullPlugin = (
  property: string,
  value: any,
  style: Object,
  propertyPrefixMap: Object
) => any | undefined;

/**
 * Prefixes calc() function calls with vendor prefixes
 * @param {string} property - CSS property name
 * @param {string} value - CSS property value
 * @returns {Array|undefined} Array of prefixed values or undefined
 */
function calc(property: string, value: string): Array<string> | undefined;

/**
 * Prefixes gradient functions (linear-gradient, radial-gradient, etc.)
 * @param {string} property - CSS property name
 * @param {string} value - CSS property value
 * @returns {Array|undefined} Array of prefixed values or undefined
 */
function gradient(property: string, value: string): Array<string> | undefined;

/**
 * Transforms flexbox display values to vendor-prefixed arrays
 * @param {string} property - CSS property name
 * @param {string} value - CSS property value
 * @returns {Array|undefined} Array of prefixed display values or undefined
 */
function flex(property: string, value: string): Array<string> | undefined;

/**
 * Provides CSS Grid support for IE with property mapping
 * Handles grid display values and transforms grid properties to IE equivalents
 * @param {string} property - CSS property name
 * @param {any} value - CSS property value
 * @param {Object} style - Complete style object
 * @returns {Array|undefined} Array of prefixed values or undefined (modifies style object)
 */
function grid(property: string, value: any, style: Object): Array<string> | undefined;

// Import specific plugins
import calc from "inline-style-prefixer/lib/plugins/calc";
import gradient from "inline-style-prefixer/lib/plugins/gradient";
import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";

// Use with createPrefixer
const customPrefix = createPrefixer({
  prefixMap: {},
  plugins: [calc, gradient]
});

/**
 * Generates browser-specific prefix data (default export)
 * @param {Object} browserList - Browser versions to support
 * @param {Object} options - Generation options
 * @param {boolean} options.prefixMap - Whether to generate prefix map
 * @param {boolean} options.plugins - Whether to generate plugin list
 * @param {string} options.path - File path to save generated data
 * @param {boolean} options.compatibility - Generate CommonJS compatible output
 * @returns {Object} Generated data with prefixMap and plugins
 */
function generateData(
  browserList: Object,
  options?: {
    prefixMap?: boolean,
    plugins?: boolean,
    path?: string,
    compatibility?: boolean
  }
): {
  prefixMap: Object,
  plugins: Array<Function>
};

/**
 * Generates file content string for custom prefixer data (named export)
 * @param {Object} prefixMap - Prefix map object
 * @param {Array} pluginList - Array of plugin names
 * @param {boolean} compatibility - Whether to generate CommonJS compatible output
 * @returns {string} Generated file content as string
 */
function generateFile(
  prefixMap: Object,
  pluginList: Array<string>,
  compatibility: boolean
): string;

import generateData, { generateFile } from "inline-style-prefixer/lib/generator";

// Generate data for runtime use
const browserSupport = {
  chrome: 80,
  firefox: 70,
  safari: 13,
  ie: 11
};

const { prefixMap, plugins } = generateData(browserSupport, {
  prefixMap: true,
  plugins: true
});

// Generate file content for static compilation
const fileContent = generateFile(prefixMap, plugins, false);

/**
 * Style object type - any object with CSS property-value pairs
 */
type StyleObject = {
  [property: string]: any
};

/**
 * Prefix map type - maps CSS properties to required vendor prefixes
 */
type PrefixMap = {
  [property: string]: Array<string>
};

/**
 * Browser support configuration
 */
type BrowserList = {
  chrome?: number,
  android?: number,
  firefox?: number,
  ios_saf?: number,
  safari?: number,
  ie?: number,
  edge?: number,
  opera?: number,
  op_mini?: number,
  and_chr?: number,
  and_uc?: number
};

/**
 * Generation options for createPrefixer
 */
type GenerationOptions = {
  prefixMap?: boolean,
  plugins?: boolean,
  path?: string,
  compatibility?: boolean
};

import { createPrefixer } from "inline-style-prefixer";
import generateData from "inline-style-prefixer/lib/generator";

// Support older browsers
const legacyBrowsers = {
  chrome: 50,
  firefox: 45,
  safari: 10,
  ie: 11
};

const { prefixMap, plugins } = generateData(legacyBrowsers);
const legacyPrefix = createPrefixer({ prefixMap, plugins });

import { createPrefixer } from "inline-style-prefixer";
import calc from "inline-style-prefixer/lib/plugins/calc";
import gradient from "inline-style-prefixer/lib/plugins/gradient";
import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";

// Use only specific plugins
const lightweightPrefix = createPrefixer({
  prefixMap: {},
  plugins: [calc, gradient]
});

// Use for IE support with advanced flexbox handling
const iePrefix = createPrefixer({
  prefixMap: { display: ["ms"] },
  plugins: [flexboxIE, gradient]
});

const nestedStyle = {
  container: {
    display: 'flex',
    nested: {
      transform: 'translateX(10px)'
    }
  },
  item: {
    flex: 1
  }
};

const prefixed = prefix(nestedStyle);
// Recursively processes all nested objects

const style = {
  width: ['calc(100%)', 'min-content'],
  background: 'linear-gradient(to right, red, blue)'
};

const prefixed = prefix(style);
// Result:
// {
//   width: [
//     '-webkit-calc(100%)',
//     '-moz-calc(100%)',
//     'calc(100%)',
//     '-webkit-min-content',
//     '-moz-min-content',
//     'min-content'
//   ],
//   background: [
//     '-webkit-linear-gradient(to right, red, blue)',
//     '-moz-linear-gradient(to right, red, blue)',
//     'linear-gradient(to right, red, blue)'
//   ]
// }