postcss-trolling

PostCSS Trolling

PostCSS plugin to increase the productivity of your co-workers :trollface:.

Usage

postcss([ require('postcss-trolling') ])

See PostCSS docs for examples for your environment.

Options

rotate

Rotate the website

• Default:

trolling({
  rotate: {
    deg: 0.2
  }
});

blurBlink

Blur the website for a split second

• Default:

trolling({
  blurBlink: {
    time: '20s'
  }
});

comicSans

The best font ever

• Default:

trolling({
  comicSans: true
});

hideOdd

Hide every odd paragraph element

• Default:

trolling({
  hideOdd: true
});

wait

Permanent cursor wait

• Default:

trolling({
  wait: true
});

hideCursor

Hide cursor

• Default:

trolling({
  hideCursor: true
});

slowlyGrowText

Slowly grow text

• Default:

trolling({
  slowlyGrowText: {
    time: '120s',
    maxFontSize: '80pt'
  }
});

blur

Blur everything!

• Default:

trolling({
  blur: {
    time: '120s',
    blur: '0.8px'
  }
});

ren

rem is a band of course

.selector {
   width: 10rem;
}

// -->

.selector {
  width: 10ren;
}

• Default:

trolling({
  ren: true
});

ms

microsoft doesn't have a browser...

.selector {
   -ms-flex: 1;
}

// -->

.selector {
  flex: 1;
}

• Default:

trolling({
  ms: true
});

heigth

Fix typo heigth

.selector {
   height: 10px;
}

// -->

.selector {
  heigth: 10px;
}

• Default:

trolling({
  heigth: true
});

aling

aling...

.selector {
   align-content: center;
}

// -->

.selector {
  aling-content: center;
}

• Default:

trolling({
  aling: true
});

clearfix

fix clearfix

.clearfix:after { }

// -->

.clearfix:before { }

• Default:

trolling({
  clearfix: true
});

veryImportant

Makes everything very important...

.selector {
  float: left !important;
}

// -->

.selector {
  float: left !!important;
}

• Default:

trolling({
  veryImportant: true
});

zIndex

.selector {
  z-index: 99999;
}

// -->

.selector {
  z-index: 0;
}

• Default:

trolling({
  zIndex: true
});

All defaults

trolling({
  aling: true,
  blur: {
    time: '120s',
    blur: '0.8px'
  },
  blurBlink: {
    time: '20s'
  },
  clearfix: true,
  comicSans: true,
  heigth: true,
  hideCursor: true,
  hideOdd: true,
  ms: true,
  ren: true,
  rotate: {
    deg: 0.2
  },
  slowlyGrowText: {
    time: '120s',
    maxFontSize: '80pt'
  },
  veryImportant: true,
  wait: true,
  zIndex: true
});

// disabled
trolling({
    aling: false,
    blur: false,
    blurBlink: false,
    clearfix: false,
    comicSans: false,
    heigth: false,
    hideCursor: false,
    hideOdd: false,
    ms: false,
    ren: false,
    rotate: false,
    slowlyGrowText: false,
    verImportant: false,
    wait: false,
    zIndex: false
})

Thanks

This plugin is based on aprilFools.css