dbtedmanPostCSS 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?
These instructions are only for this plugin. See the PostCSS website for framework information.
Install
Using Yarn
yarn add postcss-add-block-lint --exact --devUsing NPM
npm install postcss-add-block-lint --save-dev --save-exactConfigure
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 prepareReview
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:
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.