Skip to content

Commit fde2c51

Browse files
robinweserrobinweser
authored
Merge pull request #748 from robinweser/plugin-responsive-value
fela-plugin-responsive-value
2 parents 4234c76 + 5720c24 commit fde2c51

5 files changed

Lines changed: 216 additions & 0 deletions

File tree

‎packages/fela-plugin-responsive-value/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Robin Frischmann
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.

‎packages/fela-plugin-responsive-value/README.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# fela-plugin-responsive-value
2+
3+
<img alt="npm version" src="https://badge.fury.io/js/fela-plugin-responsive-value.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-plugin-responsive-value.svg"> <a href="https://bundlephobia.com/result?p=fela-plugin-responsive-value@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/fela-plugin-responsive-value.svg"></a>
4+
5+
This plugin adds support for responsive values as pioneered by [styled-system](https://styled-system.com) where one passes an array of values that later resolved to respective media queries.
6+
7+
## Installation
8+
```sh
9+
yarn add fela-plugin-responsive-value
10+
```
11+
You may alternatively use `npm i --save fela-plugin-responsive-value`.
12+
13+
14+
## Usage
15+
Make sure to read the documentation on [how to use plugins](http://fela.js.org/docs/advanced/Plugins.html).
16+
17+
```javascript
18+
import { createRenderer } from 'fela'
19+
import responsiveValue from 'fela-plugin-responsive-value'
20+
21+
const renderer = createRenderer({
22+
plugins: [ responsiveValue() ]
23+
})
24+
```
25+
26+
### Configuration
27+
##### Parameters
28+
| Parameter | Value | Default | Description |
29+
| --- | --- | --- | --- |
30+
| getMediaQueries | *(Function)* |  | Resolve the list of media queries used based on the values and props |
31+
| properties | *(Object)* |  | A map of property-boolean pairs of which properties are resolved |
32+
33+
##### Example
34+
```javascript
35+
import { createRenderer } from 'fela'
36+
import responsiveValue from 'fela-plugin-responsive-value'
37+
38+
// if we have 2 values, use default and large media query
39+
// if we get 3, also use a tablet media query in between
40+
const getMediaQueries = (values, props) => {
41+
if (values.length === 2) {
42+
return ["@media (min-width: 1024px)"]
43+
}
44+
45+
return ["@media (min-width: 800px)", "@media (min-width: 1024px)"]
46+
}
47+
48+
const renderer = createRenderer({
49+
plugins: [
50+
responsiveValue(getMediaQueries, {
51+
padding: true,
52+
margin: true
53+
})
54+
]
55+
})
56+
```
57+
58+
## Example
59+
Using the above example code:
60+
61+
#### Input
62+
```javascript
63+
{
64+
margin: [0, 10]
65+
padding: [5, 10, 15]
66+
}
67+
```
68+
#### Output
69+
```javascript
70+
{
71+
margin: 0,
72+
padding: 5,
73+
"@media (min-width: 800px)": {
74+
padding: 10
75+
},
76+
"@media (min-width: 1024px)": {
77+
margin: 10,
78+
padding: 15
79+
}
80+
}
81+
```
82+
83+
## License
84+
Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
85+
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
86+
Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.

‎packages/fela-plugin-responsive-value/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "fela-plugin-responsive-value",
3+
"version": "10.8.2",
4+
"description": "Fela plugin to resolve responsive array values",
5+
"main": "lib/index.js",
6+
"module": "es/index.js",
7+
"jsnext:main": "es/index.js",
8+
"sideEffects": false,
9+
"files": [
10+
"LICENSE",
11+
"README.md",
12+
"lib/**",
13+
"es/**"
14+
],
15+
"repository": "https://github.com/rofrischmann/fela/",
16+
"keywords": [
17+
"fela",
18+
"fela-plugin",
19+
"media query",
20+
"supports",
21+
"cssinjs"
22+
],
23+
"author": "Robin Frischmann",
24+
"license": "MIT",
25+
"dependencies": {
26+
"css-in-js-utils": "^3.0.0",
27+
"fast-loops": "^1.0.0",
28+
"isobject": "^3.0.1"
29+
},
30+
"gitHead": "4edeeffc5be2e05473a52c24523dbebcd9e0ef0d"
31+
}

‎packages/fela-plugin-responsive-value/src/__tests__/responsiveValue-test.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import responsiveValue from '../index'
2+
3+
describe('Responsive value plugin', () => {
4+
it('should resolve responsive values', () => {
5+
const style = {
6+
width: [100, 200],
7+
padding: [50, 100, 200],
8+
}
9+
10+
expect(
11+
responsiveValue(
12+
values => {
13+
if (values.length === 2) {
14+
return ['@media (min-width: 1024px)']
15+
}
16+
return ['@media (min-width: 800px)', '@media (min-width: 1024px)']
17+
},
18+
{
19+
width: true,
20+
padding: true,
21+
}
22+
)(style)
23+
).toEqual({
24+
width: 100,
25+
padding: 50,
26+
'@media (min-width: 800px)': {
27+
padding: 100,
28+
},
29+
'@media (min-width: 1024px)': {
30+
width: 200,
31+
padding: 200,
32+
},
33+
})
34+
})
35+
})

‎packages/fela-plugin-responsive-value/src/index.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* @flow */
2+
import assignStyle from 'css-in-js-utils/lib/assignStyle'
3+
import arrayEach from 'fast-loops/lib/arrayEach'
4+
5+
import type { DOMRenderer } from '../../../flowtypes/DOMRenderer'
6+
import type { StyleType } from '../../../flowtypes/StyleType'
7+
8+
function resolveResponsiveValues(style, properties, getMediaQueries, props) {
9+
for (const property in style) {
10+
if (properties[property]) {
11+
const value = style[property]
12+
13+
if (Array.isArray(value)) {
14+
const mediaQueries = getMediaQueries(value, props)
15+
16+
const [defaultValue, ...mediaValues] = value
17+
style[property] = defaultValue
18+
19+
arrayEach(mediaQueries.slice(0, mediaValues.length), (query, index) => {
20+
assignStyle(style, {
21+
[query]: {
22+
[property]: mediaValues[index],
23+
},
24+
})
25+
})
26+
}
27+
}
28+
}
29+
30+
return style
31+
}
32+
33+
export default function responsiveValue(
34+
getMediaQueries: Function,
35+
properties: Object = {}
36+
) {
37+
return (
38+
style: Object,
39+
type: StyleType,
40+
renderer: DOMRenderer,
41+
props: Object
42+
) => resolveResponsiveValues(style, properties, getMediaQueries, props)
43+
}

0 commit comments

Comments
 (0)
⚡