I encountered a problem when I need to check several properties in one selector, and when one of them is found, perform only one operation, regardless of the number of properties found.
Plugin code
module.exports = (opts = {}) => {
let defaults = ['hidden', 'scroll', 'auto', 'inherit']
opts = Array.isArray(opts) ? opts : defaults
function makeRuleOverflowTouch( decl ) {
if (opts.includes(decl.value)) {
let hasTouch = decl.parent.some(i => i.prop === '-webkit-overflow-scrolling' )
if (!hasTouch) {
decl.parent.append({
prop: '-webkit-overflow-scrolling',
value: 'touch'
})
}
}
}
return {
postcssPlugin: 'postcss-momentum-scrolling',
Declaration: {
overflow: decl => makeRuleOverflowTouch( decl ),
'overflow-x': decl => makeRuleOverflowTouch( decl ),
'overflow-y': decl => makeRuleOverflowTouch( decl ),
}
}
}
module.exports.postcss = trueProblem
overflow: decl => makeRuleOverflowTouch( decl ),
'overflow-x': decl => makeRuleOverflowTouch( decl ),
'overflow-y': decl => makeRuleOverflowTouch( decl ),
At each occurrence, I check the same selector, because there can be 2 values (overflow-x and overflow-y)
Question
How make rule skippable after first enter?
I encountered a problem when I need to check several properties in one selector, and when one of them is found, perform only one operation, regardless of the number of properties found.
Plugin code
Problem
At each occurrence, I check the same selector, because there can be 2 values (overflow-x and overflow-y)
Question
How make rule skippable after first enter?