Skip to content

Commit

Permalink
✨ Add mediaPropSelector
Browse files Browse the repository at this point in the history
  • Loading branch information
@exah
exah committed Aug 3, 2018
1 parent a6254d4 commit 6e9e31f
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 128 deletions.
1 change: 1 addition & 0 deletions .documentation.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,5 @@ toc:
children:
- cssProp
- propSelector
- mediaPropSelector
- combineSelectors
125 changes: 84 additions & 41 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,12 @@
- [propSelector][74]
- [Parameters][75]
- [Examples][76]
- [combineSelectors][77]
- [mediaPropSelector][77]
- [Parameters][78]
- [Examples][79]
- [combineSelectors][80]
- [Parameters][81]
- [Examples][82]

## Creating Prop Styles and Theme

Expand All @@ -96,16 +99,16 @@ import { createPropStyles } from 'pss'
Function that accepts Object (see [PropStylesObj][9]) with keys that
represents component `prop` and the value is a `style` that will be applied.

Returns Function (see [DynamicStyleFn][80]) that you add to
Returns Function (see [DynamicStyleFn][83]) that you add to
components created with CSS-in-JS libraries.

When `theme` with `media` is provided to components, any styles can be changed
in media query with media name suffix (key in `theme.media`).

#### Parameters

- `propStyles` **[PropStylesObj][81]** (optional, default `{}`)
- `options` **{isMediaProps: [boolean][82]}** (optional, default `{isMediaProps:true}`)
- `propStyles` **[PropStylesObj][84]** (optional, default `{}`)
- `options` **{isMediaProps: [boolean][85]}** (optional, default `{isMediaProps:true}`)

#### Examples

Expand Down Expand Up @@ -245,7 +248,7 @@ Returns **ThemeObj**
Object with keys that represents component `prop` and
the value is a `style` that will be applied (or [PropStyleFn][11]).

Type: [Object][83]
Type: [Object][86]

##### Examples

Expand All @@ -265,9 +268,9 @@ Type: [Object][83]

#### PropStyleFn

[Function][84] that returns style that will be applied to component when prop is used.
[Function][87] that returns style that will be applied to component when prop is used.

Type: function (value: PropStyleVal, props: Props, mediaKey: ([string][85] | null)): StyleObj
Type: function (value: PropStyleVal, props: Props, mediaKey: ([string][88] | null)): StyleObj

##### Parameters

Expand Down Expand Up @@ -372,7 +375,7 @@ Result is props for [createPropStyles][2] with specified prop prefix.

- `cssProp` **CSSProp** — Usually is `margin` or `padding`
- `compProp` **CompPropName** — Prop name that will be used in component
- `getSpaceValue` **[Function][86]** — Custom getter from theme, default to get values from `theme.space`
- `getSpaceValue` **[Function][89]** — Custom getter from theme, default to get values from `theme.space`

##### Examples

Expand All @@ -390,7 +393,7 @@ const Box = styled.div(marginPropStyles)
<Box mg /> // .css { margin: 10px; @media (max-width: 600px) { margin: 8px } }
```

Returns **[PropStylesObj][81]**
Returns **[PropStylesObj][84]**

#### createSpaceStyle

Expand All @@ -401,7 +404,7 @@ import { createSpaceStyle } from 'pss'
Similar to [createSpaceProps][17], but creates style function instead of prop styles,
that can be used inside CSS-in-JS components with `theme` prop.

For example if `cssProp` = `margin` result is [DynamicStyleFn][80] with API:
For example if `cssProp` = `margin` result is [DynamicStyleFn][83] with API:

- `fn(step)` → `margin`
- `fn.l(step)` → `margin-left`
Expand All @@ -414,7 +417,7 @@ For example if `cssProp` = `margin` result is [DynamicStyleFn][80] with API:
##### Parameters

- `cssProp` **CSSProp** — Usually is `margin` or `padding`
- `getSpaceValue` **[Function][86]** — Custom getter from theme, default to get values from `theme.space`
- `getSpaceValue` **[Function][89]** — Custom getter from theme, default to get values from `theme.space`

##### Examples

Expand Down Expand Up @@ -544,7 +547,7 @@ import { sizeProp } from 'pss'
- `cssProp` **CSSProp** — Any CSS prop like `width`, `height`, `left`, ...
- `trueVal` **CSSVal** (optional, default `'100%'`)
- `falseVal` **CSSVal** (optional, default `0`)
- `toPx` **[boolean][82]** — Add `px` unit to `number` result (optional, default `true`)
- `toPx` **[boolean][85]** — Add `px` unit to `number` result (optional, default `true`)

##### Examples

Expand All @@ -571,7 +574,7 @@ const Box = styled.div(mySizes)
<Box l={20} r={10} /> // left: 20px; right: 10px
```

Returns **[PropStyleFn][87]**
Returns **[PropStyleFn][90]**

## Colors

Expand Down Expand Up @@ -668,7 +671,7 @@ Get color from theme and apply it to css prop.

- `cssProp` **CSSProp** — Any CSS prop like `backgroundColor`, `color`, `borderColor`, ...
- `colorKey` **ThemeKey** — Key in `theme.color` or in `theme.palette[theme.default.palette]`
- `getCssValue` **function (color: [string][85], props: Props): CSSVal** — Return customized CSS prop value (i.e. `box-shadow`, gradients) (optional, default to result color)
- `getCssValue` **function (color: [string][88], props: Props): CSSVal** — Return customized CSS prop value (i.e. `box-shadow`, gradients) (optional, default to result color)

##### Examples

