Is there a good css class parser?

BGM Coder

For css, I’m looking for a good functionlist class parser. I found this one in the forum somewhere, but it doesn’t work very well. It leaves out a lot of things and doesn’t capture any ids at all.

	<?xml version="1.0" encoding="UTF-8" ?>
	<NotepadPlus>
		<functionList>
			<parser displayName="CSS" id="css_class" 
				commentExpr="(?x) # Utilize inline comments (see `RegEx - Pattern Modifiers`)
					(?s:\x2F\x2A.*?\x2A\x2F) # Multi Line Comment">
				<function  mainExpr="[\r\n][.\w:,\h]+\s*\{"  >
					<functionName>
						<nameExpr expr="[.\w]+([.\w:, ]+)?" />
					</functionName>
				</function>
			</parser>
		</functionList>
	</NotepadPlus>

PeterJones

@BGM-Coder ,

“in the forum somewhere” doesn’t help us compare it to the original… ;-)

However, in the FAQ, there’s a link to @MAPJe71’s github repo with a plethora of parsers… hmm, he’s got a section on CSS, but it doesn’t appear to have a NPP functionList parser. Alas.

topic #16636 links to #10711 and #15474, which provide some ideas.

you might check others in this search, too.

edit: I think yours came from #15474; sorry for repeating the info… #10711 might still be a good alternative

BGM Coder

Thanks again. Yes, I’ve visted his repo - actually followed it from the FAQ link you provided me in the other post.

And, yes, you found my source at #15474. I did look at that alternative.

I think I was using #61136 at one time and tried the other one.

And I’ll try to be more descriptive with the forum posts in the future. Sorry for the trouble. You all are so helpful, you deserve my effort.

BGM Coder

I fixed the one from #16636 so the display doesn’t show the curly brackets.

I made a few other adjustments, too. If you style several elements together, it will list them together no matter whether they are on lines by themselves or together, and it will work even if there are linebreaks in between.

So, the following items will display in the list like: html, .class, #mydiv

html, .class, #mydiv{  width: 100%; }

html,
.class,
#mydiv{
width: 100%;
}

html
{ 
width: 100%;
}

test, 

.something, 

#dude 

{ 
width: 100%;
}

<?xml version="1.0" encoding="UTF-8" ?>
<NotepadPlus>
	<functionList>
		<parser
			displayName="CSS"
			id         ="css_class"
			commentExpr="(?s:/\*.*?\*/)"
		>
			<function
				mainExpr="([\.\#\@]?\w[\.\w\:, \-\r\n\t\(\)]+)+ *[\r\n,]*? *(?>{)+?" 
			>
				<functionName>
					<nameExpr expr="(?:(.[\r\n]?)+(?=[\r\n]*\{))" />
				</functionName>

			</function>
		</parser>
	</functionList>
</NotepadPlus>

BGM Coder

You know, this works very well and does exactly what it’s supposed to. But when I save changes to my .css file, the functionlist takes forever to load and notepad++ ghosts over until it’s finished. You have to wait about an entire minute for it to figure itself out again before you can click anywhere in npp’s window.

Basically, np++ can’t handle this much regex on a large css file ( 800 lines in mine).

Maybe if the loading of that functionlist were done asynchronously, then it would be better.

BGM Coder

So, the other one was way too slow to use. npp couldn’t resolve the regexes fast enough. Alas!
So I tweaked the one from #10711 so it only displays in the functionlist comments that start on the beginning of the line. That way, you can still add comments that don’t show simply by indenting them or placing them after the attributes.

This is waaaaay faster and makes it easier to read and keep track of.

<?xml version="1.0" encoding="UTF-8" ?>

<!-- css.xml by bgmCoder https://github.com/BGMcoder/npp/tree/main/css -->
<!-- 
Use this to organize your css by sections.  
It will place into your functionlist any comment that is at the beginning of a line.
If you don't want the comments to show in the functionlist, indent them with a tab or space.

I didn't come up with the original idea; I just tweaked the one by Lionel Wong in this thread
https://community.notepad-plus-plus.org/topic/10711/regex-help-css-comments-as-function-names-in-functionlist
-->
<NotepadPlus>
	<functionList>
		<parser id="css_comment" displayName="CSS Comment" commentExpr="">
			<function mainExpr="^/\*(.*?)\*/" displayMode="$functionName">
				<functionName>
					<nameExpr expr="(?-s)/\* *\K.*?(?= *\*/)"/>
				</functionName>
			</function>
		</parser>
	</functionList>
</NotepadPlus>

Jeffrey Cobb

This sample isn’t perfect but it’s fast and seems to work okay for me.

I took your second (slow) example, read up on regex a little bit and worked my own regex out to grab my CSS selectors into the FunctionList. Then I borrowed the “commentExpr” from the javascript parser as JS and CSS comments are fairly similar.

Best,
Jeff

<?xml version="1.0" encoding="UTF-8" ?>
<NotepadPlus>
	<functionList>
		<parser id="css_comment" displayName="CSS Comment" commentExpr="(?s:/\*.*?\*/)|(?m-s://.*?$)">
			<function mainExpr="^([^}]*)}" displayMode="$functionName">
				<functionName>
					<nameExpr expr="^([^\{]*)[^\{]"/>
				</functionName>
			</function>
		</parser>
	</functionList>
</NotepadPlus>

Markus Krause

@Jeffrey-Cobb

Try this, its better and fast:

<?xml version="1.0" encoding="UTF-8" ?>
<NotepadPlus>
	<functionList>
		<parser id="css_comment" displayName="CSS Comment" commentExpr="(?s:/\*.*?\*/)|(?m-s://.*?$)">
			<function mainExpr="^([:#\.\w][^\{]+\{[^\}]+\})" displayMode="$functionName">
				<functionName>
					<nameExpr expr="^([:#\.\w][^\{]+)"/>
				</functionName>
			</function>
		</parser>
	</functionList>
</NotepadPlus>