CSS-PURGE: Configuration is being overlooked

I am utilizing CSS-PURGE to analyze CSS and provide feedback on potential improvements. In order to generate a report, I have configured it as follows:

{
  "options": {
    "generate_report": true,
    "report_file_location": "purged_css_report_data.json"
  }
}

To specify this configuration, I created a config_css.json file in the project root directory. Then, I ran a test command from the same location:

css-purge -d -c ".color { color: #ffffff; color: #ff0000; }"

The documentation explains that the -d parameter uses the default config file (config_css.json).

I also attempted using the -f parameter with both relative and absolute paths:

css-purge -f "config_css.json" -c ".color { color: #ffffff; color: #ff0000; }"
css-purge -f "/path/to/project/config_css.json" -c ".color { color: #ffffff; color: #ff0000; }“

Unfortunately, no report was generated and modifying the config JSON did not impact the execution. It seems that the config file is not being loaded correctly.

Is there an error in my setup preventing CSS-PURGE from generating a report, or could there be an issue on their end?

Answer №1

Victory at last! The solution turned out to be quite simple:

All I had to do was include a reference to the CSS file within the configuration file instead of using the '-c' parameter. Once I made this change, everything worked perfectly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a progress bar that shows completion based on the maximum value supplied

I successfully created a progress bar using HTML, CSS, and Javascript. It functions perfectly up to a provided value of 100. However, if a value higher than 100 is given, the progress completes but the value continues to change until it reaches the maximum ...

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

Is Height Responsiveness a feature?

I'm currently designing a custom responsive WordPress theme, but I've encountered a minor issue. On my page, I have multiple boxes arranged side by side. Each box is responsive in both height and width and contains an image with overlaid text. I ...

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet be ...

How to center a full-screen image using CSS with maximum height

As I work on creating a stylish image viewer resembling a gallery, I'm determined to position the image at the center and middle of the page. If the image is smaller than 100% of the page, achieving this alignment becomes as easy as using table and t ...

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

Creating responsive layouts with flexible image sizes using Flexbox

My exploration of Flexbox began by testing it on an existing template sourced from a previous stackoverflow question. I am currently focusing on adjusting the image size to better fit within its parent div. max-width: 50px; height: auto; margin:auto; ...

Border color options for select boxes

Currently, I am working on my first Django-bootstrap project and dealing with a select box. I am trying to customize it so that when clicked, the border of the select box and its options turns yellow, which is working well. However, there is an additional ...

Duplicate table row and insert new cell

I am currently attempting to duplicate a row from one table into a new table and then include an additional td at the end of the copied row containing a delete button. Thus far, I have successfully duplicated the row but am struggling to find a method for ...

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Imagine you have an iframe on your webpage: <iframe style="border-radius:15px;" width="190" height="450" frameborder="0" scrolling="no" marginheight="5" marginwidth="10" src="../img/interactive_map/interactive_sverige.htm"> </iframe> ...

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

Tips for choosing specific CSS selectors from a variety of different stylesheets

Currently, I am using two different stylesheets - Bootstrap 4.0 and Materialize 4.0. My challenge is selecting specific selectors from both stylesheets but overriding conflicting styles. For instance, I would like to apply the header navigation style fro ...

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

Tips for concealing the image title when hovering over it

In this section, I will be including a title for an image that I will also need for another purpose. However, I do not want this title to be shown when the image is hovered over. Your prompt response would be greatly appreciated. Thank you in advance. ...

Switch between display modes using a button and CSS media query

I'm trying to find the most effective method for toggling display states on a webpage using a button while also being able to adjust based on screen size. For larger screens, I want to default to a horizontal layout with the option to switch to vertic ...

What steps should I take to align the name and email fields next to the text on the left and the button on the right?

Having placed an AWeber sign-up form at the top of the header on the page , I've successfully positioned the form horizontally using CSS. However, it appears misaligned. How can I correct this issue? All standard AWeber forms are in a vertical format ...

Horizontalize your lists

Is there a way to make the li elements horizontal in this pagination setup? I've attempted display: inline and display: float, but neither seem to be working for me. <ul class="pagination" style="display:inline; text-align: center; margin:0;">& ...

The impact of Bootstrap CSS on the functionality of radio buttons

Encountering an issue with radio buttons in combination with bootstrap and javascript, where querying the selected radio button results in reading the previous selection instead of the current one. A Minimal Working Example (MWE) has been created to demon ...

Utilize Bootstrap's form-inline feature to arrange fields side by side in one neat

I am looking to customize my sign-in form layout by displaying the fields in a row next to each other rather than under each other. header: Update: I have successfully implemented this code <header class="navbar navbar-fixed-top navbar-inverse"> & ...