Quick way to remove all class invokations for missing classes?

Vanguard3000 · 09-29-2023, 01:00 PM

I couldn't find this in search, but I'm basically wondering if there's a way to basically do the inverse of the "Delete unused stylesheet selectors" function.

I'm converting over a detailed game guide that originally consisted of several hundred Google docs, which I had downloaded as html and imported to Sigil. I've done a lot of the work in converting over headers, tables, and whatnot, but nearly every paragraph is either classed, or has classed spans that are unneeded due to the conversion process. I can't just do a quick S&R because the class names are named differently in each of those files, and there are some that colour the text that I'd like to keep.

So what I would ideally like to do is go through the styles, which are currently in the file header, rename the ones that don't change the text colour (i.e. from "c\d+", to "XXDELETEXX" or somesuch), then use a function to find any <p>, <span>, etc that call a now-disconnected class and remove it.

For a more specific example, lets say I have:

Code:

<head>
  <style type="text/css">
.c2 {
  color: #000000;
  font-weight: 400;
}

.c26 {
  color: #ff0000;
}

.c73 {
  font-weight: 400;
}
</style>
</head>

<body>

<p class="c26">red</span></p>

<p><span class="c2 c73 c26">red and others</span></p>

<li class="c2">only others</li>
</body>

Rename unwanted classes a la:

Code:

<head>
  <style type="text/css">
.DELETEME {
  color: #000000;
  font-weight: 400;
}

.c26 {
  color: #ff0000;
}

.DELETEME {
  font-weight: 400;
}
</style>
</head>

<body>

<p class="c26">red</span></p>

<p><span class="c2 c73 c26">red and others</span></p>

<li class="c2">only others</li>
</body>

Then do a sort of reverse-"Delete unused stylesheet selectors" function that would leave me with:

Code:

<head>
  <style type="text/css">
.DELETEME {
  color: #000000;
  font-weight: 400;
}

.c26 {
  color: #ff0000;
}

.DELETEME {
  font-weight: 400;
}
</style>
</head>

<body>

<p class="c26">red</span></p>

<p><span class="c26">red and others</span></p>

<li>only others</li>
</body>

I could then do an actual "Delete unused stylesheet selectors" to get rid of the DELETEME classes.

Thanks in advance for any help!

JSWolf · 09-29-2023, 01:12 PM

You could give TagMechanic a go.

https://www.mobileread.com/forums/sh...d.php?t=270639

Vanguard3000 · 09-29-2023, 01:19 PM

Quote:

Originally Posted by JSWolf

You could give TagMechanic a go.

I use that plugin often, and that's how I'd do the cleanup (removing the DELETEMEs in my example) but to my knowledge it doesn't check if a class reference is defined or not.

In my example, renaming the classes would disconnect the reference to the class from the class definition, so the class c2 wouldn't connect to anything, since its definition was renamed to DELETEME. I'd like to be able to find all of those undefined class reference and remove them.

BeckyEbook · 09-29-2023, 01:28 PM

You probably need this plugin – cssUndefinedClasses.

Vanguard3000 · 09-29-2023, 05:12 PM

Quote:

Originally Posted by BeckyEbook

You probably need this plugin – cssUndefinedClasses.

That looks like exactly what I need. I had to do a lot of manual work still because it wouldn't remove classes if a class of the same name was in a different file's header, but it helped a lot. Thanks!

JSWolf · 09-29-2023, 05:49 PM

You can use TagMechanic to get rd of unwanted classes in the HTML and use cssUndefinedClasses to get rid of unused classes after you've dumped the unwanted classes.

I start by deleting any unwanted HTML. Then I remove some unwanted classes if there are any that I've noticed right away. I remove unused classes and then I add in my small list of classes. When I am done, I remove any other classes I've made unused. When I am done, all CSS and all classes in HTML as in use.

Tex2002ans · 09-29-2023, 07:50 PM

Quote:

Originally Posted by Vanguard3000

I couldn't find this in search, but I'm basically wondering if there's a way to basically do the inverse of the "Delete unused stylesheet selectors" function.

I'm converting over a detailed game guide that originally consisted of several hundred Google docs, which I had downloaded as html and imported to Sigil.

[...]

I could then do an actual "Delete unused stylesheet selectors" to get rid of the DELETEME classes.

You would want to do a:

Calibre EPUB->EPUB conversion

This would merge all dozens/hundreds of CSS files into unique classes.

From there, you would use the "surgical" approach I described in:

2021: "Adding a limited Automate Feature To Sigil"

this would let you find/merge all the "duplicate" classes in sucessive conversions.

Since 2021, KevinH has also added that cleanup functionality into Sigil too! It's called the "CSSToolbox", and I described it in more detail here:

Doitsu · 09-30-2023, 03:29 AM

Quote:

Originally Posted by BeckyEbook

You probably need this plugin – cssUndefinedClasses.

KevinH's RemoveInLineStyles plugin might also be helpful, if the source files also contain inline styles.

Vanguard3000 · 10-12-2023, 01:22 PM

So cssUndefinedClasses wasn't ideal since there were a lot of duplicate style classes, and it wouldn't remove them unless every definition was gone. For example, several pages would have a defined "c1" class, but in some cases c1 would style the text's color to blue (something I intended to keep, albeit defined in a common stylesheet), while in others it would set the left margin to 0em (something I wanted gone).

Anyway, I had to do a lot of the work manually anyway, but cssUndefinedClasses sure helped a lot with the final cleanup steps.

09-29-2023, 01:00 PM	#1
Vanguard3000 Groupie Posts: 152 Karma: 474196 Join Date: Jan 2011 Location: Ottawa Device: Kobo Aura H2O	Quick way to remove all class invokations for missing classes? I couldn't find this in search, but I'm basically wondering if there's a way to basically do the inverse of the "Delete unused stylesheet selectors" function. I'm converting over a detailed game guide that originally consisted of several hundred Google docs, which I had downloaded as html and imported to Sigil. I've done a lot of the work in converting over headers, tables, and whatnot, but nearly every paragraph is either classed, or has classed spans that are unneeded due to the conversion process. I can't just do a quick S&R because the class names are named differently in each of those files, and there are some that colour the text that I'd like to keep. So what I would ideally like to do is go through the styles, which are currently in the file header, rename the ones that don't change the text colour (i.e. from "c\d+", to "XXDELETEXX" or somesuch), then use a function to find any <p>, <span>, etc that call a now-disconnected class and remove it. For a more specific example, lets say I have: Code: <head> <style type="text/css"> .c2 { color: #000000; font-weight: 400; } .c26 { color: #ff0000; } .c73 { font-weight: 400; } </style> </head> <body> <p class="c26">red</span></p> <p><span class="c2 c73 c26">red and others</span></p> <li class="c2">only others</li> </body> Rename unwanted classes a la: Code: <head> <style type="text/css"> .DELETEME { color: #000000; font-weight: 400; } .c26 { color: #ff0000; } .DELETEME { font-weight: 400; } </style> </head> <body> <p class="c26">red</span></p> <p><span class="c2 c73 c26">red and others</span></p> <li class="c2">only others</li> </body> Then do a sort of reverse-"Delete unused stylesheet selectors" function that would leave me with: Code: <head> <style type="text/css"> .DELETEME { color: #000000; font-weight: 400; } .c26 { color: #ff0000; } .DELETEME { font-weight: 400; } </style> </head> <body> <p class="c26">red</span></p> <p><span class="c26">red and others</span></p> <li>only others</li> </body> I could then do an actual "Delete unused stylesheet selectors" to get rid of the DELETEME classes. Thanks in advance for any help!

09-29-2023, 01:28 PM	#4
BeckyEbook Guru Posts: 692 Karma: 2180740 Join Date: Jan 2017 Location: Poland Device: Misc	You probably need this plugin – cssUndefinedClasses. Last edited by BeckyEbook; 09-29-2023 at 01:38 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Remove-tag when class contains a whitespace	Villard	Recipes	4	07-09-2023 03:08 AM
Quick way to remove multiple libraries?	Rellwood	Library Management	2	06-19-2022 06:14 PM
find missing classes	kcarscadden	Editor	4	12-10-2019 08:16 PM
Remove unused class attributes	phossler	Editor	15	01-26-2016 01:06 PM
How to remove multiple class attribute from div	lrui	Recipes	4	08-13-2012 09:47 PM

09-29-2023, 01:12 PM	#2
JSWolf Resident Curmudgeon Posts: 74,015 Karma: 129333114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You could give TagMechanic a go. https://www.mobileread.com/forums/sh...d.php?t=270639

09-29-2023, 05:49 PM	#6
JSWolf Resident Curmudgeon Posts: 74,015 Karma: 129333114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You can use TagMechanic to get rd of unwanted classes in the HTML and use cssUndefinedClasses to get rid of unused classes after you've dumped the unwanted classes. I start by deleting any unwanted HTML. Then I remove some unwanted classes if there are any that I've noticed right away. I remove unused classes and then I add in my small list of classes. When I am done, I remove any other classes I've made unused. When I am done, all CSS and all classes in HTML as in use.

10-12-2023, 01:22 PM	#9
Vanguard3000 Groupie Posts: 152 Karma: 474196 Join Date: Jan 2011 Location: Ottawa Device: Kobo Aura H2O	So cssUndefinedClasses wasn't ideal since there were a lot of duplicate style classes, and it wouldn't remove them unless every definition was gone. For example, several pages would have a defined "c1" class, but in some cases c1 would style the text's color to blue (something I intended to keep, albeit defined in a common stylesheet), while in others it would set the left margin to 0em (something I wanted gone). Anyway, I had to do a lot of the work manually anyway, but cssUndefinedClasses sure helped a lot with the final cleanup steps.

Advert

Advert