PostCSS Add Block Lint

IMPORTANT: This project is no longer maintained.

A PostCSS plugin that is used to lint css for existence of classes that might trigger add blockers.

• Where do I start?
• What options does it have?
• Want to lean more?

Where do I start?

These instructions are only for this plugin. See the PostCSS website for framework information.

Install

Using Yarn

yarn add postcss-add-block-lint --exact --dev

Using NPM

npm install postcss-add-block-lint --save-dev --save-exact

Configure

Add to your PostCSS configuration.

With Gulp

const Gulp = require("gulp");
const PostCSS = require("gulp-postcss");
const AddBlockLint = require("postcss-add-block-lint");

Gulp.task("css", () =>
    Gulp.src("./src/*.css").pipe(
        PostCSS([
            AddBlockLint({
                rules: [
                    `${__dirname}/data/easylist.txt`,
                    `${__dirname}/data/easylist-cookie.txt`,
                    `${__dirname}/data/fanboy-social.txt`,
                    `${__dirname}/data/fanboy-annoyance.txt`,
                ],
            }),
        ])
    )
);

With WebPack

const AddBlockLint = require("postcss-add-block-lint");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    { loader: "css-loader", options: { importLoaders: 1 } },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                AddBlockLint({
                                    rules: [
                                        `${__dirname}/data/easylist.txt`,
                                        `${__dirname}/data/easylist-cookie.txt`,
                                        `${__dirname}/data/fanboy-social.txt`,
                                        `${__dirname}/data/fanboy-annoyance.txt`,
                                    ],
                                }),
                            ],
                        },
                    },
                ],
            },
        ],
    },
};

Based on example from https://webpack.js.org/loaders/postcss-loader/.

Prepare

Ensure that ad blocking lists are downloaded to ./data directory.

yarn prepare

Review

When matches are found, they will be outputted to the console.

What options does it have?

Minimal

The minimal required configuration is the rules list, as shown in the above example.

AddBlockLint({
    rules: [
        `${__dirname}/data/easylist.txt`,
        `${__dirname}/data/easylist-cookie.txt`,
        `${__dirname}/data/fanboy-social.txt`,
        `${__dirname}/data/fanboy-annoyance.txt`,
    ],
});

Lists shown in the above example can be accessed from the following locations:

• easylist.txt
• easylist-cookie.txt
• fanboy-social.txt
• fanboy-annoyance.txt

Want to lean more?

• See our Contributing Guide for details on how this repository is developed.
• See our Changelog for details on which features, improvements, and bug fixes have been implemented
• See our License for details on how you can use the code in this repository.
• See our Security Guide for details on how security is considered.