I am interested in developing a tool that can read a .css file and generate a function that will accept an array of class names as input and output the corresponding styles for an element with those classes, represented as a JavaScript object. This tool would be compatible with CSS-in-JS technologies such as Glamor or Fela.
For example, consider the following CSS file:
.btn {
border: 1px solid gray;
}
.btn.primary {
background: blue;
border-color: blue;
}
.btn-group {
display: inline-block;
}
With this tool, you could achieve something like this:
import css from "./btn.css";
import applicableStyles from "applicable-styles"; // my desired development
const btnStyles = applicableStyles(css, ['btn', 'primary']);
// Expected result:
{
border: "1px solid gray"
background: "blue";
border-color: "blue";
}
In the provided example, the styles for .btn-group are not considered since we specifically requested the styles for .btn.primary.
This is a new area for me, however, I know there are existing libraries for parsing CSS. I would appreciate recommendations on which libraries to explore for this project. Alternatively, if similar tools already exist, please let me know.