commit e6000c721b46b4ec68426a018a4eac451e4cde7d · kitten.sh/tiny-css-prefixer

+23 -2

README.md

···

       11
       11
        
       The API is fairly straightforward and only consists of two functions, `prefixProperty` and `prefixValue`.

     

       12
       12
        
       

     

       13
       13
        
       ```js

     

       14
       14
       -
       prefixProperty('margin'); // ['margin']

     

       15
       15
       -
       prefixProperty('appearance'); // ['appearance', '-moz-appearance', '-webkit-appearance']

     

       14
       14
       +
       prefixProperty('margin'); // 0b000

     

       15
       15
       +
       prefixProperty('appearance'); // 0b110

     

       16
       16
        
       

     

       17
       17
        
       prefixValue('color', 'palevioletred'); // 'palevioletred'

     

       18
       18
        
       prefixValue('position', 'sticky'); // '-webkit-sticky, sticky'

     

       19
       19
        
       ```

     

       20
       20
       +
       

     

       21
       21
       +
       `prefixProperty` returns a bitmap depending on which prefix should be

     

       22
       22
       +
       applied:

     

       23
       23
       +
       

     

       24
       24
       +
       - `0b001` stands for `-ms-`

     

       25
       25
       +
       - `0b010` stands for `-moz-`

     

       26
       26
       +
       - `0b100` stands for `-webkit`

     

       27
       27
       +
       

     

       28
       28
       +
       These are combined using a binary OR, so an example usage of the

     

       29
       29
       +
       `pefixProperty` helper may look like the following:

     

       30
       30
       +
       

     

       31
       31
       +
       ```js

     

       32
       32
       +
       const prefix = (prop, value) => {

     

       33
       33
       +
         const flag = prefixProperty(prop);

     

       34
       34
       +
         let css = `${prop}: ${value};\n`;

     

       35
       35
       +
         if (flag & 0b001) css += `-ms-${css}`;

     

       36
       36
       +
         if (flag & 0b010) css += `-moz-${css}`;

     

       37
       37
       +
         if (flag & 0b100) css += `-webkit-${css}`;

     

       38
       38
       +
         return css;

     

       39
       39
       +
       };

     

       40
       40
       +
       ```

-2

scripts/generate-prefix-map.js

···

       1
       1
        
       #!/usr/bin/env node

     

       2
       2
        
       

     

       3
       3
       -
       const fs = require('fs');

     

       4
       4
       -
       const path = require('path');

     

       5
       3
        
       const prefixMap = require('inline-style-prefixer/lib/data').default.prefixMap;

     

       6
       4
        
       const mdnProperties = require('mdn-data/css/properties.json');

     

       7
       5

+1 -1

src/index.d.ts

···

       2
       2
        
       export as namespace CSSPrefixer;

     

       3
       3
        
       

     

       4
       4
        
       declare namespace CSSPrefixer {

     

       5
       5
       -
         function prefixProperty(prop: string): string[];

     

       5
       5
       +
         function prefixProperty(prop: string): 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;

     

       6
       6
        
         function prefixValue(prop: string, value: string): string;

     

       7
       7
        
       }

+7 -10

src/index.js

···

       1
       1
        
       import /* codegen */ '../scripts/generate-prefix-map';

     

       2
       2
        
       

     

       3
       3
       +
       const ms = 0b001;

     

       4
       4
       +
       const moz = 0b010;

     

       5
       5
       +
       const webkit = 0b100;

     

       6
       6
       +
       

     

       3
       7
        
       export const prefixProperty = prop => {

     

       4
       4
       -
         const props = [prop];

     

       5
       5
       -
         if (msPrefixRe.test(prop)) {

     

       6
       6
       -
           props.push(`-ms-${prop}`);

     

       7
       7
       -
         } else if (mozPrefixRe.test(prop)) {

     

       8
       8
       -
           props.push(`-moz-${prop}`);

     

       9
       9
       -
         } else if (webkitPrefixRe.test(prop)) {

     

       10
       10
       -
           props.push(`-webkit-${prop}`);

     

       11
       11
       -
         }

     

       12
       12
       -
       

     

       13
       13
       -
         return props;

     

       8
       8
       +
         return (msPrefixRe.test(prop) ? ms : 0)

     

       9
       9
       +
           | (mozPrefixRe.test(prop) ? moz : 0)

     

       10
       10
       +
           | (webkitPrefixRe.test(prop) ? webkit : 0)

     

       14
       11
        
       };

     

       15
       12
        
       

     

       16
       13
        
       export const prefixValue = (prop, value) => {