'eCSSTractor for VSCode plugin not worked with className
eCSSTractor does not work with react jsx syntax.
doesn't translate "className" elements in css. In setting.JSON written rule - "ecsstractor_port.attributes": "className"
Can anyone tell me what the problem is?
Solution 1:[1]
Go to extension folder C:/User/.vscode/extensions/diz.ecsstractor-port-0.0.3/extension.js
Replace this expression
processedEls.filter((el) => { return typeof el.attribs.class !== 'undefined' && el.attribs.class.trim() !== ''; }).forEach(el => { var cssClasses = el.attribs.class.split(' ').filter(className => className.trim() !== ''); cssClasses.forEach(cssClass => { if (outputClasses.indexOf(cssClass) === -1) { outputClasses.push(cssClass); } }); });with this ` const attribName = 'classname' // use 'class' if you needprocessedEls.filter((el) => { return typeof el.attribs[attribName] !== 'undefined' && el.attribs[attribName].trim() !== ''; }).forEach(el => { var cssClasses = el.attribs[attribName].split(' ').filter(className => className.trim() !== ''); cssClasses.forEach(cssClass => { if (outputClasses.indexOf(cssClass) === -1) { outputClasses.push(cssClass); } }); });`
Solution 2:[2]
Found a good solution, CTRL+F replace all className with class in JSX and RUN eCSStractor! =)
Then again change class to className (you can just CTRL+Z)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Tiger |
| Solution 2 | power rampage |