0
# inline-style-prefixer
1

2
inline-style-prefixer is a run-time Autoprefixer for JavaScript style objects. It automatically adds necessary CSS vendor prefixes based on modern browser support targets, offering both static prefixing (adds all possible prefixes) and dynamic prefixing (intelligently determines which prefixes are needed). The library supports advanced features like flexbox legacy syntax transformation, CSS Grid prefixing, gradient prefixing, and custom plugin architecture for specialized CSS value transformations.
3

4
## Package Information
5

6
- **Package Name**: inline-style-prefixer
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Version**: 7.0.0
10
- **Installation**: `npm install inline-style-prefixer`
11

12
## Core Imports
13

14
```javascript
15
import { prefix, createPrefixer } from "inline-style-prefixer";
16
// For data generation (default export)
17
import generateData from "inline-style-prefixer/lib/generator";
18
// For individual plugins
19
import calc from "inline-style-prefixer/lib/plugins/calc";
20
```
21

22
For CommonJS:
23

24
```javascript
25
const { prefix, createPrefixer } = require("inline-style-prefixer");
26
const generateData = require("inline-style-prefixer/lib/generator");
27
const calc = require("inline-style-prefixer/lib/plugins/calc");
28
```
29

30
## Basic Usage
31

32
```javascript
33
import { prefix } from "inline-style-prefixer";
34

35
const style = {
36
  transition: '200ms all linear',
37
  boxSizing: 'border-box',
38
  display: 'flex',
39
  color: 'blue'
40
};
41

42
const output = prefix(style);
43
// Result:
44
// {
45
//   WebkitTransition: '200ms all linear',
46
//   transition: '200ms all linear',
47
//   MozBoxSizing: 'border-box',
48
//   boxSizing: 'border-box',
49
//   display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'],
50
//   color: 'blue'
51
// }
52
```
53

54
## Architecture
55

56
inline-style-prefixer is built around several key components:
57

58
- **Default Prefixer**: Pre-configured `prefix` function with modern browser support (Chrome 80+, Firefox 70+, Safari 13+, etc.)
59
- **Custom Prefixer Factory**: `createPrefixer` function for creating custom prefixers with specific browser targets
60
- **Plugin System**: Modular plugin architecture for handling special CSS value transformations
61
- **Generator System**: Dynamic data generation based on browser compatibility targets
62
- **Property/Value Processing**: Separate handling of CSS property prefixing and value transformation
63

64
### Default Browser Support
65

66
The default `prefix` function targets these browser versions:
67

68
```javascript
69
{
70
  chrome: 80,
71
  android: 8,
72
  firefox: 70,
73
  ios_saf: 13,
74
  safari: 13,
75
  ie: 12,
76
  edge: 18,
77
  opera: 55,
78
  op_mini: 12,
79
  and_chr: 80
80
}
81
```
82

83
## Capabilities
84

85
### Default Prefixer
86

87
Ready-to-use prefixer with modern browser support and all plugins enabled.
88

89
```javascript { .api }
90
/**
91
 * Default prefixer function with modern browser support
92
 * Processes style objects and adds necessary vendor prefixes
93
 * @param {Object} style - Style object to prefix
94
 * @returns {Object} Prefixed style object
95
 */
96
function prefix(style: Object): Object;
97
```
98

99
### Custom Prefixer Factory
100

101
Creates custom prefixers with specific configuration for browser support and plugins.
102

103
```javascript { .api }
104
/**
105
 * Creates a custom prefixer with specific prefix map and plugins
106
 * @param {Object} config - Configuration object
107
 * @param {Object} config.prefixMap - Mapping of properties to required prefixes
108
 * @param {Array} config.plugins - Array of plugin functions for value transformations
109
 * @returns {Function} Prefixer function
110
 */
111
function createPrefixer(config: {
112
  prefixMap: Object,
113
  plugins: Array<Function>
114
}): Function;
115
```
116

117
**Usage Example:**
118

