├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | },
5 | "parserOptions": {
6 | "ecmaVersion": 2018,
7 | "sourceType": "module"
8 | },
9 | "extends": ["eslint-config-postcss", "prettier"],
10 | "plugins": ["prettier"],
11 | "rules": {
12 | "prettier/prettier": [
13 | "error",
14 | {
15 | "semi": false,
16 | "singleQuote": true,
17 | "printWidth": 100,
18 | "tabWidth": 2,
19 | "useTabs": false,
20 | "trailingComma": "es5",
21 | "bracketSpacing": true,
22 | "parser": "flow"
23 | }
24 | ]
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /yarn.lock
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - '8'
5 |
6 | cache:
7 | directories:
8 | - node_modules
9 |
10 | before_install:
11 | - npm update
12 |
13 | install:
14 | - npm install
15 |
16 | script:
17 | - npm test
18 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Oliver Davies
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tailwind CSS Plugin: Skip Link
2 |
3 | ## Overview
4 |
5 | ```sh
6 | # Using npm
7 | npm install --save-dev tailwindcss-skip-link
8 |
9 | # Using yarn
10 | yarn add --dev tailwindcss-skip-link
11 | ```
12 |
13 | ## Usage
14 |
15 | You can add the plugin to your Tailwind config as follows:
16 |
17 | ```js
18 | plugins: [
19 | // ...
20 | require('tailwindcss-skip-link')(),
21 | ],
22 | ```
23 |
24 | Within your HTML, add the skip link straight after the `body` tag along with any other additional classes:
25 |
26 | ```html
27 | Skip to main content
28 | ```
29 |
30 | Then add the matching ID to skip to on your main content element.
31 |
32 | ```html
33 |
34 |
Lorem ipsum
35 |
36 | ```
37 |
38 | ## Example
39 |
40 | To see an example of this plugin in use, see the [oliverdavies.uk repository](https://github.com/opdavies/oliverdavies.uk) or the [rebuilding-bartik repository](https://github.com/opdavies/rebuilding-bartik).
41 |
42 | ## Author
43 |
44 | [Oliver Davies](https://www.oliverdavies.uk) - Full Stack Developer
45 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = () => ({ addComponents }) => {
2 | addComponents([
3 | {
4 | '.skip-link': {
5 | clip: 'rect(1px,1px,1px,1px)',
6 | display: 'block',
7 | height: '1px',
8 | overflow: 'hidden',
9 | position: 'absolute',
10 | width: '1px',
11 | zIndex: 999,
12 | '&:focus': {
13 | clip: 'auto',
14 | height: 'auto',
15 | overflow: 'visible',
16 | width: 'auto',
17 | },
18 | },
19 | },
20 | ])
21 | }
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwindcss-skip-link",
3 | "version": "1.0.1",
4 | "description": "A Tailwind CSS plugin for adding a skip link to a page.",
5 | "main": "index.js",
6 | "dependencies": {
7 | "postcss": "^7.0.14",
8 | "tailwindcss": "^1.0.0-beta.5"
9 | },
10 | "devDependencies": {
11 | "eslint": "^6.0.1",
12 | "eslint-config-postcss": "^2.0.2",
13 | "eslint-config-prettier": "^6.0.0",
14 | "eslint-plugin-prettier": "^3.0.1",
15 | "jest": "^25.1.0",
16 | "jest-matcher-css": "^1.0.3",
17 | "prettier": "^1.18.2",
18 | "tailwindcss-plugin-test-helpers": "^1.0.0"
19 | },
20 | "scripts": {
21 | "style": "eslint .",
22 | "test": "jest && eslint ."
23 | },
24 | "repository": {
25 | "url": "https://github.com/opdavies/tailwindcss-plugin-skip-link"
26 | },
27 | "keywords": [
28 | "tailwind",
29 | "tailwind-css",
30 | "tailwindcss",
31 | "tailwindcss-plugin"
32 | ],
33 | "author": "Oliver Davies",
34 | "license": "MIT",
35 | "bugs": {
36 | "url": "https://github.com/opdavies/tailwindcss-plugin-skip-link/issues"
37 | },
38 | "homepage": "https://github.com/opdavies/tailwindcss-plugin-skip-link#readme"
39 | }
40 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | const cssMatcher = require('jest-matcher-css')
2 | const plugin = require('./index.js')
3 | const { generateComponents } = require('tailwindcss-plugin-test-helpers')
4 |
5 | expect.extend({
6 | toMatchCss: cssMatcher,
7 | })
8 |
9 | test('it generates classes', () => {
10 | const output = `
11 | .skip-link {
12 | clip: rect(1px, 1px, 1px, 1px);
13 | display: block;
14 | height: 1px;
15 | overflow: hidden;
16 | position: absolute;
17 | width: 1px;
18 | z-index: 999;
19 | }
20 |
21 | .skip-link:focus {
22 | clip: auto;
23 | height: auto;
24 | overflow: visible;
25 | width: auto;
26 | }
27 | `
28 |
29 | generateComponents(plugin).then(result => {
30 | expect(result.css).toMatchCss(output)
31 | expect(result.warnings().length).toBe(0)
32 | })
33 | })
34 |
--------------------------------------------------------------------------------