├── .eslintignore ├── .gitattributes ├── .gitignore ├── .travis.yml ├── .vscode └── launch.json ├── CHANGES.md ├── LICENSE ├── README.md ├── index.js ├── package-lock.json ├── package.json └── test ├── __snapshots__ └── index.test.js.snap └── index.test.js /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directories 27 | node_modules 28 | jspm_packages 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | # ========================= 37 | # Operating System Files 38 | # ========================= 39 | 40 | # OSX 41 | # ========================= 42 | 43 | .DS_Store 44 | .AppleDouble 45 | .LSOverride 46 | 47 | # Thumbnails 48 | ._* 49 | 50 | # Files that might appear in the root of a volume 51 | .DocumentRevisions-V100 52 | .fseventsd 53 | .Spotlight-V100 54 | .TemporaryItems 55 | .Trashes 56 | .VolumeIcon.icns 57 | 58 | # Directories potentially created on remote AFP share 59 | .AppleDB 60 | .AppleDesktop 61 | Network Trash Folder 62 | Temporary Items 63 | .apdisk 64 | 65 | # Windows 66 | # ========================= 67 | 68 | # Windows image file caches 69 | Thumbs.db 70 | ehthumbs.db 71 | 72 | # Folder config file 73 | Desktop.ini 74 | 75 | # Recycle Bin used on file shares 76 | $RECYCLE.BIN/ 77 | 78 | # Windows Installer files 79 | *.cab 80 | *.msi 81 | *.msm 82 | *.msp 83 | 84 | # Windows shortcuts 85 | *.lnk 86 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | 4 | node_js: 5 | - node 6 | - '6' 7 | 8 | cache: 9 | directories: 10 | - node_modules 11 | 12 | # Check coverage after tests pass 13 | after_script: 14 | - npm run cover 15 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible Node.js debug attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Tests", 11 | "program": "${workspaceRoot}/node_modules/jest/bin/jest.js", 12 | "cwd": "${workspaceRoot}", 13 | "args": [ 14 | "--runInBand" 15 | ], 16 | "internalConsoleOptions": "openOnSessionStart" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /CHANGES.md: -------------------------------------------------------------------------------- 1 | # Changes 2 | 3 | ## 2.0.1 4 | 5 | - chore: dev package updates 6 | - chore: postcss@6 compatibility (#2) 7 | 8 | ## 1.0.0 9 | 10 | - docs: licensing :copyright: 11 | - docs: fix link 12 | - docs: add README :pencil2: 13 | - chore: travis config 14 | - chore: package metadata 15 | - feat: extract inline @keyframes into separate rules 16 | - chore: setup repo 17 | - :neckbeard: Added .gitattributes & .gitignore files 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Pat Cavit 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 | postcss-extract-animations [![NPM Version](https://img.shields.io/npm/v/postcss-extract-animations.svg)](https://www.npmjs.com/package/postcss-extract-animations) [![NPM License](https://img.shields.io/npm/l/postcss-extract-animations.svg)](https://www.npmjs.com/package/postcss-extract-animations) 2 | ======= 3 | [![NPM Downloads](https://img.shields.io/npm/dm/postcss-extract-animations.svg)](https://www.npmjs.com/package/postcss-extract-animations) 4 | [![Build Status](https://img.shields.io/travis/tivac/postcss-extract-animations.svg)](https://travis-ci.org/tivac/postcss-extract-animations) 5 | [![Dependency Status](https://img.shields.io/david/tivac/postcss-extract-animations.svg)](https://david-dm.org/tivac/postcss-extract-animations) 6 | [![devDependency Status](https://img.shields.io/david/dev/tivac/postcss-extract-animations.svg)](https://david-dm.org/tivac/postcss-extract-animations#info=devDependencies) 7 | 8 | Extract inline `@keyframes` from your CSS rules so you can look at everything in one place. 9 | 10 | ## Example 11 | 12 | ```css 13 | .a { 14 | animation: 1s @keyframes { 15 | to { 16 | opacity: 1; 17 | } 18 | } 19 | } 20 | ``` 21 | 22 | becomes 23 | 24 | ```css 25 | @keyframes anim-c4fe818f { 26 | to { 27 | opacity: 1 28 | } 29 | } 30 | .a { 31 | animation: 1s anim-c4fe818f 32 | } 33 | ``` 34 | 35 | Reducing the risk of drift since everything is contained within a single selector! 36 | 37 | ## Usage 38 | 39 | ```js 40 | postcss([ require('postcss-extract-animations') ]) 41 | ``` 42 | 43 | See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment. 44 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"), 4 | slug = require("unique-slug"); 5 | 6 | module.exports = postcss.plugin(require("./package.json").name, () => 7 | (root) => { 8 | // PostCSS doesn't see it as a decl like you'd expect, so use 9 | // .walkRules with a very peculiar-looking filter regex 10 | root.walkRules(/^animation:.*@keyframes$/i, (rule) => { 11 | const parent = rule.parent; 12 | 13 | // TODO: real name generation 14 | const name = `anim-${slug(parent.selector)}`; 15 | 16 | const anim = rule.clone({ 17 | type : "atrule", 18 | name : "keyframes", 19 | params : name, 20 | raws : Object.assign({}, parent.raws) 21 | }); 22 | 23 | const decl = postcss.decl({ 24 | prop : "animation", 25 | source : rule.source, 26 | value : rule.selector 27 | .replace(/^animation:\s*/, "") 28 | .replace(/@keyframes\s*/, name) 29 | }); 30 | 31 | // Insert animation 32 | root.insertBefore(parent, anim); 33 | 34 | // Replace source rule w/ animation decl 35 | rule.replaceWith(decl); 36 | 37 | // Try to clean up spacing for the rule we just modified 38 | delete parent.raws.before; 39 | }); 40 | } 41 | ); 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-extract-animations", 3 | "version": "2.0.1", 4 | "description": "Extract inline @keyframe entries", 5 | "main": "index.js", 6 | "repository": "tivac/postcss-extract-animations", 7 | "scripts": { 8 | "commitmsg": "validate-commit-msg", 9 | "cover": "jest --coverage", 10 | "lint": "eslint .", 11 | "preview": "changes || true", 12 | "test": "jest", 13 | "posttest": "npm run lint", 14 | "preversion": "npm test", 15 | "version": "changes", 16 | "postversion": "git push --follow-tags", 17 | "watch": "jest --watch" 18 | }, 19 | "keywords": [ 20 | "postcss-plugin", 21 | "animation", 22 | "keyframes" 23 | ], 24 | "author": "Pat Cavit ", 25 | "repo": "tivac/postcss-extract-animations", 26 | "license": "MIT", 27 | "dependencies": { 28 | "postcss": "^7.0.17", 29 | "unique-slug": "^2.0.0" 30 | }, 31 | "devDependencies": { 32 | "@studio/changes": "^1.1.0", 33 | "dedent": "^0.7.0", 34 | "eslint": "^4.6.1", 35 | "eslint-config-arenanet": "^4.4.2", 36 | "husky": "^3.0.4", 37 | "jest": "^24.8.0", 38 | "validate-commit-msg": "^2.11.2" 39 | }, 40 | "eslintConfig": { 41 | "extends": "arenanet", 42 | "env": { 43 | "node": true, 44 | "jest": true 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /test/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`postcss-extract-animations should extract animations from more complex declarations 1`] = ` 4 | "@keyframes anim-c4fe818f { 5 | to { 6 | opacity: 1; 7 | } 8 | } 9 | .a { 10 | animation: 1s ease-in 1s 2 reverse both paused anim-c4fe818f 11 | }" 12 | `; 13 | 14 | exports[`postcss-extract-animations should extract animations from more complex selectors 1`] = ` 15 | "@keyframes anim-7947fab3 { 16 | to { 17 | opacity: 1; 18 | } 19 | } 20 | .a .b > div > a[animate] { 21 | animation: 1s anim-7947fab3 22 | }" 23 | `; 24 | 25 | exports[`postcss-extract-animations should extract animations from simple selectors 1`] = ` 26 | "@keyframes anim-c4fe818f { 27 | to { 28 | opacity: 1; 29 | } 30 | } 31 | .a { 32 | animation: 1s anim-c4fe818f 33 | }" 34 | `; 35 | 36 | exports[`postcss-extract-animations shouldn't touch declarations around the animation 1`] = ` 37 | "@keyframes anim-c4fe818f { 38 | to { 39 | opacity: 1; 40 | } 41 | } 42 | .a { 43 | color: #FFF; 44 | animation: 1s anim-c4fe818f; 45 | background: red; 46 | }" 47 | `; 48 | 49 | exports[`postcss-extract-animations shouldn't touch normal animation decls 1`] = ` 50 | "@keyframes anim-c4fe818f { 51 | to { 52 | opacity: 1; 53 | } 54 | } 55 | .a { 56 | animation: 1s reveal; 57 | animation: 1s anim-c4fe818f 58 | }" 59 | `; 60 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var dedent = require("dedent"), 4 | 5 | plugin = require("../index.js"); 6 | 7 | describe("postcss-extract-animations", () => { 8 | it("should extract animations from simple selectors", () => 9 | plugin.process(dedent(` 10 | .a { 11 | animation: 1s @keyframes { 12 | to { 13 | opacity: 1; 14 | } 15 | } 16 | } 17 | `)) 18 | .then((result) => expect(result.css).toMatchSnapshot()) 19 | ); 20 | 21 | it("should extract animations from more complex selectors", () => 22 | plugin.process(dedent(` 23 | .a .b > div > a[animate] { 24 | animation: 1s @keyframes { 25 | to { 26 | opacity: 1; 27 | } 28 | } 29 | } 30 | `)) 31 | .then((result) => expect(result.css).toMatchSnapshot()) 32 | ); 33 | 34 | it("should extract animations from more complex declarations", () => 35 | plugin.process(dedent(` 36 | .a { 37 | animation: 1s ease-in 1s 2 reverse both paused @keyframes { 38 | to { 39 | opacity: 1; 40 | } 41 | } 42 | } 43 | `)) 44 | .then((result) => expect(result.css).toMatchSnapshot()) 45 | ); 46 | 47 | 48 | it("shouldn't touch declarations around the animation", () => 49 | plugin.process(dedent(` 50 | .a { 51 | color: #FFF; 52 | animation: 1s @keyframes { 53 | to { 54 | opacity: 1; 55 | } 56 | } 57 | background: red; 58 | } 59 | `)) 60 | .then((result) => expect(result.css).toMatchSnapshot()) 61 | ); 62 | 63 | it("shouldn't touch normal animation decls", () => 64 | plugin.process(dedent(` 65 | .a { 66 | animation: 1s reveal; 67 | animation: 1s @keyframes { 68 | to { 69 | opacity: 1; 70 | } 71 | } 72 | } 73 | `)) 74 | .then((result) => expect(result.css).toMatchSnapshot()) 75 | ); 76 | }); 77 | --------------------------------------------------------------------------------