119
```javascript
120
import { createPrefixer } from "inline-style-prefixer";
121
import generateData from "inline-style-prefixer/lib/generator";
122

123
// Generate data for specific browser support
124
const { prefixMap, plugins } = generateData({
125
  chrome: 70,
126
  firefox: 60,
127
  safari: 12
128
});
129

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

133
const style = { display: 'flex', userSelect: 'none' };
134
const prefixed = customPrefix(style);
135
```
136

137
### Plugin System
138

139
Individual plugins for specific CSS value transformations. Plugins have varying signatures depending on their functionality.
140

141
```javascript { .api }
142
/**
143
 * Basic plugin function interface (most plugins)
144
 * @param {string} property - CSS property name
145
 * @param {any} value - CSS property value
146
 * @returns {any|undefined} Transformed value(s) or undefined if no transformation needed
147
 */
148
type BasicPlugin = (
149
  property: string,
150
  value: any
151
) => any | undefined;
152

153
/**
154
 * Extended plugin function interface (plugins that modify style object)
155
 * @param {string} property - CSS property name
156
 * @param {any} value - CSS property value
157
 * @param {Object} style - Complete style object (modified by plugin)
158
 * @returns {any|undefined} Transformed value(s) or undefined (may modify style object)
159
 */
160
type ExtendedPlugin = (
161
  property: string,
162
  value: any,
163
  style: Object
164
) => any | undefined;
165

166
/**
167
 * Full plugin function interface (transition plugin)
168
 * @param {string} property - CSS property name
169
 * @param {any} value - CSS property value
170
 * @param {Object} style - Complete style object
171
 * @param {Object} propertyPrefixMap - Prefix map for properties
172
 * @returns {any|undefined} Transformed value(s) or undefined
173
 */
174
type FullPlugin = (
175
  property: string,
176
  value: any,
177
  style: Object,
178
  propertyPrefixMap: Object
179
) => any | undefined;
180
```
181

182
#### Built-in Plugins
183

184
**Calc Plugin** - Prefixes CSS calc() expressions (available for custom configs):
185

186
```javascript { .api }
187
/**
188
 * Prefixes calc() function calls with vendor prefixes
189
 * @param {string} property - CSS property name
190
 * @param {string} value - CSS property value
191
 * @returns {Array|undefined} Array of prefixed values or undefined
192
 */
193
function calc(property: string, value: string): Array<string> | undefined;
194
```
195

196
**Gradient Plugin** - Prefixes gradient functions:
197

198
```javascript { .api }
199
/**
200
 * Prefixes gradient functions (linear-gradient, radial-gradient, etc.)
201
 * @param {string} property - CSS property name
202
 * @param {string} value - CSS property value
203
 * @returns {Array|undefined} Array of prefixed values or undefined
204
 */
205
function gradient(property: string, value: string): Array<string> | undefined;
206
```
207

208
**Flex Plugin** - Handles flexbox display values:
209

210
```javascript { .api }
211
/**
212
 * Transforms flexbox display values to vendor-prefixed arrays
213
 * @param {string} property - CSS property name
214
 * @param {string} value - CSS property value
215
 * @returns {Array|undefined} Array of prefixed display values or undefined
216
 */
217
function flex(property: string, value: string): Array<string> | undefined;
218
```
219

220
**Grid Plugin** - CSS Grid support for IE:
221

222
```javascript { .api }
223
/**
224
 * Provides CSS Grid support for IE with property mapping
225
 * Handles grid display values and transforms grid properties to IE equivalents
226
 * @param {string} property - CSS property name
227
 * @param {any} value - CSS property value
228
 * @param {Object} style - Complete style object
229
 * @returns {Array|undefined} Array of prefixed values or undefined (modifies style object)
230
 */
231
function grid(property: string, value: any, style: Object): Array<string> | undefined;
232
```
233

