1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 2× 2× 1× 2× 1× 2× 1× 1× 1× 1× 1× 1× 2× 1× | import buildStylesheet from './utils/build-stylesheet' import buildSelector from './utils/build-selector' import buildKeyframe from './utils/build-keyframe' import buildFontFace from './utils/build-font-face' const style = document.createElement('style') style.dataset.stylord = '' document.head.appendChild(style) /** * Create a stylesheet and inject it to the head of the application. * @param {Object} rules - CSS rules to be rendered. * @returns {Object} the class names of the css modules created. * @example * // returns {modal: 'modal_hgdfgf', button: 'button_guyhg'} * createStyles({ * modal: { * width: '100%' * }, * button: { * borderRadius: '2px' * } * }) */ export const createStyles = rules => { const styles = Object.keys(rules) .map(rule => ({ componentName: rule, rule: rules[rule], className: buildSelector(rule, rules[rule]) })) .map(({className, rule, componentName}) => ({ componentName, className, rule: buildStylesheet(className, rule) })) const modules = styles.reduce( (previous, current) => ({ ...previous, [current.componentName]: current.className }), {} ) const stylesheet = styles.reduce((previous, current) => { return previous + current.rule }, '') style.appendChild(document.createTextNode(stylesheet)) return modules } /** * Create a keyframe animation and inject it to the head of the application. * @param {Object} rules - CSS keyframe to be create. * @returns {Object} the names of the keyframes created. * @example * // returns {fade: 'fade_hgdfgf'} * stylord({ * fade: { * from: { * opacity: 1 * }, * to: { * opacity: 0 * } * } * }) */ export const createKeyframes = rules => { const keyframes = Object.keys(rules) .map(rule => ({ steps: rules[rule], keyframe: rule, animationName: buildSelector(rule, rules[rule]) })) .map(({keyframe, steps, animationName}) => ({ animationName, keyframe, rule: buildKeyframe(animationName, steps) })) const modules = keyframes.reduce( (previous, current) => ({ ...previous, [current.keyframe]: current.animationName }), {} ) const stylesheet = keyframes.reduce((previous, current) => { return previous + current.rule }, '') style.appendChild(document.createTextNode(stylesheet)) return modules } /** * Create a font-face and inject it to the head of the application. * @param {Object} rules - CSS font-face rules to be rendered. * @example * createFontFace({ * fontFamily: 'MyHelvetica', * src: 'local("Helvetica Neue Bold"), url(MgOpenModernaBold.ttf)', * fontWeight: 'bold' * }) */ export const createFontFace = rules => { style.appendChild(document.createTextNode(buildFontFace(rules))) } /** * Create a global css and inject it to the head of the application. * @param {Object} rules - CSS global rules to be rendered. * @example * createGlobals({ * '*': { * border: 0, * boxSizing: 'inherit', * margin: 0, * padding: 0, * outline: 0, * verticalAlign: 'baseline' * }, * body: { * boxSizing: 'border-box', * lineHeight: 1.5 * } * }) */ export const createGlobals = rules => { const globalStyles = Object.keys(rules) .map(rule => buildStylesheet(rule, rules[rule], true)) .join('') style.appendChild(document.createTextNode(globalStyles)) } |