CSS Variables in :root objects not being recognized when imported into my NX library

I have a css framework I created and I'm trying to turn it into a library in NX so I can use it in my other libraries and apps. You can view the repo here to see how everything is set up. I created a new library, created the folder structure, added the files, then modified the `project.json' file to look like this so it would build the library

{
"name": "srcry",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/ui/srcry/src",
"projectType": "library",
"targets": {
"build": {
"executor": "nx:run-commands",
"options": {
"commands": [
"mkdir dist\\srcry\\ 2>nul || echo Folder exists",
"copy /Y libs\\ui\\srcry\\src\\srcry.css dist\\srcry\\srcry.css",
"robocopy libs\\ui\\srcry\\src\\assets dist\\srcry\\assets /E || exit 0"
],
"parallel" : false
},
"outputs": ["{workspaceRoot}/dist/libs/srcry"]
}
},
"tags": []
}


After building the library I attempted to use it in another library and it inherits the classes perfectly fine however none of the variable names are defined. Interestingly when I type out the import path all the variable names show up n the "intellisense" or whatever that "auto fill dropdown" is that pops up. So it is indeed reading them in some type of context for them to show up there, they're just not recognized when used in my styling nor does any "autocomplete" thing pop up listing them.

My framework is mainly a ton of css variables and two classes. If you look at the repo you'll see that I have several separate css files with a :root{} object defining the variables and I import all the files into the main .css file in the order required for everything to be defined.

I tried importing it into the main app where I'm using the library I want to import the styling into and that works, however I would ideally like to be able to use it inside the library if possible. I'm guessing the problem roots into the fact that NX doesn't regard libraries as standalone applications that would have their own index.html files so all the :root{} elements aren't being processed as they normally would. Does anybody know how I can work around this so the library doesn't have to depend on the host app for it's styling? I want to be able to use it in other apps plus I have storybook setup so I can build things in isolation and I already know not being able to have everything work in the library is going to create some challenges with that.

Continue reading...