Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
fela - npm Package Compare versions
Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3
839
dist/fela.js
@@ -1,719 +0,182 @@ | ||
| (function webpackUniversalModuleDefinition(root, factory) { | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define([], factory); | ||
| else if(typeof exports === 'object') | ||
| exports["Fela"] = factory(); | ||
| else | ||
| root["Fela"] = factory(); | ||
| })(this, function() { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global.Fela = factory()); | ||
| }(this, function () { 'use strict'; | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| var babelHelpers = {}; | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) | ||
| /******/ return installedModules[moduleId].exports; | ||
| babelHelpers.classCallCheck = function (instance, Constructor) { | ||
| if (!(instance instanceof Constructor)) { | ||
| throw new TypeError("Cannot call a class as a function"); | ||
| } | ||
| }; | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ exports: {}, | ||
| /******/ id: moduleId, | ||
| /******/ loaded: false | ||
| /******/ }; | ||
| babelHelpers.createClass = function () { | ||
| function defineProperties(target, props) { | ||
| for (var i = 0; i < props.length; i++) { | ||
| var descriptor = props[i]; | ||
| descriptor.enumerable = descriptor.enumerable || false; | ||
| descriptor.configurable = true; | ||
| if ("value" in descriptor) descriptor.writable = true; | ||
| Object.defineProperty(target, descriptor.key, descriptor); | ||
| } | ||
| } | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| return function (Constructor, protoProps, staticProps) { | ||
| if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| }; | ||
| }(); | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.loaded = true; | ||
| babelHelpers; | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| var Selector = function () { | ||
| /** | ||
| * Selector is a dynamic style container | ||
| * | ||
| * @param {Function} composer - values to resolve dynamic styles | ||
| * @param {Object} mediaCompose - set of additional media composer | ||
| */ | ||
| function Selector(composer) { | ||
| var mediaComposer = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; | ||
| babelHelpers.classCallCheck(this, Selector); | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| this.composer = composer; | ||
| this.mediaComposer = mediaComposer; | ||
| // safe media strings to iterate later on | ||
| this.mediaStrings = Object.keys(mediaComposer); | ||
| } | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /** | ||
| * renders the styles with given set of props | ||
| * and pipes those styles through a set of plugins | ||
| * | ||
| * @param {Object?} props - values to resolve dynamic styles | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {Object} rendered selector including classNames, styles and media styles | ||
| */ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(0); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ([ | ||
| /* 0 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| babelHelpers.createClass(Selector, [{ | ||
| key: "render", | ||
| value: function render() { | ||
| var _this = this; | ||
| 'use strict'; | ||
| var props = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | ||
| var plugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| // renders styles by resolving and processing them | ||
| var styles = this._resolve(props, plugins); | ||
| var mediaStyles = this.mediaStrings.reduce(function (output, media) { | ||
| output.set(media, _this._resolve(props, plugins, media)); | ||
| return output; | ||
| }, new Map()); | ||
| var _Selector = __webpack_require__(1); | ||
| return { mediaStyles: mediaStyles, styles: styles }; | ||
| } | ||
| var _Selector2 = _interopRequireDefault(_Selector); | ||
| /** | ||
| * executes each plugin using a predefined plugin interface | ||
| * | ||
| * @param {Object} pluginInterface - interface containing relevant processing data | ||
| * @return {Object} processed and validated styles | ||
| */ | ||
| var _DOMRenderer = __webpack_require__(3); | ||
| }, { | ||
| key: "_process", | ||
| value: function _process(pluginInterface) { | ||
| var plugins = pluginInterface.plugins; | ||
| var styles = pluginInterface.styles; | ||
| var _enhanceWithPlugins = __webpack_require__(2); | ||
| // pipes each plugin by passes the plugin interface | ||
| // NOTE: as the styles are passed directly they're editable | ||
| // therefore the plugin order might matter | ||
| var _enhanceWithPlugins2 = _interopRequireDefault(_enhanceWithPlugins); | ||
| plugins.forEach(function (plugin) { | ||
| return plugin(pluginInterface); | ||
| }); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| return styles; | ||
| } | ||
| exports.default = { | ||
| Selector: _Selector2.default, | ||
| /** | ||
| * resolves and processes styles | ||
| * | ||
| * @param {Object} props - values to resolve dynamic styles | ||
| * @param {Function[]} plugins - array of plugins to process styles | ||
| * @param {string?} media - media string referencing media styles | ||
| * @return {Object} processed and resolved styles | ||
| */ | ||
| render: _DOMRenderer.render, | ||
| clear: _DOMRenderer.clear, | ||
| enhanceWithPlugins: _enhanceWithPlugins2.default | ||
| }; | ||
| module.exports = exports['default']; | ||
| }, { | ||
| key: "_resolve", | ||
| value: function _resolve(props, plugins, media) { | ||
| var composer = this._getComposer(media); | ||
| var styles = composer(props); | ||
| /***/ }, | ||
| /* 1 */ | ||
| /***/ function(module, exports) { | ||
| var pluginInterface = { | ||
| plugins: plugins, | ||
| process: this._process, | ||
| styles: styles, | ||
| media: media, | ||
| props: props | ||
| }; | ||
| "use strict"; | ||
| return this._process(pluginInterface); | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| /** | ||
| * evaluates the expected composer for style resolving | ||
| * | ||
| * @param {string?} media - media string referencing a media composer | ||
| * @return {Function} expected style composer | ||
| */ | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| }, { | ||
| key: "_getComposer", | ||
| value: function _getComposer(media) { | ||
| // if a composer with the given media | ||
| // string exists use it | ||
| if (this.mediaComposer[media]) { | ||
| return this.mediaComposer[media]; | ||
| } | ||
| // use the basic composer by default | ||
| return this.composer; | ||
| } | ||
| }]); | ||
| return Selector; | ||
| }(); | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| /** | ||
| * Enhances a Selector to automatically render with a set of plugins | ||
| * @param {Selector} selector - selector that gets enhanced | ||
| * @param {function[]} plugins - array of plugin functions | ||
| * @return enhanced selector | ||
| */ | ||
| function enhanceWithPlugins(selector, plugins) { | ||
| // cache the initial render function to later refer to | ||
| // it would else get overwritten directly | ||
| var existingRenderFunction = selector.render.bind(selector); | ||
| selector.render = function (props) { | ||
| var additionalPlugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; | ||
| var Selector = function () { | ||
| /** | ||
| * Selector is a dynamic style container | ||
| * | ||
| * @param {Function} composer - values to resolve dynamic styles | ||
| * @param {Object} mediaCompose - set of additional media composer | ||
| */ | ||
| // concat enhancing plugins with additional plugins to allow multiple | ||
| // enhancing cycles without loosing the ability to render with additional plugins | ||
| return existingRenderFunction(props, plugins.concat(additionalPlugins)); | ||
| }; | ||
| function Selector(composer) { | ||
| var mediaComposer = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; | ||
| return selector; | ||
| } | ||
| _classCallCheck(this, Selector); | ||
| var fela = { | ||
| Selector: Selector, | ||
| enhanceWithPlugins: enhanceWithPlugins | ||
| }; | ||
| this.composer = composer; | ||
| this.mediaComposer = mediaComposer; | ||
| // safe media strings to iterate later on | ||
| this.mediaStrings = Object.keys(mediaComposer); | ||
| } | ||
| return fela; | ||
| /** | ||
| * renders the styles with given set of props | ||
| * and pipes those styles through a set of plugins | ||
| * | ||
| * @param {Object?} props - values to resolve dynamic styles | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {Object} rendered selector including classNames, styles and media styles | ||
| */ | ||
| _createClass(Selector, [{ | ||
| key: "render", | ||
| value: function render() { | ||
| var _this = this; | ||
| var props = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | ||
| var plugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; | ||
| // renders styles by resolving and processing them | ||
| var styles = this._resolve(props, plugins); | ||
| var mediaStyles = this.mediaStrings.reduce(function (output, media) { | ||
| output.set(media, _this._resolve(props, plugins, media)); | ||
| return output; | ||
| }, new Map()); | ||
| return { mediaStyles: mediaStyles, styles: styles }; | ||
| } | ||
| /** | ||
| * executes each plugin using a predefined plugin interface | ||
| * | ||
| * @param {Object} pluginInterface - interface containing relevant processing data | ||
| * @return {Object} processed and validated styles | ||
| */ | ||
| }, { | ||
| key: "_process", | ||
| value: function _process(pluginInterface) { | ||
| var plugins = pluginInterface.plugins; | ||
| var styles = pluginInterface.styles; | ||
| // pipes each plugin by passes the plugin interface | ||
| // NOTE: as the styles are passed directly they're editable | ||
| // therefore the plugin order might matter | ||
| plugins.forEach(function (plugin) { | ||
| return plugin(pluginInterface); | ||
| }); | ||
| return styles; | ||
| } | ||
| /** | ||
| * resolves and processes styles | ||
| * | ||
| * @param {Object} props - values to resolve dynamic styles | ||
| * @param {Function[]} plugins - array of plugins to process styles | ||
| * @param {string?} media - media string referencing media styles | ||
| * @return {Object} processed and resolved styles | ||
| */ | ||
| }, { | ||
| key: "_resolve", | ||
| value: function _resolve(props, plugins, media) { | ||
| var composer = this._getComposer(media); | ||
| var styles = composer(props); | ||
| var pluginInterface = { | ||
| plugins: plugins, | ||
| process: this._process, | ||
| styles: styles, | ||
| media: media, | ||
| props: props | ||
| }; | ||
| return this._process(pluginInterface); | ||
| } | ||
| /** | ||
| * evaluates the expected composer for style resolving | ||
| * | ||
| * @param {string?} media - media string referencing a media composer | ||
| * @return {Function} expected style composer | ||
| */ | ||
| }, { | ||
| key: "_getComposer", | ||
| value: function _getComposer(media) { | ||
| // if a composer with the given media | ||
| // string exists use it | ||
| if (this.mediaComposer[media]) { | ||
| return this.mediaComposer[media]; | ||
| } | ||
| // use the basic composer by default | ||
| return this.composer; | ||
| } | ||
| }]); | ||
| return Selector; | ||
| }(); | ||
| exports.default = Selector; | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = enhanceWithPlugins; | ||
| /** | ||
| * Enhances a Selector to automatically render with a set of plugins | ||
| * @param {Selector} selector - selector that gets enhanced | ||
| * @param {function[]} plugins - array of plugin functions | ||
| * @return enhanced selector | ||
| */ | ||
| function enhanceWithPlugins(selector, plugins) { | ||
| // cache the initial render function to later refer to | ||
| // it would else get overwritten directly | ||
| var existingRenderFunction = selector.render.bind(selector); | ||
| selector.render = function (props) { | ||
| var additionalPlugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; | ||
| // concat enhancing plugins with additional plugins to allow multiple | ||
| // enhancing cycles without loosing the ability to render with additional plugins | ||
| return existingRenderFunction(props, plugins.concat(additionalPlugins)); | ||
| }; | ||
| return selector; | ||
| } | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 3 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _StyleSheet = __webpack_require__(4); | ||
| var _StyleSheet2 = _interopRequireDefault(_StyleSheet); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var NODE_TYPE = 1; | ||
| var NODE_NAME = 'STYLE'; | ||
| // initializes a global mapping to map each node | ||
| // to a different stylesheet to prevent collision | ||
| // allows the use of multiple splitted stylesheets | ||
| var nodeMap = new Map(); | ||
| exports.default = { | ||
| /** | ||
| * renders a Selector variation of props into a DOM node | ||
| * | ||
| * @param {node} node - DOM node which gets rendered into | ||
| * @param {Selector} selector - Selector instance that is rendered | ||
| * @param {Object?} props - list of props to render | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {string} className reference of the rendered selector | ||
| */ | ||
| render: function render(node, selector, props, plugins) { | ||
| // Check if the passed node is a valid element node which allows | ||
| // setting the `textContent` property to update the node's content | ||
| if (node.nodeType !== NODE_TYPE || node.textContent === undefined) { | ||
| console.error('You need to specify a valid element node (nodeType = 1) to render into.'); // eslint-disable-line | ||
| return false; | ||
| } | ||
| // TODO: DEV-MODE | ||
| // In dev-mode we should allow using elements other than <style> as | ||
| // one might want to render the CSS markup into a visible node to be able to | ||
| // validate and observe the styles on runtime | ||
| if (node.nodeName !== NODE_NAME) { | ||
| console.warn('You are using a node other than `<style>`. Your styles might not get applied correctly.'); // eslint-disable-line | ||
| } | ||
| // references a new stylesheet for new nodes | ||
| if (!nodeMap.has(node)) { | ||
| var sheet = new _StyleSheet2.default(); | ||
| sheet.subscribe(function (css) { | ||
| return node.textContent = css; | ||
| }); | ||
| nodeMap.set(node, sheet); | ||
| } | ||
| var stylesheet = nodeMap.get(node); | ||
| // renders the passed selector variation into the stylesheet which | ||
| // adds the variation to the cache and updates the DOM automatically | ||
| // if the variation has already been added it will do nothing but return | ||
| // the cached className to reference the mounted CSS selector | ||
| return stylesheet._renderSelectorVariation(selector, props, plugins); | ||
| }, | ||
| /** | ||
| * clears the stylesheet associated with a DOM node | ||
| * | ||
| * @param {node} node - DOM node which gets cleared | ||
| */ | ||
| clear: function clear(node) { | ||
| if (!nodeMap.has(node)) { | ||
| console.error('You are trying to clean a node which has never been rendered to before.'); // eslint-disable-line | ||
| return false; | ||
| } | ||
| nodeMap.get(node).clear(); | ||
| node.textContent = ''; | ||
| } | ||
| }; | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 4 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _cssifyObject = __webpack_require__(5); | ||
| var _cssifyObject2 = _interopRequireDefault(_cssifyObject); | ||
| var _generateContentHash = __webpack_require__(6); | ||
| var _generateContentHash2 = _interopRequireDefault(_generateContentHash); | ||
| var _sortedStringify = __webpack_require__(7); | ||
| var _sortedStringify2 = _interopRequireDefault(_sortedStringify); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var StyleSheet = function () { | ||
| /** | ||
| * StyleSheet is a low-level Selector container | ||
| */ | ||
| function StyleSheet() { | ||
| _classCallCheck(this, StyleSheet); | ||
| this.listeners = new Set(); | ||
| this._init(); | ||
| } | ||
| /** | ||
| * clears the sheet's cache but keeps all listeners | ||
| */ | ||
| _createClass(StyleSheet, [{ | ||
| key: 'clear', | ||
| value: function clear() { | ||
| this._init(); | ||
| } | ||
| /** | ||
| * renders all cached selector styles into a single valid CSS string | ||
| * clusters media query styles into groups to reduce output size | ||
| */ | ||
| }, { | ||
| key: 'renderToString', | ||
| value: function renderToString() { | ||
| var _this = this; | ||
| var css = this._renderCache(this.cache); | ||
| this.mediaCache.forEach(function (cache, media) { | ||
| css += _this._renderMediaQuery(media, _this._renderCache(cache)); | ||
| }); | ||
| return css; | ||
| } | ||
| /** | ||
| * Adds a new subscription to get notified on every rerender | ||
| * | ||
| * @param {Function} callback - callback function which will be executed | ||
| * @return {Object} equivalent unsubscribe method | ||
| */ | ||
| }, { | ||
| key: 'subscribe', | ||
| value: function subscribe(callback) { | ||
| var _this2 = this; | ||
| this.listeners.add(callback); | ||
| return { | ||
| unsubscribe: function unsubscribe() { | ||
| return _this2.listeners.delete(callback); | ||
| } | ||
| }; | ||
| } | ||
| /** | ||
| * calls each listener with the current CSS markup of all caches | ||
| * gets only called if the markup actually changes | ||
| * | ||
| * @param {Function} callback - callback function which will be executed | ||
| * @return {Object} equivalent unsubscribe method | ||
| */ | ||
| }, { | ||
| key: '_emitChange', | ||
| value: function _emitChange() { | ||
| var css = this.renderToString(); | ||
| this.listeners.forEach(function (listener) { | ||
| return listener(css); | ||
| }); | ||
| } | ||
| /** | ||
| * initializes the stylesheet by setting up the caches | ||
| */ | ||
| }, { | ||
| key: '_init', | ||
| value: function _init() { | ||
| this.cache = new Map(); | ||
| this.mediaCache = new Map(); | ||
| this.ids = new Map(); | ||
| this._counter = -1; | ||
| } | ||
| /** | ||
| * renders a new selector variation and caches the result | ||
| * | ||
| * @param {Selector} selector - Selector which gets rendered | ||
| * @param {Object?} props - properties used to render | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {string} className to reference the rendered selector | ||
| */ | ||
| }, { | ||
| key: '_renderSelectorVariation', | ||
| value: function _renderSelectorVariation(selector, props, plugins) { | ||
| var _this3 = this; | ||
| // rendering a Selector for the first time | ||
| // will create cache entries and an ID reference | ||
| if (!this.cache.has(selector)) { | ||
| this.ids.set(selector, ++this._counter); | ||
| this.cache.set(selector, new Map()); | ||
| // iterate all used media strings to create | ||
| // selector caches for each media as well | ||
| selector.mediaStrings.forEach(function (media) { | ||
| if (!_this3.mediaCache.has(media)) { | ||
| _this3.mediaCache.set(media, new Map()); | ||
| } | ||
| _this3.mediaCache.get(media).set(selector, new Map()); | ||
| }); | ||
| } | ||
| var cachedSelector = this.cache.get(selector); | ||
| var propsReference = this._generatePropsReference(props); | ||
| // only if the cached selector has not already been rendered | ||
| // with a specific set of properties it actually renders | ||
| if (!cachedSelector.has(propsReference)) { | ||
| var _selector$render = selector.render(props, plugins); | ||
| var styles = _selector$render.styles; | ||
| var mediaStyles = _selector$render.mediaStyles; | ||
| // cache the rendered output for future usage | ||
| cachedSelector.set(propsReference, styles); | ||
| mediaStyles.forEach(function (styles, media) { | ||
| _this3.mediaCache.get(media).get(selector).set(propsReference, styles); | ||
| }); | ||
| // emit changes as the styles stack changed | ||
| this._emitChange(); | ||
| } | ||
| // uses the reference ID and the props to generate an unique className | ||
| return this._renderClassName(this.ids.get(selector), propsReference); | ||
| } | ||
| /** | ||
| * generates an unique reference id by content hashing props | ||
| * | ||
| * @param {Object} props - props that get hashed | ||
| * @return {string} reference - unique props reference | ||
| */ | ||
| }, { | ||
| key: '_generatePropsReference', | ||
| value: function _generatePropsReference(props) { | ||
| return (0, _generateContentHash2.default)((0, _sortedStringify2.default)(props)); | ||
| } | ||
| /** | ||
| * generates an unique className using a Selectors reference ID | ||
| * as well as a content hash of the passed props | ||
| * | ||
| * @param {number} id - Selectors reference ID stored within the stylesheet | ||
| * @param {strng} reference - generated props reference | ||
| * @return {string} className - unique className reference | ||
| */ | ||
| }, { | ||
| key: '_renderClassName', | ||
| value: function _renderClassName(id, reference) { | ||
| return 'c' + id + '-' + reference; | ||
| } | ||
| /** | ||
| * renders a single ruleset into a CSS string | ||
| * | ||
| * @param {string} className - rendered selector | ||
| * @param {Object} styles - style declarations | ||
| * @return {string} valid selector CSS string | ||
| */ | ||
| }, { | ||
| key: '_renderSelector', | ||
| value: function _renderSelector(className, styles) { | ||
| return '.' + className + '{' + (0, _cssifyObject2.default)(styles) + '}'; | ||
| } | ||
| /** | ||
| * renders a set of media styles into a CSS string | ||
| * | ||
| * @param {string} media - media string | ||
| * @param {string} selectors - CSS string of all selectors | ||
| * @return {string} valid media query CSS string | ||
| */ | ||
| }, { | ||
| key: '_renderMediaQuery', | ||
| value: function _renderMediaQuery(media, selectors) { | ||
| return '@media(' + media + '){' + selectors + '}'; | ||
| } | ||
| /** | ||
| * renders a whole cache into a CSS string | ||
| * clusters media queries into single @media groups | ||
| * | ||
| * @param {Map} cache - cache including styles and media styles | ||
| * @return {string} valid CSS string | ||
| */ | ||
| }, { | ||
| key: '_renderCache', | ||
| value: function _renderCache(cache) { | ||
| var _this4 = this; | ||
| var css = ''; | ||
| cache.forEach(function (variation, selector) { | ||
| var id = _this4.ids.get(selector); | ||
| variation.forEach(function (styles, propsReference) { | ||
| var className = _this4._renderClassName(id, propsReference); | ||
| css += _this4._renderSelector(className, styles); | ||
| }); | ||
| }); | ||
| return css; | ||
| } | ||
| }]); | ||
| return StyleSheet; | ||
| }(); | ||
| exports.default = StyleSheet; | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 5 */ | ||
| /***/ function(module, exports) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = cssifyObject; | ||
| /** | ||
| * converts camel cased to dash cased properties | ||
| * | ||
| * @param {string} property - camel cased CSS property | ||
| * @returns {string} dash cased CSS property | ||
| */ | ||
| function camelToDashCase(property) { | ||
| return property.replace(/([a-z]|^)([A-Z])/g, function (match, p1, p2) { | ||
| return p1 + '-' + p2.toLowerCase(); | ||
| }).replace('ms-', '-ms-'); | ||
| } | ||
| /** | ||
| * generates a valid CSS string containing styles | ||
| * | ||
| * @param {Object} styles - object containing CSS declarations | ||
| * @returns {string} valid CSS string with dash cased properties | ||
| */ | ||
| function cssifyObject(styles) { | ||
| return Object.keys(styles).reduce(function (css, prop) { | ||
| // prevents the semicolon after | ||
| // the last rule declaration | ||
| if (css.length > 0) { | ||
| css += ';'; | ||
| } | ||
| css += camelToDashCase(prop) + ':' + styles[prop]; | ||
| return css; | ||
| }, ''); | ||
| } | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 6 */ | ||
| /***/ function(module, exports) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = generateHash; | ||
| /** | ||
| * generates a hashcode from a string | ||
| * taken from http://stackoverflow.com/a/7616484 | ||
| * | ||
| * @param {string} str - str used to generate the unique hash code | ||
| * @return {string} compressed content hash | ||
| */ | ||
| function generateHash(str) { | ||
| var hash = 0; | ||
| var iterator = 0; | ||
| var char = void 0; | ||
| var length = str.length; | ||
| // return a `s` for empty strings | ||
| // to symbolize `static` | ||
| if (length === 0) { | ||
| return 's'; | ||
| } | ||
| for (; iterator < length; ++iterator) { | ||
| char = str.charCodeAt(iterator); | ||
| hash = (hash << 5) - hash + char; | ||
| hash |= 0; | ||
| } | ||
| return hash.toString(36); | ||
| } | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 7 */ | ||
| /***/ function(module, exports) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = sortedStringify; | ||
| /** | ||
| * stringifies an object without any special character | ||
| * uses a sort version of the obj to get same hash codes | ||
| * | ||
| * @param {Object} obj - obj that gets stringified | ||
| * @return {string} stringyfied sorted object | ||
| */ | ||
| function sortedStringify(obj) { | ||
| if (obj === undefined) { | ||
| return ''; | ||
| } | ||
| return Object.keys(obj).sort().reduce(function (str, prop) { | ||
| // only concatenate property and value | ||
| // without any special characters | ||
| str += prop + obj[prop]; | ||
| return str; | ||
| }, ''); | ||
| } | ||
| module.exports = exports['default']; | ||
| /***/ } | ||
| /******/ ]) | ||
| }); | ||
| ; | ||
| })); | ||
| //# sourceMappingURL=fela.js.map |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Fela=t():e.Fela=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(1),i=n(o),u=r(3),a=r(2),s=n(a);t.default={Selector:i.default,render:u.render,clear:u.clear,enhanceWithPlugins:s.default},e.exports=t.default},function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;t.length>r;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r(this,e),this.composer=t,this.mediaComposer=n,this.mediaStrings=Object.keys(n)}return n(e,[{key:"render",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=this._resolve(t,r),o=this.mediaStrings.reduce(function(n,o){return n.set(o,e._resolve(t,r,o)),n},new Map);return{mediaStyles:o,styles:n}}},{key:"_process",value:function(e){var t=e.plugins,r=e.styles;return t.forEach(function(t){return t(e)}),r}},{key:"_resolve",value:function(e,t,r){var n=this._getComposer(r),o=n(e),i={plugins:t,process:this._process,styles:o,media:r,props:e};return this._process(i)}},{key:"_getComposer",value:function(e){return this.mediaComposer[e]?this.mediaComposer[e]:this.composer}}]),e}();t.default=o,e.exports=t.default},function(e,t){"use strict";function r(e,t){var r=e.render.bind(e);return e.render=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return r(e,t.concat(n))},e}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(4),i=n(o),u=1,a="STYLE",s=new Map;t.default={render:function(e,t,r,n){if(e.nodeType!==u||void 0===e.textContent)return console.error("You need to specify a valid element node (nodeType = 1) to render into."),!1;if(e.nodeName!==a&&console.warn("You are using a node other than `<style>`. Your styles might not get applied correctly."),!s.has(e)){var o=new i.default;o.subscribe(function(t){return e.textContent=t}),s.set(e,o)}var c=s.get(e);return c._renderSelectorVariation(t,r,n)},clear:function(e){return s.has(e)?(s.get(e).clear(),void(e.textContent="")):(console.error("You are trying to clean a node which has never been rendered to before."),!1)}},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;t.length>r;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(5),a=n(u),s=r(6),c=n(s),f=r(7),l=n(f),d=function(){function e(){o(this,e),this.listeners=new Set,this._init()}return i(e,[{key:"clear",value:function(){this._init()}},{key:"renderToString",value:function(){var e=this,t=this._renderCache(this.cache);return this.mediaCache.forEach(function(r,n){t+=e._renderMediaQuery(n,e._renderCache(r))}),t}},{key:"subscribe",value:function(e){var t=this;return this.listeners.add(e),{unsubscribe:function(){return t.listeners.delete(e)}}}},{key:"_emitChange",value:function(){var e=this.renderToString();this.listeners.forEach(function(t){return t(e)})}},{key:"_init",value:function(){this.cache=new Map,this.mediaCache=new Map,this.ids=new Map,this._counter=-1}},{key:"_renderSelectorVariation",value:function(e,t,r){var n=this;this.cache.has(e)||(this.ids.set(e,++this._counter),this.cache.set(e,new Map),e.mediaStrings.forEach(function(t){n.mediaCache.has(t)||n.mediaCache.set(t,new Map),n.mediaCache.get(t).set(e,new Map)}));var o=this.cache.get(e),i=this._generatePropsReference(t);if(!o.has(i)){var u=e.render(t,r),a=u.styles,s=u.mediaStyles;o.set(i,a),s.forEach(function(t,r){n.mediaCache.get(r).get(e).set(i,t)}),this._emitChange()}return this._renderClassName(this.ids.get(e),i)}},{key:"_generatePropsReference",value:function(e){return(0,c.default)((0,l.default)(e))}},{key:"_renderClassName",value:function(e,t){return"c"+e+"-"+t}},{key:"_renderSelector",value:function(e,t){return"."+e+"{"+(0,a.default)(t)+"}"}},{key:"_renderMediaQuery",value:function(e,t){return"@media("+e+"){"+t+"}"}},{key:"_renderCache",value:function(e){var t=this,r="";return e.forEach(function(e,n){var o=t.ids.get(n);e.forEach(function(e,n){var i=t._renderClassName(o,n);r+=t._renderSelector(i,e)})}),r}}]),e}();t.default=d,e.exports=t.default},function(e,t){"use strict";function r(e){return e.replace(/([a-z]|^)([A-Z])/g,function(e,t,r){return t+"-"+r.toLowerCase()}).replace("ms-","-ms-")}function n(e){return Object.keys(e).reduce(function(t,n){return t.length>0&&(t+=";"),t+=r(n)+":"+e[n]},"")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t){"use strict";function r(e){var t=0,r=0,n=void 0,o=e.length;if(0===o)return"s";for(;o>r;++r)n=e.charCodeAt(r),t=(t<<5)-t+n,t|=0;return t.toString(36)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e){return void 0===e?"":Object.keys(e).sort().reduce(function(t,r){return t+=r+e[r]},"")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default}])}); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.Fela=n()}(this,function(){"use strict";function e(e,n){var t=e.render.bind(e);return e.render=function(e){var r=arguments.length<=1||void 0===arguments[1]?[]:arguments[1];return t(e,n.concat(r))},e}var n={};n.classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},n.createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}();var t=function(){function e(t){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];n.classCallCheck(this,e),this.composer=t,this.mediaComposer=r,this.mediaStrings=Object.keys(r)}return n.createClass(e,[{key:"render",value:function(){var e=this,n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=arguments.length<=1||void 0===arguments[1]?[]:arguments[1],r=this._resolve(n,t),o=this.mediaStrings.reduce(function(r,o){return r.set(o,e._resolve(n,t,o)),r},new Map);return{mediaStyles:o,styles:r}}},{key:"_process",value:function(e){var n=e.plugins,t=e.styles;return n.forEach(function(n){return n(e)}),t}},{key:"_resolve",value:function(e,n,t){var r=this._getComposer(t),o=r(e),s={plugins:n,process:this._process,styles:o,media:t,props:e};return this._process(s)}},{key:"_getComposer",value:function(e){return this.mediaComposer[e]?this.mediaComposer[e]:this.composer}}]),e}(),r={Selector:t,enhanceWithPlugins:e};return r}); |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -11,4 +11,2 @@ 'use strict'; | ||
| var _DOMRenderer = require('./renderers/dom/DOMRenderer'); | ||
| var _enhanceWithPlugins = require('./helpers/enhanceWithPlugins'); | ||
@@ -22,7 +20,4 @@ | ||
| Selector: _Selector2.default, | ||
| render: _DOMRenderer.render, | ||
| clear: _DOMRenderer.clear, | ||
| enhanceWithPlugins: _enhanceWithPlugins2.default | ||
| }; | ||
| module.exports = exports['default']; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -7,2 +7,4 @@ 'use strict'; | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _StyleSheet = require('./StyleSheet'); | ||
@@ -14,22 +16,13 @@ | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var NODE_TYPE = 1; | ||
| var NODE_NAME = 'STYLE'; | ||
| // initializes a global mapping to map each node | ||
| // to a different stylesheet to prevent collision | ||
| // allows the use of multiple splitted stylesheets | ||
| var nodeMap = new Map(); | ||
| var Renderer = function () { | ||
| function Renderer(node) { | ||
| var _this = this; | ||
| exports.default = { | ||
| /** | ||
| * renders a Selector variation of props into a DOM node | ||
| * | ||
| * @param {node} node - DOM node which gets rendered into | ||
| * @param {Selector} selector - Selector instance that is rendered | ||
| * @param {Object?} props - list of props to render | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {string} className reference of the rendered selector | ||
| */ | ||
| _classCallCheck(this, Renderer); | ||
| render: function render(node, selector, props, plugins) { | ||
| // Check if the passed node is a valid element node which allows | ||
@@ -50,35 +43,50 @@ // setting the `textContent` property to update the node's content | ||
| // references a new stylesheet for new nodes | ||
| if (!nodeMap.has(node)) { | ||
| var sheet = new _StyleSheet2.default(); | ||
| sheet.subscribe(function (css) { | ||
| return node.textContent = css; | ||
| }); | ||
| nodeMap.set(node, sheet); | ||
| if (node.hasAttribute('data-fela-stylesheet')) { | ||
| console.warn('This node is already used by another renderer. Rendering might overwrite other styles.'); // eslint-disable-line | ||
| } | ||
| var stylesheet = nodeMap.get(node); | ||
| // renders the passed selector variation into the stylesheet which | ||
| // adds the variation to the cache and updates the DOM automatically | ||
| // if the variation has already been added it will do nothing but return | ||
| // the cached className to reference the mounted CSS selector | ||
| return stylesheet._renderSelectorVariation(selector, props, plugins); | ||
| }, | ||
| node.setAttribute('data-fela-stylesheet', ''); | ||
| this.node = node; | ||
| this.stylesheet = new _StyleSheet2.default(); | ||
| this.stylesheet.subscribe(function (css) { | ||
| return _this.node.textContent = css; | ||
| }); | ||
| } | ||
| /** | ||
| * clears the stylesheet associated with a DOM node | ||
| * | ||
| * @param {node} node - DOM node which gets cleared | ||
| * renders a Selector variation of props into a DOM node | ||
| * | ||
| * @param {Selector} selector - Selector instance that is rendered | ||
| * @param {Object?} props - list of props to render | ||
| * @param {Function[]?} plugins - array of plugins to process styles | ||
| * @return {string} className reference of the rendered selector | ||
| */ | ||
| clear: function clear(node) { | ||
| if (!nodeMap.has(node)) { | ||
| console.error('You are trying to clean a node which has never been rendered to before.'); // eslint-disable-line | ||
| return false; | ||
| _createClass(Renderer, [{ | ||
| key: 'render', | ||
| value: function render(selector, props, plugins) { | ||
| // renders the passed selector variation into the stylesheet which | ||
| // adds the variation to the cache and updates the DOM automatically | ||
| // if the variation has already been added it will do nothing but return | ||
| // the cached className to reference the mounted CSS selector | ||
| return this.stylesheet._renderSelectorVariation(selector, props, plugins); | ||
| } | ||
| nodeMap.get(node).clear(); | ||
| node.textContent = ''; | ||
| } | ||
| }; | ||
| /** | ||
| * clears the stylesheet associated with a DOM node | ||
| */ | ||
| }, { | ||
| key: 'clear', | ||
| value: function clear() { | ||
| this.stylesheet.clear(); | ||
| this.node.textContent = ''; | ||
| } | ||
| }]); | ||
| return Renderer; | ||
| }(); | ||
| exports.default = Renderer; | ||
| module.exports = exports['default']; |
@@ -38,3 +38,3 @@ 'use strict'; | ||
| /** | ||
| * clears the sheet's cache but keeps all listeners | ||
| * clears the sheet's cache but keeps all listeners | ||
| */ | ||
@@ -121,3 +121,3 @@ | ||
| * renders a new selector variation and caches the result | ||
| * | ||
| * | ||
| * @param {Selector} selector - Selector which gets rendered | ||
@@ -177,3 +177,3 @@ * @param {Object?} props - properties used to render | ||
| * generates an unique reference id by content hashing props | ||
| * | ||
| * | ||
| * @param {Object} props - props that get hashed | ||
@@ -192,3 +192,3 @@ * @return {string} reference - unique props reference | ||
| * as well as a content hash of the passed props | ||
| * | ||
| * | ||
| * @param {number} id - Selectors reference ID stored within the stylesheet | ||
@@ -195,0 +195,0 @@ * @param {strng} reference - generated props reference |
@@ -0,0 +0,0 @@ 'use strict'; |
@@ -0,0 +0,0 @@ 'use strict'; |
@@ -0,0 +0,0 @@ 'use strict'; |
507
package.json
| { | ||
| "name": "fela", | ||
| "version": "1.0.0-alpha.2", | ||
| "description": "Universal, dynamic & modular API to handle Styling in JavaScript", | ||
| "main": "lib/fela.js", | ||
| "files": [ | ||
| "LICENSE", | ||
| "README.md", | ||
| "lib", | ||
| "dist" | ||
| ], | ||
| "repository": "https://github.com/rofrischmann/fela/", | ||
| "keywords": [ | ||
| "fela", | ||
| "dynamic styling", | ||
| "stylesheet", | ||
| "css", | ||
| "styling", | ||
| "cssinjs" | ||
| ], | ||
| "scripts": { | ||
| "babel": "babel -d lib modules", | ||
| "dist": "npm run umd && npm run umd:min", | ||
| "lint": "eslint modules", | ||
| "release": "npm run dist && npm run babel && npm publish", | ||
| "test": "istanbul cover node_modules/mocha/bin/_mocha -- --opts test/mocha.opts", | ||
| "umd": "cross-env NODE_ENV=development webpack modules/fela.js dist/fela.js", | ||
| "umd:min": "cross-env NODE_ENV=production webpack modules/fela.js dist/fela.min.js" | ||
| }, | ||
| "author": "Robin Frischmann", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "babel": "^6.5.2", | ||
| "babel-cli": "^6.6.0", | ||
| "babel-core": "^6.6.0", | ||
| "babel-eslint": "^5.0.0", | ||
| "babel-loader": "^6.2.4", | ||
| "babel-plugin-add-module-exports": "^0.1.2", | ||
| "babel-plugin-lodash": "^2.1.0", | ||
| "babel-preset-es2015": "^6.6.0", | ||
| "babel-preset-stage-0": "^6.5.0", | ||
| "chai": "^3.5.0", | ||
| "codeclimate-test-reporter": "^0.3.1", | ||
| "cross-env": "^1.0.7", | ||
| "esformatter": "^0.9.0", | ||
| "esformatter-braces": "^1.2.1", | ||
| "esformatter-collapse-objects": "^0.5.1", | ||
| "esformatter-dot-notation": "^1.3.1", | ||
| "esformatter-jsx": "^4.1.2", | ||
| "esformatter-literal-notation": "^1.0.1", | ||
| "esformatter-parseint": "^1.0.3", | ||
| "esformatter-quote-props": "^1.0.2", | ||
| "esformatter-quotes": "^1.0.3", | ||
| "esformatter-remove-trailing-commas": "^1.0.1", | ||
| "esformatter-spaced-lined-comment": "^2.0.1", | ||
| "esformatter-var-each": "^2.1.0", | ||
| "eslint": "^2.10.2", | ||
| "eslint-config-rackt": "^1.1.1", | ||
| "estraverse-fb": "^1.3.1", | ||
| "istanbul": "^0.4.3", | ||
| "mocha": "^2.4.5", | ||
| "path": "^0.12.7", | ||
| "sinon": "^1.17.3", | ||
| "sinon-chai": "^2.8.0", | ||
| "webpack": "^1.13.1" | ||
| }, | ||
| "babel": { | ||
| "presets": [ | ||
| "es2015", | ||
| "stage-0" | ||
| "name": "fela", | ||
| "version": "1.0.0-alpha.3", | ||
| "description": "Fast, tiny & dynamic low-level API to handle Styling in JavaScript", | ||
| "main": "lib/fela.js", | ||
| "files": [ | ||
| "LICENSE", | ||
| "README.md", | ||
| "lib", | ||
| "dist" | ||
| ], | ||
| "plugins": [ | ||
| "add-module-exports" | ||
| ] | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "eslint-config-rackt", | ||
| "env": { | ||
| "browser": true, | ||
| "mocha": true, | ||
| "node": true | ||
| }, | ||
| "rules": { | ||
| "eol-last": 0 | ||
| } | ||
| }, | ||
| "esformatter": { | ||
| "plugins": [ | ||
| "esformatter-jsx", | ||
| "esformatter-quotes", | ||
| "esformatter-literal-notation", | ||
| "esformatter-parseint", | ||
| "esformatter-spaced-lined-comment", | ||
| "esformatter-var-each", | ||
| "esformatter-braces", | ||
| "esformatter-dot-notation", | ||
| "esformatter-remove-trailing-commas", | ||
| "esformatter-collapse-objects", | ||
| "esformatter-quote-props" | ||
| "repository": "https://github.com/rofrischmann/fela/", | ||
| "keywords": [ | ||
| "fela", | ||
| "dynamic styling", | ||
| "stylesheet", | ||
| "css", | ||
| "styling", | ||
| "cssinjs" | ||
| ], | ||
| "quotes": { | ||
| "type": "single" | ||
| }, | ||
| "jsx": { | ||
| "formatJSX": true, | ||
| "attrsOnSameLineAsTag": true, | ||
| "maxAttrsOnTag": 4, | ||
| "firstAttributeOnSameLine": false, | ||
| "alignWithFirstAttribute": false, | ||
| "spaceInJSXExpressionContainers": "", | ||
| "htmlOptions": { | ||
| "brace_style": "collapse", | ||
| "indent_char": " ", | ||
| "indent_size": 2, | ||
| "max_preserve_newlines": 4, | ||
| "preserve_newlines": true, | ||
| "wrap_line_length": 250 | ||
| } | ||
| }, | ||
| "indent": { | ||
| "value": " ", | ||
| "alignComments": true, | ||
| "ArrayExpression": 1, | ||
| "ArrowFunctionExpression": 1, | ||
| "AssignmentExpression": 1, | ||
| "AssignmentExpression.BinaryExpression": 1, | ||
| "AssignmentExpression.LogicalExpression": 1, | ||
| "AssignmentExpression.UnaryExpression": 1, | ||
| "CallExpression": 1, | ||
| "CallExpression.BinaryExpression": 1, | ||
| "CallExpression.LogicalExpression": 1, | ||
| "CallExpression.UnaryExpression": 1, | ||
| "CatchClause": 1, | ||
| "ConditionalExpression": 1, | ||
| "CommentInsideEmptyBlock": 1, | ||
| "ClassDeclaration": 1, | ||
| "DoWhileStatement": 1, | ||
| "ForInStatement": 1, | ||
| "ForStatement": 1, | ||
| "FunctionDeclaration": 1, | ||
| "FunctionExpression": 1, | ||
| "IfStatement": 1, | ||
| "MemberExpression": 1, | ||
| "MultipleVariableDeclaration": 1, | ||
| "NewExpression": 1, | ||
| "ObjectExpression": 1, | ||
| "ObjectExpression.BinaryExpression": 1, | ||
| "ObjectExpression.LogicalExpression": 1, | ||
| "ObjectExpression.UnaryExpression": 1, | ||
| "ParameterList": 1, | ||
| "ReturnStatement": 1, | ||
| "SwitchCase": 1, | ||
| "SwitchStatement": 1, | ||
| "TopLevelFunctionBlock": 1, | ||
| "TryStatement": 1, | ||
| "VariableDeclaration.BinaryExpression": 1, | ||
| "VariableDeclaration.LogicalExpression": 1, | ||
| "VariableDeclaration.UnaryExpression": 1, | ||
| "WhileStatement": 1 | ||
| }, | ||
| "lineBreak": { | ||
| "value": "\n", | ||
| "before": { | ||
| "AssignmentExpression": ">=1", | ||
| "AssignmentOperator": 0, | ||
| "ArrowFunctionExpressionArrow": 0, | ||
| "ArrowFunctionExpressionOpeningBrace": 0, | ||
| "ArrowFunctionExpressionClosingBrace": ">=1", | ||
| "BlockStatement": 0, | ||
| "BreakKeyword": ">=1", | ||
| "CallExpression": -1, | ||
| "CallExpressionOpeningParentheses": 0, | ||
| "CallExpressionClosingParentheses": -1, | ||
| "ClassDeclaration": ">=1", | ||
| "ClassDeclarationOpeningBrace": 0, | ||
| "ClassDeclarationClosingBrace": ">=1", | ||
| "ConditionalExpression": ">=1", | ||
| "CatchOpeningBrace": 0, | ||
| "CatchClosingBrace": ">=1", | ||
| "CatchKeyword": 0, | ||
| "DeleteOperator": ">=1", | ||
| "DoWhileStatement": ">=1", | ||
| "DoWhileStatementOpeningBrace": 0, | ||
| "DoWhileStatementClosingBrace": ">=1", | ||
| "EndOfFile": -1, | ||
| "EmptyStatement": -1, | ||
| "FinallyKeyword": -1, | ||
| "FinallyOpeningBrace": 0, | ||
| "FinallyClosingBrace": ">=1", | ||
| "ForInStatement": ">=1", | ||
| "ForInStatementExpressionOpening": 0, | ||
| "ForInStatementExpressionClosing": 0, | ||
| "ForInStatementOpeningBrace": 0, | ||
| "ForInStatementClosingBrace": ">=1", | ||
| "ForStatement": ">=1", | ||
| "ForStatementExpressionOpening": 0, | ||
| "ForStatementExpressionClosing": "<2", | ||
| "ForStatementOpeningBrace": 0, | ||
| "ForStatementClosingBrace": ">=1", | ||
| "FunctionExpression": -1, | ||
| "FunctionExpressionOpeningBrace": 0, | ||
| "FunctionExpressionClosingBrace": ">=1", | ||
| "FunctionDeclaration": ">=1", | ||
| "FunctionDeclarationOpeningBrace": 0, | ||
| "FunctionDeclarationClosingBrace": ">=1", | ||
| "IIFEClosingParentheses": 0, | ||
| "IfStatement": ">=1", | ||
| "IfStatementOpeningBrace": 0, | ||
| "IfStatementClosingBrace": ">=1", | ||
| "ElseIfStatement": 0, | ||
| "ElseIfStatementOpeningBrace": 0, | ||
| "ElseIfStatementClosingBrace": ">=1", | ||
| "ElseStatement": 0, | ||
| "ElseStatementOpeningBrace": 0, | ||
| "ElseStatementClosingBrace": ">=1", | ||
| "LogicalExpression": -1, | ||
| "MethodDefinition": ">=1", | ||
| "ObjectExpressionClosingBrace": ">=1", | ||
| "ParameterDefault": 0, | ||
| "Property": ">=1", | ||
| "PropertyValue": 0, | ||
| "ReturnStatement": -1, | ||
| "SwitchOpeningBrace": 0, | ||
| "SwitchClosingBrace": ">=1", | ||
| "ThisExpression": -1, | ||
| "ThrowStatement": ">=1", | ||
| "TryKeyword": -1, | ||
| "TryOpeningBrace": 0, | ||
| "TryClosingBrace": ">=1", | ||
| "VariableName": ">=1", | ||
| "VariableValue": 0, | ||
| "VariableDeclaration": ">=1", | ||
| "VariableDeclarationWithoutInit": ">=1", | ||
| "WhileStatement": ">=1", | ||
| "WhileStatementOpeningBrace": 0, | ||
| "WhileStatementClosingBrace": ">=1" | ||
| }, | ||
| "after": { | ||
| "AssignmentExpression": ">=1", | ||
| "AssignmentOperator": 0, | ||
| "ArrowFunctionExpressionArrow": 0, | ||
| "ArrowFunctionExpressionOpeningBrace": ">=1", | ||
| "ArrowFunctionExpressionClosingBrace": -1, | ||
| "BlockStatement": 0, | ||
| "BreakKeyword": -1, | ||
| "CallExpression": -1, | ||
| "CallExpressionOpeningParentheses": -1, | ||
| "CallExpressionClosingParentheses": -1, | ||
| "ClassDeclaration": ">=1", | ||
| "ClassDeclarationOpeningBrace": ">=1", | ||
| "ClassDeclarationClosingBrace": ">=1", | ||
| "CatchOpeningBrace": ">=1", | ||
| "CatchClosingBrace": ">=0", | ||
| "CatchKeyword": 0, | ||
| "ConditionalExpression": ">=1", | ||
| "DeleteOperator": ">=1", | ||
| "DoWhileStatement": ">=1", | ||
| "DoWhileStatementOpeningBrace": ">=1", | ||
| "DoWhileStatementClosingBrace": 0, | ||
| "EmptyStatement": -1, | ||
| "FinallyKeyword": -1, | ||
| "FinallyOpeningBrace": ">=1", | ||
| "FinallyClosingBrace": ">=1", | ||
| "ForInStatement": ">=1", | ||
| "ForInStatementExpressionOpening": "<2", | ||
| "ForInStatementExpressionClosing": -1, | ||
| "ForInStatementOpeningBrace": ">=1", | ||
| "ForInStatementClosingBrace": ">=1", | ||
| "ForStatement": ">=1", | ||
| "ForStatementExpressionOpening": "<2", | ||
| "ForStatementExpressionClosing": -1, | ||
| "ForStatementOpeningBrace": ">=1", | ||
| "ForStatementClosingBrace": ">=1", | ||
| "FunctionExpression": ">=1", | ||
| "FunctionExpressionOpeningBrace": ">=1", | ||
| "FunctionExpressionClosingBrace": -1, | ||
| "FunctionDeclaration": ">=1", | ||
| "FunctionDeclarationOpeningBrace": ">=1", | ||
| "FunctionDeclarationClosingBrace": ">=1", | ||
| "IIFEOpeningParentheses": 0, | ||
| "IfStatement": ">=1", | ||
| "IfStatementOpeningBrace": ">=1", | ||
| "IfStatementClosingBrace": ">=1", | ||
| "ElseIfStatement": ">=1", | ||
| "ElseIfStatementOpeningBrace": ">=1", | ||
| "ElseIfStatementClosingBrace": ">=1", | ||
| "ElseStatement": ">=1", | ||
| "ElseStatementOpeningBrace": ">=1", | ||
| "ElseStatementClosingBrace": ">=1", | ||
| "LogicalExpression": -1, | ||
| "MethodDefinition": ">=1", | ||
| "ObjectExpressionOpeningBrace": ">=1", | ||
| "ParameterDefault": 0, | ||
| "Property": 0, | ||
| "PropertyName": 0, | ||
| "ReturnStatement": -1, | ||
| "SwitchOpeningBrace": ">=1", | ||
| "SwitchClosingBrace": ">=1", | ||
| "ThisExpression": 0, | ||
| "ThrowStatement": ">=1", | ||
| "TryKeyword": -1, | ||
| "TryOpeningBrace": ">=1", | ||
| "TryClosingBrace": 0, | ||
| "VariableDeclaration": ">=1", | ||
| "WhileStatement": ">=1", | ||
| "WhileStatementOpeningBrace": ">=1", | ||
| "WhileStatementClosingBrace": ">=1" | ||
| } | ||
| }, | ||
| "whiteSpace": { | ||
| "value": " ", | ||
| "removeTrailing": 1, | ||
| "before": { | ||
| "ArrayExpressionOpening": 0, | ||
| "ArrayExpressionClosing": 1, | ||
| "ArrayExpressionComma": 0, | ||
| "ArrayPatternOpening": 1, | ||
| "ArrayPatternClosing": 1, | ||
| "ArrayPatternComma": 0, | ||
| "ArrowFunctionExpressionArrow": 1, | ||
| "ArrowFunctionExpressionOpeningBrace": 1, | ||
| "ArrowFunctionExpressionClosingBrace": 0, | ||
| "ArgumentComma": 0, | ||
| "ArgumentList": 0, | ||
| "AssignmentOperator": 1, | ||
| "BinaryExpression": 0, | ||
| "BinaryExpressionOperator": 1, | ||
| "BlockComment": 1, | ||
| "CallExpression": -1, | ||
| "CallExpressionOpeningParentheses": 0, | ||
| "CallExpressionClosingParentheses": -1, | ||
| "CatchParameterList": 0, | ||
| "CatchOpeningBrace": 1, | ||
| "CatchClosingBrace": 1, | ||
| "CatchKeyword": 1, | ||
| "CommaOperator": 0, | ||
| "ClassDeclarationOpeningBrace": 1, | ||
| "ClassDeclarationClosingBrace": 1, | ||
| "ConditionalExpressionConsequent": 1, | ||
| "ConditionalExpressionAlternate": 1, | ||
| "DoWhileStatementOpeningBrace": 1, | ||
| "DoWhileStatementClosingBrace": 1, | ||
| "DoWhileStatementConditional": 1, | ||
| "EmptyStatement": 0, | ||
| "ExpressionClosingParentheses": 0, | ||
| "FinallyKeyword": -1, | ||
| "FinallyOpeningBrace": 1, | ||
| "FinallyClosingBrace": 1, | ||
| "ForInStatement": 1, | ||
| "ForInStatementExpressionOpening": 1, | ||
| "ForInStatementExpressionClosing": 0, | ||
| "ForInStatementOpeningBrace": 1, | ||
| "ForInStatementClosingBrace": 1, | ||
| "ForStatement": 1, | ||
| "ForStatementExpressionOpening": 1, | ||
| "ForStatementExpressionClosing": 0, | ||
| "ForStatementOpeningBrace": 1, | ||
| "ForStatementClosingBrace": 1, | ||
| "ForStatementSemicolon": 0, | ||
| "FunctionDeclarationOpeningBrace": 1, | ||
| "FunctionDeclarationClosingBrace": 1, | ||
| "FunctionExpressionOpeningBrace": 1, | ||
| "FunctionExpressionClosingBrace": 1, | ||
| "FunctionName": 1, | ||
| "IIFEClosingParentheses": 0, | ||
| "IfStatementConditionalOpening": 1, | ||
| "IfStatementConditionalClosing": 0, | ||
| "IfStatementOpeningBrace": 1, | ||
| "IfStatementClosingBrace": 1, | ||
| "ElseStatementOpeningBrace": 1, | ||
| "ElseStatementClosingBrace": 1, | ||
| "ElseIfStatementOpeningBrace": 1, | ||
| "ElseIfStatementClosingBrace": 1, | ||
| "LineComment": 1, | ||
| "LogicalExpressionOperator": 1, | ||
| "MemberExpressionClosing": 0, | ||
| "ObjectExpressionOpeningBrace": -1, | ||
| "ObjectExpressionClosingBrace": 1, | ||
| "ObjectPatternOpeningBrace": 1, | ||
| "ObjectPatternClosingBrace": 1, | ||
| "ObjectPatternComma": 0, | ||
| "PropertyName": 1, | ||
| "PropertyValue": 1, | ||
| "ParameterComma": 0, | ||
| "ParameterDefault": 1, | ||
| "ParameterList": 0, | ||
| "SwitchDiscriminantOpening": 1, | ||
| "SwitchDiscriminantClosing": 0, | ||
| "ThrowKeyword": 1, | ||
| "TryKeyword": -1, | ||
| "TryOpeningBrace": 1, | ||
| "TryClosingBrace": 1, | ||
| "UnaryExpressionOperator": 0, | ||
| "VariableName": 1, | ||
| "VariableValue": 1, | ||
| "WhileStatementConditionalOpening": 1, | ||
| "WhileStatementConditionalClosing": 0, | ||
| "WhileStatementOpeningBrace": 1, | ||
| "WhileStatementClosingBrace": 1 | ||
| }, | ||
| "after": { | ||
| "ArrayExpressionOpening": 1, | ||
| "ArrayExpressionClosing": 0, | ||
| "ArrayExpressionComma": 1, | ||
| "ArrayPatternOpening": 1, | ||
| "ArrayPatternClosing": 0, | ||
| "ArrayPatternComma": 1, | ||
| "ArrowFunctionExpressionArrow": 1, | ||
| "ArrowFunctionExpressionOpeningBrace": 0, | ||
| "ArrowFunctionExpressionClosingBrace": 0, | ||
| "ArgumentComma": 1, | ||
| "ArgumentList": 0, | ||
| "AssignmentOperator": 1, | ||
| "BinaryExpression": 0, | ||
| "BinaryExpressionOperator": 1, | ||
| "BlockComment": 1, | ||
| "CallExpression": -1, | ||
| "CallExpressionOpeningParentheses": -1, | ||
| "CallExpressionClosingParentheses": -1, | ||
| "CatchParameterList": 0, | ||
| "CatchOpeningBrace": 1, | ||
| "CatchClosingBrace": 1, | ||
| "CatchKeyword": 1, | ||
| "ClassDeclarationOpeningBrace": 1, | ||
| "ClassDeclarationClosingBrace": 1, | ||
| "CommaOperator": 1, | ||
| "ConditionalExpressionConsequent": 1, | ||
| "ConditionalExpressionTest": 1, | ||
| "DoWhileStatementOpeningBrace": 1, | ||
| "DoWhileStatementClosingBrace": 1, | ||
| "DoWhileStatementBody": 1, | ||
| "EmptyStatement": 0, | ||
| "ExpressionOpeningParentheses": 0, | ||
| "FinallyKeyword": -1, | ||
| "FinallyOpeningBrace": 1, | ||
| "FinallyClosingBrace": 1, | ||
| "ForInStatement": 1, | ||
| "ForInStatementExpressionOpening": 0, | ||
| "ForInStatementExpressionClosing": 1, | ||
| "ForInStatementOpeningBrace": 1, | ||
| "ForInStatementClosingBrace": 1, | ||
| "ForStatement": 1, | ||
| "ForStatementExpressionOpening": 0, | ||
| "ForStatementExpressionClosing": 1, | ||
| "ForStatementClosingBrace": 1, | ||
| "ForStatementOpeningBrace": 1, | ||
| "ForStatementSemicolon": 1, | ||
| "FunctionReservedWord": 0, | ||
| "FunctionName": 0, | ||
| "FunctionExpressionOpeningBrace": 1, | ||
| "FunctionExpressionClosingBrace": 0, | ||
| "FunctionDeclarationOpeningBrace": 1, | ||
| "FunctionDeclarationClosingBrace": 1, | ||
| "IIFEOpeningParentheses": 0, | ||
| "IfStatementConditionalOpening": 0, | ||
| "IfStatementConditionalClosing": 1, | ||
| "IfStatementOpeningBrace": 1, | ||
| "IfStatementClosingBrace": 1, | ||
| "ElseStatementOpeningBrace": 1, | ||
| "ElseStatementClosingBrace": 1, | ||
| "ElseIfStatementOpeningBrace": 1, | ||
| "ElseIfStatementClosingBrace": 1, | ||
| "MemberExpressionOpening": 0, | ||
| "LogicalExpressionOperator": 1, | ||
| "ObjectExpressionOpeningBrace": 1, | ||
| "ObjectExpressionClosingBrace": 0, | ||
| "ObjectPatternOpeningBrace": 1, | ||
| "ObjectPatternClosingBrace": 0, | ||
| "ObjectPatternComma": 1, | ||
| "PropertyName": 0, | ||
| "PropertyValue": 0, | ||
| "ParameterComma": 1, | ||
| "ParameterDefault": 1, | ||
| "ParameterList": 0, | ||
| "SwitchDiscriminantOpening": 0, | ||
| "SwitchDiscriminantClosing": 1, | ||
| "ThrowKeyword": 1, | ||
| "TryKeyword": -1, | ||
| "TryOpeningBrace": 1, | ||
| "TryClosingBrace": 1, | ||
| "UnaryExpressionOperator": 0, | ||
| "VariableName": 1, | ||
| "WhileStatementConditionalOpening": 0, | ||
| "WhileStatementConditionalClosing": 1, | ||
| "WhileStatementOpeningBrace": 1, | ||
| "WhileStatementClosingBrace": 1 | ||
| } | ||
| } | ||
| } | ||
| } | ||
| "author": "Robin Frischmann", | ||
| "license": "MIT" | ||
| } |
104
README.md
@@ -1,102 +0,4 @@ | ||
| <h1 align="center">Fela</h1> | ||
| <p align="center"> | ||
| Dynamic Styling in JavaScript. | ||
| <br> | ||
| <img alt="TravisCI" src="https://travis-ci.org/rofrischmann/fela.svg?branch=develop"> | ||
| <a href="https://codeclimate.com/github/rofrischmann/fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/fela/badges/coverage.svg"></a> | ||
| <img alt="npm version" src="https://badge.fury.io/js/fela.svg"> | ||
| <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela.svg"> | ||
| <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-~1.86kb-brightgreen.svg"> | ||
| </p> | ||
| <br> | ||
| **Fela** is a fast, universal, modular and tiny *(only ~1.86kb)* low-level API to handle Styling in JavaScript. It adds dynamic behavior to extend and modify styles over time. It is considered a low-level API, but serves well in production as a stand-alone solution as well. | ||
| # fela | ||
| The API is strictly designed alongside numerous [design principles](docs/Principles.md) | ||
| While it is build with CSS and web technology in mind, it is not bound to the DOM nor CSS explicitly but build upon basic and abstract Components that can even be used with libraries like React Native.<br> | ||
| # Documentation | ||
| * [API reference](docs/API.md) | ||
| * [Design principles](docs/Principles.md) | ||
| # Usage | ||
| ```javascript | ||
| import Fela, { Selector } from 'fela' | ||
| // first of all we need a valid DOM element to render into | ||
| // preferable a <style> element within document.head | ||
| // but you could actually use any valid DOM node | ||
| const node = document.getElementById('style-element') | ||
| // now we create a custom pure style composer | ||
| // the composer could be considered a dynamic template | ||
| const composer = props => ({ color: props.color }) | ||
| const selector = new Selector(composer) | ||
| // each time we call render with a new selector variation | ||
| // the DOM node will add the rendered selector markup | ||
| // it always returns the rendered CSS className as reference | ||
| Fela.render(node, selector, { color: 'red' }) // => c0-ds34 | ||
| Fela.render(node, selector, { color: 'blue' }) // => c0-eqz3x | ||
| ``` | ||
| ### Fela with React | ||
| Fela was not explicitly designed for React, but rather is as a result of working with React.<br> | ||
| It can be used with any solution, but works perfectly fine together with React - especially if dealing with dynamic & stateful styling. | ||
| ```javascript | ||
| import React, { Component } from 'react' | ||
| import Fela, { Selector } from 'fela' | ||
| const node = document.getElementById('style-element') | ||
| const selector = new Selector(props => ({ | ||
| outline: 'none', | ||
| color: props.color, | ||
| outlineWidth: 0, | ||
| border: 0, | ||
| padding: '10px 8px', | ||
| fontSize: props.size | ||
| })) | ||
| // A simple React Component to choose a font-size | ||
| class FontSize extends Component { | ||
| constructor() { | ||
| super(...arguments) | ||
| this.state = { fontSize: 15 } | ||
| this.resize = this.resize.bind(this) | ||
| } | ||
| resize(size) { | ||
| this.setState({ fontSize: size }) | ||
| } | ||
| render() { | ||
| // passes values from both props and state | ||
| // to fully resolve the selector composer | ||
| const className = Fela.render(node, selector, { | ||
| size: this.state.fontSize, | ||
| color: this.props.color | ||
| }) | ||
| return <input | ||
| className={className} | ||
| onInput={this.resize} | ||
| defaultValue={this.state.fontSize} | ||
| type="number" /> | ||
| } | ||
| } | ||
| // This will render an input element with blue text color | ||
| // it let's you choose a font-size which will then | ||
| // get directly applied to the input text itself | ||
| ReactDOM.render( | ||
| <FontSize color="red" />, | ||
| document.getElementById('app') | ||
| ) | ||
| ``` | ||
| # 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). | ||
| NPM package to get access to Fela's API.<br> | ||
| Check out the [repository](https://github.com/rofrischmann/fela) for further information. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-100%
0
- Number of package files
- increased by15.38%
15
Worsened metrics
- Total package byte prevSize
- decreased by-49.03%
35161
- Lines of code
- decreased by-38.89%
660
- Number of lines in readme file
- decreased by-95.15%
5
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes