@nfront/global-styles
Version:
A package for creating independent global CSS styles, and automatically placing them at the top of the `<head>` element. Use with for instance gatsby-plugin-global-styles: https://github.com/nfront/gatsby-plugin-global-styles
1 lines • 14.3 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../src/utils/interleave.js","../src/utils/isPlainObject.js","../src/utils/empties.js","../src/utils/isFunction.js","../src/utils/hyphenateStyleName.js","../src/utils/unitless.js","../src/utils/flatten.js","../src/utils/addUnitIfNeeded.js","../src/utils/isStatelessFunction.js","../src/constructors/css.js","../src/utils/stringifyRules.js","../src/models/GlobalStyle.js","../src/utils/determineTheme.js","../src/constructors/createGlobalStyle.js","../src/utils/hashCode.js"],"sourcesContent":["export default (strings, interpolations) => {\n const result = [strings[0]];\n\n for (let i = 0, len = interpolations.length; i < len; i += 1) {\n result.push(interpolations[i], strings[i + 1]);\n }\n\n return result;\n};\n","export default x => typeof x === 'object' && x.constructor === Object;\n","export const EMPTY_ARRAY = Object.freeze([]);\nexport const EMPTY_OBJECT = Object.freeze({});\n","export default function isFunction(test) {\n return typeof test === 'function';\n}\n","/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nconst uppercasePattern = /([A-Z])/g;\nconst msPattern = /^ms-/;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n * > hyphenateStyleName('backgroundColor')\n * < \"background-color\"\n * > hyphenateStyleName('MozTransition')\n * < \"-moz-transition\"\n * > hyphenateStyleName('msTransition')\n * < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nexport default function hyphenateStyleName(string) {\n return string\n .replace(uppercasePattern, '-$1')\n .toLowerCase()\n .replace(msPattern, '-ms-');\n}\n","const unitlessCssProperties = {\n animationIterationCount: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1,\n};\n\nexport default unitlessCssProperties;\n","import isFunction from './isFunction';\nimport isStatelessFunction from './isStatelessFunction';\nimport isPlainObject from './isPlainObject';\nimport hyphenate from './hyphenateStyleName';\nimport addUnitIfNeeded from './addUnitIfNeeded';\n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nconst isFalsish = chunk => {\n return chunk === undefined || chunk === null || chunk === false || chunk === '';\n};\n\nconst objToCss = (obj, prevKey) => {\n const css = Object.keys(obj)\n .filter(key => !isFalsish(obj[key]))\n .map(key =>\n isPlainObject(obj[key]) ? objToCss(obj[key], key) : `${hyphenate(key)}: ${addUnitIfNeeded(key, obj[key])};`\n )\n .join(' ');\n return prevKey\n ? `${prevKey} {\n ${css}\n}`\n : css;\n};\n\nexport default function flatten(chunk, executionContext) {\n if (Array.isArray(chunk)) {\n const ruleSet = [];\n\n for (let i = 0, len = chunk.length, result; i < len; i += 1) {\n result = flatten(chunk[i], executionContext);\n\n if (result != null) {\n if (Array.isArray(result)) ruleSet.push(...result);\n else ruleSet.push(result);\n }\n }\n\n return ruleSet;\n }\n\n if (isFalsish(chunk)) {\n return null;\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (isStatelessFunction(chunk) && executionContext) {\n const result = chunk(executionContext);\n\n return flatten(result, executionContext);\n }\n return chunk;\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCss(chunk) : chunk.toString();\n}\n","import unitless from './unitless';\n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nexport default function addUnitIfNeeded(name, value) {\n if (value == null || typeof value === 'boolean' || value === '') {\n return '';\n }\n\n if (typeof value === 'number' && value !== 0 && !(name in unitless)) {\n return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers\n }\n\n return String(value).trim();\n}\n","export default function isStatelessFunction(test) {\n return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);\n}\n","import interleave from '../utils/interleave';\nimport isPlainObject from '../utils/isPlainObject';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport isFunction from '../utils/isFunction';\nimport flatten from '../utils/flatten';\n\nexport default function css(styles, ...interpolations) {\n if (isFunction(styles) || isPlainObject(styles)) {\n return flatten(interleave(EMPTY_ARRAY, [styles, ...interpolations]));\n }\n\n return flatten(interleave(styles, interpolations));\n}\n","const COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\n\nexport default function stringifyRules(rules, selector, prefix) {\n const flatCSS = rules.join('').replace(COMMENT_REGEX, ''); // replace JS comments\n\n const cssStr = selector && prefix ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS;\n\n return cssStr;\n}\n","import React from 'react';\nimport flatten from '../utils/flatten';\nimport stringifyRules from '../utils/stringifyRules';\n\nexport default class GlobalStyle {\n constructor(rules, elementId) {\n this.rules = rules;\n this.elementId = elementId;\n this.compiledStyles = '';\n this.ReactStyleComponent = this.ReactStyleComponent.bind(this);\n this.injectStyleInBrowser = this.injectStyleInBrowser.bind(this);\n }\n\n createStyles(props) {\n const flatCSS = flatten(this.rules, props);\n const css = stringifyRules(flatCSS, '');\n this.compiledStyles = css;\n }\n\n ReactStyleComponent(props) {\n this.createStyles(props);\n return (\n <style\n id={this.elementId}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: this.compiledStyles,\n }}\n />\n );\n }\n\n injectStyleInBrowser() {\n if (typeof document === 'undefined') return;\n // Only called by renderStyles,\n // so styles are already created\n // and compiledStyles is available.\n\n // Replace existing\n if (document.getElementById(this.elementId)) {\n const styleNode = document.getElementById(this.elementId);\n styleNode.innerHTML = this.compiledStyles;\n } else {\n const node = document.createElement('style');\n node.id = this.elementId;\n node.innerHTML = this.compiledStyles;\n const { head } = document;\n const first = head.firstChild;\n first ? head.insertBefore(node, first) : head.appendChild(node);\n }\n }\n\n renderStyles(props) {\n this.createStyles(props);\n this.injectStyleInBrowser();\n }\n}\n","export default (props, fallbackTheme) => {\n // Props should take precedence over ThemeProvider, which should take precedence over\n // defaultProps, but React automatically puts defaultProps on props.\n\n const theme = props.theme ? props.theme : fallbackTheme;\n\n return theme;\n};\n","import React from 'react';\nimport GlobalStyle from '../models/GlobalStyle';\nimport css from './css';\nimport hashCode from '../utils/hashCode';\nimport determineTheme from '../utils/determineTheme';\n\nexport default function createGlobalStyle(strings, ...interpolations) {\n const rules = css(strings, ...interpolations);\n const id = `GlobalStyle${hashCode(JSON.stringify(rules))}`;\n const style = new GlobalStyle(rules, id);\n\n const GlobalStyleComponent = props => {\n const globalStyle = style;\n const elementId = id;\n const { children } = props;\n\n if (process.env.NODE_ENV !== 'production' && React.Children.count(children)) {\n // eslint-disable-next-line no-console\n console.warn(\n `The global style component ${elementId} was given child JSX. createGlobalStyle doesn't render children.`\n );\n }\n\n const context = {\n ...props,\n };\n context.theme = determineTheme(props, { typography: { fontFamily: 'Arial' } });\n globalStyle.renderStyles(context);\n\n return <React.Fragment>{null}</React.Fragment>;\n };\n\n // Useful if we choose not to render GlobalStyleComponent,\n // and instead inject manually.\n GlobalStyleComponent.globalStyle = style;\n GlobalStyleComponent.elementId = id;\n\n return GlobalStyleComponent;\n}\n","export default function hashCode(string) {\n let hash = 0;\n let i;\n let chr;\n if (string.length === 0) return hash;\n for (i = 0; i < string.length; i += 1) {\n /* eslint no-bitwise: \"off\" */\n chr = string.charCodeAt(i);\n hash = (hash << 5) - hash + chr;\n hash |= 0; // Convert to 32bit integer\n }\n return hash;\n}\n"],"names":["strings","interpolations","result","i","len","length","push","x","constructor","Object","EMPTY_ARRAY","freeze","isFunction","test","const","uppercasePattern","msPattern","unitlessCssProperties","animationIterationCount","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","msGridRow","msGridRowSpan","msGridColumn","msGridColumnSpan","fontWeight","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","WebkitLineClamp","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","isFalsish","chunk","objToCss","obj","prevKey","css","keys","filter","key","map","isPlainObject","replace","toLowerCase","value","unitless","String","trim","join","flatten","executionContext","Array","isArray","ruleSet","prototype","isReactComponent","toString","styles","interleave","COMMENT_REGEX","GlobalStyle","rules","elementId","compiledStyles","ReactStyleComponent","this","bind","injectStyleInBrowser","createStyles","props","React","id","dangerouslySetInnerHTML","__html","document","getElementById","innerHTML","node","createElement","head","first","firstChild","insertBefore","appendChild","renderStyles","fallbackTheme","theme","createGlobalStyle","string","hash","charCodeAt","JSON","stringify","style","GlobalStyleComponent","globalStyle","process","env","NODE_ENV","Children","count","console","warn","context","determineTheme","typography","fontFamily","Fragment"],"mappings":"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"}