Начат фронтенд
This commit is contained in:
Georgiy Syralev
570
node_modules/autoprefixer/lib/hacks/gradient.js
generated
vendored
570
node_modules/autoprefixer/lib/hacks/gradient.js
generated
vendored
@@ -1,219 +1,57 @@
|
||||
let range = require('normalize-range')
|
||||
let parser = require('postcss-value-parser')
|
||||
let range = require('normalize-range')
|
||||
|
||||
let OldValue = require('../old-value')
|
||||
let utils = require('../utils')
|
||||
let Value = require('../value')
|
||||
let utils = require('../utils')
|
||||
|
||||
let IS_DIRECTION = /top|left|right|bottom/gi
|
||||
|
||||
class Gradient extends Value {
|
||||
/**
|
||||
* Do not add non-webkit prefixes for list-style and object
|
||||
* Change degrees for webkit prefix
|
||||
*/
|
||||
add(decl, prefix) {
|
||||
let p = decl.prop
|
||||
if (p.includes('mask')) {
|
||||
if (prefix === '-webkit-' || prefix === '-webkit- old') {
|
||||
return super.add(decl, prefix)
|
||||
replace(string, prefix) {
|
||||
let ast = parser(string)
|
||||
for (let node of ast.nodes) {
|
||||
let gradientName = this.name // gradient name
|
||||
if (node.type === 'function' && node.value === gradientName) {
|
||||
node.nodes = this.newDirection(node.nodes)
|
||||
node.nodes = this.normalize(node.nodes, gradientName)
|
||||
if (prefix === '-webkit- old') {
|
||||
let changes = this.oldWebkit(node)
|
||||
if (!changes) {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
node.nodes = this.convertDirection(node.nodes)
|
||||
node.value = prefix + node.value
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
p === 'list-style' ||
|
||||
p === 'list-style-image' ||
|
||||
p === 'content'
|
||||
) {
|
||||
if (prefix === '-webkit-' || prefix === '-webkit- old') {
|
||||
return super.add(decl, prefix)
|
||||
}
|
||||
} else {
|
||||
return super.add(decl, prefix)
|
||||
}
|
||||
return undefined
|
||||
return ast.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get div token from exists parameters
|
||||
* Replace first token
|
||||
*/
|
||||
cloneDiv(params) {
|
||||
for (let i of params) {
|
||||
if (i.type === 'div' && i.value === ',') {
|
||||
return i
|
||||
replaceFirst(params, ...words) {
|
||||
let prefix = words.map(i => {
|
||||
if (i === ' ') {
|
||||
return { type: 'space', value: i }
|
||||
}
|
||||
}
|
||||
return { after: ' ', type: 'div', value: ',' }
|
||||
return { type: 'word', value: i }
|
||||
})
|
||||
return prefix.concat(params.slice(1))
|
||||
}
|
||||
|
||||
/**
|
||||
* Change colors syntax to old webkit
|
||||
* Convert angle unit to deg
|
||||
*/
|
||||
colorStops(params) {
|
||||
let result = []
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let pos
|
||||
let param = params[i]
|
||||
let item
|
||||
if (i === 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
let color = parser.stringify(param[0])
|
||||
if (param[1] && param[1].type === 'word') {
|
||||
pos = param[1].value
|
||||
} else if (param[2] && param[2].type === 'word') {
|
||||
pos = param[2].value
|
||||
}
|
||||
|
||||
let stop
|
||||
if (i === 1 && (!pos || pos === '0%')) {
|
||||
stop = `from(${color})`
|
||||
} else if (i === params.length - 1 && (!pos || pos === '100%')) {
|
||||
stop = `to(${color})`
|
||||
} else if (pos) {
|
||||
stop = `color-stop(${pos}, ${color})`
|
||||
} else {
|
||||
stop = `color-stop(${color})`
|
||||
}
|
||||
|
||||
let div = param[param.length - 1]
|
||||
params[i] = [{ type: 'word', value: stop }]
|
||||
if (div.type === 'div' && div.value === ',') {
|
||||
item = params[i].push(div)
|
||||
}
|
||||
result.push(item)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Change new direction to old
|
||||
*/
|
||||
convertDirection(params) {
|
||||
if (params.length > 0) {
|
||||
if (params[0].value === 'to') {
|
||||
this.fixDirection(params)
|
||||
} else if (params[0].value.includes('deg')) {
|
||||
this.fixAngle(params)
|
||||
} else if (this.isRadial(params)) {
|
||||
this.fixRadial(params)
|
||||
}
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
/**
|
||||
* Add 90 degrees
|
||||
*/
|
||||
fixAngle(params) {
|
||||
let first = params[0].value
|
||||
first = parseFloat(first)
|
||||
first = Math.abs(450 - first) % 360
|
||||
first = this.roundFloat(first, 3)
|
||||
params[0].value = `${first}deg`
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace `to top left` to `bottom right`
|
||||
*/
|
||||
fixDirection(params) {
|
||||
params.splice(0, 2)
|
||||
|
||||
for (let param of params) {
|
||||
if (param.type === 'div') {
|
||||
break
|
||||
}
|
||||
if (param.type === 'word') {
|
||||
param.value = this.revertDirection(param.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix radial direction syntax
|
||||
*/
|
||||
fixRadial(params) {
|
||||
let first = []
|
||||
let second = []
|
||||
let a, b, c, i, next
|
||||
|
||||
for (i = 0; i < params.length - 2; i++) {
|
||||
a = params[i]
|
||||
b = params[i + 1]
|
||||
c = params[i + 2]
|
||||
if (a.type === 'space' && b.value === 'at' && c.type === 'space') {
|
||||
next = i + 3
|
||||
break
|
||||
} else {
|
||||
first.push(a)
|
||||
}
|
||||
}
|
||||
|
||||
let div
|
||||
for (i = next; i < params.length; i++) {
|
||||
if (params[i].type === 'div') {
|
||||
div = params[i]
|
||||
break
|
||||
} else {
|
||||
second.push(params[i])
|
||||
}
|
||||
}
|
||||
|
||||
params.splice(0, i, ...second, div, ...first)
|
||||
}
|
||||
|
||||
/**
|
||||
* Look for at word
|
||||
*/
|
||||
isRadial(params) {
|
||||
let state = 'before'
|
||||
for (let param of params) {
|
||||
if (state === 'before' && param.type === 'space') {
|
||||
state = 'at'
|
||||
} else if (state === 'at' && param.value === 'at') {
|
||||
state = 'after'
|
||||
} else if (state === 'after' && param.type === 'space') {
|
||||
return true
|
||||
} else if (param.type === 'div') {
|
||||
break
|
||||
} else {
|
||||
state = 'before'
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace old direction to new
|
||||
*/
|
||||
newDirection(params) {
|
||||
if (params[0].value === 'to') {
|
||||
return params
|
||||
}
|
||||
IS_DIRECTION.lastIndex = 0 // reset search index of global regexp
|
||||
if (!IS_DIRECTION.test(params[0].value)) {
|
||||
return params
|
||||
}
|
||||
|
||||
params.unshift(
|
||||
{
|
||||
type: 'word',
|
||||
value: 'to'
|
||||
},
|
||||
{
|
||||
type: 'space',
|
||||
value: ' '
|
||||
}
|
||||
)
|
||||
|
||||
for (let i = 2; i < params.length; i++) {
|
||||
if (params[i].type === 'div') {
|
||||
break
|
||||
}
|
||||
if (params[i].type === 'word') {
|
||||
params[i].value = this.revertDirection(params[i].value)
|
||||
}
|
||||
}
|
||||
|
||||
return params
|
||||
normalizeUnit(str, full) {
|
||||
let num = parseFloat(str)
|
||||
let deg = (num / full) * 360
|
||||
return `${deg}deg`
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -257,66 +95,146 @@ class Gradient extends Value {
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert angle unit to deg
|
||||
* Replace old direction to new
|
||||
*/
|
||||
normalizeUnit(str, full) {
|
||||
let num = parseFloat(str)
|
||||
let deg = (num / full) * 360
|
||||
return `${deg}deg`
|
||||
newDirection(params) {
|
||||
if (params[0].value === 'to') {
|
||||
return params
|
||||
}
|
||||
IS_DIRECTION.lastIndex = 0 // reset search index of global regexp
|
||||
if (!IS_DIRECTION.test(params[0].value)) {
|
||||
return params
|
||||
}
|
||||
|
||||
params.unshift(
|
||||
{
|
||||
type: 'word',
|
||||
value: 'to'
|
||||
},
|
||||
{
|
||||
type: 'space',
|
||||
value: ' '
|
||||
}
|
||||
)
|
||||
|
||||
for (let i = 2; i < params.length; i++) {
|
||||
if (params[i].type === 'div') {
|
||||
break
|
||||
}
|
||||
if (params[i].type === 'word') {
|
||||
params[i].value = this.revertDirection(params[i].value)
|
||||
}
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove old WebKit gradient too
|
||||
* Look for at word
|
||||
*/
|
||||
old(prefix) {
|
||||
if (prefix === '-webkit-') {
|
||||
let type
|
||||
if (this.name === 'linear-gradient') {
|
||||
type = 'linear'
|
||||
} else if (this.name === 'repeating-linear-gradient') {
|
||||
type = 'repeating-linear'
|
||||
} else if (this.name === 'repeating-radial-gradient') {
|
||||
type = 'repeating-radial'
|
||||
isRadial(params) {
|
||||
let state = 'before'
|
||||
for (let param of params) {
|
||||
if (state === 'before' && param.type === 'space') {
|
||||
state = 'at'
|
||||
} else if (state === 'at' && param.value === 'at') {
|
||||
state = 'after'
|
||||
} else if (state === 'after' && param.type === 'space') {
|
||||
return true
|
||||
} else if (param.type === 'div') {
|
||||
break
|
||||
} else {
|
||||
type = 'radial'
|
||||
state = 'before'
|
||||
}
|
||||
let string = '-gradient'
|
||||
let regexp = utils.regexp(
|
||||
`-webkit-(${type}-gradient|gradient\\(\\s*${type})`,
|
||||
false
|
||||
)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
return new OldValue(this.name, prefix + this.name, string, regexp)
|
||||
} else {
|
||||
return super.old(prefix)
|
||||
/**
|
||||
* Change new direction to old
|
||||
*/
|
||||
convertDirection(params) {
|
||||
if (params.length > 0) {
|
||||
if (params[0].value === 'to') {
|
||||
this.fixDirection(params)
|
||||
} else if (params[0].value.includes('deg')) {
|
||||
this.fixAngle(params)
|
||||
} else if (this.isRadial(params)) {
|
||||
this.fixRadial(params)
|
||||
}
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace `to top left` to `bottom right`
|
||||
*/
|
||||
fixDirection(params) {
|
||||
params.splice(0, 2)
|
||||
|
||||
for (let param of params) {
|
||||
if (param.type === 'div') {
|
||||
break
|
||||
}
|
||||
if (param.type === 'word') {
|
||||
param.value = this.revertDirection(param.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Change direction syntax to old webkit
|
||||
* Add 90 degrees
|
||||
*/
|
||||
oldDirection(params) {
|
||||
let div = this.cloneDiv(params[0])
|
||||
fixAngle(params) {
|
||||
let first = params[0].value
|
||||
first = parseFloat(first)
|
||||
first = Math.abs(450 - first) % 360
|
||||
first = this.roundFloat(first, 3)
|
||||
params[0].value = `${first}deg`
|
||||
}
|
||||
|
||||
if (params[0][0].value !== 'to') {
|
||||
return params.unshift([
|
||||
{ type: 'word', value: Gradient.oldDirections.bottom },
|
||||
div
|
||||
])
|
||||
} else {
|
||||
let words = []
|
||||
for (let node of params[0].slice(2)) {
|
||||
if (node.type === 'word') {
|
||||
words.push(node.value.toLowerCase())
|
||||
}
|
||||
/**
|
||||
* Fix radial direction syntax
|
||||
*/
|
||||
fixRadial(params) {
|
||||
let first = []
|
||||
let second = []
|
||||
let a, b, c, i, next
|
||||
|
||||
for (i = 0; i < params.length - 2; i++) {
|
||||
a = params[i]
|
||||
b = params[i + 1]
|
||||
c = params[i + 2]
|
||||
if (a.type === 'space' && b.value === 'at' && c.type === 'space') {
|
||||
next = i + 3
|
||||
break
|
||||
} else {
|
||||
first.push(a)
|
||||
}
|
||||
|
||||
words = words.join(' ')
|
||||
let old = Gradient.oldDirections[words] || words
|
||||
|
||||
params[0] = [{ type: 'word', value: old }, div]
|
||||
return params[0]
|
||||
}
|
||||
|
||||
let div
|
||||
for (i = next; i < params.length; i++) {
|
||||
if (params[i].type === 'div') {
|
||||
div = params[i]
|
||||
break
|
||||
} else {
|
||||
second.push(params[i])
|
||||
}
|
||||
}
|
||||
|
||||
params.splice(0, i, ...second, div, ...first)
|
||||
}
|
||||
|
||||
revertDirection(word) {
|
||||
return Gradient.directions[word.toLowerCase()] || word
|
||||
}
|
||||
|
||||
/**
|
||||
* Round float and save digits under dot
|
||||
*/
|
||||
roundFloat(float, digits) {
|
||||
return parseFloat(float.toFixed(digits))
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -366,51 +284,133 @@ class Gradient extends Value {
|
||||
}
|
||||
|
||||
/**
|
||||
* Change degrees for webkit prefix
|
||||
* Change direction syntax to old webkit
|
||||
*/
|
||||
replace(string, prefix) {
|
||||
let ast = parser(string)
|
||||
for (let node of ast.nodes) {
|
||||
let gradientName = this.name // gradient name
|
||||
if (node.type === 'function' && node.value === gradientName) {
|
||||
node.nodes = this.newDirection(node.nodes)
|
||||
node.nodes = this.normalize(node.nodes, gradientName)
|
||||
if (prefix === '-webkit- old') {
|
||||
let changes = this.oldWebkit(node)
|
||||
if (!changes) {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
node.nodes = this.convertDirection(node.nodes)
|
||||
node.value = prefix + node.value
|
||||
oldDirection(params) {
|
||||
let div = this.cloneDiv(params[0])
|
||||
|
||||
if (params[0][0].value !== 'to') {
|
||||
return params.unshift([
|
||||
{ type: 'word', value: Gradient.oldDirections.bottom },
|
||||
div
|
||||
])
|
||||
} else {
|
||||
let words = []
|
||||
for (let node of params[0].slice(2)) {
|
||||
if (node.type === 'word') {
|
||||
words.push(node.value.toLowerCase())
|
||||
}
|
||||
}
|
||||
|
||||
words = words.join(' ')
|
||||
let old = Gradient.oldDirections[words] || words
|
||||
|
||||
params[0] = [{ type: 'word', value: old }, div]
|
||||
return params[0]
|
||||
}
|
||||
return ast.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace first token
|
||||
* Get div token from exists parameters
|
||||
*/
|
||||
replaceFirst(params, ...words) {
|
||||
let prefix = words.map(i => {
|
||||
if (i === ' ') {
|
||||
return { type: 'space', value: i }
|
||||
cloneDiv(params) {
|
||||
for (let i of params) {
|
||||
if (i.type === 'div' && i.value === ',') {
|
||||
return i
|
||||
}
|
||||
return { type: 'word', value: i }
|
||||
})
|
||||
return prefix.concat(params.slice(1))
|
||||
}
|
||||
|
||||
revertDirection(word) {
|
||||
return Gradient.directions[word.toLowerCase()] || word
|
||||
}
|
||||
return { type: 'div', value: ',', after: ' ' }
|
||||
}
|
||||
|
||||
/**
|
||||
* Round float and save digits under dot
|
||||
* Change colors syntax to old webkit
|
||||
*/
|
||||
roundFloat(float, digits) {
|
||||
return parseFloat(float.toFixed(digits))
|
||||
colorStops(params) {
|
||||
let result = []
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let pos
|
||||
let param = params[i]
|
||||
let item
|
||||
if (i === 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
let color = parser.stringify(param[0])
|
||||
if (param[1] && param[1].type === 'word') {
|
||||
pos = param[1].value
|
||||
} else if (param[2] && param[2].type === 'word') {
|
||||
pos = param[2].value
|
||||
}
|
||||
|
||||
let stop
|
||||
if (i === 1 && (!pos || pos === '0%')) {
|
||||
stop = `from(${color})`
|
||||
} else if (i === params.length - 1 && (!pos || pos === '100%')) {
|
||||
stop = `to(${color})`
|
||||
} else if (pos) {
|
||||
stop = `color-stop(${pos}, ${color})`
|
||||
} else {
|
||||
stop = `color-stop(${color})`
|
||||
}
|
||||
|
||||
let div = param[param.length - 1]
|
||||
params[i] = [{ type: 'word', value: stop }]
|
||||
if (div.type === 'div' && div.value === ',') {
|
||||
item = params[i].push(div)
|
||||
}
|
||||
result.push(item)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove old WebKit gradient too
|
||||
*/
|
||||
old(prefix) {
|
||||
if (prefix === '-webkit-') {
|
||||
let type
|
||||
if (this.name === 'linear-gradient') {
|
||||
type = 'linear'
|
||||
} else if (this.name === 'repeating-linear-gradient') {
|
||||
type = 'repeating-linear'
|
||||
} else if (this.name === 'repeating-radial-gradient') {
|
||||
type = 'repeating-radial'
|
||||
} else {
|
||||
type = 'radial'
|
||||
}
|
||||
let string = '-gradient'
|
||||
let regexp = utils.regexp(
|
||||
`-webkit-(${type}-gradient|gradient\\(\\s*${type})`,
|
||||
false
|
||||
)
|
||||
|
||||
return new OldValue(this.name, prefix + this.name, string, regexp)
|
||||
} else {
|
||||
return super.old(prefix)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Do not add non-webkit prefixes for list-style and object
|
||||
*/
|
||||
add(decl, prefix) {
|
||||
let p = decl.prop
|
||||
if (p.includes('mask')) {
|
||||
if (prefix === '-webkit-' || prefix === '-webkit- old') {
|
||||
return super.add(decl, prefix)
|
||||
}
|
||||
} else if (
|
||||
p === 'list-style' ||
|
||||
p === 'list-style-image' ||
|
||||
p === 'content'
|
||||
) {
|
||||
if (prefix === '-webkit-' || prefix === '-webkit- old') {
|
||||
return super.add(decl, prefix)
|
||||
}
|
||||
} else {
|
||||
return super.add(decl, prefix)
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
@@ -422,27 +422,27 @@ Gradient.names = [
|
||||
]
|
||||
|
||||
Gradient.directions = {
|
||||
bottom: 'top',
|
||||
top: 'bottom', // default value
|
||||
left: 'right',
|
||||
right: 'left',
|
||||
top: 'bottom' // default value
|
||||
bottom: 'top',
|
||||
right: 'left'
|
||||
}
|
||||
|
||||
// Direction to replace
|
||||
Gradient.oldDirections = {
|
||||
'bottom': 'left top, left bottom',
|
||||
'bottom left': 'right top, left bottom',
|
||||
'bottom right': 'left top, right bottom',
|
||||
'left': 'right top, left top',
|
||||
|
||||
'left bottom': 'right top, left bottom',
|
||||
'left top': 'right bottom, left top',
|
||||
'right': 'left top, right top',
|
||||
'right bottom': 'left top, right bottom',
|
||||
'right top': 'left bottom, right top',
|
||||
'top': 'left bottom, left top',
|
||||
'left': 'right top, left top',
|
||||
'bottom': 'left top, left bottom',
|
||||
'right': 'left top, right top',
|
||||
|
||||
'top right': 'left bottom, right top',
|
||||
'top left': 'right bottom, left top',
|
||||
'top right': 'left bottom, right top'
|
||||
'right top': 'left bottom, right top',
|
||||
'right bottom': 'left top, right bottom',
|
||||
'bottom right': 'left top, right bottom',
|
||||
'bottom left': 'right top, left bottom',
|
||||
'left top': 'right bottom, left top',
|
||||
'left bottom': 'right top, left bottom'
|
||||
}
|
||||
|
||||
module.exports = Gradient
|
||||
|
||||
Reference in New Issue
Block a user