commit 7f612167e7eaef7fc7c43b65a169c68040e9707e · kitten.sh/tiny-css-prefixer

+24 -13

scripts/generate-prefix-map.js

···

       83
       83
        
           !properties.some(({ name }) => name === x)

     

       84
       84
        
         ));

     

       85
       85
        
       

     

       86
       86
       +
       /** Finds the minimum starting substring that uniquely identifier a property out of all known CSS properties */

     

       87
       87
       +
       const findMinimumSubstr = name => {

     

       88
       88
       +
         for (let i = 2, l = name.length; i < l; i++) {

     

       89
       89
       +
           const substr = name.slice(0, i);

     

       90
       90
       +
           // Check for any name that conflicts with the substring in all known CSS properties

     

       91
       91
       +
           if (stablePropertyNames.every(x => x === name || !x.startsWith(substr))) {

     

       92
       92
       +
             return substr;

     

       93
       93
       +
           }

     

       94
       94
       +
         }

     

       95
       95
       +
       

     

       96
       96
       +
         return name;

     

       97
       97
       +
       };

     

       98
       98
       +
       

     

       86
       99
        
       /** Lists each prefixed property with the minimum substring that is needed to uniquely identity it */

     

       87
       87
       -
       const prefixPatterns = properties

     

       88
       88
       -
         .map(prop => {

     

       89
       89
       -
           let name = prop.name;

     

       90
       90
       -
           for (let i = 2, l = name.length; i < l; i++) {

     

       91
       91
       -
             const substr = name.slice(0, i);

     

       92
       92
       -
             // Check for any name that conflicts with the substring in all known CSS properties

     

       93
       93
       -
             if (stablePropertyNames.every(x => x === name || !x.startsWith(substr))) {

     

       94
       94
       -
               name = substr;

     

       95
       95
       -
               break;

     

       96
       96
       -
             }

     

       97
       97
       -
           }

     

       100
       100
       +
       const prefixPatterns = properties.map(prop => ({

     

       101
       101
       +
         ...prop,

     

       102
       102
       +
         name: findMinimumSubstr(prop.name)

     

       103
       103
       +
       }));

     

       98
       104
        
       

     

       99
       99
       -
           return { ...prop, name };

     

       100
       100
       -
         });

     

       105
       105
       +
       /** For Webkit prefixes, these properties will need some values to be prefixed */

     

       106
       106
       +
       const prefixValuePatterns = ['position', 'background-clip'].map(findMinimumSubstr);

     

       101
       107
        
       

     

       102
       108
        
       /** Accepts a filter and builds a list of names in `prefixPatterns` */

     

       103
       109
        
       const reducePrefixes = (filter = x => !!x) => {

     
···

       112
       118
        
         });

     

       113
       119
        
       };

     

       114
       120
        
       

     

       121
       121
       +
       /** Creates a regex matching property names */

     

       115
       122
        
       const buildRegex = groups =>  `^(${groups.join('|')})`;

     

       116
       123
        
       

     

       117
       124
        
       // Create all prefix sets for each prefix

     
···

       119
       126
        
       const mozPrefixes = buildRegex(reducePrefixes(x => x.moz));

     

       120
       127
        
       const webkitPrefixes = buildRegex(reducePrefixes(x => x.webkit));

     

       121
       128
        
       

     

       129
       129
       +
       // Create a regex for webkit value transforms

     

       130
       130
       +
       const webkitValuePrefix = buildRegex(prefixValuePatterns);

     

       131
       131
       +
       

     

       122
       132
        
       module.exports = `

     

       123
       133
        
       var msPrefixRe = /${msPrefixes}/;

     

       124
       134
        
       var mozPrefixRe = /${mozPrefixes}/;

     

       125
       135
        
       var webkitPrefixRe = /${webkitPrefixes}/;

     

       136
       136
       +
       var webkitValuePrefixRe = /${webkitValuePrefix}/;

     

       126
       137
        
       `.trim();

+2 -5

src/index.js

···

       13
       13
        
       };

     

       14
       14
        
       

     

       15
       15
        
       export const prefixValue = (prop, value) => {

     

       16
       16
       -
         if (

     

       17
       17
       -
           (prop === 'position' && value === 'sticky') ||

     

       18
       18
       -
           (prop === 'background-clip' && value === 'text')

     

       19
       19
       -
         ) {

     

       20
       20
       -
           return `-webkit-${value}, ${value}`;

     

       16
       16
       +
         if (webkitValuePrefixRe.test(prop)) {

     

       17
       17
       +
           return value.replace(/(sticky|text)/, '-webkit-$1, $1');

     

       21
       18
        
         }

     

       22
       19
        
       

     

       23
       20
        
         return value;