234
**Other Plugins:**
235
- `crossFade` - Prefixes cross-fade() function (included in default)
236
- `cursor` - Prefixes special cursor values (zoom-in, zoom-out, grab, grabbing) (included in default)
237
- `filter` - Prefixes filter() function calls (included in default)
238
- `flexboxIE` - IE-specific flexbox transformations and flex shorthand expansion (available for custom configs)
239
- `flexboxOld` - Old flexbox specification support (2009/2012 syntax) (included in default)
240
- `imageSet` - Prefixes image-set() function (included in default)
241
- `logical` - CSS Logical Properties support (included in default)
242
- `position` - Sticky positioning support (included in default)
243
- `sizing` - Sizing values (min-content, max-content, fit-content) (included in default)
244
- `transition` - Prefixes properties within transition values (included in default)
245

246
**Note**: The default `prefix` function includes these plugins: `crossFade`, `cursor`, `filter`, `flexboxOld`, `gradient`, `grid`, `imageSet`, `logical`, `position`, `sizing`, `transition`, `flex`. The `calc` and `flexboxIE` plugins are available for custom configurations. All plugins can be imported individually from `inline-style-prefixer/lib/plugins/[plugin-name]`.
247

248
### Individual Plugin Imports
249

250
All plugins can be imported individually for custom configurations:
251

252
```javascript { .api }
253
// Import specific plugins
254
import calc from "inline-style-prefixer/lib/plugins/calc";
255
import gradient from "inline-style-prefixer/lib/plugins/gradient";
256
import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";
257

258
// Use with createPrefixer
259
const customPrefix = createPrefixer({
260
  prefixMap: {},
261
  plugins: [calc, gradient]
262
});
263
```
264

265
**Available Plugin Imports:**
266
- `inline-style-prefixer/lib/plugins/calc`
267
- `inline-style-prefixer/lib/plugins/crossFade`
268
- `inline-style-prefixer/lib/plugins/cursor`
269
- `inline-style-prefixer/lib/plugins/filter`
270
- `inline-style-prefixer/lib/plugins/flex`
271
- `inline-style-prefixer/lib/plugins/flexboxIE`
272
- `inline-style-prefixer/lib/plugins/flexboxOld`
273
- `inline-style-prefixer/lib/plugins/gradient`
274
- `inline-style-prefixer/lib/plugins/grid`
275
- `inline-style-prefixer/lib/plugins/imageSet`
276
- `inline-style-prefixer/lib/plugins/logical`
277
- `inline-style-prefixer/lib/plugins/position`
278
- `inline-style-prefixer/lib/plugins/sizing`
279
- `inline-style-prefixer/lib/plugins/transition`
280

281
### Data Generation
282

283
Dynamic generation of browser-specific prefix maps and plugin lists.
284

285
```javascript { .api }
286
/**
287
 * Generates browser-specific prefix data (default export)
288
 * @param {Object} browserList - Browser versions to support
289
 * @param {Object} options - Generation options
290
 * @param {boolean} options.prefixMap - Whether to generate prefix map
291
 * @param {boolean} options.plugins - Whether to generate plugin list
292
 * @param {string} options.path - File path to save generated data
293
 * @param {boolean} options.compatibility - Generate CommonJS compatible output
294
 * @returns {Object} Generated data with prefixMap and plugins
295
 */
296
function generateData(
297
  browserList: Object,
298
  options?: {
299
    prefixMap?: boolean,
300
    plugins?: boolean,
301
    path?: string,
302
    compatibility?: boolean
303
  }
304
): {
305
  prefixMap: Object,
306
  plugins: Array<Function>
307
};
308

309
/**
310
 * Generates file content string for custom prefixer data (named export)
311
 * @param {Object} prefixMap - Prefix map object
312
 * @param {Array} pluginList - Array of plugin names
313
 * @param {boolean} compatibility - Whether to generate CommonJS compatible output
314
 * @returns {string} Generated file content as string
315
 */
316
function generateFile(
317
  prefixMap: Object,
318
  pluginList: Array<string>,
319
  compatibility: boolean
320
): string;
321
```
322

