├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── hacks.js ├── index.js ├── package-lock.json ├── package.json └── test ├── __snapshots__ ├── ie10.test.js.snap ├── ie10plus.test.js.snap ├── ie11.test.js.snap ├── ie6.test.js.snap ├── ie67.test.js.snap ├── ie678.test.js.snap ├── ie7.test.js.snap ├── ie8.test.js.snap ├── ie8910.test.js.snap ├── ie9.test.js.snap ├── ie910.test.js.snap └── ie9plus.test.js.snap ├── ie10.test.js ├── ie10plus.test.js ├── ie11.test.js ├── ie6.test.js ├── ie67.test.js ├── ie678.test.js ├── ie7.test.js ├── ie8.test.js ├── ie8910.test.js ├── ie9.test.js ├── ie910.test.js ├── ie9plus.test.js └── util.js /.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 | .vscode 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 20 | .grunt 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | 28 | # Dependency directories 29 | node_modules 30 | jspm_packages 31 | 32 | # Optional npm cache directory 33 | .npm 34 | 35 | # Optional REPL history 36 | .node_repl_history 37 | 38 | # ========================= 39 | # Operating System Files 40 | # ========================= 41 | 42 | # OSX 43 | # ========================= 44 | 45 | .DS_Store 46 | .AppleDouble 47 | .LSOverride 48 | 49 | # Thumbnails 50 | ._* 51 | 52 | # Files that might appear in the root of a volume 53 | .DocumentRevisions-V100 54 | .fseventsd 55 | .Spotlight-V100 56 | .TemporaryItems 57 | .Trashes 58 | .VolumeIcon.icns 59 | 60 | # Directories potentially created on remote AFP share 61 | .AppleDB 62 | .AppleDesktop 63 | Network Trash Folder 64 | Temporary Items 65 | .apdisk 66 | 67 | # Windows 68 | # ========================= 69 | 70 | # Windows image file caches 71 | Thumbs.db 72 | ehthumbs.db 73 | 74 | # Folder config file 75 | Desktop.ini 76 | 77 | # Recycle Bin used on file shares 78 | $RECYCLE.BIN/ 79 | 80 | # Windows Installer files 81 | *.cab 82 | *.msi 83 | *.msm 84 | *.msp 85 | 86 | # Windows shortcuts 87 | *.lnk 88 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - node 5 | - '6' 6 | - '4' 7 | cache: 8 | directories: 9 | - node_modules 10 | deploy: 11 | provider: npm 12 | email: npm@patcavit.com 13 | api_key: 14 | secure: QqCR5irj1RVCobC+kJ9OGeDQQWM6lzOLGUP9twAccGFqVGD+mHJlZ9EgvpG+LAFkja7wm3qLMF6rN504bNtKJYlgRuIkryvgS4Lgxv25fx2MWmnHETtzJpAh8ZzUffbi6KJ+4NT/XTYoOLYAPpl1upymUkHOhu42Q2gHRd9GkXKApD+Kb2xijK8u9MSrX1ulWwFn+y4nnKzNi7HsIF45oz53HZCUR+mT89rQaiqYyR5zeKC0fwHu1QywDKMzcNopsJNLusfMem56+OyXuZDelOc3h4Ni+9f9zexkKRHcbU+NAsMzStQkqQmWX5gCYVZaEXicPfTZ/4SW1vvUC1dcNRChoUwW6E+z88NJAj+KZWxXNtLoYGob1GA8aF4Rho3g/NolCj2aC1t7Xa3e1Q2e+8Fwu3r1dhR4u+yLyBKFnwMcoyU07KJ2PUbYVtB7XE0zcqOD0odcI3oKsUc5xRNiNoTfKJKvIIhAAUELVwM6GmJ2IJ7yVdGwfQhUwo7t94C0Q3GI/41tnM4Yd7SikISQ3Whjo/h3FRdIWmKgZEOzwTL5zOMW6cup2vJ4WC/cdiocx8ShwLkovALwvcSyQntC8AR9C0lNlWXp9KEM0XVEQy4sLzzR+30L8t1bdQtWYzxNcavN21c01QRLr7DPRPapHfW5i9K3GoRYQbaKRi102NA= 15 | on: 16 | tags: true 17 | repo: tivac/fixie 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 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-fixie 2 | ============= 3 | 4 | A simple PostCSS plugin to enable a set of easy-to-remember transforms for IE CSS Hacks. Goes especially well with `postcss-nested`. 5 | 6 | The hacks used come from [this excellent Stack Overflow answer](http://stackoverflow.com/a/20541859/7847); 7 | 8 | ```css 9 | .fooga { 10 | font-size: 1em; 11 | 12 | :ie11(&) { 13 | font-size: 1.2em; 14 | } 15 | } 16 | 17 | /* becomes */ 18 | .fooga { 19 | font-size: 1em; 20 | } 21 | 22 | /* IE 11+ hack */ 23 | _:-ms-fullscreen, :root .fooga { 24 | font-size: 1.2em; 25 | } 26 | ``` 27 | 28 | ## Available Hacks 29 | 30 | - `:ie11(...)` targets IE 11 31 | - `:ie10plus(...)` targets IE 10 & 11 32 | - `:ie10(...)` targets IE 10 33 | - `:ie910(...)` targets IE 9 & 10 34 | - `:ie9plus(...)` targets IE 9, 10, & 11 35 | - `:ie9(...)` targets IE 9 36 | - `:ie8910(...)` targets IE 8, 9, & 10 37 | - `:ie8(...)` targets IE 8 38 | - `:ie7(...)` targets IE 7 39 | - `:ie678(...)` targets IE 6, 7, & 8 40 | - `:ie67(...)` targets IE 6 & 7 41 | - `:ie6(...)` targets IE 6 42 | -------------------------------------------------------------------------------- /hacks.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"), 4 | parser = require("postcss-selector-parser"); 5 | 6 | function strip(rule, version, fn) { 7 | var transform = parser((selectors) => 8 | selectors.walkPseudos((node) => { 9 | var name = node.value.slice(1); 10 | 11 | if(name !== version) { 12 | return; 13 | } 14 | 15 | node.replaceWith(fn ? fn(node.nodes) : node.nodes); 16 | }) 17 | ); 18 | 19 | rule.selector = transform.processSync(rule.selector); 20 | } 21 | 22 | // Hacks are all sourced from http://stackoverflow.com/a/20541859/7847 23 | 24 | // _:-ms-fullscreen, :root 25 | exports.ie11 = (rule) => { 26 | strip(rule, "ie11", (node) => 27 | parser.root().append([ 28 | parser.string({ value : "_:-ms-fullscreen" }), 29 | parser.string({ value : `:root ${node.toString()}` }) 30 | ]) 31 | ); 32 | 33 | return rule; 34 | }; 35 | 36 | // _:-ms-lang(x), 37 | exports.ie10plus = (rule) => { 38 | strip(rule, "ie10plus", (node) => 39 | parser.root().append([ 40 | parser.string({ value : "_:-ms-lang(x)" }), 41 | node 42 | ]) 43 | ); 44 | 45 | return rule; 46 | }; 47 | 48 | // _:-ms-lang(x), { : \9 } 49 | exports.ie10 = (rule) => { 50 | strip(rule, "ie10", (node) => 51 | parser.root().append([ 52 | parser.string({ value : "_:-ms-lang(x)" }), 53 | node 54 | ]) 55 | ); 56 | 57 | rule.walkDecls((decl) => { 58 | decl.value += "\\9"; 59 | }); 60 | 61 | return rule; 62 | }; 63 | 64 | 65 | // @media screen and (min-width:0\0) { : \9 } 66 | exports.ie910 = (rule) => { 67 | var media = postcss.atRule({ 68 | name : "media", 69 | params : "screen and (min-width:0\\0)" 70 | }); 71 | 72 | strip(rule, "ie910"); 73 | 74 | rule.walkDecls((decl) => { 75 | decl.value += "\\9"; 76 | }); 77 | 78 | media.append(rule); 79 | 80 | return media; 81 | }; 82 | 83 | // @media screen and (min-width:0\0) and (min-resolution: +72dpi) { } 84 | exports.ie9plus = (rule) => { 85 | var media = postcss.atRule({ 86 | name : "media", 87 | params : "screen and (min-width:0\\0) and (min-resolution: +72dpi)" 88 | }); 89 | 90 | strip(rule, "ie9plus"); 91 | 92 | media.append(rule); 93 | 94 | return media; 95 | }; 96 | 97 | // @media screen and (min-width:0\0) and (min-resolution: .001dpcm) { } 98 | exports.ie9 = (rule) => { 99 | var media = postcss.atRule({ 100 | name : "media", 101 | params : "screen and (min-width:0\\0) and (min-resolution: .001dpcm)" 102 | }); 103 | 104 | strip(rule, "ie9"); 105 | 106 | media.append(rule); 107 | 108 | return media; 109 | }; 110 | 111 | // @media screen\0 { } 112 | exports.ie8910 = (rule) => { 113 | var media = postcss.atRule({ 114 | name : "media", 115 | params : "screen\\0" 116 | }); 117 | 118 | strip(rule, "ie8910"); 119 | 120 | media.append(rule); 121 | 122 | return media; 123 | }; 124 | 125 | // @media \0screen { } 126 | exports.ie8 = (rule) => { 127 | var media = postcss.atRule({ 128 | name : "media", 129 | params : "\\0screen" 130 | }); 131 | 132 | strip(rule, "ie8"); 133 | 134 | media.append(rule); 135 | 136 | return media; 137 | }; 138 | 139 | 140 | // *+html 141 | exports.ie7 = (rule) => { 142 | strip(rule, "ie7", (node) => 143 | parser.root().append( 144 | parser.string({ value : `*+html ${node}` }) 145 | ) 146 | ); 147 | 148 | return rule; 149 | }; 150 | 151 | // @media @media \0screen\,screen\9 { { } 152 | exports.ie678 = (rule) => { 153 | var media = postcss.atRule({ 154 | name : "media", 155 | params : "\\0screen\\,screen\\9" 156 | }); 157 | 158 | strip(rule, "ie678"); 159 | 160 | media.append(rule); 161 | 162 | return media; 163 | }; 164 | 165 | // { *: } 166 | exports.ie67 = (rule) => { 167 | strip(rule, "ie67"); 168 | 169 | rule.walkDecls((decl) => { 170 | decl.prop = `*${decl.prop}`; 171 | }); 172 | 173 | return rule; 174 | }; 175 | 176 | // { _: } 177 | exports.ie6 = (rule) => { 178 | strip(rule, "ie6"); 179 | 180 | rule.walkDecls((decl) => { 181 | decl.prop = `_${decl.prop}`; 182 | }); 183 | 184 | return rule; 185 | }; 186 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"), 4 | 5 | hacks = require("./hacks.js"), 6 | 7 | search = new RegExp(`:(${Object.keys(hacks).join(")|:(")})`); 8 | 9 | module.exports = postcss.plugin("postcss-fixie", () => (root) => { 10 | root.walkRules(search, (rule) => { 11 | var version = rule.selector.match(search)[0].substring(1); 12 | 13 | rule.replaceWith(hacks[version](rule.clone())); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-fixie", 3 | "version": "2.0.0", 4 | "description": "Simple functions to use IE-specific CSS hacks", 5 | "main": "index.js", 6 | "repository": "tivac/fixie", 7 | "scripts": { 8 | "precommit": "lint-staged", 9 | "lint": "eslint .", 10 | "test": "jest", 11 | "posttest": "npm run lint" 12 | }, 13 | "keywords": [ 14 | "postcss", 15 | "postcss-plugin", 16 | "ie", 17 | "internet-explorer", 18 | "hacks" 19 | ], 20 | "author": "Pat Cavit ", 21 | "license": "MIT", 22 | "devDependencies": { 23 | "dedent": "^0.7.0", 24 | "eslint": "^4.10.0", 25 | "eslint-config-arenanet": "^4.4.2", 26 | "eslint-plugin-no-only-tests": "^2.0.0", 27 | "husky": "^3.0.4", 28 | "jest": "^21.2.1", 29 | "lint-staged": "^4.3.0", 30 | "postcss-nested": "^3.0.0" 31 | }, 32 | "dependencies": { 33 | "postcss": "^6.0.13", 34 | "postcss-selector-parser": "^4.0.0" 35 | }, 36 | "eslintConfig": { 37 | "extends": "arenanet", 38 | "env": { 39 | "node": true, 40 | "jest": true 41 | }, 42 | "plugins": [ 43 | "no-only-tests" 44 | ], 45 | "rules": { 46 | "indent": "off", 47 | "no-only-tests/no-only-tests": "error" 48 | } 49 | }, 50 | "lint-staged": { 51 | "*.js": [ 52 | "eslint --fix", 53 | "git add" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /test/__snapshots__/ie10.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie10 should transform :ie10(...) into an ie10 hack (multiple selectors) 1`] = ` 4 | "_:-ms-lang(x),.fooga .wooga { 5 | color: red\\\\9; 6 | }" 7 | `; 8 | 9 | exports[`:ie10 should transform :ie10(...) into an ie10 hack (single selector) 1`] = ` 10 | "_:-ms-lang(x),.fooga { 11 | color: red\\\\9; 12 | }" 13 | `; 14 | 15 | exports[`:ie10 should work with postcss-nested 1`] = ` 16 | ".fooga { 17 | color: red; 18 | } 19 | 20 | _:-ms-lang(x),.fooga { 21 | color: blue\\\\9; 22 | }" 23 | `; 24 | -------------------------------------------------------------------------------- /test/__snapshots__/ie10plus.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie10plus should transform :ie10plus(...) into an ie10plus hack (multiple selectors) 1`] = ` 4 | "_:-ms-lang(x),.fooga .wooga { 5 | color: red; 6 | }" 7 | `; 8 | 9 | exports[`:ie10plus should transform :ie10plus(...) into an ie10plus hack (single selector) 1`] = ` 10 | "_:-ms-lang(x),.fooga { 11 | color: red; 12 | }" 13 | `; 14 | 15 | exports[`:ie10plus should work with postcss-nested 1`] = ` 16 | ".fooga { 17 | color: red; 18 | } 19 | 20 | _:-ms-lang(x),.fooga { 21 | color: blue; 22 | }" 23 | `; 24 | -------------------------------------------------------------------------------- /test/__snapshots__/ie11.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie11 should transform :ie11(...) into an ie11 hack (multiple selectors) 1`] = ` 4 | "_:-ms-fullscreen,:root .fooga .wooga { 5 | color: red; 6 | }" 7 | `; 8 | 9 | exports[`:ie11 should transform :ie11(...) into an ie11 hack (single selector) 1`] = ` 10 | "_:-ms-fullscreen,:root .fooga { 11 | color: red; 12 | }" 13 | `; 14 | 15 | exports[`:ie11 should work with postcss-nested 1`] = ` 16 | ".fooga { 17 | color: red; 18 | } 19 | 20 | _:-ms-fullscreen,:root .fooga { 21 | color: blue; 22 | }" 23 | `; 24 | -------------------------------------------------------------------------------- /test/__snapshots__/ie6.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie6 should transform :ie6(...) into an ie6 hack (multiple declarations) 1`] = `".fooga { _color: red; _background: blue; }"`; 4 | 5 | exports[`:ie6 should transform :ie6(...) into an ie6 hack (multiple selectors) 1`] = ` 6 | ".fooga .booga { 7 | _color: red; 8 | }" 9 | `; 10 | 11 | exports[`:ie6 should transform :ie6(...) into an ie6 hack (single selector) 1`] = ` 12 | ".fooga { 13 | _color: red; 14 | }" 15 | `; 16 | 17 | exports[`:ie6 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | .fooga { 23 | _color: blue; 24 | }" 25 | `; 26 | -------------------------------------------------------------------------------- /test/__snapshots__/ie67.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie67 should transform :ie67(...) into an ie67 hack (multiple declarations) 1`] = `".fooga { *color: red; *background: blue; }"`; 4 | 5 | exports[`:ie67 should transform :ie67(...) into an ie67 hack (multiple selectors) 1`] = ` 6 | ".fooga .booga { 7 | *color: red; 8 | }" 9 | `; 10 | 11 | exports[`:ie67 should transform :ie67(...) into an ie67 hack (single selector) 1`] = ` 12 | ".fooga { 13 | *color: red; 14 | }" 15 | `; 16 | 17 | exports[`:ie67 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | .fooga { 23 | *color: blue; 24 | }" 25 | `; 26 | -------------------------------------------------------------------------------- /test/__snapshots__/ie678.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie678 should transform :ie678(...) into an ie678 hack (multiple selectors) 1`] = ` 4 | "@media \\\\0screen\\\\,screen\\\\9 {.fooga .booga { 5 | color: red; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie678 should transform :ie678(...) into an ie678 hack (single selector) 1`] = ` 11 | "@media \\\\0screen\\\\,screen\\\\9 {.fooga { 12 | color: red; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie678 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media \\\\0screen\\\\,screen\\\\9 { 23 | 24 | .fooga { 25 | color: blue; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/__snapshots__/ie7.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie7 should transform :ie7(...) into an ie7 hack (multiple selectors) 1`] = ` 4 | "*+html .fooga .booga { 5 | color: red; 6 | }" 7 | `; 8 | 9 | exports[`:ie7 should transform :ie7(...) into an ie7 hack (single selector) 1`] = ` 10 | "*+html .fooga { 11 | color: red; 12 | }" 13 | `; 14 | 15 | exports[`:ie7 should work with postcss-nested 1`] = ` 16 | ".fooga { 17 | color: red; 18 | } 19 | 20 | *+html .fooga { 21 | color: blue; 22 | }" 23 | `; 24 | -------------------------------------------------------------------------------- /test/__snapshots__/ie8.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie8 should transform :ie8(...) into an ie8 hack (multiple selectors) 1`] = ` 4 | "@media \\\\0screen {.fooga .booga { 5 | color: red; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie8 should transform :ie8(...) into an ie8 hack (single selector) 1`] = ` 11 | "@media \\\\0screen {.fooga { 12 | color: red; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie8 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media \\\\0screen { 23 | 24 | .fooga { 25 | color: blue; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/__snapshots__/ie8910.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie8910 should transform :ie8910(...) into an ie8910 hack (multiple selectors) 1`] = ` 4 | "@media screen\\\\0 {.fooga .booga { 5 | color: red; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie8910 should transform :ie8910(...) into an ie8910 hack (single selector) 1`] = ` 11 | "@media screen\\\\0 {.fooga { 12 | color: red; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie8910 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media screen\\\\0 { 23 | 24 | .fooga { 25 | color: blue; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/__snapshots__/ie9.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie9 should transform :ie9(...) into an ie9 hack (multiple selectors) 1`] = ` 4 | "@media screen and (min-width:0\\\\0) and (min-resolution: .001dpcm) {.fooga .booga { 5 | color: red; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie9 should transform :ie9(...) into an ie9 hack (single selector) 1`] = ` 11 | "@media screen and (min-width:0\\\\0) and (min-resolution: .001dpcm) {.fooga { 12 | color: red; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie9 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media screen and (min-width:0\\\\0) and (min-resolution: .001dpcm) { 23 | 24 | .fooga { 25 | color: blue; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/__snapshots__/ie910.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie910 should transform :ie910(...) into an ie910 (multiple selectors) 1`] = ` 4 | "@media screen and (min-width:0\\\\0) {.fooga .booga { 5 | color: red\\\\9; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie910 should transform :ie910(...) into an ie910 (single selector) 1`] = ` 11 | "@media screen and (min-width:0\\\\0) {.fooga { 12 | color: red\\\\9; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie910 should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media screen and (min-width:0\\\\0) { 23 | 24 | .fooga { 25 | color: blue\\\\9; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/__snapshots__/ie9plus.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`:ie9plus should transform :ie9plus(...) into an ie9plus hack (multiple selectors) 1`] = ` 4 | "@media screen and (min-width:0\\\\0) and (min-resolution: +72dpi) {.fooga .booga { 5 | color: red; 6 | } 7 | }" 8 | `; 9 | 10 | exports[`:ie9plus should transform :ie9plus(...) into an ie9plus hack (single selector) 1`] = ` 11 | "@media screen and (min-width:0\\\\0) and (min-resolution: +72dpi) {.fooga { 12 | color: red; 13 | } 14 | }" 15 | `; 16 | 17 | exports[`:ie9plus should work with postcss-nested 1`] = ` 18 | ".fooga { 19 | color: red; 20 | } 21 | 22 | @media screen and (min-width:0\\\\0) and (min-resolution: +72dpi) { 23 | 24 | .fooga { 25 | color: blue; 26 | } 27 | }" 28 | `; 29 | -------------------------------------------------------------------------------- /test/ie10.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie10", () => { 7 | it("should transform :ie10(...) into an ie10 hack (single selector)", () => 8 | simple(` 9 | :ie10(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie10(...) into an ie10 hack (multiple selectors)", () => 16 | simple(` 17 | :ie10(.fooga .wooga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie10(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie10plus.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie10plus", () => { 7 | it("should transform :ie10plus(...) into an ie10plus hack (single selector)", () => 8 | simple(` 9 | :ie10plus(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie10plus(...) into an ie10plus hack (multiple selectors)", () => 16 | simple(` 17 | :ie10plus(.fooga .wooga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie10plus(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie11.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie11", () => { 7 | it("should transform :ie11(...) into an ie11 hack (single selector)", () => 8 | simple(` 9 | :ie11(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie11(...) into an ie11 hack (multiple selectors)", () => 16 | simple(` 17 | :ie11(.fooga .wooga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie11(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie6.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie6", () => { 7 | it("should transform :ie6(...) into an ie6 hack (single selector)", () => 8 | simple(` 9 | :ie6(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie6(...) into an ie6 hack (multiple selectors)", () => 16 | simple(` 17 | :ie6(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should transform :ie6(...) into an ie6 hack (multiple declarations)", () => 24 | simple(` 25 | :ie6(.fooga) { color: red; background: blue; } 26 | `) 27 | ); 28 | 29 | it("should work with postcss-nested", () => 30 | nested(` 31 | .fooga { 32 | color: red; 33 | 34 | :ie6(&) { 35 | color: blue; 36 | } 37 | } 38 | `) 39 | ); 40 | }); 41 | -------------------------------------------------------------------------------- /test/ie67.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie67", () => { 7 | it("should transform :ie67(...) into an ie67 hack (single selector)", () => 8 | simple(` 9 | :ie67(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie67(...) into an ie67 hack (multiple selectors)", () => 16 | simple(` 17 | :ie67(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should transform :ie67(...) into an ie67 hack (multiple declarations)", () => 24 | simple(` 25 | :ie67(.fooga) { color: red; background: blue; } 26 | `) 27 | ); 28 | 29 | it("should work with postcss-nested", () => 30 | nested(` 31 | .fooga { 32 | color: red; 33 | 34 | :ie67(&) { 35 | color: blue; 36 | } 37 | } 38 | `) 39 | ); 40 | }); 41 | -------------------------------------------------------------------------------- /test/ie678.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie678", () => { 7 | it("should transform :ie678(...) into an ie678 hack (single selector)", () => 8 | simple(` 9 | :ie678(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie678(...) into an ie678 hack (multiple selectors)", () => 16 | simple(` 17 | :ie678(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie678(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie7.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie7", () => { 7 | it("should transform :ie7(...) into an ie7 hack (single selector)", () => 8 | simple(` 9 | :ie7(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie7(...) into an ie7 hack (multiple selectors)", () => 16 | simple(` 17 | :ie7(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie7(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie8.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie8", () => { 7 | it("should transform :ie8(...) into an ie8 hack (single selector)", () => 8 | simple(` 9 | :ie8(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie8(...) into an ie8 hack (multiple selectors)", () => 16 | simple(` 17 | :ie8(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie8(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie8910.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie8910", () => { 7 | it("should transform :ie8910(...) into an ie8910 hack (single selector)", () => 8 | simple(` 9 | :ie8910(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie8910(...) into an ie8910 hack (multiple selectors)", () => 16 | simple(` 17 | :ie8910(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie8910(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie9.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie9", () => { 7 | it("should transform :ie9(...) into an ie9 hack (single selector)", () => 8 | simple(` 9 | :ie9(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie9(...) into an ie9 hack (multiple selectors)", () => 16 | simple(` 17 | :ie9(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie9(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie910.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie910", () => { 7 | it("should transform :ie910(...) into an ie910 (single selector)", () => 8 | simple(` 9 | :ie910(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie910(...) into an ie910 (multiple selectors)", () => 16 | simple(` 17 | :ie910(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie910(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/ie9plus.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var simple = require("./util.js").simple, 4 | nested = require("./util.js").nested; 5 | 6 | describe(":ie9plus", () => { 7 | it("should transform :ie9plus(...) into an ie9plus hack (single selector)", () => 8 | simple(` 9 | :ie9plus(.fooga) { 10 | color: red; 11 | } 12 | `) 13 | ); 14 | 15 | it("should transform :ie9plus(...) into an ie9plus hack (multiple selectors)", () => 16 | simple(` 17 | :ie9plus(.fooga .booga) { 18 | color: red; 19 | } 20 | `) 21 | ); 22 | 23 | it("should work with postcss-nested", () => 24 | nested(` 25 | .fooga { 26 | color: red; 27 | 28 | :ie9plus(&) { 29 | color: blue; 30 | } 31 | } 32 | `) 33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /test/util.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"), 4 | dedent = require("dedent"), 5 | 6 | plugin = require("../index.js"); 7 | 8 | function check(processor, css) { 9 | return processor.process(dedent(css)) 10 | .then((out) => expect(out.css).toMatchSnapshot()); 11 | } 12 | 13 | exports.simple = check.bind(null, plugin); 14 | exports.nested = check.bind(null, postcss([ require("postcss-nested"), plugin ])); 15 | --------------------------------------------------------------------------------