You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

303 lines
6.2 KiB

2 years ago
let featureQueries = require('caniuse-lite/data/features/css-featurequeries.js')
let { feature } = require('caniuse-lite')
let { parse } = require('postcss')
let Browsers = require('./browsers')
let brackets = require('./brackets')
let Value = require('./value')
let utils = require('./utils')
let data = feature(featureQueries)
let supported = []
for (let browser in data.stats) {
let versions = data.stats[browser]
for (let version in versions) {
let support = versions[version]
if (/y/.test(support)) {
supported.push(browser + ' ' + version)
}
}
}
class Supports {
constructor(Prefixes, all) {
this.Prefixes = Prefixes
this.all = all
}
/**
* Return prefixer only with @supports supported browsers
*/
prefixer() {
if (this.prefixerCache) {
return this.prefixerCache
}
let filtered = this.all.browsers.selected.filter(i => {
return supported.includes(i)
})
let browsers = new Browsers(
this.all.browsers.data,
filtered,
this.all.options
)
this.prefixerCache = new this.Prefixes(
this.all.data,
browsers,
this.all.options
)
return this.prefixerCache
}
/**
* Parse string into declaration property and value
*/
parse(str) {
let parts = str.split(':')
let prop = parts[0]
let value = parts[1]
if (!value) value = ''
return [prop.trim(), value.trim()]
}
/**
* Create virtual rule to process it by prefixer
*/
virtual(str) {
let [prop, value] = this.parse(str)
let rule = parse('a{}').first
rule.append({ prop, value, raws: { before: '' } })
return rule
}
/**
* Return array of Declaration with all necessary prefixes
*/
prefixed(str) {
let rule = this.virtual(str)
if (this.disabled(rule.first)) {
return rule.nodes
}
let result = { warn: () => null }
let prefixer = this.prefixer().add[rule.first.prop]
prefixer && prefixer.process && prefixer.process(rule.first, result)
for (let decl of rule.nodes) {
for (let value of this.prefixer().values('add', rule.first.prop)) {
value.process(decl)
}
Value.save(this.all, decl)
}
return rule.nodes
}
/**
* Return true if brackets node is "not" word
*/
isNot(node) {
return typeof node === 'string' && /not\s*/i.test(node)
}
/**
* Return true if brackets node is "or" word
*/
isOr(node) {
return typeof node === 'string' && /\s*or\s*/i.test(node)
}
/**
* Return true if brackets node is (prop: value)
*/
isProp(node) {
return (
typeof node === 'object' &&
node.length === 1 &&
typeof node[0] === 'string'
)
}
/**
* Return true if prefixed property has no unprefixed
*/
isHack(all, unprefixed) {
let check = new RegExp(`(\\(|\\s)${utils.escapeRegexp(unprefixed)}:`)
return !check.test(all)
}
/**
* Return true if we need to remove node
*/
toRemove(str, all) {
let [prop, value] = this.parse(str)
let unprefixed = this.all.unprefixed(prop)
let cleaner = this.all.cleaner()
if (
cleaner.remove[prop] &&
cleaner.remove[prop].remove &&
!this.isHack(all, unprefixed)
) {
return true
}
for (let checker of cleaner.values('remove', unprefixed)) {
if (checker.check(value)) {
return true
}
}
return false
}
/**
* Remove all unnecessary prefixes
*/
remove(nodes, all) {
let i = 0
while (i < nodes.length) {
if (
!this.isNot(nodes[i - 1]) &&
this.isProp(nodes[i]) &&
this.isOr(nodes[i + 1])
) {
if (this.toRemove(nodes[i][0], all)) {
nodes.splice(i, 2)
continue
}
i += 2
continue
}
if (typeof nodes[i] === 'object') {
nodes[i] = this.remove(nodes[i], all)
}
i += 1
}
return nodes
}
/**
* Clean brackets with one child
*/
cleanBrackets(nodes) {
return nodes.map(i => {
if (typeof i !== 'object') {
return i
}
if (i.length === 1 && typeof i[0] === 'object') {
return this.cleanBrackets(i[0])
}
return this.cleanBrackets(i)
})
}
/**
* Add " or " between properties and convert it to brackets format
*/
convert(progress) {
let result = ['']
for (let i of progress) {
result.push([`${i.prop}: ${i.value}`])
result.push(' or ')
}
result[result.length - 1] = ''
return result
}
/**
* Compress value functions into a string nodes
*/
normalize(nodes) {
if (typeof nodes !== 'object') {
return nodes
}
nodes = nodes.filter(i => i !== '')
if (typeof nodes[0] === 'string') {
let firstNode = nodes[0].trim()
if (
firstNode.includes(':') ||
firstNode === 'selector' ||
firstNode === 'not selector'
) {
return [brackets.stringify(nodes)]
}
}
return nodes.map(i => this.normalize(i))
}
/**
* Add prefixes
*/
add(nodes, all) {
return nodes.map(i => {
if (this.isProp(i)) {
let prefixed = this.prefixed(i[0])
if (prefixed.length > 1) {
return this.convert(prefixed)
}
return i
}
if (typeof i === 'object') {
return this.add(i, all)
}
return i
})
}
/**
* Add prefixed declaration
*/
process(rule) {
let ast = brackets.parse(rule.params)
ast = this.normalize(ast)
ast = this.remove(ast, rule.params)
ast = this.add(ast, rule.params)
ast = this.cleanBrackets(ast)
rule.params = brackets.stringify(ast)
}
/**
* Check global options
*/
disabled(node) {
if (!this.all.options.grid) {
if (node.prop === 'display' && node.value.includes('grid')) {
return true
}
if (node.prop.includes('grid') || node.prop === 'justify-items') {
return true
}
}
if (this.all.options.flexbox === false) {
if (node.prop === 'display' && node.value.includes('flex')) {
return true
}
let other = ['order', 'justify-content', 'align-items', 'align-content']
if (node.prop.includes('flex') || other.includes(node.prop)) {
return true
}
}
return false
}
}
module.exports = Supports