I am still going to have to dig into this further and all about .exec, .groups, etc., but this seems to be the solution. I will reply later with my findings. Thank you so much!
Yeah, so this is the same node script I’ve been working on. It takes duplicated styles across 7 CSS files and hoists them to a _default css file where they all pull from. Having the duplicated styles is redundant and makes working in the CSS a pain. When all the object manipulation is done, it will rewrite the 7 CSS files with their uncommon styles (the ones that need to stay in their respective files) and rewrite the common styles to the _default. The entire script is essentially done and I have the objects I need to turn back into strings to rewrite the files, however in the process I lost the comments and obviously need to persist comments. Thus, this problem was born haha
Edit: I guess to answer your question with a bit more clarity, I need a reference point (the className) in the file to splice back in the comment that is corresponding.
I will also need to school myself with all the [^*] and [\s\S] kinda stuff. How do you do this so quickly lol
Haha yes, perhaps it is my reading comprehension that is lacking 
Unfortunately, I found files with comments littered throughout. Some next to props within /* */ etc. Seems like I would have to check for many use cases.
I’m currently using this to parse the CSS and this is where the comments are lost:
Ugh, I’m sad lol. There is so much code that is dealing with the logic of that library.
Primarily I have a function that filters by common class and one that filters by common attributes (and logic that does the opposite for the styles that have to stay.) And a function to recursively call both if the key has children. Perhaps I can emulate that with something like post-css that persists comments throughout the data manipulation.
Use a parser here. Either that or use a parser combinator library to build what you want.
Latter is possibly easier because you want to do a quite limited thing; they’re ridiculously simple once it clicks how they work and there are about ten million of them on NPM because they’re really easy to write; parjs seems to have everything necessary from a two second googling of the most popular (EDIT: the issue with it being very easy to write libraries means there are lots but most have garbage documentation, I’ll try one and write an example rather than recommending anything; I use them in other languages but there there’s normally one or two very well supported libraries with loads of docs and examples).
Regex is not the correct tool here: it’s for parsing regular language, not formal grammar and not tree structures
@camperextraordinaire With the information you both have given me and the problem with separating common and uncommon styles, what would be the library you would recommend to achieve this? I have like 400 lines in this script to now scrap and start over.
You need an abstract syntax tree (AST), and there are several parsers that already do this. Not much in the way of docs on any of them, but here’s one
That will spit out a big object – the aim normally is that you modify it as you parse for efficiency, but for simplicity its going to be easier (if slow) to get the whole tree then just filter it using basic JS methods (you just want a comment immediately followed by an identifier or identifiers that are at the same level).
Best bet is pass a chunk of scss into the function for that an look at the output to see what you want from it
I click on the link and first couple of words: “This is a thing”
This is going to be interesting.
Thank you, I will certainly look into this. Whether it’s fast or slow doesn’t really matter as the script will be run once or outside the bounds of the entire repo.
As an example of why this isn’t trivial here is a very rough initial attempt at parsing some CSS (won’t handle nesting at all and won’t handle loads of other things, things like putting the opening bracket on a new line or an inline comment on same line as identifiers). I was going to do an example of using a parser combinator, which is normally much easier to write and read, but I hadn’t used one in JS and kept finding the libraries were missing useful stuff I needed, or were really clunky in JS (vs in a functional language). Anyway