-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
94 lines (74 loc) · 2.35 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/* eslint-disable no-autofix/strict */
'use strict';
const valueParser = require('postcss-value-parser');
module.exports = function exports (options = {}) {
const {
addOverlayFallback = true,
addClipFallback = true,
operateOnDoubleValues = true,
} = options;
if ('add' in options || 'upgradeHiddenToClip' in options) {
throw new Error('the `add` and `upgradeHiddenToClip` options are removed. Use the `postcss-overflow-clip` plugin instead.');
}
function handleDeclaration (decl) {
if (!addOverlayFallback && !addClipFallback) return;
const { prop, value } = decl;
// do not add fallbacks if another fallback is present
const prevDecl = decl.prev();
if (prevDecl && prevDecl.prop === prop) return;
if (value === 'overlay') {
if (!addOverlayFallback) return;
decl.cloneBefore({ value: 'auto' });
return;
}
if (value === 'clip') {
if (!addClipFallback) return;
decl.cloneBefore({ value: 'hidden' });
return;
}
if (!operateOnDoubleValues) return;
if (prop !== 'overflow') return;
const parsedValues = valueParser(value);
if (parsedValues.nodes.length < 3) return;
let changed = false;
let fallbackDecl;
if (addClipFallback) {
parsedValues.walk((node) => {
if (node.type !== 'word') return;
if (node.value !== 'clip') return;
node.value = 'hidden';
changed = true;
});
if (changed) {
const fallbackValue = parsedValues.toString();
fallbackDecl = decl.cloneBefore({ value: fallbackValue });
}
}
if (!addOverlayFallback) return;
if (changed) {
changed = false;
}
parsedValues.walk((node) => {
if (node.type !== 'word') return;
if (node.value !== 'overlay') return;
node.value = 'auto';
changed = true;
});
if (!changed) return;
const fallbackValue = parsedValues.toString();
const cloneBeforeDecl = fallbackDecl || decl;
cloneBeforeDecl.cloneBefore({ value: fallbackValue });
}
const Declaration = {
overflow: handleDeclaration,
'overflow-block': handleDeclaration,
'overflow-inline': handleDeclaration,
'overflow-x': handleDeclaration,
'overflow-y': handleDeclaration,
};
return {
postcssPlugin: 'postcss-overflow-clip',
Declaration: Declaration,
};
};
module.exports.postcss = true;