-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdebug-outline.js
122 lines (119 loc) · 7.84 KB
/
debug-outline.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const { default: prefixSelector } = require('tailwindcss/lib/util/prefixSelector');
/**
* Add Outline debug to all HTML elements
*
* @package @studiometa/tailwind-config
*/
module.exports = function debugOutlinePluginFactory() {
return function debugOutlinePlugin({ addComponents, theme }) {
const debug = theme('debugOutline', false);
const prefixValue = theme('debugOutline.prefix', '');
const prefix = (selector) => prefixSelector(prefixValue, selector);
if (!debug) {
return;
}
addComponents([
{
[prefix('.debug')]: {
'*:after, *:before': { outline: '1px solid rgba(255, 0, 0, 0.5) !important' },
body: { outline: '1px solid rgba(41, 128, 185, 0.5) !important' },
article: { outline: '1px solid rgba(52, 152, 219, 0.5) !important' },
nav: { outline: '1px solid rgba(0, 136, 195, 0.5) !important' },
aside: { outline: '1px solid rgba(51, 160, 206, 0.5) !important' },
section: { outline: '1px solid rgba(102, 184, 218, 0.5) !important' },
header: { outline: '1px solid rgba(153, 207, 231, 0.5) !important' },
footer: { outline: '1px solid rgba(204, 231, 243, 0.5) !important' },
h1: { outline: '1px solid rgba(22, 37, 68, 0.5) !important' },
h2: { outline: '1px solid rgba(49, 78, 110, 0.5) !important' },
h3: { outline: '1px solid rgba(62, 94, 133, 0.5) !important' },
h4: { outline: '1px solid rgba(68, 155, 175, 0.5) !important' },
h5: { outline: '1px solid rgba(199, 209, 203, 0.5) !important' },
h6: { outline: '1px solid rgba(67, 113, 208, 0.5) !important' },
main: { outline: '1px solid rgba(47, 79, 144, 0.5) !important' },
address: { outline: '1px solid rgba(26, 44, 81, 0.5) !important' },
div: { outline: '1px solid rgba(3, 108, 219, 0.5) !important' },
p: { outline: '1px solid rgba(172, 5, 11, 0.5) !important' },
hr: { outline: '1px solid rgba(255, 6, 63, 0.5) !important' },
pre: { outline: '1px solid rgba(133, 4, 64, 0.5) !important' },
blockquote: { outline: '1px solid rgba(241, 184, 231, 0.5) !important' },
ol: { outline: '1px solid rgba(255, 5, 12, 0.5) !important' },
ul: { outline: '1px solid rgba(217, 4, 22, 0.5) !important' },
li: { outline: '1px solid rgba(217, 4, 22, 0.5) !important' },
dl: { outline: '1px solid rgba(253, 52, 39, 0.5) !important' },
dt: { outline: '1px solid rgba(255, 0, 67, 0.5) !important' },
dd: { outline: '1px solid rgba(232, 1, 116, 0.5) !important' },
figure: { outline: '1px solid rgba(255, 0, 187, 0.5) !important' },
figcaption: { outline: '1px solid rgba(191, 0, 50, 0.5) !important' },
table: { outline: '1px solid rgba(0, 204, 153, 0.5) !important' },
caption: { outline: '1px solid rgba(55, 255, 196, 0.5) !important' },
thead: { outline: '1px solid rgba(152, 218, 202, 0.5) !important' },
tbody: { outline: '1px solid rgba(100, 167, 160, 0.5) !important' },
tfoot: { outline: '1px solid rgba(34, 116, 107, 0.5) !important' },
tr: { outline: '1px solid rgba(134, 192, 178, 0.5) !important' },
th: { outline: '1px solid rgba(161, 231, 214, 0.5) !important' },
td: { outline: '1px solid rgba(63, 90, 84, 0.5) !important' },
col: { outline: '1px solid rgba(108, 154, 143, 0.5) !important' },
colgroup: { outline: '1px solid rgba(108, 154, 157, 0.5) !important' },
button: { outline: '1px solid rgba(218, 131, 1, 0.5) !important' },
datalist: { outline: '1px solid rgba(192, 96, 0, 0.5) !important' },
fieldset: { outline: '1px solid rgba(217, 81, 0, 0.5) !important' },
form: { outline: '1px solid rgba(210, 54, 0, 0.5) !important' },
input: { outline: '1px solid rgba(252, 166, 0, 0.5) !important' },
keygen: { outline: '1px solid rgba(179, 30, 0, 0.5) !important' },
label: { outline: '1px solid rgba(238, 137, 0, 0.5) !important' },
legend: { outline: '1px solid rgba(222, 109, 0, 0.5) !important' },
meter: { outline: '1px solid rgba(232, 99, 12, 0.5) !important' },
optgroup: { outline: '1px solid rgba(179, 54, 0, 0.5) !important' },
option: { outline: '1px solid rgba(255, 138, 0, 0.5) !important' },
output: { outline: '1px solid rgba(255, 150, 25, 0.5) !important' },
select: { outline: '1px solid rgba(226, 110, 15, 0.5) !important' },
textarea: { outline: '1px solid rgba(204, 84, 0, 0.5) !important' },
details: { outline: '1px solid rgba(51, 132, 143, 0.5) !important' },
summary: { outline: '1px solid rgba(96, 161, 166, 0.5) !important' },
menu: { outline: '1px solid rgba(68, 157, 166, 0.5) !important' },
del: { outline: '1px solid rgba(191, 0, 0, 0.5) !important' },
ins: { outline: '1px solid rgba(64, 0, 0, 0.5) !important' },
img: { outline: '1px solid rgba(34, 116, 107, 0.5) !important' },
iframe: { outline: '1px solid rgba(100, 167, 160, 0.5) !important' },
embed: { outline: '1px solid rgba(152, 218, 202, 0.5) !important' },
object: { outline: '1px solid rgba(0, 204, 153, 0.5) !important' },
param: { outline: '1px solid rgba(55, 255, 196, 0.5) !important' },
video: { outline: '1px solid rgba(110, 232, 102, 0.5) !important' },
audio: { outline: '1px solid rgba(2, 115, 83, 0.5) !important' },
source: { outline: '1px solid rgba(1, 36, 38, 0.5) !important' },
canvas: { outline: '1px solid rgba(162, 245, 112, 0.5) !important' },
track: { outline: '1px solid rgba(89, 166, 0, 0.5) !important' },
map: { outline: '1px solid rgba(123, 229, 0, 0.5) !important' },
area: { outline: '1px solid rgba(48, 89, 0, 0.5) !important' },
a: { outline: '1px solid rgba(255, 98, 171, 0.5) !important' },
em: { outline: '1px solid rgba(128, 11, 65, 0.5) !important' },
strong: { outline: '1px solid rgba(255, 21, 131, 0.5) !important' },
i: { outline: '1px solid rgba(128, 49, 86, 0.5) !important' },
b: { outline: '1px solid rgba(204, 17, 105, 0.5) !important' },
u: { outline: '1px solid rgba(255, 4, 48, 0.5) !important' },
small: { outline: '1px solid rgba(209, 7, 178, 0.5) !important' },
abbr: { outline: '1px solid rgba(74, 2, 99, 0.5) !important' },
q: { outline: '1px solid rgba(36, 0, 24, 0.5) !important' },
cite: { outline: '1px solid rgba(100, 0, 60, 0.5) !important' },
dfn: { outline: '1px solid rgba(180, 0, 90, 0.5) !important' },
sub: { outline: '1px solid rgba(219, 160, 200, 0.5) !important' },
sup: { outline: '1px solid rgba(204, 2, 86, 0.5) !important' },
time: { outline: '1px solid rgba(214, 96, 109, 0.5) !important' },
code: { outline: '1px solid rgba(224, 66, 81, 0.5) !important' },
kbd: { outline: '1px solid rgba(94, 0, 31, 0.5) !important' },
samp: { outline: '1px solid rgba(156, 0, 51, 0.5) !important' },
var: { outline: '1px solid rgba(217, 0, 71, 0.5) !important' },
mark: { outline: '1px solid rgba(255, 0, 83, 0.5) !important' },
bdi: { outline: '1px solid rgba(191, 54, 104, 0.5) !important' },
bdo: { outline: '1px solid rgba(111, 20, 0, 0.5) !important' },
ruby: { outline: '1px solid rgba(255, 123, 147, 0.5) !important' },
rt: { outline: '1px solid rgba(255, 47, 84, 0.5) !important' },
rp: { outline: '1px solid rgba(128, 62, 73, 0.5) !important' },
span: { outline: '1px solid rgba(204, 38, 67, 0.5) !important' },
br: { outline: '1px solid rgba(219, 104, 125, 0.5) !important' },
wbr: { outline: '1px solid rgba(219, 23, 91, 0.5) !important' },
},
},
]);
};
};