Automatically analyze CSS on every push

UPDATE: You can do this even more automatically with the Project Wallace GitHub action!

Manually hitting the ‘new import’ button in Project Wallace is a manual task most developers do when they have updated their CSS. I often forget to hit that dang thing when I have updated a website. There were even projects where I wasn’t the only dev and the other devs didn’t care about CSS stats or they just forgot even more often than I did. But I want my stats to reflect my codebase as close as possible, so it’s easier to track down changes to the commit that may have caused a problem. Enter the webhook feature.

Project Wallace supports webhooks as a mechanism to automatically create new imports for your projects. This means that it is possible to automatically trigger a new analysis each time you make a change to your CSS. No more manual importing! The best way is to integrate a webhook into your build step. Here’s an example as I’ve used in several projects, using Bitbucket pipelines:

image: node:10.11.0

pipelines:
  branches:
    # Run these steps only for the 'master' branch
    master:
      - step:
          script:
            - npm ci
            - npm test # run some tests before pushing CSS to Project Wallace
            # Now HERE is the good stuff!
            - curl https://www.projectwallace.com/webhooks/v1/imports?token=XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX -sS --retry 3 -X POST -H 'Content-Type: text/css' -d @path/to/styles.css
          caches:
            - node

The summary of this configuration is that it will run tests on every branch. But when we’re on master (so code was reviewed and tested), it will also send the CSS to Project Wallace for analysis. Let’s break down that curl command:

• curl Do an HTTP call
• https://www.projectwallace.com/webhooks/v1/imports?token=XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX The url Project Wallace uses to accept incoming CSS. The token is specified in your projects’ settings page or ‘new import’ page;
• -fsS Fail silently (-f), and disable progress meter but still show error messages (-sS);
• --retry 3 if the request fails, try gain up to 3 times;
• -X POST Use HTTP POST;
• -H 'Content-Type: text/css' Use the text/css content-type. This is required to let the webhook know that you’re actually sending CSS;
• -d @path/to/styles.css or -d 'html {font-size: 1em}' The CSS to send for analysis.

When this curl command runs, the CSS will be pushed to Project Wallace, it will be analyzed and your new stats will be immediately visible in your project, no manual actions required!

I really hope this feature will help you achieving more accurate results on Project Wallace.