Do not include JavaScript-generated CSS when running Grunt's un-css task

Recently, I started using Grunt for minifying JavaScript and CSS files and I must say, it's an incredible tool. As I delved deeper into Grunt, I discovered the uncss module, which aids in optimizing the load time and size of CSS files, especially for frameworks like Bootstrap.

I have an Angular and PHP application where classes are generated dynamically by PHP and JavaScript. When I run uncss, these CSS selectors generated by the server-side code are removed from the newly generated CSS file.

I believe that I need to install PhantomJS while setting up the uncss module for Grunt.

Is there a recommended approach to tackle this issue?

javascriptcssangularjsgruntjsgrunt-contrib-cssmin

Answer №1

To utilize the ignore option in uncss, you must have knowledge of the selectors present in the generated css:

uncss: {
  dist: {
    files: {
      'dist/css/app.css': ['app/index.html']
    }
  },
  options: {
    ignore: ['#ignoredselector', '.ignoredselector']
  }
}

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

jQuery script located on local server fails to function

After downloading the jQuery.js file from jQuery.com, I made sure to save it in multiple locations - including JRE/Lib and my desktop where the HTML file that calls it is located. The script reference looks like this: <head> <script type= ...

javascriptjquery

Ensure that the navbar remains within the container as you scroll down the page

With the implementation of bootstrap 4, I have successfully integrated a fixed navbar inside a container. Initially, at the top of the page, it occupies the full width, but as soon as I start scrolling, it smoothly transitions into the confines of the cont ...

htmlcss

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

cssbootstrap-4

Retrieving the selected date from mat-datepicker into a FormControl

When creating a POST request to an API, I encountered an issue with the mat-datepicker field as it throws an error when inside the ngOnInit() call (since nothing is selected yet). Other fields like name, email, etc. work fine, but extracting a value from t ...

javascriptangulartypescriptangular-material

JavaScript - How can I prevent receiving multiple alerts during long polling success?

After following a video tutorial on implementing long polling, I managed to get it working. However, I encountered an issue where my alert message pops up multiple times even though I only receive one response from the server. I was under the impression th ...

javascriptjqueryajax

Upon installation, the extension that replaces the new tab fails to detect the index.html file

edit: Check out the Chrome Extension here Edit 2: It seems that the recent update containing the index.html file was not published due to Google putting it under revision. Apologies for forgetting to include the index.html file in the upload zip, as I ...

javascripthtmljson

Obtaining data from a website with Java: A step-by-step guide

I am trying to retrieve the SIC Code from the following URL: . However, when I run my code, I encounter the following error: public static void main(String[] args) { try { Document doc = Jsoup.connect("http://www.manta.com/c/mx4s4sw/bowflex-ac ...

javahtmlcss

I must add and display a tab for permissions

I am currently using the material UI tab for my project. My goal is to display the tab only when the permission is set to true. I have successfully achieved this functionality, but the issue arises when the permission is false. It results in an error that ...

javascriptreactjsmaterial-ui

Connection to mongo is currently unavailable for Middleware next

This code snippet shows a middleware for Next, which is designed to read the subdomain and check if it exists in the database. import { getValidSubdomain } from '@/lib/getValidSubdomain'; import { NextResponse } from 'next/server' impor ...

javascripttypescriptmongodbnext.jsvercel

Is the information not displayed in its entirety on the FullCalendar?

I'm currently working with the following code: $('#calendar_1').fullCalendar({ header : { left : 'prev,next today', center : 'title', right : 'month,agendaWeek,agendaDay' ...

javascriptphpajaxfullcalendar

When using Mongoose with Ejs, I am unable to view the comment I made when I navigate back to the post using GET. The comment only becomes visible after I have submitted it

After creating a comment, I can only see it when rendering the same page again. However, if I navigate to posts or myposts page and then return to the post where I created the comment, it disappears. Can someone please help me understand why this is happen ...

javascriptnode.jsmongodbmongooseejs

Tips for beginning with running vue js examples/demos

Is it possible to test my local server side REST endpoints by using the demo here? I'm not sure where to start - any guidance on how to edit and try out the demo? For example, I've cloned this repository from https://github.com/pespantelis/vue-t ...

javascriptnpmvue.js

Difficulty with the responsiveness of a website due to issues with the bootstrap grid system

I've been working with a Bootstrap grid that you can find at . While it works perfectly on large desktop screens, everything is a bit messy on mobile devices. The "NEW" text specifically is not visible on mobile and doesn't seem to be responsive. ...

cssbootstrap-4grid

The font-family CSS properties inheritance is not functioning as I had anticipated

I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section. The existing list is located within: ...

fontscss

Tips for keeping a Youtube video playing even after the page is refreshed

Is it possible to save the current position of a Youtube video and have it resume from that point when the page is refreshed, instead of starting from the beginning? I am considering using cookies to store the last position or utilizing GET. Although my w ...

javascriptjqueryhtmlajaxyoutube

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

Tips on displaying dynamic content on a single page with AngularJS 1.6

Just getting started with Angular and looking for a way to display dynamic content from a JSON file using AngularJS 1.6? Here's an example to help you out. News.json { "Articles": [ { "Title": "News 1", ...

javascripthtmlangularjsjson

ReactJS attempting to invoke a class function using a dynamically generated button

When attempting to access the deletePost(index) method from the ShowPost class using a dynamically rendered button within the render() step in React, I encounter an issue. The button labeled "click me" successfully retrieves and prints the first item in my ...

javascriptreactjs

Explore detailed data visualizations in AngularJS with powerful Google Charts directives

Our team is currently exploring AngularJS v4 and we have a specific need for drilldown charts in Google Charts. We are utilizing ng2-google-charts directives to achieve this functionality. While we were able to capture the select event and update the data ...

angularjsangularjs-directivegoogle-visualizationdrilldownusing-directives

Creating a personalized filter list in Vue Instant Search: A step-by-step guide

Currently, I'm utilizing Laravel Scout with Algolia as the driver. Vue is being used on the front end and I've experimented with the Vue instant search package, which has proven to be very effective. The challenge I am encountering involves cust ...

javascriptlaravelvue.jslaravel-scoutvue-instant-search