Expand Down Expand Up @@ -699,7 +702,7 @@ const Box = styled.div(myColors)
<Box shadow /> // box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2)
```

Returns **[PropStyleFn][87]**
Returns **[PropStyleFn][90]**

#### themeProp

Expand All @@ -711,8 +714,8 @@ Set both `background-color` and `color` for selected `theme.palette`.

##### Parameters

- `bgKey` **[string][85]** — is key in `theme.palette[val]` for CSS `background-color` prop (optional, default `'background'`)
- `fgKey` **[string][85]** — is key in `theme.palette[val]` for CSS `color` prop (optional, default `'foreground'`)
- `bgKey` **[string][88]** — is key in `theme.palette[val]` for CSS `background-color` prop (optional, default `'background'`)
- `fgKey` **[string][88]** — is key in `theme.palette[val]` for CSS `color` prop (optional, default `'foreground'`)

##### Examples

Expand All @@ -735,7 +738,7 @@ const Box = styled.div(myColors)
<Box tm='inverted' /> // background-color: #222222; color: #fffffff
```

Returns **[PropStyleFn][87]**
Returns **[PropStyleFn][90]**

## Styles in Theme

Expand All @@ -758,7 +761,7 @@ Create prop styles using styles defined directly inside `theme[themeKey]`. Usefu

- `themeKey` **ThemeKey**
- `propName` **CompPropName?**
- `getStyle` **[Function][86]?**
- `getStyle` **[Function][89]?**

#### Examples

Expand Down Expand Up @@ -824,7 +827,7 @@ Alias **`flex`**
import { flex } from 'pss'
```

[Flex container][88] prop styles
[Flex container][91] prop styles

| prop | css | type | value | true | false |
| :-------------------------- | :---------------- | :------------------ | :---- | :-------------- | :------- |
Expand Down Expand Up @@ -859,7 +862,7 @@ Alias **`flexItem`**
import { flexItem } from 'pss'
```

[Flex item][89] prop styles
[Flex item][92] prop styles

| prop | css | type | value | true | false |
| :------- | :------------ | :---------------------------- | :---- | :------ | :--------- |
Expand Down Expand Up @@ -1155,7 +1158,7 @@ Alias **`ratio`**
import { ratio } from 'pss'
```

[Aspect Ratio Box][90] prop style
[Aspect Ratio Box][93] prop style
with pseudo elements.

#### Examples
Expand Down Expand Up @@ -1197,8 +1200,8 @@ import { base } from 'pss'
Combination of

- [spacePropStyles][14]
- [sizePropStyles][91]
- [colorPropStyles][92].
- [sizePropStyles][94]
- [colorPropStyles][95].

#### Examples

Expand Down Expand Up @@ -1291,7 +1294,7 @@ const Box = styled('div')(system)
import { cssProp } from 'pss'
```

Dynamic CSS prop like in [glamorous][93].
Dynamic CSS prop like in [glamorous][96].
You don't need it if yours CSS-in-JS library support it natively.

Simple implementation:
Expand Down Expand Up @@ -1335,7 +1338,7 @@ Wrap result of prop style in custom CSS selector.

#### Parameters

- `name` **[string][85]?** — CSS selector, like `&:first-child`, `& + &`
- `name` **[string][88]?** — CSS selector, like `&:first-child`, `& + &`
- `value` **PropStyleVal?** — prop value

#### Examples
Expand All @@ -1357,6 +1360,40 @@ import { ps } from 'pss'
.css + .css { margin-top: 10px }
```

### mediaPropSelector

Alias **`mps`**

```js
import { mps } from 'pss'
```

Wrap result of prop style in media query from `theme.media` by key.

#### Parameters

- `mediaKeyAndQuery` **[string][88]?** — key in `theme.media`
- `value` **PropStyleVal?** — prop value

#### Examples

```js
import styled from 'react-emotion'
import { mps, space } from 'pss'

const Box = styled.div(space)
```

```js
<Box mgt={mps('M', 1)} />
```

```js
const mobile = mps('M')

<Box mgt={mobile(1)} />
```

### combineSelectors

Alias **`cs`**
Expand Down Expand Up @@ -1549,36 +1586,42 @@ import { cs, ps } from 'pss'

[76]: #examples-25

[77]: #combineselectors
[77]: #mediapropselector

[78]: #parameters-10

[79]: #examples-26

[80]: DynamicStyleFn
[80]: #combineselectors

[81]: #parameters-11

[82]: #examples-27

[83]: DynamicStyleFn

[81]: #propstylesobj
[84]: #propstylesobj

[82]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[85]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[83]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[86]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[84]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[87]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[85]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[88]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[86]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[89]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[87]: #propstylefn
[90]: #propstylefn

[88]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_flex_container
[91]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_flex_container

[89]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#Properties_applied_to_flex_items
[92]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#Properties_applied_to_flex_items

[90]: https://css-tricks.com/aspect-ratio-boxes/
[93]: https://css-tricks.com/aspect-ratio-boxes/

[91]: sizePropStyles
[94]: sizePropStyles

[92]: colorPropStyles
[95]: colorPropStyles

[93]: https://glamorous.rocks
[96]: https://glamorous.rocks
15 changes: 10 additions & 5 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,21 @@ export {
export {
wrap,
wrapIfMedia,
sizeValue,
spaceValue,
skipPropValue
} from './utils/helpers'

export {
propSelector,
propSelector as ps,
combineSelectors,
combineSelectors as cs,
mediaPropSelector,
mediaPropSelector as mps,
themeSelector,
themeSelector as ts,
sizeValue,
spaceValue,
skipPropValue
} from './utils/helpers'
themeSelector as ts
} from './utils/selectors'

export {
combine,
Expand Down
Loading

0 comments on commit 6e9e31f

Please sign in to comment.