1 | import postcss from 'postcss';
|
---|
2 | import parser from 'postcss-selector-parser';
|
---|
3 |
|
---|
4 | function nodeIsInsensitiveAttribute(node) {
|
---|
5 | return node.type === 'attribute' && node.insensitive;
|
---|
6 | }
|
---|
7 |
|
---|
8 | function selectorHasInsensitiveAttribute(selector) {
|
---|
9 | return selector.some(nodeIsInsensitiveAttribute);
|
---|
10 | }
|
---|
11 |
|
---|
12 | function transformString(strings, charPos, string) {
|
---|
13 | const char = string.charAt(charPos);
|
---|
14 | if (char === '') {
|
---|
15 | return strings;
|
---|
16 | }
|
---|
17 |
|
---|
18 | let newStrings = strings.map(x => x + char);
|
---|
19 | const upperChar = char.toLocaleUpperCase();
|
---|
20 |
|
---|
21 | if (upperChar !== char) {
|
---|
22 | newStrings = newStrings.concat(strings.map(x => x + upperChar));
|
---|
23 | }
|
---|
24 |
|
---|
25 | return transformString(newStrings, charPos + 1, string);
|
---|
26 | }
|
---|
27 |
|
---|
28 | function createSensitiveAtributes(attribute) {
|
---|
29 | const attributes = transformString([''], 0, attribute.value);
|
---|
30 | return attributes.map(x => {
|
---|
31 | const newAttribute = attribute.clone({
|
---|
32 | spaces: {
|
---|
33 | after: attribute.spaces.after,
|
---|
34 | before: attribute.spaces.before
|
---|
35 | },
|
---|
36 | insensitive: false
|
---|
37 | });
|
---|
38 |
|
---|
39 | newAttribute.setValue(x);
|
---|
40 |
|
---|
41 | return newAttribute;
|
---|
42 | });
|
---|
43 | }
|
---|
44 |
|
---|
45 | function createNewSelectors(selector) {
|
---|
46 | let newSelectors = [parser.selector()];
|
---|
47 |
|
---|
48 | selector.walk(node => {
|
---|
49 | if (!nodeIsInsensitiveAttribute(node)) {
|
---|
50 | newSelectors.forEach(newSelector => {
|
---|
51 | newSelector.append(node.clone());
|
---|
52 | });
|
---|
53 | return;
|
---|
54 | }
|
---|
55 |
|
---|
56 | const sensitiveAttributes = createSensitiveAtributes(node);
|
---|
57 | const newSelectorsWithSensitiveAttributes = [];
|
---|
58 |
|
---|
59 | sensitiveAttributes.forEach(newNode => {
|
---|
60 | newSelectors.forEach(newSelector => {
|
---|
61 | const newSelectorWithNewNode = newSelector.clone();
|
---|
62 | newSelectorWithNewNode.append(newNode);
|
---|
63 | newSelectorsWithSensitiveAttributes.push(newSelectorWithNewNode);
|
---|
64 | });
|
---|
65 | });
|
---|
66 |
|
---|
67 | newSelectors = newSelectorsWithSensitiveAttributes;
|
---|
68 | });
|
---|
69 |
|
---|
70 | return newSelectors;
|
---|
71 | }
|
---|
72 |
|
---|
73 | function transform(selectors) {
|
---|
74 | let newSelectors = [];
|
---|
75 |
|
---|
76 | selectors.each(selector => {
|
---|
77 | if (selectorHasInsensitiveAttribute(selector)) {
|
---|
78 | newSelectors = newSelectors.concat(createNewSelectors(selector));
|
---|
79 | selector.remove();
|
---|
80 | }
|
---|
81 | });
|
---|
82 |
|
---|
83 | if (newSelectors.length) {
|
---|
84 | newSelectors.forEach(newSelector => selectors.append(newSelector));
|
---|
85 | }
|
---|
86 | }
|
---|
87 |
|
---|
88 | const caseInsensitiveRegExp = /i(\s*\/\*[\W\w]*?\*\/)*\s*\]/;
|
---|
89 |
|
---|
90 | export default postcss.plugin('postcss-attribute-case-insensitive', () => css => {
|
---|
91 | css.walkRules(caseInsensitiveRegExp, rule => {
|
---|
92 | rule.selector = parser(transform).processSync(rule.selector);
|
---|
93 | });
|
---|
94 | });
|
---|