├── CHANGELOG.md ├── .gitignore ├── .travis.yml ├── test └── fixtures │ ├── autoprefixer.css │ ├── autoprefixer.out.css │ ├── breakpoint-between.css │ ├── custom.css │ ├── breakpoint-down.css │ ├── breakpoint-between.out.css │ ├── custom.out.css │ ├── breakpoint-down.out.css │ ├── breakpoint-up.css │ ├── breakpoint-only.css │ ├── breakpoint.css │ ├── breakpoint-up.out.css │ ├── breakpoint.out.css │ └── breakpoint-only.out.css ├── .npmignore ├── .editorconfig ├── package.json ├── LICENSE ├── test.js ├── README.md └── index.js /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "4" 5 | -------------------------------------------------------------------------------- /test/fixtures/autoprefixer.css: -------------------------------------------------------------------------------- 1 | @breakpoint 0 543px { 2 | body { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .gitignore 3 | .editorconfig 4 | 5 | node_modules/ 6 | npm-debug.log 7 | 8 | test.js 9 | .travis.yml 10 | -------------------------------------------------------------------------------- /test/fixtures/autoprefixer.out.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 0) and (max-width: 543px) { 2 | body { 3 | -webkit-transform: translate3d(0, 0, 0); 4 | transform: translate3d(0, 0, 0) 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.{json,yml}] 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-between.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @breakpoint-between xs sm { 6 | body { 7 | background: red; 8 | } 9 | } 10 | 11 | @breakpoint-between sm md { 12 | body { 13 | background: orange; 14 | } 15 | } 16 | 17 | @breakpoint-between md lg { 18 | body { 19 | background: yellow; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /test/fixtures/custom.css: -------------------------------------------------------------------------------- 1 | @pcss-breakpoint-up bp1 { 2 | body { 3 | background: red; 4 | } 5 | } 6 | 7 | @pcss-breakpoint-down bp2 { 8 | body { 9 | background: orange; 10 | } 11 | } 12 | 13 | @pcss-breakpoint-only bp3 { 14 | body { 15 | background: yellow; 16 | } 17 | } 18 | 19 | @pcss-breakpoint-between bp1 bp2 { 20 | body { 21 | background: green; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-down.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @breakpoint-down xs { 6 | body { 7 | background: red; 8 | } 9 | } 10 | 11 | @breakpoint-down sm { 12 | body { 13 | background: orange; 14 | } 15 | } 16 | 17 | @breakpoint-down md { 18 | body { 19 | background: yellow; 20 | } 21 | } 22 | 23 | @breakpoint-down lg { 24 | body { 25 | background: green; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-between.out.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @media (min-width: 0) and (max-width: 767px) { 6 | 7 | body { 8 | background: red; 9 | } 10 | } 11 | 12 | @media (min-width: 544px) and (max-width: 991px) { 13 | 14 | body { 15 | background: orange; 16 | } 17 | } 18 | 19 | @media (min-width: 768px) and (max-width: 1199px) { 20 | 21 | body { 22 | background: yellow; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /test/fixtures/custom.out.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 0) { 2 | 3 | body { 4 | 5 | background: red 6 | } 7 | } 8 | 9 | @media (max-width: 919px) { 10 | 11 | body { 12 | 13 | background: orange 14 | } 15 | } 16 | 17 | @media (min-width: 920px) { 18 | 19 | body { 20 | 21 | background: yellow 22 | } 23 | } 24 | 25 | @media (min-width: 0) and (max-width: 919px) { 26 | 27 | body { 28 | 29 | background: green 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-down.out.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @media (max-width: 543px) { 6 | 7 | body { 8 | background: red; 9 | } 10 | } 11 | 12 | @media (max-width: 767px) { 13 | 14 | body { 15 | background: orange; 16 | } 17 | } 18 | 19 | @media (max-width: 991px) { 20 | 21 | body { 22 | background: yellow; 23 | } 24 | } 25 | 26 | @media (max-width: 1199px) { 27 | 28 | body { 29 | background: green; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-up.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @breakpoint-up xs { 6 | body { 7 | background: red; 8 | } 9 | } 10 | 11 | @breakpoint-up sm { 12 | body { 13 | background: orange; 14 | } 15 | } 16 | 17 | @breakpoint-up md { 18 | body { 19 | background: yellow; 20 | } 21 | } 22 | 23 | @breakpoint-up lg { 24 | body { 25 | background: green; 26 | } 27 | } 28 | 29 | @breakpoint-up xl { 30 | body { 31 | background: blue; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-only.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @breakpoint-only xs { 6 | body { 7 | background: red; 8 | } 9 | } 10 | 11 | @breakpoint-only sm { 12 | body { 13 | background: orange; 14 | } 15 | } 16 | 17 | @breakpoint-only md { 18 | body { 19 | background: yellow; 20 | } 21 | } 22 | 23 | @breakpoint-only lg { 24 | body { 25 | background: green; 26 | } 27 | } 28 | 29 | @breakpoint-only xl { 30 | body { 31 | background: blue; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @breakpoint 0 543px { 6 | body { 7 | background: red; 8 | } 9 | } 10 | 11 | @breakpoint 544px 767px { 12 | body { 13 | background: orange; 14 | } 15 | } 16 | 17 | @breakpoint 768px 991px { 18 | body { 19 | background: yellow; 20 | } 21 | } 22 | 23 | @breakpoint 992px 1199px { 24 | body { 25 | background: green; 26 | } 27 | } 28 | 29 | @breakpoint 1200px { 30 | body { 31 | background: blue; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-up.out.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @media (min-width: 0) { 6 | 7 | body { 8 | background: red; 9 | } 10 | } 11 | 12 | @media (min-width: 544px) { 13 | 14 | body { 15 | background: orange; 16 | } 17 | } 18 | 19 | @media (min-width: 768px) { 20 | 21 | body { 22 | background: yellow; 23 | } 24 | } 25 | 26 | @media (min-width: 992px) { 27 | 28 | body { 29 | background: green; 30 | } 31 | } 32 | 33 | @media (min-width: 1200px) { 34 | 35 | body { 36 | background: blue; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint.out.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @media (min-width: 0) and (max-width: 543px) { 6 | 7 | body { 8 | background: red; 9 | } 10 | } 11 | 12 | @media (min-width: 544px) and (max-width: 767px) { 13 | 14 | body { 15 | background: orange; 16 | } 17 | } 18 | 19 | @media (min-width: 768px) and (max-width: 991px) { 20 | 21 | body { 22 | background: yellow; 23 | } 24 | } 25 | 26 | @media (min-width: 992px) and (max-width: 1199px) { 27 | 28 | body { 29 | background: green; 30 | } 31 | } 32 | 33 | @media (min-width: 1200px) { 34 | 35 | body { 36 | background: blue; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /test/fixtures/breakpoint-only.out.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: white; 3 | } 4 | 5 | @media (min-width: 0) and (max-width: 543px) { 6 | 7 | body { 8 | background: red; 9 | } 10 | } 11 | 12 | @media (min-width: 544px) and (max-width: 767px) { 13 | 14 | body { 15 | background: orange; 16 | } 17 | } 18 | 19 | @media (min-width: 768px) and (max-width: 991px) { 20 | 21 | body { 22 | background: yellow; 23 | } 24 | } 25 | 26 | @media (min-width: 992px) and (max-width: 1199px) { 27 | 28 | body { 29 | background: green; 30 | } 31 | } 32 | 33 | @media (min-width: 1200px) { 34 | 35 | body { 36 | background: blue; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-breakpoints", 3 | "version": "1.1.0", 4 | "description": "PostCSS plugin Breakpoint viewport sizes and media queries.", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "postcss-breakpoints", 10 | "breakpoints", 11 | "viewport", 12 | "media queries" 13 | ], 14 | "author": "Minh Tran ", 15 | "license": "MIT", 16 | "repository": "minhtranite/postcss-breakpoints", 17 | "bugs": { 18 | "url": "https://github.com/minhtranite/postcss-breakpoints/issues" 19 | }, 20 | "homepage": "https://github.com/minhtranite/postcss-breakpoints", 21 | "dependencies": { 22 | "postcss": "^5.2.0" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^6.5.1", 26 | "ava": "^0.16.0", 27 | "eslint": "^3.4.0", 28 | "eslint-config-postcss": "^2.0.2" 29 | }, 30 | "scripts": { 31 | "test": "ava && eslint *.js" 32 | }, 33 | "eslintConfig": { 34 | "extends": "eslint-config-postcss/es5" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2016 Minh Tran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import postcss from 'postcss'; 2 | import test from 'ava'; 3 | import fs from 'fs'; 4 | import autoprefixer from 'autoprefixer'; 5 | 6 | import plugin from './'; 7 | 8 | function read(path) { 9 | return fs.readFileSync(path, 'utf-8'); 10 | } 11 | 12 | function run(t, name, opts = {}) { 13 | const input = read('test/fixtures/' + name + '.css'); 14 | const output = read('test/fixtures/' + name + '.out.css'); 15 | return postcss([plugin(opts), autoprefixer()]) 16 | .process(input) 17 | .then(result => { 18 | t.deepEqual(result.css, output); 19 | t.deepEqual(result.warnings().length, 0); 20 | }); 21 | } 22 | 23 | test('breakpoint', t => { 24 | return run(t, 'breakpoint', {}); 25 | }); 26 | 27 | test('breakpoint-up', t => { 28 | return run(t, 'breakpoint-up', {}); 29 | }); 30 | 31 | test('breakpoint-down', t => { 32 | return run(t, 'breakpoint-down', {}); 33 | }); 34 | 35 | test('breakpoint-only', t => { 36 | return run(t, 'breakpoint-only', {}); 37 | }); 38 | 39 | test('breakpoint-between', t => { 40 | return run(t, 'breakpoint-between', {}); 41 | }); 42 | 43 | test('custom', t => { 44 | return run(t, 'custom', { 45 | breakpoints: { 46 | bp1: '0 599px', 47 | bp2: '600px 919px', 48 | bp3: '920px' 49 | }, 50 | prefix: 'pcss-' 51 | }); 52 | }); 53 | 54 | test('with autoprefixer', t => { 55 | return run(t, 'autoprefixer', {}); 56 | }); 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PostCSS Breakpoints [![Build Status][ci-img]][ci] 2 | 3 | [PostCSS] plugin Breakpoint viewport sizes and media queries.. 4 | 5 | [PostCSS]: https://github.com/postcss/postcss 6 | [ci-img]: https://travis-ci.org/minhtranite/postcss-breakpoints.svg 7 | [ci]: https://travis-ci.org/minhtranite/postcss-breakpoints 8 | 9 | ```css 10 | @breakpoint 0 543px { 11 | body { 12 | background: red; 13 | } 14 | } 15 | 16 | @breakpoint-up sm { 17 | body { 18 | background: orange; 19 | } 20 | } 21 | ``` 22 | 23 | ```css 24 | @media (min-width: 0) and (max-width: 543px) { 25 | body { 26 | background: red; 27 | } 28 | } 29 | 30 | @media (min-width: 544px) { 31 | body { 32 | background: orange; 33 | } 34 | } 35 | ``` 36 | 37 | ## Usage 38 | 39 | ```js 40 | postcss([ require('postcss-breakpoints')({options}) ]) 41 | ``` 42 | 43 | See [PostCSS] docs for examples for your environment. 44 | 45 | ## Options 46 | 47 | ### breakpoints 48 | 49 | - Type: object 50 | - Default: 51 | ```js 52 | breakpoints: { 53 | xs: '0 543px', 54 | sm: '544px 767px', 55 | md: '768px 991px', 56 | lg: '992px 1199px', 57 | xl: '1200px' 58 | } 59 | ``` 60 | 61 | ### prefix 62 | 63 | - Type: string 64 | - Default: "" 65 | 66 | ## Rules 67 | 68 | ### Breakpoint 69 | 70 | #### Syntax: `@[prefix]breakpoint min [max]` 71 | 72 | #### Example 73 | 74 | ``` 75 | @breakpoint 0 1200px 76 | @breakpoint 1200px 77 | ``` 78 | 79 | ### Breakpoint up 80 | 81 | #### Syntax: `@[prefix]breakpoint-up breakpoint` 82 | #### Example 83 | 84 | ``` 85 | @breakpoint-up xs 86 | @breakpoint-up sm 87 | @breakpoint-up md 88 | @breakpoint-up lg 89 | @breakpoint-up xl 90 | ``` 91 | 92 | ### Breakpoint down 93 | 94 | #### Syntax: `@[prefix]breakpoint-down breakpoint` 95 | #### Example 96 | 97 | ``` 98 | @breakpoint-down xs 99 | @breakpoint-down sm 100 | @breakpoint-down md 101 | @breakpoint-down lg 102 | ``` 103 | 104 | ### Breakpoint only 105 | 106 | #### Syntax: `@[prefix]breakpoint-only breakpoint` 107 | #### Example 108 | 109 | ``` 110 | @breakpoint-only xs 111 | @breakpoint-only sm 112 | @breakpoint-only md 113 | @breakpoint-only lg 114 | @breakpoint-only xl 115 | ``` 116 | 117 | ### Breakpoint between 118 | 119 | #### Syntax: `@[prefix]breakpoint-between breakpoint breakpoint` 120 | #### Example 121 | 122 | ``` 123 | @breakpoint-between xs sm 124 | @breakpoint-between sm md 125 | @breakpoint-between md lg 126 | ``` 127 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss'); 2 | 3 | /** 4 | * Create rule name 5 | * @param rule 6 | * @param prefix 7 | * @returns {*} 8 | */ 9 | function ruleName(rule, prefix) { 10 | prefix = prefix || ''; 11 | return prefix + rule; 12 | } 13 | 14 | /** 15 | * Check breakpoint value valid 16 | * @param value 17 | * @returns {boolean} 18 | */ 19 | function validValue(value) { 20 | return !(typeof value === 'undefined' || value === null); 21 | } 22 | 23 | /** 24 | * Check breakpoint valid 25 | * @param breakpoint 26 | * @param breakpoints 27 | * @param requiredMax 28 | * @returns {boolean} 29 | */ 30 | function validBreakpoint(breakpoint, breakpoints, requiredMax) { 31 | const keys = Object.keys(breakpoints); 32 | const index = keys.indexOf(breakpoint); 33 | const match = breakpoints[breakpoint]; 34 | if (index === -1 || !match) { 35 | return false; 36 | } 37 | requiredMax = requiredMax || false; 38 | return !(requiredMax && match.indexOf(' ') === -1); 39 | } 40 | 41 | function throwRuleParamsError(rule, reasons) { 42 | let message = 'Invalid argument of rule "@' + rule.name + '"'; 43 | if (reasons) { 44 | message += ': ' + reasons; 45 | } 46 | throw rule.error(message, { 47 | plugin: 'postcss-breakpoints' 48 | }); 49 | } 50 | 51 | /** 52 | * Create @media rule 53 | * @param min 54 | * @param max 55 | * @param rule 56 | * @returns {AtRule} 57 | */ 58 | function mediaRule(min, max, rule) { 59 | if (!validValue(min) && !validValue(max)) { 60 | throw new Error('Invalid argument'); 61 | } 62 | const breakpoints = []; 63 | if (validValue(min)) { 64 | breakpoints.push('(min-width: ' + min + ')'); 65 | } 66 | if (validValue(max)) { 67 | breakpoints.push('(max-width: ' + max + ')'); 68 | } 69 | return postcss.atRule({ 70 | name: 'media', 71 | params: breakpoints.join(' and '), 72 | nodes: rule.nodes, 73 | parent: rule.parent, 74 | raws: rule.raws 75 | }); 76 | } 77 | 78 | /** 79 | * Breakpoint rule 80 | * @param rule 81 | */ 82 | function breakpointRule(rule) { 83 | if (!rule.params) { 84 | throwRuleParamsError(rule, 'empty argument'); 85 | } 86 | const args = rule.params.split(' '); 87 | rule.replaceWith(mediaRule(args[0], args[1], rule)); 88 | } 89 | 90 | /** 91 | * Breakpoint up rule 92 | * @param rule 93 | * @param breakpoints 94 | */ 95 | function breakpointUpRule(rule, breakpoints) { 96 | if (!rule.params) { 97 | throwRuleParamsError(rule, 'empty argument'); 98 | } 99 | if (!validBreakpoint(rule.params, breakpoints)) { 100 | throwRuleParamsError( 101 | rule, 102 | 'breakpoint "' + rule.params + '" is invalid' 103 | ); 104 | } 105 | const args = breakpoints[rule.params].split(' '); 106 | rule.replaceWith(mediaRule(args[0], null, rule)); 107 | } 108 | 109 | /** 110 | * Breakpoint down rule 111 | * @param rule 112 | * @param breakpoints 113 | */ 114 | function breakpointDownRule(rule, breakpoints) { 115 | if (!rule.params) { 116 | throwRuleParamsError(rule, 'empty argument'); 117 | } 118 | if (!validBreakpoint(rule.params, breakpoints, true)) { 119 | throwRuleParamsError( 120 | rule, 121 | 'breakpoint "' + rule.params + '" is invalid' 122 | ); 123 | } 124 | const args = breakpoints[rule.params].split(' '); 125 | rule.replaceWith(mediaRule(null, args[1], rule)); 126 | } 127 | 128 | /** 129 | * Breakpoint only rule 130 | * @param rule 131 | * @param breakpoints 132 | */ 133 | function breakpointOnlyRule(rule, breakpoints) { 134 | if (!rule.params) { 135 | throwRuleParamsError(rule, 'empty argument'); 136 | } 137 | if (!validBreakpoint(rule.params, breakpoints)) { 138 | throwRuleParamsError( 139 | rule, 140 | 'breakpoint "' + rule.params + '" is invalid' 141 | ); 142 | } 143 | const args = breakpoints[rule.params].split(' '); 144 | rule.replaceWith(mediaRule(args[0], args[1], rule)); 145 | } 146 | 147 | /** 148 | * Breakpoint between rule 149 | * @param rule 150 | * @param breakpoints 151 | */ 152 | function breakpointBetweenRule(rule, breakpoints) { 153 | if (!rule.params) { 154 | throwRuleParamsError(rule, 'empty argument'); 155 | } 156 | const names = rule.params.split(' '); 157 | if (names.length !== 2) { 158 | throwRuleParamsError(rule, 'invalid argument'); 159 | } 160 | if (!validBreakpoint(names[0], breakpoints)) { 161 | throwRuleParamsError(rule, 'breakpoint "' + names[0] + '" is invalid'); 162 | } 163 | if (!validBreakpoint(names[1], breakpoints, true)) { 164 | throwRuleParamsError(rule, 'breakpoint "' + names[1] + '" is invalid'); 165 | } 166 | const argFirst = breakpoints[names[0]].split(' '); 167 | const argSecond = breakpoints[names[1]].split(' '); 168 | rule.replaceWith(mediaRule(argFirst[0], argSecond[1], rule)); 169 | } 170 | 171 | module.exports = postcss.plugin('postcss-breakpoints', function (opts) { 172 | const breakpoints = { 173 | xs: '0 543px', 174 | sm: '544px 767px', 175 | md: '768px 991px', 176 | lg: '992px 1199px', 177 | xl: '1200px' 178 | }; 179 | 180 | opts = opts || {}; 181 | opts.breakpoints = opts.breakpoints || breakpoints; 182 | opts.prefix = opts.prefix || ''; 183 | 184 | return function (root) { 185 | root.walkAtRules(function (rule) { 186 | if (rule.name === ruleName('breakpoint', opts.prefix)) { 187 | breakpointRule(rule); 188 | } 189 | if (rule.name === ruleName('breakpoint-up', opts.prefix)) { 190 | breakpointUpRule(rule, opts.breakpoints); 191 | } 192 | if (rule.name === ruleName('breakpoint-down', opts.prefix)) { 193 | breakpointDownRule(rule, opts.breakpoints); 194 | } 195 | if (rule.name === ruleName('breakpoint-only', opts.prefix)) { 196 | breakpointOnlyRule(rule, opts.breakpoints); 197 | } 198 | if (rule.name === ruleName('breakpoint-between', opts.prefix)) { 199 | breakpointBetweenRule(rule, opts.breakpoints); 200 | } 201 | }); 202 | }; 203 | }); 204 | --------------------------------------------------------------------------------