├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── index.js ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | node_js: 5 | - '5' 6 | - '4' 7 | - '0.12' -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 1.0.7 2 | 3 | * Refactored module performance with less AST iterations & general code 4 | tidy up (thanks to @ben-eb). 5 | * Added unit tests (thanks to @ben-eb). 6 | 7 | # 1.0.6 8 | 9 | * Update documentation headings for npm. 10 | 11 | # 1.0.5 12 | 13 | * Added `--save-dev` to the install section. 14 | 15 | # 1.0.4 16 | 17 | * Fixed documentation spelling & code errors. 18 | 19 | # 1.0.3 20 | 21 | * Rewrote documentation to show all possible outputs from the plugin. 22 | 23 | # 1.0.2 24 | 25 | * Documentation fixes. 26 | 27 | # 1.0.1 28 | 29 | * Add author, keywords & repository link to package.json. 30 | 31 | # 1.0.0 32 | 33 | * Initial release. 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [PostCSS]: https://github.com/postcss/postcss 2 | 3 | # PostCSS Hidden [![Build Status](https://travis-ci.org/lukelarsen/postcss-hidden.svg?branch=master)](https://travis-ci.org/lukelarsen/postcss-hidden) 4 | 5 | 8 | 9 | [PostCSS] plugin for hiding things. 10 | 11 | There are a few things to think about when hiding things via css. Do you want your item hidden completely? Do you want it to be seen by screen readers? Should it be invisible but still take up space? Based on what you need there are three options you can use with this plugin. 12 | 13 | ### 1. display: disappear; 14 | Use disappear when you want to remove something completely from the page. This includes hiding the item screen readers and assistive technology. It will do this with display: none !important;. 15 | 16 | ```css 17 | h1 { 18 | display: disappear; 19 | } 20 | ``` 21 | 22 | Will output: 23 | 24 | ```css 25 | h1 { 26 | display: none !important; 27 | visibility: hidden; 28 | } 29 | ``` 30 | 31 | ### 2. display: hidden; 32 | Use hidden when you want to hide something but keep it available to screen readers and assistive technology. It will not use up space in the document flow. 33 | 34 | ```css 35 | h2{ 36 | display: hidden; 37 | } 38 | ``` 39 | 40 | Will output: 41 | 42 | ```css 43 | h2{ 44 | position: absolute; 45 | width: 1px; 46 | height: 1px; 47 | margin: -1px; 48 | padding: 0; 49 | border: 0; 50 | overflow: hidden; 51 | clip: rect(0 0 0 0); 52 | } 53 | 54 | h2.focusable:active, 55 | h2.focusable:focus { 56 | display: table; 57 | position: static; 58 | clear: both; 59 | } 60 | ``` 61 | 62 | ### 3. display: invisible; 63 | Use invisible when you want to hide something and make it hidden to screen readers and assistive technology. It will take up space in the document. The block will only be visually hidden. 64 | 65 | ```css 66 | h3{ 67 | display: invisible; 68 | } 69 | ``` 70 | 71 | Will output 72 | 73 | ```css 74 | h3{ 75 | visibility: hidden; 76 | } 77 | ``` 78 | 79 | ## Usage 80 | 81 | ``` 82 | npm install postcss-hidden --save-dev 83 | ``` 84 | 85 | ### Gulp 86 | ```js 87 | var postcss = require('gulp-postcss'); 88 | var hidden = require('postcss-hidden'); 89 | 90 | gulp.task('css', function () { 91 | var processors = [ 92 | hidden 93 | ]; 94 | return gulp.src('./src/*.css') 95 | .pipe(postcss(processors)) 96 | .pipe(gulp.dest('./dest')); 97 | }); 98 | ``` 99 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | 3 | module.exports = postcss.plugin('hidden', function hidden(options) { 4 | return function(css) { 5 | options = options || {}; 6 | // Only search for display properties 7 | css.walkDecls('display', function(decl, i) { 8 | var value = decl.value; 9 | 10 | if (value.indexOf('disappear') !== -1) { 11 | // Insert disappear css 12 | decl.cloneBefore({ prop: 'display', value: 'none !important' }); 13 | decl.cloneBefore({ prop: 'visibility', value: 'hidden' }); 14 | 15 | // Remove original declaration 16 | decl.remove(); 17 | } 18 | 19 | if (value.indexOf('hidden') !== -1) { 20 | var origRule = decl.parent, 21 | ruleSelectors = origRule.selectors, 22 | newRule; 23 | 24 | ruleSelectors = ruleSelectors.map(function(ruleSelector){ 25 | return ruleSelector + '.focusable:active,' + ruleSelector + '.focusable:focus'; 26 | }); 27 | 28 | // Insert the :active rule after the original rule 29 | newRule = origRule.cloneAfter({ 30 | selectors: ruleSelectors 31 | }).removeAll(); 32 | 33 | newRule.append('display: table; position: static; clear: both;'); 34 | 35 | // Insert visually hidden css 36 | decl.cloneBefore({ prop: 'position', value: 'absolute' }); 37 | decl.cloneBefore({ prop: 'width', value: '1px' }); 38 | decl.cloneBefore({ prop: 'height', value: '1px' }); 39 | decl.cloneBefore({ prop: 'margin', value: '-1px' }); 40 | decl.cloneBefore({ prop: 'padding', value: '0' }); 41 | decl.cloneBefore({ prop: 'border', value: '0' }); 42 | decl.cloneBefore({ prop: 'overflow', value: 'hidden' }); 43 | decl.cloneBefore({ prop: 'clip', value: 'rect(0 0 0 0)' }); 44 | 45 | // Remove the original declaration 46 | decl.remove(); 47 | } 48 | 49 | if (value.indexOf('invisible') !== -1) { 50 | // Insert invisible css 51 | decl.cloneBefore({ prop: 'visibility', value: 'hidden' }); 52 | 53 | // Remove original declaration 54 | decl.remove(); 55 | } 56 | }); 57 | }; 58 | }); 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-hidden", 3 | "version": "1.0.7", 4 | "description": "A PostCSS plugin for hiding things.", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "hidden", 10 | "display", 11 | "invisible" 12 | ], 13 | "files": [ 14 | "index.js" 15 | ], 16 | "main": "index.js", 17 | "scripts": { 18 | "test": "ava test.js" 19 | }, 20 | "author": "Luke Larsen ", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/lukelarsen/postcss-hidden" 24 | }, 25 | "license": "MIT", 26 | "dependencies": { 27 | "postcss": "^5.0.11" 28 | }, 29 | "devDependencies": { 30 | "ava": "^0.10.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var ava = require('ava'); 2 | var hidden = require('./'); 3 | var postcss = require('postcss'); 4 | 5 | var tests = [{ 6 | message: 'display - disappear', 7 | fixture: 'h1{display: disappear}', 8 | expected: 'h1{display: none !important;visibility: hidden}' 9 | }, { 10 | message: 'display - hidden', 11 | fixture: 'h2{display: hidden}', 12 | expected: [ 13 | 'h2{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;border: 0;overflow: hidden;clip: rect(0 0 0 0)}', 14 | 'h2.focusable:active,h2.focusable:focus{display: table;position: static;clear: both}' 15 | ].join('\n') 16 | }, { 17 | message: 'display - invisible', 18 | fixture: 'h3{display: invisible}', 19 | expected: 'h3{visibility: hidden}' 20 | }]; 21 | 22 | tests.forEach(function (test) { 23 | ava(test.message, function (t) { 24 | var result = postcss(hidden).process(test.fixture); 25 | t.same(result.css, test.expected); 26 | }); 27 | }); 28 | --------------------------------------------------------------------------------