autoprefixer
Advanced tools
Comparing version 8.0.0 to 8.1.0
# Change Log | ||
This project adheres to [Semantic Versioning](http://semver.org/). | ||
## 8.1 “Rex, Familia et Ultio” | ||
* Add `overscroll-behavior` support. | ||
* Add `grid-template` shortcut support (by Evgeny Petukhov). | ||
* Add better `grid-column-end` and `grid-row-end` support (by Evgeny Petukhov). | ||
* Fix Grid properties support in `@supports`. | ||
## 8.0 “Excelsior” | ||
@@ -5,0 +11,0 @@ * Use Browserslist 3.0. |
@@ -708,2 +708,11 @@ 'use strict'; | ||
}); | ||
}); | ||
// overscroll-behavior selector | ||
var over = require('caniuse-lite/data/features/css-overscroll-behavior.js'); | ||
f(over, { match: /a #1/ }, function (browsers) { | ||
return prefix(['overscroll-behavior'], { | ||
feature: 'css-overscroll-behavior', | ||
browsers: browsers | ||
}); | ||
}); |
@@ -12,3 +12,3 @@ 'use strict'; | ||
var Declaration = require('../declaration'); | ||
var shorthand = require('./grid-shorthand'); | ||
var utils = require('./grid-utils'); | ||
@@ -30,46 +30,19 @@ var GridArea = function (_Declaration) { | ||
if (decl.parent.some(function (i) { | ||
return i.prop === '-ms-grid-row'; | ||
})) { | ||
return undefined; | ||
} | ||
var values = utils.parse(decl); | ||
var values = shorthand.parse(decl); | ||
var _utils$translate = utils.translate(values, 0, 2), | ||
rowStart = _utils$translate[0], | ||
rowSpan = _utils$translate[1]; | ||
var _shorthand$translate = shorthand.translate(values, 0, 2), | ||
rowStart = _shorthand$translate[0], | ||
rowSpan = _shorthand$translate[1]; | ||
var _utils$translate2 = utils.translate(values, 1, 3), | ||
columnStart = _utils$translate2[0], | ||
columnSpan = _utils$translate2[1]; | ||
var _shorthand$translate2 = shorthand.translate(values, 1, 3), | ||
columnStart = _shorthand$translate2[0], | ||
columnSpan = _shorthand$translate2[1]; | ||
[['grid-row', rowStart], ['grid-row-span', rowSpan], ['grid-column', columnStart], ['grid-column-span', columnSpan]].forEach(function (_ref) { | ||
var prop = _ref[0], | ||
value = _ref[1]; | ||
if (rowStart) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-row', | ||
value: rowStart.toString() | ||
}); | ||
} | ||
utils.insertDecl(decl, prop, value); | ||
}); | ||
if (rowSpan) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-row-span', | ||
value: rowSpan.toString() | ||
}); | ||
} | ||
if (columnStart) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-column', | ||
value: columnStart.toString() | ||
}); | ||
} | ||
if (columnSpan) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-column-span', | ||
value: columnSpan.toString() | ||
}); | ||
} | ||
return undefined; | ||
@@ -76,0 +49,0 @@ }; |
@@ -23,40 +23,38 @@ 'use strict'; | ||
/** | ||
* Do not add prefix for unsupported value in IE | ||
* Change repeating syntax for IE | ||
*/ | ||
GridEnd.prototype.check = function check(decl) { | ||
return decl.value.indexOf('span') !== -1; | ||
}; | ||
GridEnd.prototype.insert = function insert(decl, prefix, prefixes, result) { | ||
if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes); | ||
/** | ||
* Return a final spec property | ||
*/ | ||
var clonedDecl = this.clone(decl); | ||
var startProp = decl.prop.replace(/end$/, 'start'); | ||
var spanProp = prefix + decl.prop.replace(/end$/, 'span'); | ||
GridEnd.prototype.normalize = function normalize(prop) { | ||
return prop.replace(/(-span|-end)/, ''); | ||
}; | ||
if (decl.parent.some(function (i) { | ||
return i.prop === spanProp; | ||
})) { | ||
return undefined; | ||
} | ||
/** | ||
* Change property name for IE | ||
*/ | ||
clonedDecl.prop = spanProp; | ||
GridEnd.prototype.prefixed = function prefixed(prop, prefix) { | ||
var result = _Declaration.prototype.prefixed.call(this, prop, prefix); | ||
if (prefix === '-ms-') { | ||
result = result.replace('-end', '-span'); | ||
if (decl.value.includes('span')) { | ||
clonedDecl.value = decl.value.replace(/span\s/i, ''); | ||
} else { | ||
var startDecl = void 0; | ||
decl.parent.walkDecls(startProp, function (d) { | ||
startDecl = d; | ||
}); | ||
if (startDecl) { | ||
var value = Number(decl.value) - Number(startDecl.value) + ''; | ||
clonedDecl.value = value; | ||
} else { | ||
decl.warn(result, 'Can not prefix ' + decl.prop + ' (' + startProp + ' is not found)'); | ||
} | ||
} | ||
return result; | ||
}; | ||
/** | ||
* Change repeating syntax for IE | ||
*/ | ||
decl.cloneBefore(clonedDecl); | ||
GridEnd.prototype.set = function set(decl, prefix) { | ||
if (prefix === '-ms-') { | ||
decl.value = decl.value.replace(/span\s/i, ''); | ||
} | ||
return _Declaration.prototype.set.call(this, decl, prefix); | ||
return undefined; | ||
}; | ||
@@ -70,3 +68,3 @@ | ||
writable: true, | ||
value: ['grid-row-end', 'grid-column-end', 'grid-row-span', 'grid-column-span'] | ||
value: ['grid-row-end', 'grid-column-end'] | ||
}); | ||
@@ -73,0 +71,0 @@ |
@@ -12,3 +12,3 @@ 'use strict'; | ||
var Declaration = require('../declaration'); | ||
var shorthand = require('./grid-shorthand'); | ||
var utils = require('./grid-utils'); | ||
@@ -30,21 +30,14 @@ var GridRowColumn = function (_Declaration) { | ||
var values = shorthand.parse(decl); | ||
var values = utils.parse(decl); | ||
var _shorthand$translate = shorthand.translate(values, 0, 1), | ||
start = _shorthand$translate[0], | ||
span = _shorthand$translate[1]; | ||
var _utils$translate = utils.translate(values, 0, 1), | ||
start = _utils$translate[0], | ||
span = _utils$translate[1]; | ||
if (start) { | ||
decl.cloneBefore({ | ||
prop: '-ms-' + decl.prop, | ||
value: start.toString() | ||
}); | ||
} | ||
[[decl.prop, start], [decl.prop + '-span', span]].forEach(function (_ref) { | ||
var prop = _ref[0], | ||
value = _ref[1]; | ||
if (span) { | ||
decl.cloneBefore({ | ||
prop: '-ms-' + decl.prop + '-span', | ||
value: span.toString() | ||
}); | ||
} | ||
utils.insertDecl(decl, prop, value); | ||
}); | ||
@@ -51,0 +44,0 @@ return undefined; |
@@ -12,3 +12,3 @@ 'use strict'; | ||
var Declaration = require('../declaration'); | ||
var shorthand = require('./grid-shorthand'); | ||
var utils = require('./grid-utils'); | ||
@@ -51,3 +51,3 @@ var GridRowsColumns = function (_Declaration) { | ||
if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) { | ||
decl.value = shorthand.changeRepeat(decl.value); | ||
decl.value = utils.changeRepeat(decl.value); | ||
} | ||
@@ -54,0 +54,0 @@ return _Declaration.prototype.set.call(this, decl, prefix); |
@@ -13,45 +13,10 @@ 'use strict'; | ||
var DOTS = /^\.+$/; | ||
var _require = require('./grid-utils'), | ||
parseGridAreas = _require.parseGridAreas, | ||
insertAreas = _require.insertAreas; | ||
function track(start, end) { | ||
return { start: start, end: end, span: end - start }; | ||
} | ||
function getRows(tpl) { | ||
function getGridRows(tpl) { | ||
return tpl.trim().slice(1, -1).split(/['"]\s*['"]?/g); | ||
} | ||
function getColumns(line) { | ||
return line.trim().split(/\s+/g); | ||
} | ||
function parseGridAreas(tpl) { | ||
return getRows(tpl).reduce(function (areas, line, rowIndex) { | ||
if (line.trim() === '') return areas; | ||
getColumns(line).forEach(function (area, columnIndex) { | ||
if (DOTS.test(area)) return; | ||
if (typeof areas[area] === 'undefined') { | ||
areas[area] = { | ||
column: track(columnIndex + 1, columnIndex + 2), | ||
row: track(rowIndex + 1, rowIndex + 2) | ||
}; | ||
} else { | ||
var _areas$area = areas[area], | ||
column = _areas$area.column, | ||
row = _areas$area.row; | ||
column.start = Math.min(column.start, columnIndex + 1); | ||
column.end = Math.max(column.end, columnIndex + 2); | ||
column.span = column.end - column.start; | ||
row.start = Math.min(row.start, rowIndex + 1); | ||
row.end = Math.max(row.end, rowIndex + 2); | ||
row.span = row.end - row.start; | ||
} | ||
}); | ||
return areas; | ||
}, {}); | ||
} | ||
var GridTemplateAreas = function (_Declaration) { | ||
@@ -66,61 +31,12 @@ _inherits(GridTemplateAreas, _Declaration); | ||
GridTemplateAreas.prototype.getRoot = function getRoot(parent) { | ||
if (parent.type === 'atrule' || !parent.parent) { | ||
return parent; | ||
} | ||
return this.getRoot(parent.parent); | ||
}; | ||
/** | ||
* Translate grid-template-areas to separate -ms- prefixed properties | ||
*/ | ||
GridTemplateAreas.prototype.insert = function insert(decl, prefix, prefixes, result) { | ||
if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes); | ||
var areas = parseGridAreas(decl.value); | ||
var missed = Object.keys(areas); | ||
var areas = parseGridAreas(getGridRows(decl.value)); | ||
this.getRoot(decl.parent).walkDecls('grid-area', function (gridArea) { | ||
var value = gridArea.value; | ||
var area = areas[value]; | ||
insertAreas(areas, decl, result); | ||
missed = missed.filter(function (e) { | ||
return e !== value; | ||
}); | ||
if (area) { | ||
gridArea.parent.walkDecls(/-ms-grid-(row|column)/, function (d) { | ||
d.remove(); | ||
}); | ||
gridArea.cloneBefore({ | ||
prop: '-ms-grid-row', | ||
value: String(area.row.start) | ||
}); | ||
if (area.row.span > 1) { | ||
gridArea.cloneBefore({ | ||
prop: '-ms-grid-row-span', | ||
value: String(area.row.span) | ||
}); | ||
} | ||
gridArea.cloneBefore({ | ||
prop: '-ms-grid-column', | ||
value: String(area.column.start) | ||
}); | ||
if (area.column.span > 1) { | ||
gridArea.cloneBefore({ | ||
prop: '-ms-grid-column-span', | ||
value: String(area.column.span) | ||
}); | ||
} | ||
} | ||
return undefined; | ||
}); | ||
if (missed.length > 0) { | ||
decl.warn(result, 'Can not find grid areas: ' + missed.join(', ')); | ||
} | ||
return decl; | ||
@@ -127,0 +43,0 @@ }; |
@@ -12,4 +12,7 @@ 'use strict'; | ||
var Declaration = require('../declaration'); | ||
var shorthand = require('./grid-shorthand'); | ||
var _require = require('./grid-utils'), | ||
parseTemplate = _require.parseTemplate, | ||
insertAreas = _require.insertAreas; | ||
var GridTemplate = function (_Declaration) { | ||
@@ -25,14 +28,5 @@ _inherits(GridTemplate, _Declaration); | ||
/** | ||
* Do not add prefix for unsupported value in IE | ||
*/ | ||
GridTemplate.prototype.check = function check(decl) { | ||
return decl.value.includes('/') && !decl.value.includes('[') && !decl.value.includes('"') && !decl.value.includes('\''); | ||
}; | ||
/** | ||
* Translate grid-template to separate -ms- prefixed properties | ||
*/ | ||
GridTemplate.prototype.insert = function insert(decl, prefix, prefixes) { | ||
GridTemplate.prototype.insert = function insert(decl, prefix, prefixes, result) { | ||
if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes); | ||
@@ -46,20 +40,27 @@ | ||
var _shorthand$parseTempl = shorthand.parseTemplateShortcut(decl), | ||
templateRows = _shorthand$parseTempl[0], | ||
templateColumns = _shorthand$parseTempl[1]; | ||
var _parseTemplate = parseTemplate(decl), | ||
rows = _parseTemplate.rows, | ||
columns = _parseTemplate.columns, | ||
areas = _parseTemplate.areas; | ||
if (templateRows) { | ||
var hasAreas = Object.keys(areas).length > 0; | ||
if (rows && columns || hasAreas) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-rows', | ||
value: shorthand.changeRepeat(templateRows.join('')) | ||
value: rows | ||
}); | ||
} | ||
if (templateColumns) { | ||
if (columns) { | ||
decl.cloneBefore({ | ||
prop: '-ms-grid-columns', | ||
value: shorthand.changeRepeat(templateColumns.join('')) | ||
value: columns | ||
}); | ||
} | ||
if (hasAreas) { | ||
insertAreas(areas, decl, result); | ||
} | ||
return decl; | ||
@@ -66,0 +67,0 @@ }; |
@@ -55,2 +55,3 @@ 'use strict'; | ||
Declaration.hack(require('./hacks/grid-column-align')); | ||
Declaration.hack(require('./hacks/overscroll-behavior')); | ||
Declaration.hack(require('./hacks/grid-template-areas')); | ||
@@ -57,0 +58,0 @@ Declaration.hack(require('./hacks/text-emphasis-position')); |
@@ -93,4 +93,8 @@ 'use strict'; | ||
var result = { warn: function warn() { | ||
return null; | ||
} }; | ||
var prefixer = this.prefixer().add[rule.first.prop]; | ||
prefixer && prefixer.process && prefixer.process(rule.first); | ||
prefixer && prefixer.process && prefixer.process(rule.first, result); | ||
@@ -97,0 +101,0 @@ for (var _iterator = rule.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { |
{ | ||
"name": "autoprefixer", | ||
"version": "8.0.0", | ||
"version": "8.1.0", | ||
"description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website", | ||
@@ -16,7 +16,7 @@ "keywords": [ | ||
"dependencies": { | ||
"browserslist": "^3.0.0", | ||
"caniuse-lite": "^1.0.30000808", | ||
"browserslist": "^3.1.1", | ||
"caniuse-lite": "^1.0.30000810", | ||
"normalize-range": "^0.1.2", | ||
"num2fraction": "^1.2.2", | ||
"postcss": "^6.0.17", | ||
"postcss": "^6.0.19", | ||
"postcss-value-parser": "^3.2.3" | ||
@@ -23,0 +23,0 @@ }, |
@@ -1,2 +0,2 @@ | ||
# Autoprefixer [![Build Status][ci-img]][ci] | ||
# Autoprefixer [![Cult Of Martians][cult-img]][cult] | ||
@@ -8,3 +8,3 @@ <img align="right" width="94" height="71" | ||
[PostCSS] plugin to parse CSS and add vendor prefixes to CSS rules using values | ||
from [Can I Use]. It is [recommended] by Google and used in Twitter and Taobao. | ||
from [Can I Use]. It is [recommended] by Google and used in Twitter and Taobao. | ||
@@ -21,3 +21,3 @@ Write your CSS rules without vendor prefixes (in fact, forget about them | ||
Autoprefixer will use the data based on current browser popularity and property | ||
support to apply prefixes for you. You can try the [interactive demo] | ||
support to apply prefixes for you. You can try the [interactive demo] | ||
of Autoprefixer. | ||
@@ -50,5 +50,5 @@ | ||
[Can I Use]: http://caniuse.com/ | ||
[cult-img]: http://cultofmartians.com/assets/badges/badge.svg | ||
[PostCSS]: https://github.com/postcss/postcss | ||
[ci-img]: https://travis-ci.org/postcss/autoprefixer.svg | ||
[ci]: https://travis-ci.org/postcss/autoprefixer | ||
[cult]: http://cultofmartians.com/tasks/autoprefixer-grid.html | ||
@@ -526,3 +526,3 @@ | ||
There are 4 plugin’s options to disable some Autoprefixer features. | ||
You can use these plugin options to disable some of the Autoprefixer's features. | ||
@@ -587,3 +587,3 @@ * `supports: false` will disable `@supports` parameters prefixing. | ||
There are 8 options: | ||
Available options are: | ||
@@ -590,0 +590,0 @@ * `browsers` (array): list of browsers query (like `last 2 versions`), |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
325385
73
6128
Updatedbrowserslist@^3.1.1
Updatedcaniuse-lite@^1.0.30000810
Updatedpostcss@^6.0.19