Skip to content
This repository has been archived by the owner on Dec 5, 2018. It is now read-only.

Commit

Permalink
Make prefixAll not put camelCased properties in the strings it genera…
Browse files Browse the repository at this point in the history 
…tes.

Summary: Sometimes, `.prefixAll` generated styles that looked like
`{marginLeft: "-webkit-calc(50% - (608px / 2));marginLeft:-moz-calc(50% - (608px / 2));marginLeft:calc(50% - (608px / 2))" }`.
(I observed this locally on a bibliotron page). This is pretty clearly wrong,
where the styles inside the string haven't been dash-cased, so only the
`-webkit-calc()` version would end up being parsed correctly. This fixes that
by dash-casing properties before putting them in strings.

Test Plan:
 - `npm run test`

Auditors: jlfwong
  • Loading branch information
@xymostech
xymostech committed Feb 10, 2016
1 parent 7c40331 commit f41f304
Show file tree
Hide file tree
Showing 14 changed files with 158 additions and 35 deletions.
70 changes: 55 additions & 15 deletions dist/prefixer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ var Prefixer = (function () {
exports['default'] = Prefixer;
module.exports = exports['default'];
},{"./Plugins":1,"./caniuseData":3,"./utils/assign":12,"./utils/capitalizeString":14,"./utils/getBrowserInformation":15}],3:[function(require,module,exports){
module.exports = {"transform":0,"transformOrigin":0,"transformOriginX":0,"transformOriginY":0,"backfaceVisibility":0,"perspective":0,"perspectiveOrigin":0,"transformStyle":0,"transformOriginZ":0,"animation":0,"animationDelay":0,"animationDirection":0,"animationFillMode":0,"animationDuration":0,"animationIterationCount":0,"animationName":0,"animationPlayState":0,"animationTimingFunction":0,"appearance":0,"userSelect":0,"fontKerning":0,"textEmphasisPosition":0,"textEmphasis":0,"textEmphasisStyle":0,"textEmphasisColor":0,"boxDecorationBreak":0,"clipPath":0,"maskImage":0,"maskMode":0,"maskRepeat":0,"maskPosition":0,"maskClip":0,"maskOrigin":0,"maskSize":0,"maskComposite":0,"mask":0,"maskBorderSource":0,"maskBorderMode":0,"maskBorderSlice":0,"maskBorderWidth":0,"maskBorderOutset":0,"maskBorderRepeat":0,"maskBorder":0,"maskType":0,"textDecorationStyle":0,"textDecorationSkip":0,"textDecorationLine":0,"textDecorationColor":0,"filter":0,"fontFeatureSettings":0,"breakAfter":0,"breakBefore":0,"breakInside":0,"columnCount":0,"columnFill":0,"columnGap":0,"columnRule":0,"columnRuleColor":0,"columnRuleStyle":0,"columnRuleWidth":0,"columns":0,"columnSpan":0,"columnWidth":0,"flex":0,"flexBasis":0,"flexDirection":0,"flexGrow":0,"flexFlow":0,"flexShrink":0,"flexWrap":0,"alignContent":0,"alignItems":0,"alignSelf":0,"justifyContent":0,"order":0,"transition":0,"transitionDelay":0,"transitionDuration":0,"transitionProperty":0,"transitionTimingFunction":0,"backdropFilter":0,"scrollSnapType":0,"scrollSnapPointsX":0,"scrollSnapPointsY":0,"scrollSnapDestination":0,"scrollSnapCoordinate":0,"shapeImageThreshold":0,"shapeImageMargin":0,"shapeImageOutside":0,"hyphens":0,"flowInto":0,"flowFrom":0,"regionFragment":0,"boxSizing":0,"textAlignLast":0,"tabSize":0,"gridGap":0,"gridAutoColumns":0,"gridRowGap":0,"gridTemplateRows":0,"gridTemplateAreas":0,"gridAutoRows":0,"gridRowStart":0,"wrapFlow":0,"gridAutoFlow":0,"gridColumnGap":0,"gridColumn":0,"gridTemplate":0,"gridColumnStart":0,"wrapThrough":0,"gridColumnEnd":0,"touchAction":0,"wrapMargin":0,"gridArea":0,"grid":0,"gridTemplateColumns":0,"gridRow":0,"gridRowEnd":0,"textSizeAdjust":0,"borderImage":0,"borderImageOutset":0,"borderImageRepeat":0,"borderImageSlice":0,"borderImageSource":0,"borderImageWidth":0,"objectFit":0,"objectPosition":0};
module.exports = {"transform":0,"transformOrigin":0,"transformOriginX":0,"transformOriginY":0,"backfaceVisibility":0,"perspective":0,"perspectiveOrigin":0,"transformStyle":0,"transformOriginZ":0,"animation":0,"animationDelay":0,"animationDirection":0,"animationFillMode":0,"animationDuration":0,"animationIterationCount":0,"animationName":0,"animationPlayState":0,"animationTimingFunction":0,"appearance":0,"userSelect":0,"fontKerning":0,"textEmphasisPosition":0,"textEmphasis":0,"textEmphasisStyle":0,"textEmphasisColor":0,"boxDecorationBreak":0,"clipPath":0,"maskImage":0,"maskMode":0,"maskRepeat":0,"maskPosition":0,"maskClip":0,"maskOrigin":0,"maskSize":0,"maskComposite":0,"mask":0,"maskBorderSource":0,"maskBorderMode":0,"maskBorderSlice":0,"maskBorderWidth":0,"maskBorderOutset":0,"maskBorderRepeat":0,"maskBorder":0,"maskType":0,"textDecorationStyle":0,"textDecorationSkip":0,"textDecorationLine":0,"textDecorationColor":0,"filter":0,"fontFeatureSettings":0,"breakAfter":0,"breakBefore":0,"breakInside":0,"columnCount":0,"columnFill":0,"columnGap":0,"columnRule":0,"columnRuleColor":0,"columnRuleStyle":0,"columnRuleWidth":0,"columns":0,"columnSpan":0,"columnWidth":0,"flex":0,"flexBasis":0,"flexDirection":0,"flexGrow":0,"flexFlow":0,"flexShrink":0,"flexWrap":0,"alignContent":0,"alignItems":0,"alignSelf":0,"justifyContent":0,"order":0,"transition":0,"transitionDelay":0,"transitionDuration":0,"transitionProperty":0,"transitionTimingFunction":0,"backdropFilter":0,"scrollSnapType":0,"scrollSnapPointsX":0,"scrollSnapPointsY":0,"scrollSnapDestination":0,"scrollSnapCoordinate":0,"shapeImageThreshold":0,"shapeImageMargin":0,"shapeImageOutside":0,"hyphens":0,"flowInto":0,"flowFrom":0,"regionFragment":0,"boxSizing":0,"textAlignLast":0,"tabSize":0,"grid":0,"gridColumnStart":0,"gridRow":0,"gridTemplateColumns":0,"gridRowStart":0,"gridRowEnd":0,"gridTemplateRows":0,"gridAutoRows":0,"wrapThrough":0,"wrapFlow":0,"gridColumnGap":0,"touchAction":0,"gridRowGap":0,"gridAutoFlow":0,"gridColumn":0,"gridGap":0,"gridTemplateAreas":0,"gridTemplate":0,"gridArea":0,"wrapMargin":0,"gridAutoColumns":0,"gridColumnEnd":0,"textSizeAdjust":0,"borderImage":0,"borderImageOutset":0,"borderImageRepeat":0,"borderImageSlice":0,"borderImageSource":0,"borderImageWidth":0,"objectFit":0,"objectPosition":0};
},{}],4:[function(require,module,exports){
'use strict';

Expand All @@ -146,24 +146,32 @@ Object.defineProperty(exports, '__esModule', {
});
exports['default'] = calc;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

function calc(pluginInterface) {
var property = pluginInterface.property;
var value = pluginInterface.value;
var prefix = pluginInterface.prefix;
var keepUnprefixed = pluginInterface.keepUnprefixed;

if (typeof value === 'string' && value.indexOf('calc(') > -1) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

var newValue = ['-webkit-', '-moz-'].map(function (prefix) {
return value.replace(/calc\(/g, prefix + 'calc(');
}).join(';' + property + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + property + ':' + value : ''));
}).join(';' + dashCaseProperty + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}

module.exports = exports['default'];
},{}],5:[function(require,module,exports){
},{"../utils/camelToDashCase":13}],5:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand Down Expand Up @@ -229,8 +237,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument

exports['default'] = flexboxIE;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

var alternativeValues = {
'space-around': 'distribute',
'space-between': 'justify',
Expand Down Expand Up @@ -262,6 +276,8 @@ function flexboxIE(pluginInterface) {
var keepUnprefixed = pluginInterface.keepUnprefixed;

if (properties[property]) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

if (!keepUnprefixed) {
delete styles[property];
}
Expand All @@ -270,13 +286,13 @@ function flexboxIE(pluginInterface) {
return _defineProperty({}, alternativeProps[property], alternativeValues[value] || value);
}
if (alternativeValues[value]) {
return _defineProperty({}, property, alternativeValues[value] + (keepUnprefixed ? ';' + property + ':' + value : ''));
return _defineProperty({}, property, alternativeValues[value] + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}
}

module.exports = exports['default'];
},{}],8:[function(require,module,exports){
},{"../utils/camelToDashCase":13}],8:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand All @@ -287,8 +303,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument

exports['default'] = flexboxOld;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

var alternativeValues = {
'space-around': 'justify',
'space-between': 'justify',
Expand Down Expand Up @@ -318,6 +340,8 @@ function flexboxOld(pluginInterface) {
var keepUnprefixed = pluginInterface.keepUnprefixed;

if (properties[property]) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

if (!keepUnprefixed) {
delete styles[property];
}
Expand All @@ -329,29 +353,35 @@ function flexboxOld(pluginInterface) {
}
if (property === 'display' && alternativeValues[value]) {
return {
display: prefix.css + alternativeValues[value] + (keepUnprefixed ? ';' + property + ':' + value : '')
display: prefix.css + alternativeValues[value] + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : '')
};
}
if (alternativeProps[property]) {
return _defineProperty({}, alternativeProps[property], alternativeValues[value] || value);
}
if (alternativeValues[value]) {
return _defineProperty({}, property, alternativeValues[value] + (keepUnprefixed ? ';' + property + ':' + value : ''));
return _defineProperty({}, property, alternativeValues[value] + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}
}

module.exports = exports['default'];
},{}],9:[function(require,module,exports){
},{"../utils/camelToDashCase":13}],9:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = gradient;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

var values = /linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;

function gradient(pluginInterface) {
Expand All @@ -361,24 +391,32 @@ function gradient(pluginInterface) {
var keepUnprefixed = pluginInterface.keepUnprefixed;

if (typeof value === 'string' && value.match(values) !== null) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

var newValue = ['-webkit-', '-moz-'].map(function (prefix) {
return prefix + value;
}).join(';' + property + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + property + ':' + value : ''));
}).join(';' + dashCaseProperty + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}

module.exports = exports['default'];
},{}],10:[function(require,module,exports){
},{"../utils/camelToDashCase":13}],10:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = sizing;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

var properties = {
maxHeight: true,
maxWidth: true,
Expand All @@ -405,15 +443,17 @@ function sizing(pluginInterface) {
// This might change in the future
// Keep an eye on it
if (properties[property] && values[value]) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

var newValue = ['-webkit-', '-moz-'].map(function (prefix) {
return prefix + value;
}).join(';' + property + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + property + ':' + value : ''));
}).join(';' + dashCaseProperty + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}

module.exports = exports['default'];
},{}],11:[function(require,module,exports){
},{"../utils/camelToDashCase":13}],11:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand Down
2 changes: 1 addition & 1 deletion dist/prefixer.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/caniuseData.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 10 additions & 2 deletions lib/plugins/calc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,27 @@ Object.defineProperty(exports, '__esModule', {
});
exports['default'] = calc;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _utilsCamelToDashCase = require('../utils/camelToDashCase');

var _utilsCamelToDashCase2 = _interopRequireDefault(_utilsCamelToDashCase);

function calc(pluginInterface) {
var property = pluginInterface.property;
var value = pluginInterface.value;
var prefix = pluginInterface.prefix;
var keepUnprefixed = pluginInterface.keepUnprefixed;

if (typeof value === 'string' && value.indexOf('calc(') > -1) {
var dashCaseProperty = (0, _utilsCamelToDashCase2['default'])(property);

var newValue = ['-webkit-', '-moz-'].map(function (prefix) {
return value.replace(/calc\(/g, prefix + 'calc(');
}).join(';' + property + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + property + ':' + value : ''));
}).join(';' + dashCaseProperty + ':');
return _defineProperty({}, property, newValue + (keepUnprefixed ? ';' + dashCaseProperty + ':' + value : ''));
}
}

Expand Down
Loading

3 comments on commit f41f304

@robinweser
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xymostech Great work you did there! Would you mind sending a pull request so I can add that to the original package too?

@xymostech
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rofrischmann Yes, I will :) Planning on it, just too busy at the moment.

@robinweser
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xymostech Cool, thank you!

Please sign in to comment.