update config files

robinweser · Feb 17, 2017 · 3e3a7a8 · 3e3a7a8
1 parent 25dd2f3
commit 3e3a7a8
Show file tree

Hide file tree

Showing 9 changed files with 389 additions and 91 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,8 +11,8 @@
   ],
   "rules": {
     "semi": [ 2, "never" ],
-    "object-curly-newline": ["error" ],
-    "object-property-newline": ["error", {
+    "object-curly-newline": [ 2 ],
+    "object-property-newline": [ 2, {
       "allowMultiplePropertiesPerLine": false
     }],
     "comma-dangle": [ 2, "never" ],

diff --git a/.gitignore b/.gitignore
@@ -26,5 +26,6 @@ Thumbs.db
 node_modules/
 npm-debug.log
 coverage
-/modules/dynamic/prefixPropertyMap.js
-/modules/static/prefixPropertyMap.js
+/modules/dynamic/dynamicData.js
+/modules/static/staticData.js
+_book
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# inline-style-prefixer
+# Autoprefixer for Style Objects
 
 **inline-style-prefixer** adds required **vendor prefixes** to your style object. It only adds prefixes if they're actually required by evaluating the browser's `userAgent` against data from [caniuse.com](http://caniuse.com/).
 <br>
@@ -9,14 +9,13 @@ Alternatively it ships a static version that adds all available vendor prefixes.
 [![Test Coverage](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/badges/coverage.svg)](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/coverage)
 [![npm downloads](https://img.shields.io/npm/dm/inline-style-prefixer.svg)](https://img.shields.io/npm/dm/inline-style-prefixer.svg)
 ![Dependencies](https://david-dm.org/rofrischmann/inline-style-prefixer.svg)
-![Gzipped Size](https://img.shields.io/badge/gzipped-8.50kb-brightgreen.svg)
 
 ## Installation
 ```sh
-npm i --save inline-style-prefixer
+yarn add inline-style-prefixer
 ```
-Assuming you are using [npm](https://www.npmjs.com) as your package mananger you can `npm install` all packages. <br>
-Otherwise we also provide [UMD](https://github.com/umdjs/umd) builds for each package within the `dist` folder. You can easily use them via [unpkg](https://unpkg.com/).
+If you're still using npm, you may run `npm i --save inline-style-prefixer`.
+We also provide [UMD](https://github.com/umdjs/umd) builds for each package in the `dist` folder. You can easily use them via [unpkg](https://unpkg.com/).
 ```HTML
 <!-- Unminified versions -->
 <script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefixer.js"></script>
@@ -26,43 +25,51 @@ Otherwise we also provide [UMD](https://github.com/umdjs/umd) builds for each pa
 <script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefix-all.min.js"></script>
 ```
 
-# Browser Support
-Supports the major browsers with the following versions. <br>For legacy support check [custom build](#custom-build--legacy-support). We do not officially support any other browsers.<br>
-It will **only** add prefixes if a property still needs them in one of the following browser versions.This means *e.g. `border-radius`* will not be prefixed at all.
+## Browser Support
+It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.
+* Chrome: 46+
+* Android (Chrome): 46+
+* Android (Stock Browser): 4+
+* Android (UC): 9+
+* Firefox: 40+
+* Safari: 8+
+* iOS (Safari): 8+
+* Opera: 16+
+* Opera (Mini): 12+
+* IE: 11+
+* IE (Mobile): 11+
+* Edge: 12+
+
+It will **only** add prefixes if a property still needs them in one of the above mentioned versions.<br> Therefore, e.g. `border-radius` will not be prefixed at all.
+
+> **Need to support legacy browser versions?**<br>
+Don't worry - we got you covered. Check [this guide](foo).
 
-* Chrome: 30+
-* Safari: 6+
-* Firefox: 25+
-* Opera: 13+
-* IE: 9+
-* Edge 12+
-* iOS: 6+
-* Android: 4+
-* IE mobile: 9+
-* Opera mini: 5+
-* Android UC: 9+
-* Android Chrome: 30+
 
-### Fallback
-If using an unsupported browser or even run without any `userAgent`, it will use [`inline-style-prefixer/static`](docs/API.md#pro-tip) as a fallback.
+## Dynamic vs. Static
+Before using the prefixer, you have to decide which one you want to use. We ship two different versions - a dynamic and a static version.
 
+The **dynamic prefixer** evaluates the `userAgent` to identify the browser environment. Using this technique, we are able to only add the bare minimum of prefixes. Browser detection is quite accurate (~90% correctness), but yet also  	expensive which is why the package is almost 3 times as big as the static version.
+
+> It uses the static prefixer as a fallback.
+
+![Gzipped Size](https://img.shields.io/badge/gzipped-8.50kb-brightgreen.svg)
 
-## Example
 ```javascript
 import Prefixer from 'inline-style-prefixer'
 
-const styles = {
+const style = {
   transition: '200ms all linear',
   userSelect: 'none',
   boxSizing: 'border-box',
   display: 'flex',
   color: 'blue'
 }
 
-const prefixer = new Prefixer({ userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Chrome/25.0.1216.0 Safari/537.2'})
-const prefixedStyles = prefixer.prefix(styles)
+const prefixer = new Prefixer()
+const prefixedStyle = prefixer.prefix(style)
 
-// prefixedStyles === output
+// prefixedStyle === output
 const output = {
   transition: '200ms all linear',
   WebkitUserSelect: 'none',
@@ -71,35 +78,29 @@ const output = {
   color: 'blue'
 }
 ```
-`inline-style-prefixer/static`
+
+The **static prefixer**, on the other hand, adds all required prefixes according the above mentioned browser versions. Removing the browser detection makes it both smaller and fast, but also drastically increases the output.
 
 ![Gzipped Size](https://img.shields.io/badge/gzipped-2.40kb-brightgreen.svg)
 
-If you only want to use the static version, you can import it directly to reduce file size. It was once shipped as a several package [inline-style-prefix-all](https://github.com/rofrischmann/inline-style-prefix-all).
 ```javascript
 import prefixAll from 'inline-style-prefixer/static'
 
-const styles = {
+const style = {
   transition: '200ms all linear',
   boxSizing: 'border-box',
   display: 'flex',
   color: 'blue'
 }
 
-const prefixedStyles = prefixAll(styles)
+const prefixedStyle = prefixAll(style)
 
-// prefixedStyles === output
+// prefixedStyle === output
 const output = {
   WebkitTransition: '200ms all linear',
-  // Firefox dropped prefixed transition with version 16
-  // IE never supported prefixed transitions
   transition: '200ms all linear',
   MozBoxSizing: 'border-box',
-  // Firefox up to version 28 needs a prefix
-  // Others dropped prefixes out of scope
   boxSizing: 'border-box',
-  // Fallback/prefixed values get grouped in arrays
-  // The prefixer does not resolve those
   display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ]
   color: 'blue'
 }
@@ -108,19 +109,30 @@ const output = {
 ## Documentation
 If you got any issue using this prefixer, please first check the FAQ's. Most cases are already covered and provide a solid solution.
 
-* [API Reference](docs/API.md)
-* [Supported Properties](docs/Properties.md)
-* [Special Plugins](docs/Plugins.md)
-* [FAQ](docs/FAQ.md)
+* [Usage Guides]()
+* [Data Reference]()
+* [API Reference]()
+* [FAQ]()
 
-# Custom Build & Legacy Support
-You may have to create a custom build if you need older browser versions. Just modify the [config.js](config.js) file which includes all the browser version specifications.
-```sh
-npm install
-npm run build
-```
+## Community
+Here are some popular users of this library:
+
+* [Aphrodite](https://github.com/Khan/aphrodite)
+* [Fela](https://github.com/rofrischmann/fela)
+* [Glamor](https://github.com/threepointone/glamor)
+* [Material UI](https://github.com/callemall/material-ui)
+* [Radium](https://github.com/FormidableLabs/radium)
+* [react-native-web](https://github.com/necolas/react-native-web)
+* [styled-components](https://github.com/styled-components/styled-components)
+* [Styletron](https://github.com/rtsao/styletron)
+
+> PS: Feel free to add your solution!
+
+## Support
+Join us on [Gitter](https://gitter.im/rofrischmann/fela). We highly appreciate any contribution.<br>
+We also love to get feedback.
 
-# License
+## License
 **inline-style-prefixer** 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).
+Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all contributors.
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -0,0 +1,21 @@
+# Summary
+
+* [Read Me](README.md)
+* [1. Usage Guides](docs/UsageGuides.md)
+  * [1.1. Client / Server Prefixing](docs/guides/ClientServerPrefixing.md)
+  * [1.2. Resolving Array Values](docs/guides/ResolvingArrays.md)
+  * [1.3. Creating your own Prefixer](docs/guides/CustomPrefixer.md)
+  * [1.4. Creating your own prefixAll](docs/guides/CustomPrefixAll.md)
+* [2. Data Reference](docs/DataReference.md)
+  * [2.1. Supported Properties](docs/data/SupportedProperties.md)
+  * [2.2. Special Plugins](docs/data/SpecialPlugins.md)
+* [3. API Reference](docs/API.md)
+  * 3.1. inline-style-prefixer
+    * [3.1.1. Prefixer](docs/api/inline-style-prefixer/Prefixer.md)
+    * [3.1.2. createPrefixer](docs/api/inline-style-prefixer/createPrefixer.md)
+  * 3.2. inline-style-prefixer/static
+    * [3.2.1. prefixAll](docs/api/inline-style-prefixer-static/prefixAll.md)
+    * [3.2.2. createPrefixer](docs/api/inline-style-prefixer-static/createPrefixer.md)
+  * 3.3. inline-style-prefixer/generator
+    * [3.3.1. generateData](docs/api/inline-style-prefixer-generator/generateData.md)
+* [4. FAQ](docs/FAQ.md)
diff --git a/book.json b/book.json
@@ -0,0 +1,23 @@
+{
+  "gitbook": "3.1.0",
+  "title": "inline-style-prefixer",
+  "author": "Robin Frischmann <robin@rofrischmann.de>",
+  "description": "Official inline-style-prefixer documentation",
+  "language": "en",
+  "plugins": [
+    "edit-link",
+    "prism",
+    "-highlight",
+    "github",
+    "anker-enable"
+  ],
+  "pluginsConfig": {
+    "edit-link": {
+      "base": "https://github.com/rofrischmann/inline-style-prefixer/tree/master",
+      "label": "Edit This Page"
+    },
+    "github": {
+      "url": "https://github.com/rofrischmann/inline-style-prefixer/"
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -18,10 +18,11 @@
     "check": "npm run clean && npm run lint && npm test && npm run flow",
     "clean": "rimraf static dynamic generator utils dist coverage",
     "dist": "cross-env NODE_ENV=production babel-node buildPackage && cross-env NODE_ENV=development babel-node buildPackage",
+    "docs": "gitbook install && gitbook build && gh-pages -d _book",
     "flow": "flow",
-    "generate": "babel-node generateDefaultPrefixPropertyMap",
+    "generate": "babel-node generateDefaultData",
     "lint": "eslint modules",
-    "release": "npm run build && npm publish",
+    "release": "npm run build && npm publish && npm run docs",
     "test": "istanbul cover node_modules/mocha/bin/_mocha -- --opts test/_setup/mocha.opts"
   },
   "repository": "https://github.com/rofrischmann/inline-style-prefixer",
@@ -38,7 +39,7 @@
   "license": "MIT",
   "dependencies": {
     "bowser": "^1.6.0",
-    "hyphenate-style-name": "^1.0.2"
+    "css-in-js-utils": "^1.0.0"
   },
   "devDependencies": {
     "babel": "^6.5.2",
@@ -47,8 +48,8 @@
     "babel-eslint": "^7.1.1",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-class-properties": "^6.9.1",
-    "babel-preset-es2015-rollup": "^1.1.1",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-rollup": "^1.1.1",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "caniuse-api": "^1.5.2",
@@ -62,6 +63,7 @@
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
     "flow-bin": "^0.38.0",
+    "github-pages": "^3.0.2",
     "istanbul": "1.0.0-alpha.2",
     "mocha": "^2.4.5",
     "rimraf": "^2.4.2",

diff --git a/test/_setup/test-setup.js b/test/_setup/test-setup.js
@@ -1,11 +1,11 @@
 const chai = require('chai')
 const createDynamicPrefixer = require('../../modules/dynamic/createPrefixer')
-const dynamicPlugins = require('../../modules/dynamic/plugins').default
+const dynamicPlugins = require('../../modules/dynamic/plugins')
 
 const createStaticPrefixer = require('../../modules/static/createPrefixer')
-const staticPlugins = require('../../modules/static/plugins').default
+const staticPlugins = require('../../modules/static/plugins')
 
-const generator = require('../../modules/generator')
+const generateData = require('../../modules/generator')
 
 const browserList = {
   chrome: 0,
@@ -22,17 +22,22 @@ const browserList = {
   and_chr: 0
 }
 
-const fallback = createStaticPrefixer(
-  generator.generateStaticPrefixPropertyMap(browserList),
-  staticPlugins
-)
+const data = generateData(browserList)
+
+console.log(data, staticPlugins)
 
+const prefixAll = createStaticPrefixer({
+  prefixMap: data.static,
+  plugins: staticPlugins
+})
 const Prefixer = createDynamicPrefixer(
-  generator.generateDynamicPrefixPropertyMap(browserList),
-  dynamicPlugins,
-  fallback
+  {
+    prefixMap: data.dynamic,
+    plugins: dynamicPlugins
+  },
+  prefixAll
 )
 
 global.expect = chai.expect
-global.prefixAll = fallback
+global.prefixAll = prefixAll
 global.Prefixer = Prefixer
diff --git a/test/static/createPrefixer-test.js b/test/static/createPrefixer-test.js
@@ -74,17 +74,20 @@ describe('Static Prefixer', () => {
       expect(prefixAll(input)).to.eql(output)
     })
 
-    it('should resolve alternative values for all flexbox specification', () => {
-      const input = { justifyContent: 'space-around' }
-      const output = {
-        WebkitBoxPack: 'justify',
-        WebkitJustifyContent: 'space-around',
-        justifyContent: 'space-around',
-        msFlexPack: 'distribute'
+    it(
+      'should resolve alternative values for all flexbox specification',
+      () => {
+        const input = { justifyContent: 'space-around' }
+        const output = {
+          WebkitBoxPack: 'justify',
+          WebkitJustifyContent: 'space-around',
+          justifyContent: 'space-around',
+          msFlexPack: 'distribute'
+        }
+        expect(prefixAll(input)).to.eql(output)
+        expect(prefixAll(input)).to.eql(output)
       }
-      expect(prefixAll(input)).to.eql(output)
-      expect(prefixAll(input)).to.eql(output)
-    })
+    )
 
     it('should resolve flexbox variants', () => {
       const input = {
@@ -130,7 +133,15 @@ describe('Static Prefixer', () => {
 
     it('should add all flexbox display types', () => {
       const input = { display: 'flex' }
-      const output = { display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'] }
+      const output = {
+        display: [
+          '-webkit-box',
+          '-moz-box',
+          '-ms-flexbox',
+          '-webkit-flex',
+          'flex'
+        ]
+      }
       expect(prefixAll(input)).to.eql(output)
       expect(prefixAll(input)).to.eql(output)
     })
@@ -235,7 +246,14 @@ describe('Static Prefixer', () => {
 
     it('should prefix multiple array values and keep others', () => {
       const input = { width: ['min-content', '100%'] }
-      const output = { width: ['-webkit-min-content', '-moz-min-content', 'min-content', '100%'] }
+      const output = {
+        width: [
+          '-webkit-min-content',
+          '-moz-min-content',
+          'min-content',
+          '100%'
+        ]
+      }
       expect(prefixAll(input)).to.eql(output)
       expect(prefixAll(input)).to.eql(output)
     })