forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
User agent based prefixing for client and server side rendering. When rendering server-side define `navigator.userAgent` after receiving request headers but before rendering styles. A warning will be shown when attempting to use server-side rendering without defining a user agent. Client side rendering should automatically work as all modern browsers provide user agent via the navigator property.
- Loading branch information
1 parent
68baf9b
commit b12bcdd
Showing
9 changed files
with
63 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,44 @@ | ||
| const isBrowser = require('../utils/is-browser'); | ||
| import InlineStylePrefixer from 'inline-style-prefixer'; | ||
|
|
||
| const Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined; | ||
|
|
||
| //Keep track of already prefixed keys so we can skip Modernizr prefixing | ||
| let prefixedKeys = {}; | ||
| const prefixers = {}; | ||
|
|
||
| module.exports = { | ||
|
|
||
| all(styles) { | ||
| let prefixedStyle = {}; | ||
| for (let key in styles) { | ||
| prefixedStyle[this.single(key)] = styles[key]; | ||
| getPrefixer() { | ||
| let userAgent; | ||
|
|
||
| // Server-side renderer needs to supply user agent | ||
| if (typeof navigator === 'undefined') { | ||
| console.warn(`Material-UI expects the global navigator.userAgent to be defined for server-side rendering. Set this property when receiving the request headers.`) | ||
| userAgent = '*'; | ||
| } else { | ||
| userAgent = navigator.userAgent; | ||
| } | ||
| return prefixedStyle; | ||
| }, | ||
|
|
||
| set(style, key, value) { | ||
| style[this.single(key)] = value; | ||
| // Get prefixing instance for this user agent | ||
| let prefixer = prefixers[userAgent]; | ||
| // None found, create a new instance | ||
| if (!prefixer) { | ||
| prefixer = new InlineStylePrefixer(userAgent); | ||
| prefixers[userAgent] = prefixer; | ||
| } | ||
| return prefixer; | ||
| }, | ||
|
|
||
| single(key) { | ||
|
|
||
| //If a browser doesn't exist, we can't prefix with Modernizr so | ||
| //just return the key | ||
| if (!isBrowser) return key; | ||
|
|
||
| //Check if we've prefixed this key before, just return it | ||
| if (prefixedKeys.hasOwnProperty(key)) return prefixedKeys[key]; | ||
|
|
||
| //Key hasn't been prefixed yet, prefix with Modernizr | ||
| const prefKey = Modernizr.prefixed(key); | ||
|
|
||
| // Windows 7 Firefox has an issue with the implementation of Modernizr.prefixed | ||
| // and is capturing 'false' as the CSS property name instead of the non-prefixed version. | ||
| if (prefKey === false) return key; | ||
|
|
||
| //Save the key off for the future and return the prefixed key | ||
| prefixedKeys[key] = prefKey; | ||
| return prefKey; | ||
|
|
||
| all(styles) { | ||
| return this.getPrefixer().prefix(styles); | ||
| }, | ||
|
|
||
| singleHyphened(key) { | ||
| let str = this.single(key); | ||
| set(style, key, value) { | ||
| style[key] = value; | ||
| style = this.getPrefixer().prefix(style); | ||
| }, | ||
|
|
||
| return !str ? key : str.replace(/([A-Z])/g, (str, m1) => { | ||
| return '-' + m1.toLowerCase(); | ||
| }).replace(/^ms-/, '-ms-'); | ||
| getPrefix(key) { | ||
| let style = {}; | ||
| style[key] = true; | ||
| let prefixes = Object.keys(this.getPrefixer().prefix(style)); | ||
| return prefixes ? prefixes[0] : key; | ||
| }, | ||
|
|
||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters