In PG or VSC is there a way to purge css styles not in use?
All I can think of is to go thru and comment out each style and see if anything breaks.
Hi @kat,
The typical way this is done is to set up āPurgeCSSā using Gulp or Webpack. Iām not sure what type of framework you are using at the moment. Normally I wouldnāt post this link, but I did write a free Pinegrow plugin that does a fairly good job at this, but likely shouldnāt be used for Tailwind CSS projects - the built-in JIT works better.
Cheers,
Bob
1 Like
-
Iāve made it to the select files. Canāt open them.
-
āSelect folder of HTML files - note, non-HMTL files in the same folder will cause an error!ā Does this means image files & anything other than html?
Iām not using frameworks for now. Too many style conflicts.
Hi @kat,
Iāll need more context for the top image. What did you click to bring up this file selection modal?
For the lower image:
In the top selection box you add all of the HTML files for the project. You can hold the shift or CMD to select multiples. If you choose to click on the folder tab and select a folder instead, it can only contain HTML files. Not images, not CSS, not JS - just .html files.
For the middle box, choose all of the CSS files for the project. Again, you can use shift/CMD for multiples.
For the bottom box you can choose an existing file or create one. This file will contain only the rules used on your pages.
Cheers,
Bob
1 Like
Selected html, then css files, then output css file, purged.css and clicked.
No purged.css materialized. What did I do wrong?
Hi @kat,
No file at all, or just not in your project? Did you refresh the project or look for the file in your file system?
Cheers,
Bob
1 Like
For an output file I choose purged.css; looked in the project folder before and after clicking āPurge It!ā Nothing anywhere. Did a computer search
I tried first placing a new purged.css then selecting to āreplace itā in the purge dialog box. Same result. Nothing happened.
Greyed out PurgeCSS
Hi @kat,
Iām not sure what to tell you. It is working fine for me. Maybe a screenshot of the file dialog for when you select the purged.css file? Not sure what your second screenshot above is trying to show.
Bob
Clarification on what youād like please. [quote=āRobM, post:8, topic:6313ā]
a screenshot of the file dialog for when you select the purged.css file?
[/quote]
2nd screenshot: Unclear why there is a greyed out PurgeCSS above white Purge project CSS in the dropdown.
I tried again at 8:30am. Downloaded from Chrome instead of Firefox and put it on the desktop.
Same thing. It doesnāt save the purged.css file. You can see the purged.css that I had placed in the file is still dated 5:57am
Iād really like to make this happen. The VSC extensions are complicated and more work to deal with.
Hi @kat,
The greyed out āPurge CSSā is just the menu section. Just like if you look in the Components menu you will see the āLibrariesā or āToolsā sections.
For the file dialog, once you click on the āChoose Fileā button in the āSelect Output Fileā section you will get a modal. Like this:
Cheers,
Bob
Restarted the imac. Then did everything again. The purged.css doesnāt update when saved/replaced or when I click purge it. It remains dated 5:57am today and Zero bytes. I downloaded Purge V3.1.0
Watched your tutorial, read the pdf & documentation.
Can you send me your project by wetransfer or similar?
Cheers,
Bob
1 Like
Just the project folder? And do you want the purge v3.1.0 folder?
Just the project folder. THere shouldnāt be any changes in the purge v3.1.0 folder and I have the original! 
1 Like
WeTransfer went to support@pinegrow.com. Thanks for this. Iām keeping my fingers crossed ; )
Not sure this has anything to do with the purge problem, but I keep removing the theme file and link in index.html in VSC. When I open index.html in PG, PG just adds theme files and link back in.
Also I removed some unused links with a VSC ext in bbq.css. Donāt like the ext.
Hi @kat,
It turns out that there was some errors in your bbq.css file that my plugin didnāt handle well. It threw an error in the DevTools, but never reported it to the user. The end file it generated is pretty small. I could upload it here, but it would also be pretty easy to fix the errors and rerun the plugin. There are two missing semicolons in the .container ruleset starting on line 51.
Pinegrow keeps adding the theme_files back in because you have the Design Panel activated. Inactivate the Design panel by clicking on the down caret at the bottom and selecting to deactivate.
Cheers,
Bob
1 Like
Can you upload your bbq.css? Iād like to see exactly what changed.
āIt threw an error in the DevTools, but never reported it to the userā How did you find the error? Was the error " two missing semicolons in the .container ruleset starting on line 51"?
Thank you. This is great!
Hi @kat,
Iām pretty busy getting a tutorial ready so Iām not sure when I will get to this.
The error was generic - It just said that there was an error in the CSS files. I then had to scan each in VSC - the linter told me that there were missing semicolons.
Sorry,
Bob
1 Like
This is an opportunity to start over.
Can I add normalize without using the design panel? Maybe just add a new normalize html from PG?
Really looking forward to a new tutorial : )
Hi @kat,
A CSS ānormalizeā can either be downloaded or linked from a variety of sources. Here and here, for example. It is just another stylesheet, just like the ones where you add your styling to using Pinegrow.
Open the stylesheet manager from the File menu. If using the CDN link, click on the āOpen Urlā tab at the bottom, paste in the link, click add, and then make sure you attach that sheet to your page. If you are using a downloaded file, make sure it is in your project folder (maybe even in a CSS folder within that for neatness), click on the āOpen Fileā tab, click on the folder and navigate to the stylesheet, click add, and then attach the sheet to your HTML page(s).
Iāll get you the purged file later. Looking closer I think the plugin is handling variables incorrectly.
Cheers,
Bob
1 Like