Merge pull request #292 from rofrischmann/261-plugin-simulate

Simulation plugin

packages/fela-dom/src/server/renderToSheetList.js

@@ -7,8 +7,13 @@ const sheetMap = {
   keyframes: KEYFRAME_TYPE,
   rules: RULE_TYPE
 }
+type Sheet = {
+  css: string,
+  type: RULE_TYPE | KEYFRAME_TYPE | FONT_TYPE | STATIC_TYPE,
+  media?: string
+}
 
-export default function renderToSheetList(renderer: Object): string {
+export default function renderToSheetList(renderer: Object): Array<Sheet> {
   const sheetList = []
 
   for (const style in sheetMap) {
@@ -21,9 +26,11 @@ export default function renderToSheetList(renderer: Object): string {
   }
 
   for (const media in renderer.mediaRules) {
+    const mediaCSS = renderer.mediaRules[media]
+
     if (mediaCSS.length > 0) {
       sheetList.push({
-        css: renderer.mediaRules[media],
+        css: mediaCSS,
         type: RULE_TYPE,
         media
       })

packages/fela-monolithic/src/index.js

@@ -121,7 +121,8 @@ function useMonolithicRenderer(
     const processedStyle = processStyleWithPlugins(
       renderer,
       rule(props),
-      RULE_TYPE
+      RULE_TYPE,
+      props
     )
     return renderer._renderStyleToClassNames(processedStyle, rule)
   }

packages/fela-plugin-simulate/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Robin Frischmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/fela-plugin-simulate/README.md

@@ -0,0 +1,69 @@
+# fela-plugin-simulate
+
+
+<img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-plugin-simulate.svg"> <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-0.49kb-brightgreen.svg">
+
+This plugin can be used to quickly simulate nested style objects such as pseudo classes, media queries or attribute selectors.
+
+## Installation
+```sh
+yarn add fela-plugin-simulate
+```
+You may alternatively use `npm i --save fela-plugin-simulate`.
+
+
+## Usage
+Make sure to read the documentation on [how to use plugins](http://fela.js.org/docs/advanced/Plugins.html).
+
+```javascript
+import { createRenderer } from 'fela'
+import simulate from 'fela-plugin-simulate'
+
+const renderer = createRenderer({
+  plugins: [ simulate() ]
+})
+```
+
+## Example
+
+#### Input
+```javascript
+{
+  color: 'red',
+
+  '@media (min-height: 320px)': {
+    color: 'green',
+    backgroundColor: 'red'
+  },
+  ':hover': {
+    color: 'blue'
+  },
+  ':active': {
+    color: 'yellow'
+  }
+}
+```
+
+rendered with the following props
+```javascript
+{
+  simulate: {
+    ':hover': true,
+    ':active': false,
+    '@media (min-height: 320px)': true
+  }
+}
+```
+
+#### Output
+```javascript
+{
+  backgroundColor: 'red',
+  color: 'blue'
+}
+```
+
+## License
+Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.

packages/fela-plugin-simulate/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "fela-plugin-simulate",
+  "version": "5.0.0",
+  "description": "Fela plugin to simulate pseudo classes and media queries",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/**",
+    "es/**"
+  ],
+  "repository": "https://github.com/rofrischmann/fela/",
+  "keywords": [
+    "fela",
+    "fela-native",
+    "react-native",
+    "media query",
+    "cssinjs"
+  ],
+  "author": "Robin Frischmann",
+  "license": "MIT",
+  "dependencies": {
+    "css-in-js-utils": "^1.0.3",
+    "fela-utils": "^5.0.0"
+  }
+}

packages/fela-plugin-simulate/src/__tests__/simulate-test.js

@@ -0,0 +1,64 @@
+import simulate from '../index'
+
+describe('Simulating nested styles', () => {
+  it('should simulate pseudo classes', () => {
+    const style = {
+      width: 20,
+      ':hover': { color: 'red' },
+      ':active': { color: 'blue' }
+    }
+
+    expect(
+      simulate()(style, undefined, undefined, { simulate: { ':hover': true } })
+    ).toEqual({
+      width: 20,
+      color: 'red',
+      ':active': { color: 'blue' }
+    })
+  })
+
+  it('should simulate media queries', () => {
+    const style = {
+      width: 20,
+      ':hover': { color: 'red' },
+      '@media (min-height: 300px)': { color: 'blue' }
+    }
+
+    expect(
+      simulate()(style, undefined, undefined, {
+        simulate: {
+          '@media (min-height: 300px)': true,
+          ':hover': false
+        }
+      })
+    ).toEqual({
+      width: 20,
+      color: 'blue',
+      ':hover': { color: 'red' }
+    })
+  })
+
+  it('should simulate multiple nested styles', () => {
+    const style = {
+      width: 20,
+      ':hover': {
+        color: 'red',
+        backgroundColor: 'blue'
+      },
+      '@media (min-height: 300px)': { color: 'blue' }
+    }
+
+    expect(
+      simulate()(style, undefined, undefined, {
+        simulate: {
+          '@media (min-height: 300px)': true,
+          ':hover': true
+        }
+      })
+    ).toEqual({
+      width: 20,
+      backgroundColor: 'blue',
+      color: 'blue'
+    })
+  })
+})

packages/fela-plugin-simulate/src/index.js

@@ -0,0 +1,31 @@
+/* @flow */
+import { isObject } from 'fela-utils'
+import assignStyle from 'css-in-js-utils/lib/assignStyle'
+
+import { DOMRenderer } from '../../../flowtypes/DOMRenderer'
+import { NativeRenderer } from '../../../flowtypes/NativeRenderer'
+
+type Type = 'KEYFRAME' | 'RULE' | 'STATIC'
+function resolveSimulation(
+  style: Object,
+  type: Type,
+  renderer: DOMRenderer | NativeRenderer,
+  props: Object
+): Object {
+  if (props.simulate) {
+    for (const property in style) {
+      const value = style[property]
+
+      if (isObject(value) && props.simulate[property]) {
+        const resolvedValue = resolveSimulation(value, type, renderer, props)
+
+        assignStyle(style, resolvedValue)
+        delete style[property]
+      }
+    }
+  }
+
+  return style
+}
+
+export default () => resolveSimulation

packages/fela-utils/src/processStyleWithPlugins.js

@@ -9,13 +9,14 @@ type Type = 'RULE' | 'KEYFRAME' | 'STATIC'
 export default function processStyleWithPlugins(
   renderer: DOMRenderer | NativeRenderer,
   style: Object,
-  type: Type
+  type: Type,
+  props: Object = {}
 ) {
   if (renderer.plugins.length > 0) {
     return arrayReduce(
       renderer.plugins,
       (processedStyle, plugin) => {
-        processedStyle = plugin(processedStyle, type, renderer)
+        processedStyle = plugin(processedStyle, type, renderer, props)
         return processedStyle
       },
       style

packages/fela/src/createRenderer.js

@@ -64,7 +64,8 @@ export default function createRenderer(
       const processedStyle = processStyleWithPlugins(
         renderer,
         rule(props),
-        RULE_TYPE
+        RULE_TYPE,
+        props
       )
       return renderer._renderStyleToClassNames(processedStyle).slice(1)
     },
@@ -82,7 +83,8 @@ export default function createRenderer(
         const processedKeyframe = processStyleWithPlugins(
           renderer,
           resolvedKeyframe,
-          KEYFRAME_TYPE
+          KEYFRAME_TYPE,
+          props
         )
 
         const cssKeyframe = cssifyKeyframe(

packages/react-fela/package.json

@@ -25,6 +25,9 @@
   "peerDependencies": {
     "react": "*"
   },
+  "devDependencies": {
+    "fela-dom": "^5.0.0"
+  },
   "dependencies": {
     "fela": "^5.0.0",
     "prop-types": "^15.5.8"