323
**Usage Examples:**
324

325
```javascript
326
import generateData, { generateFile } from "inline-style-prefixer/lib/generator";
327

328
// Generate data for runtime use
329
const browserSupport = {
330
  chrome: 80,
331
  firefox: 70,
332
  safari: 13,
333
  ie: 11
334
};
335

336
const { prefixMap, plugins } = generateData(browserSupport, {
337
  prefixMap: true,
338
  plugins: true
339
});
340

341
// Generate file content for static compilation
342
const fileContent = generateFile(prefixMap, plugins, false);
343
```
344

345
## Types
346

347
```javascript { .api }
348
/**
349
 * Style object type - any object with CSS property-value pairs
350
 */
351
type StyleObject = {
352
  [property: string]: any
353
};
354

355
/**
356
 * Prefix map type - maps CSS properties to required vendor prefixes
357
 */
358
type PrefixMap = {
359
  [property: string]: Array<string>
360
};
361

362
/**
363
 * Browser support configuration
364
 */
365
type BrowserList = {
366
  chrome?: number,
367
  android?: number,
368
  firefox?: number,
369
  ios_saf?: number,
370
  safari?: number,
371
  ie?: number,
372
  edge?: number,
373
  opera?: number,
374
  op_mini?: number,
375
  and_chr?: number,
376
  and_uc?: number
377
};
378

379
/**
380
 * Generation options for createPrefixer
381
 */
382
type GenerationOptions = {
383
  prefixMap?: boolean,
384
  plugins?: boolean,
385
  path?: string,
386
  compatibility?: boolean
387
};
388
```
389

390
## Advanced Usage
391

392
### Custom Browser Support
393

394
```javascript
395
import { createPrefixer } from "inline-style-prefixer";
396
import generateData from "inline-style-prefixer/lib/generator";
397

398
// Support older browsers
399
const legacyBrowsers = {
400
  chrome: 50,
401
  firefox: 45,
402
  safari: 10,
403
  ie: 11
404
};
405

406
const { prefixMap, plugins } = generateData(legacyBrowsers);
407
const legacyPrefix = createPrefixer({ prefixMap, plugins });
408
```
409

410
### Plugin Composition
411

412
```javascript
413
import { createPrefixer } from "inline-style-prefixer";
414
import calc from "inline-style-prefixer/lib/plugins/calc";
415
import gradient from "inline-style-prefixer/lib/plugins/gradient";
416
import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";
417

418
// Use only specific plugins
419
const lightweightPrefix = createPrefixer({
420
  prefixMap: {},
421
  plugins: [calc, gradient]
422
});
423

424
// Use for IE support with advanced flexbox handling
425
const iePrefix = createPrefixer({
426
  prefixMap: { display: ["ms"] },
427
  plugins: [flexboxIE, gradient]
428
});
429
```
430

431
### Nested Object Support
432

433
```javascript
434
const nestedStyle = {
435
  container: {
436
    display: 'flex',
437
    nested: {
438
      transform: 'translateX(10px)'
439
    }
440
  },
441
  item: {
442
    flex: 1
443
  }
444
};
445

446
const prefixed = prefix(nestedStyle);
447
// Recursively processes all nested objects
448
```
449

450
### Array Value Processing
451

452
```javascript
453
const style = {
454
  width: ['calc(100%)', 'min-content'],
455
  background: 'linear-gradient(to right, red, blue)'
456
};
457

458
const prefixed = prefix(style);
459
// Result:
460
// {
461
//   width: [
462
//     '-webkit-calc(100%)',
463
//     '-moz-calc(100%)',
464
//     'calc(100%)',
465
//     '-webkit-min-content',
466
//     '-moz-min-content',
467
//     'min-content'
468
//   ],
469
//   background: [
470
//     '-webkit-linear-gradient(to right, red, blue)',
471
//     '-moz-linear-gradient(to right, red, blue)',
472
//     'linear-gradient(to right, red, blue)'
473
//   ]
474
// }
475
```