Open jitendravyas opened 6 years ago
Here is a simple example that explains the use of both classNames
and exclude
in the config file.
Open Atomizer-Web and do this:
{
"custom": {
"l": "left",
"r": "right"
},
"classNames": [
"Fl(l)",
"Fl(r)"
],
"exclude": [
"Fl(start)",
"Fl(end)"
]
}
<div class="Fl(start)">
Left
</div>
<div class="Fl(end)">
Right
</div>
.Fl\(l\) {
float: left;
}
.Fl\(r\) {
float: right;
}
In the example above, we are "replacing" the keywords start
and end
that ACSS uses to be RTL/LTR-agnostic by the more "familiar" l
and r
abbreviations.
As the CSS panel shows, authors can no longer use Fl(start)
nor Fl(end)
as those classes are ignored by Atomizer (thanks to exclude
). On the other hand, they can now use Fl(l)
and Fl(r)
in lieu of the RTL-LTR-friendly classes (thanks to classNames
, and custom
).
In other words, classNames
will make Atomizer generate classes even if they are not present in the files it parses; while exclude
will prevent Atomizer from generating classes even if they are found in files throughout a project.
Another reason why one would want to use classNames
is if they have ACSS classes "constructed" via JS, for example:
"Fl(" + direction + ")"
They'd need to add both Fl(start)
and Fl(end)
in the config as Atomizer would not find those classes while parsing that JS file.
Can you please explain with an example? I didn't get it by reading comment from here