postcss-hide

PostCSS plugin that adds shortcuts to hiding elements.

Installation

$ npm install postcss-hide --save-dev

Usage

all

Hide visually and from screen readers

.all {
  hide: all;
}

.all {
  display: none !important;
}

invisible

Hide visually and from screen readers, but maintain layout

.invisible {
  hide: invisible;
}

.invisible {
  visibility: hidden;
}

text

Image replacement, not widely used but present in Bootstrap.

.text-hide {
  hide: text;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

visually

Hide visually but not from screenreaders

.visuallyhidden {
  hide: visually;
}

.visuallyhidden {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

focusable

Extends the visually declarations to allow the element to be focusable when navigated to via the keyboard

.visuallyhidden.focusable:focus,
.visuallyhidden.focusable:active {
  hide: focusable;
}

.visuallyhidden.focusable:focus,
.visuallyhidden.focusable:active {
  clip: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
}

Options

overrides

Overwrite the default styles using a configuration object

import postcss from 'postcss';
import hide from 'postcss-hide';

postcss.use(hide({
  overrides: {
    all: 'display: none; overflow: hidden;'
  }
}));

See PostCSS docs for examples for your environment.