-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
39 lines (37 loc) · 1.29 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
function pluginFn(fn = () => {}){
return {
postcssPlugin: 'postcss-ng-tailwind-in-components',
Rule: fn,
}
}
module.exports = ({parentSelector} = {}) => {
if(!parentSelector){
console.error(`\n[postcss-ng-tailwind-in-components] You have pass parentSelector. Passed: ${parentSelector}`);
return pluginFn();
}
if(parentSelector[0] !== '.' && parentSelector[0] !== '#'){
console.error(`\n[postcss-ng-tailwind-in-components] "${parentSelector[0]}" is invalid character. Selector should start with "." or "#"`);
return pluginFn();
}
return pluginFn(rule => {
if(rule.selector.includes(`${parentSelector} `)){
let hostContextCSS = []
const regexStr = `^\\${parentSelector}(\\s+)`;
for (let selector of rule.selectors) {
if(selector.includes(`${parentSelector}`)){
hostContextCSS.push(selector.replace(
new RegExp(regexStr,'gi'),
`:host-context(${parentSelector})$1`
))
}
}
if(hostContextCSS.length){
const clone = rule.clone({ selectors: hostContextCSS });
// console.log(clone);
rule.parent.insertAfter(rule, rule.clone({ selectors: hostContextCSS }))
// rule.selectors = rule.selectors.concat(hostContextCSS)
}
}
})
}
module.exports.postcss = true