Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
aesthetic - npm Package Compare versions
Comparing version 5.1.0 to 5.1.1
@@ -0,1 +1,7 @@ | ||
| ### 5.1.1 - 2020-02-06 | ||
| #### 🐞 Fixes | ||
| - Fixed an issue with testing utils where duplicate Aesthetic instances were being used. | ||
| ## 5.1.0 - 2020-01-26 | ||
@@ -2,0 +8,0 @@ |
@@ -1095,2 +1095,32 @@ import deepMerge from 'extend'; | ||
| var TestAdapter = function (_Adapter) { | ||
| _inheritsLoose(TestAdapter, _Adapter); | ||
| function TestAdapter() { | ||
| return _Adapter.apply(this, arguments) || this; | ||
| } | ||
| var _proto = TestAdapter.prototype; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return typeof block === 'string'; | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet) { | ||
| return Object.keys(styleSheet).reduce(function (obj, key) { | ||
| var _extends2; | ||
| return _extends({}, obj, (_extends2 = {}, _extends2[key] = key, _extends2)); | ||
| }, {}); | ||
| }; | ||
| _proto.transformToClassName = function transformToClassName(styles) { | ||
| return styles.filter(function (style) { | ||
| return style && typeof style === 'string'; | ||
| }).join(' '); | ||
| }; | ||
| return TestAdapter; | ||
| }(Adapter); | ||
| /** | ||
@@ -1102,2 +1132,2 @@ * @copyright 2017-2019, Miles Johnson | ||
| export default instance; | ||
| export { Adapter, Aesthetic, ClassNameAdapter, GLOBAL_STYLE_NAME, Ruleset, Sheet, UnifiedSyntax }; | ||
| export { Adapter, Aesthetic, ClassNameAdapter, GLOBAL_STYLE_NAME, Ruleset, Sheet, TestAdapter, UnifiedSyntax }; |
| import convertRTL from 'rtl-css-js'; | ||
| import { isRTL, toObjectRecursive, getFlushedStyles as getFlushedStyles$1, purgeStyles, toArray, isObject, formatFontFace, stripClassPrefix, getStyleElements } from 'aesthetic-utils'; | ||
| import uuid from 'uuid/v4'; | ||
| import Stylis from 'stylis'; | ||
| import { convertProperty } from 'rtl-css-js/core'; | ||
| import { getStyleElements, getFlushedStyles as getFlushedStyles$1, isObject } from 'aesthetic-utils'; | ||
| import { TestAdapter, GLOBAL_STYLE_NAME } from './index'; | ||
| export { TestAdapter } from './index'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _extends() { | ||
@@ -40,901 +24,2 @@ _extends = Object.assign || function (target) { | ||
| function _inheritsLoose(subClass, superClass) { | ||
| subClass.prototype = Object.create(superClass.prototype); | ||
| subClass.prototype.constructor = subClass; | ||
| subClass.__proto__ = superClass; | ||
| } | ||
| var CacheManager = function () { | ||
| function CacheManager() { | ||
| _defineProperty(this, "cache", new Map()); | ||
| } | ||
| var _proto = CacheManager.prototype; | ||
| _proto.clear = function clear(filter) { | ||
| var _this = this; | ||
| if (filter) { | ||
| this.cache.forEach(function (units, key) { | ||
| _this.cache.set(key, units.filter(function (unit) { | ||
| return !filter(unit); | ||
| })); | ||
| }); | ||
| } else { | ||
| this.cache.clear(); | ||
| } | ||
| return this; | ||
| }; | ||
| _proto.compare = function compare(unit, tags) { | ||
| return unit.dir === tags.dir && unit.global === tags.global && unit.theme === tags.theme; | ||
| }; | ||
| _proto.get = function get(key, tags) { | ||
| var _this2 = this; | ||
| var units = this.cache.get(key); | ||
| if (!units || units.length === 0) { | ||
| return null; | ||
| } | ||
| var cache = units.find(function (unit) { | ||
| return _this2.compare(unit, tags); | ||
| }); | ||
| return cache ? cache.value : null; | ||
| }; | ||
| _proto.set = function set(key, value, tags) { | ||
| var units = this.cache.get(key) || []; | ||
| units.push(_extends({}, tags, { | ||
| value: value | ||
| })); | ||
| this.cache.set(key, units); | ||
| return value; | ||
| }; | ||
| return CacheManager; | ||
| }(); | ||
| var Ruleset = function () { | ||
| function Ruleset(selector, root, parent) { | ||
| if (parent === void 0) { | ||
| parent = null; | ||
| } | ||
| _defineProperty(this, "compoundProperties", new Map()); | ||
| _defineProperty(this, "nested", new Map()); | ||
| _defineProperty(this, "parent", null); | ||
| _defineProperty(this, "properties", {}); | ||
| _defineProperty(this, "root", void 0); | ||
| _defineProperty(this, "selector", void 0); | ||
| this.selector = selector; | ||
| this.root = root; | ||
| this.parent = parent; | ||
| } | ||
| var _proto = Ruleset.prototype; | ||
| _proto.addCompoundProperty = function addCompoundProperty(key, value) { | ||
| this.compoundProperties.set(key, value); | ||
| return this; | ||
| }; | ||
| _proto.addNested = function addNested(selector, ruleset, merge) { | ||
| if (merge === void 0) { | ||
| merge = true; | ||
| } | ||
| if (merge && this.nested.has(selector)) { | ||
| this.nested.get(selector).merge(ruleset); | ||
| } else { | ||
| this.nested.set(selector, ruleset); | ||
| } | ||
| return this; | ||
| }; | ||
| _proto.addProperty = function addProperty(key, value) { | ||
| this.properties[key] = value; | ||
| return this; | ||
| }; | ||
| _proto.addProperties = function addProperties(properties) { | ||
| Object.assign(this.properties, properties); | ||
| return this; | ||
| }; | ||
| _proto.createRuleset = function createRuleset(selector) { | ||
| return new Ruleset(selector, this.root, this); | ||
| }; | ||
| _proto.merge = function merge(ruleset) { | ||
| var _this = this; | ||
| Object.assign(this.properties, ruleset.properties); | ||
| ruleset.nested.forEach(function (nested, selector) { | ||
| _this.addNested(selector, nested); | ||
| }); | ||
| return this; | ||
| }; | ||
| _proto.toObject = function toObject() { | ||
| var props = isRTL(this.root.options.dir) ? convertRTL(this.properties) : this.properties; | ||
| var compounds = {}; | ||
| this.compoundProperties.forEach(function (compound, key) { | ||
| compounds[key] = compound; | ||
| }); | ||
| return _extends({}, props, {}, compounds, {}, toObjectRecursive(this.nested)); | ||
| }; | ||
| return Ruleset; | ||
| }(); | ||
| var Sheet = function () { | ||
| function Sheet(options) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| _defineProperty(this, "atRules", {}); | ||
| _defineProperty(this, "classNames", {}); | ||
| _defineProperty(this, "options", void 0); | ||
| _defineProperty(this, "ruleSets", {}); | ||
| this.options = options; | ||
| } | ||
| var _proto = Sheet.prototype; | ||
| _proto.addAtRule = function addAtRule(rule, value) { | ||
| this.atRules[rule] = value; | ||
| return this; | ||
| }; | ||
| _proto.addClassName = function addClassName(selector, value) { | ||
| this.classNames[selector] = value; | ||
| return this; | ||
| }; | ||
| _proto.addRuleset = function addRuleset(set) { | ||
| this.ruleSets[set.selector] = set; | ||
| return this; | ||
| }; | ||
| _proto.createRuleset = function createRuleset(selector) { | ||
| return new Ruleset(selector, this); | ||
| }; | ||
| _proto.createSheet = function createSheet(options) { | ||
| return new Sheet(options || this.options); | ||
| }; | ||
| _proto.toObject = function toObject() { | ||
| var _this = this; | ||
| var atRules = {}; | ||
| var sets = {}; | ||
| Object.keys(this.atRules).forEach(function (key) { | ||
| var value = _this.atRules[key]; | ||
| if (value instanceof Sheet || value instanceof Ruleset) { | ||
| sets[key] = value; | ||
| } else if (Array.isArray(value)) { | ||
| atRules[key] = value.map(function (item) { | ||
| return item instanceof Ruleset ? item.toObject() : item; | ||
| }); | ||
| } else { | ||
| atRules[key] = value; | ||
| } | ||
| }); | ||
| return _extends({}, atRules, {}, toObjectRecursive(sets), {}, toObjectRecursive(this.ruleSets)); | ||
| }; | ||
| return Sheet; | ||
| }(); | ||
| var StyleSheetManager = function () { | ||
| function StyleSheetManager() { | ||
| _defineProperty(this, "element", null); | ||
| _defineProperty(this, "sheet", null); | ||
| } | ||
| var _proto = StyleSheetManager.prototype; | ||
| _proto.getFlushedStyles = function getFlushedStyles() { | ||
| return getFlushedStyles$1(this.getStyleElement()); | ||
| }; | ||
| _proto.getStyleElement = function getStyleElement() { | ||
| if (this.element) { | ||
| return this.element; | ||
| } | ||
| this.element = document.createElement('style'); | ||
| this.element.type = 'text/css'; | ||
| this.element.media = 'screen'; | ||
| this.element.setAttribute('data-aesthetic', 'true'); | ||
| document.head.append(this.element); | ||
| this.sheet = this.element.sheet; | ||
| return this.element; | ||
| }; | ||
| _proto.injectRule = function injectRule(rule) { | ||
| this.getStyleElement(); | ||
| this.sheet.insertRule(rule, this.sheet.cssRules.length); | ||
| return this; | ||
| }; | ||
| _proto.injectStatements = function injectStatements(css) { | ||
| this.getStyleElement().textContent += css; | ||
| return this; | ||
| }; | ||
| _proto.purgeStyles = function purgeStyles$1() { | ||
| purgeStyles(this.getStyleElement()); | ||
| return this; | ||
| }; | ||
| return StyleSheetManager; | ||
| }(); | ||
| var SELECTOR = /^((\[[\x2Da-z\u017F\u212A]+\])|(::?[\x2Da-z\u017F\u212A]+))$/i; | ||
| var CLASS_NAME = /^[a-z\u017F\u212A]{1}[\x2D0-9_a-z\u017F\u212A]+$/i; | ||
| function rtlPlugin(context, content) { | ||
| if (context !== 1) { | ||
| return undefined; | ||
| } | ||
| var _content$split = content.split(':', 2), | ||
| rawKey = _content$split[0], | ||
| rawValue = _content$split[1]; | ||
| var isQuoted = rawValue.trim().startsWith("'"); | ||
| var unquotedValue = isQuoted ? rawValue.slice(1).slice(0, -1) : rawValue; | ||
| var _convertProperty = convertProperty(rawKey.trim(), unquotedValue.trim()), | ||
| key = _convertProperty.key, | ||
| value = _convertProperty.value; | ||
| return key + ":" + (isQuoted ? "'" + value + "'" : value); | ||
| } | ||
| var UnifiedSyntax = function () { | ||
| function UnifiedSyntax() { | ||
| var _this = this; | ||
| _defineProperty(this, "handlers", {}); | ||
| _defineProperty(this, "keyframesCount", 0); | ||
| _defineProperty(this, "handleAnimationName", function (ruleset, value) { | ||
| if (!value) { | ||
| return undefined; | ||
| } | ||
| return (Array.isArray(value) ? value : [value]).map(function (item) { | ||
| if (typeof item === 'string') { | ||
| return item; | ||
| } | ||
| var name = item.name || "keyframe-" + (_this.keyframesCount += 1); | ||
| _this.convertKeyframe(name, item, ruleset.root); | ||
| return name; | ||
| }).join(', '); | ||
| }); | ||
| _defineProperty(this, "handleFontFamily", function (ruleset, value) { | ||
| if (!value) { | ||
| return undefined; | ||
| } | ||
| var output = new Set(); | ||
| var fontFaces = {}; | ||
| toArray(value).forEach(function (item) { | ||
| if (typeof item === 'string') { | ||
| output.add(item); | ||
| return; | ||
| } | ||
| var name = item.fontFamily; | ||
| if (!name) { | ||
| return; | ||
| } | ||
| output.add(name); | ||
| if (fontFaces[name]) { | ||
| fontFaces[name].push(item); | ||
| } else { | ||
| fontFaces[name] = [item]; | ||
| } | ||
| }); | ||
| Object.keys(fontFaces).forEach(function (fontFamily) { | ||
| _this.convertFontFaces(fontFamily, fontFaces[fontFamily], ruleset.root); | ||
| }); | ||
| return Array.from(output).join(', '); | ||
| }); | ||
| this.on('property:animationName', this.handleAnimationName); | ||
| this.on('property:fontFamily', this.handleFontFamily); | ||
| } | ||
| var _proto = UnifiedSyntax.prototype; | ||
| _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet, options) { | ||
| var _this2 = this; | ||
| var sheet = new Sheet(options); | ||
| Object.keys(globalSheet).forEach(function (rule) { | ||
| switch (rule) { | ||
| case '@charset': | ||
| { | ||
| var _charset = globalSheet[rule]; | ||
| if (typeof _charset === 'string') { | ||
| _this2.emit('charset', [sheet, _charset]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('@charset must be a string.'); | ||
| } | ||
| break; | ||
| } | ||
| case '@font-face': | ||
| { | ||
| var faces = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(faces)) { | ||
| throw new Error('@font-face must be an object of font family names to font faces.'); | ||
| } | ||
| } | ||
| Object.keys(faces).forEach(function (fontFamily) { | ||
| _this2.convertFontFaces(fontFamily, toArray(faces[fontFamily]), sheet); | ||
| }); | ||
| break; | ||
| } | ||
| case '@global': | ||
| { | ||
| var globals = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(globals)) { | ||
| throw new Error('@global must be an object of selectors to ruleset objects.'); | ||
| } | ||
| } | ||
| Object.keys(globals).forEach(function (selector) { | ||
| if (isObject(globals[selector])) { | ||
| _this2.emit('global', [sheet, selector, _this2.convertRuleset(globals[selector], sheet.createRuleset(selector))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("@global \"" + selector + "\" must be a ruleset object."); | ||
| } | ||
| }); | ||
| break; | ||
| } | ||
| case '@import': | ||
| { | ||
| var _paths = globalSheet[rule]; | ||
| if (typeof _paths === 'string' || Array.isArray(_paths)) { | ||
| _this2.emit('import', [sheet, toArray(_paths).map(function (path) { | ||
| return String(path); | ||
| })]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('@import must be a string or an array of strings.'); | ||
| } | ||
| break; | ||
| } | ||
| case '@keyframes': | ||
| { | ||
| var frames = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(frames)) { | ||
| throw new Error('@keyframes must be an object of animation names to keyframes.'); | ||
| } | ||
| } | ||
| Object.keys(frames).forEach(function (animationName) { | ||
| _this2.convertKeyframe(animationName, frames[animationName], sheet); | ||
| }); | ||
| break; | ||
| } | ||
| case '@page': | ||
| case '@viewport': | ||
| { | ||
| var style = globalSheet[rule]; | ||
| if (isObject(style)) { | ||
| _this2.emit(rule.slice(1), [sheet, _this2.convertRuleset(style, sheet.createRuleset(rule))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error(rule + " must be a ruleset object."); | ||
| } | ||
| break; | ||
| } | ||
| default: | ||
| { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("Unknown property \"" + rule + "\". Only at-rules are allowed in the global style sheet."); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return sheet; | ||
| }; | ||
| _proto.convertStyleSheet = function convertStyleSheet(styleSheet, options) { | ||
| var _this3 = this; | ||
| var sheet = new Sheet(options); | ||
| Object.keys(styleSheet).forEach(function (selector) { | ||
| var ruleset = styleSheet[selector]; | ||
| if (!ruleset) { | ||
| return; | ||
| } | ||
| if (selector.charAt(0) === '@') { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new SyntaxError("At-rules may not be defined in the root, found \"" + selector + "\"."); | ||
| } | ||
| } else if (typeof ruleset === 'string') { | ||
| if (ruleset.match(CLASS_NAME)) { | ||
| sheet.addClassName(selector, ruleset); | ||
| } else { | ||
| sheet.addClassName(selector, _this3.convertRawCss(sheet, selector, ruleset)); | ||
| } | ||
| } else if (isObject(ruleset)) { | ||
| sheet.addRuleset(_this3.convertRuleset(ruleset, sheet.createRuleset(selector))); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("Invalid ruleset for \"" + selector + "\". Must be an object or class name."); | ||
| } | ||
| }); | ||
| return sheet; | ||
| }; | ||
| _proto.convertRawCss = function convertRawCss(sheet, selector, declaration) { | ||
| var styleName = sheet.options.name; | ||
| var className = styleName + "-" + selector; | ||
| var stylis = new Stylis({ | ||
| compress: !("production" !== process.env.NODE_ENV), | ||
| global: false, | ||
| keyframe: true, | ||
| prefix: true | ||
| }); | ||
| if (isRTL(sheet.options.dir)) { | ||
| stylis.use(rtlPlugin); | ||
| } | ||
| this.emit('css', [stylis("." + className, declaration.trim()), className]); | ||
| return className; | ||
| }; | ||
| _proto.convertRuleset = function convertRuleset(unifiedRuleset, ruleset) { | ||
| var _this4 = this; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(unifiedRuleset)) { | ||
| throw new TypeError('Ruleset must be an object of properties.'); | ||
| } | ||
| } | ||
| var atRules = []; | ||
| Object.keys(unifiedRuleset).forEach(function (baseKey) { | ||
| var key = baseKey; | ||
| var value = unifiedRuleset[key]; | ||
| if (typeof value === 'undefined') { | ||
| return; | ||
| } | ||
| if (key.startsWith('@')) { | ||
| atRules.push(key); | ||
| } else if (key.startsWith(':') || key.startsWith('[')) { | ||
| _this4.convertSelector(key, value, ruleset); | ||
| } else { | ||
| var newValue = _this4.emit("property:" + key, [ruleset, value]); | ||
| _this4.emit('property', [ruleset, key, newValue || value]); | ||
| } | ||
| }); | ||
| atRules.forEach(function (key) { | ||
| switch (key) { | ||
| case '@fallbacks': | ||
| { | ||
| var fallbacks = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(fallbacks)) { | ||
| throw new Error('@fallbacks must be an object of property names to fallback values.'); | ||
| } | ||
| } | ||
| Object.keys(fallbacks).forEach(function (property) { | ||
| _this4.emit('fallback', [ruleset, property, toArray(fallbacks[property])]); | ||
| }); | ||
| break; | ||
| } | ||
| case '@media': | ||
| case '@supports': | ||
| { | ||
| var styles = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(styles)) { | ||
| throw new Error(key + " must be an object of queries to rulesets."); | ||
| } | ||
| } | ||
| Object.keys(styles).forEach(function (query) { | ||
| if (isObject(styles[query])) { | ||
| var event = key === '@media' ? 'media' : 'support'; | ||
| _this4.emit(event, [ruleset, query, _this4.convertRuleset(styles[query], ruleset.createRuleset(key + " " + query))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error(key + " " + query + " must be a mapping of conditions to style objects."); | ||
| } | ||
| }); | ||
| break; | ||
| } | ||
| case '@selectors': | ||
| { | ||
| var selectors = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(selectors)) { | ||
| throw new Error('@selectors must be an object of selectors to rulesets.'); | ||
| } | ||
| } | ||
| Object.keys(selectors).forEach(function (selector) { | ||
| _this4.convertSelector(selector, selectors[selector], ruleset, true); | ||
| }); | ||
| break; | ||
| } | ||
| default: | ||
| { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new SyntaxError("Unsupported local at-rule \"" + key + "\"."); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return ruleset; | ||
| }; | ||
| _proto.convertSelector = function convertSelector(key, value, ruleset, inAtRule) { | ||
| var _this5 = this; | ||
| if (inAtRule === void 0) { | ||
| inAtRule = false; | ||
| } | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!isObject(value)) { | ||
| throw new Error("Selector \"" + key + "\" must be a ruleset object."); | ||
| } else if ((key.includes(',') || !key.match(SELECTOR)) && !inAtRule) { | ||
| throw new Error("Advanced selector \"" + key + "\" must be nested within an @selectors block."); | ||
| } | ||
| } | ||
| key.split(',').forEach(function (k) { | ||
| var selector = k.trim(); | ||
| var type = 'selector'; | ||
| if (selector.charAt(0) === ':') { | ||
| type = 'pseudo'; | ||
| } else if (selector.charAt(0) === '[') { | ||
| type = 'attribute'; | ||
| } | ||
| _this5.emit(type, [ruleset, selector, _this5.convertRuleset(value, ruleset.createRuleset(selector))]); | ||
| }); | ||
| }; | ||
| _proto.convertFontFaces = function convertFontFaces(fontFamily, faces, sheet) { | ||
| var _this6 = this; | ||
| var srcPaths = []; | ||
| var fontFaces = faces.map(function (font) { | ||
| srcPaths.push(font.srcPaths); | ||
| return _this6.convertRuleset(formatFontFace(_extends({}, font, { | ||
| fontFamily: fontFamily | ||
| })), sheet.createRuleset(fontFamily)); | ||
| }); | ||
| this.emit('font-face', [sheet, fontFaces, fontFamily, srcPaths]); | ||
| }; | ||
| _proto.convertKeyframe = function convertKeyframe(animationName, frames, sheet) { | ||
| var _this7 = this; | ||
| var keyframe = sheet.createRuleset(animationName); | ||
| Object.keys(frames).forEach(function (key) { | ||
| var value = frames[key]; | ||
| if (typeof value !== 'string' && typeof value !== 'undefined') { | ||
| keyframe.addNested(key, _this7.convertRuleset(value, keyframe.createRuleset(key))); | ||
| } | ||
| }); | ||
| this.emit('keyframe', [sheet, keyframe, animationName]); | ||
| }; | ||
| _proto.injectFontFaces = function injectFontFaces(value, cache) { | ||
| if (value === void 0) { | ||
| value = ''; | ||
| } | ||
| if (cache === void 0) { | ||
| cache = {}; | ||
| } | ||
| var fontFaces = []; | ||
| value.split(',').forEach(function (name) { | ||
| var familyName = name.trim(); | ||
| var fonts = cache[familyName]; | ||
| if (Array.isArray(fonts)) { | ||
| fontFaces.push.apply(fontFaces, fonts); | ||
| } else { | ||
| fontFaces.push(familyName); | ||
| } | ||
| }); | ||
| return fontFaces; | ||
| }; | ||
| _proto.injectKeyframes = function injectKeyframes(value, cache) { | ||
| if (value === void 0) { | ||
| value = ''; | ||
| } | ||
| if (cache === void 0) { | ||
| cache = {}; | ||
| } | ||
| return value.split(',').map(function (name) { | ||
| var animationName = name.trim(); | ||
| return cache[animationName] || animationName; | ||
| }); | ||
| }; | ||
| _proto.emit = function emit(eventName, args) { | ||
| if (this.handlers[eventName]) { | ||
| var _this$handlers; | ||
| return (_this$handlers = this.handlers)[eventName].apply(_this$handlers, args); | ||
| } | ||
| return undefined; | ||
| }; | ||
| _proto.off = function off(eventName) { | ||
| delete this.handlers[eventName]; | ||
| return this; | ||
| }; | ||
| _proto.on = function on(eventName, callback) { | ||
| this.handlers[eventName] = callback; | ||
| return this; | ||
| }; | ||
| return UnifiedSyntax; | ||
| }(); | ||
| var GLOBAL_STYLE_NAME = ':root'; | ||
| var Adapter = function () { | ||
| function Adapter() { | ||
| _defineProperty(this, "aesthetic", void 0); | ||
| _defineProperty(this, "syntax", new UnifiedSyntax()); | ||
| _defineProperty(this, "cacheManager", new CacheManager()); | ||
| _defineProperty(this, "sheetManager", null); | ||
| } | ||
| var _proto = Adapter.prototype; | ||
| _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) { | ||
| if (typeof document !== 'undefined') { | ||
| document.documentElement.setAttribute('dir', this.aesthetic.options.rtl ? 'rtl' : 'ltr'); | ||
| } | ||
| var options = this.prepareTransformOptions(_extends({}, baseOptions, { | ||
| global: true, | ||
| name: GLOBAL_STYLE_NAME | ||
| })); | ||
| var cacheOptions = _extends({}, options); | ||
| delete cacheOptions.dir; | ||
| var cache = this.cacheManager.get(GLOBAL_STYLE_NAME, cacheOptions); | ||
| var globalSheet = this.aesthetic.getGlobalSheet(options.theme); | ||
| if (cache || !globalSheet) { | ||
| return this; | ||
| } | ||
| var parsedSheet = this.cacheManager.set(GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), options), cacheOptions); | ||
| this.transformStyles(Object.values(parsedSheet), options); | ||
| this.flushStyles(GLOBAL_STYLE_NAME); | ||
| return this; | ||
| }; | ||
| _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) { | ||
| var options = this.prepareTransformOptions(baseOptions); | ||
| var cache = this.cacheManager.get(styleName, options); | ||
| if (cache) { | ||
| return cache; | ||
| } | ||
| this.applyGlobalStyles(baseOptions); | ||
| var nativeSheet = this.syntax.convertStyleSheet(this.aesthetic.getStyleSheet(styleName, options.theme), _extends({}, options, { | ||
| name: styleName | ||
| })); | ||
| var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), options); | ||
| return this.cacheManager.set(styleName, _extends({}, parsedSheet, {}, nativeSheet.classNames), options); | ||
| }; | ||
| _proto.flushStyles = function flushStyles(styleName) {}; | ||
| _proto.getCacheManager = function getCacheManager() { | ||
| return this.cacheManager; | ||
| }; | ||
| _proto.getStyleSheetManager = function getStyleSheetManager() { | ||
| if (this.sheetManager) { | ||
| return this.sheetManager; | ||
| } | ||
| this.sheetManager = new StyleSheetManager(); | ||
| return this.sheetManager; | ||
| }; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return isObject(block); | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet, options) { | ||
| return _extends({}, styleSheet); | ||
| }; | ||
| _proto.purgeStyles = function purgeStyles() {}; | ||
| _proto.resetGlobalStyles = function resetGlobalStyles(prevTheme) { | ||
| this.cacheManager.clear(function (unit) { | ||
| return unit.global === true && unit.theme === prevTheme; | ||
| }); | ||
| this.purgeStyles(); | ||
| return this; | ||
| }; | ||
| _proto.transformStyles = function transformStyles(styles, baseOptions) { | ||
| var _this = this; | ||
| var options = this.prepareTransformOptions(baseOptions); | ||
| var classNames = []; | ||
| var nativeBlocks = []; | ||
| var parsedBlocks = []; | ||
| var inlineName = ''; | ||
| styles.forEach(function (style) { | ||
| if (!style) { | ||
| return; | ||
| } | ||
| if (typeof style === 'string') { | ||
| classNames.push.apply(classNames, String(style).split(' ').map(function (s) { | ||
| return stripClassPrefix(s).trim(); | ||
| })); | ||
| } else if (isObject(style)) { | ||
| if (_this.isParsedBlock(style)) { | ||
| parsedBlocks.push(style); | ||
| } else { | ||
| nativeBlocks.push(style); | ||
| } | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('Unsupported style type to transform.'); | ||
| } | ||
| }); | ||
| if (nativeBlocks.length > 0) { | ||
| var nativeSheet = new Sheet(options); | ||
| var counter = 0; | ||
| inlineName = uuid(); | ||
| nativeBlocks.forEach(function (block) { | ||
| nativeSheet.addRuleset(nativeSheet.createRuleset("inline-" + counter).addProperties(block)); | ||
| counter += 1; | ||
| }); | ||
| parsedBlocks.push.apply(parsedBlocks, Object.values(this.parseStyleSheet(nativeSheet.toObject(), options))); | ||
| } | ||
| if (parsedBlocks.length > 0) { | ||
| classNames.push(this.transformToClassName(parsedBlocks)); | ||
| } | ||
| if (inlineName) { | ||
| this.flushStyles(inlineName); | ||
| } | ||
| return classNames.join(' ').trim(); | ||
| }; | ||
| _proto.prepareTransformOptions = function prepareTransformOptions(options) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| var dir = this.aesthetic.options.rtl ? 'rtl' : 'ltr'; | ||
| return { | ||
| dir: options.dir || dir, | ||
| global: options.global || false, | ||
| name: options.name || '', | ||
| theme: options.theme || this.aesthetic.options.theme | ||
| }; | ||
| }; | ||
| return Adapter; | ||
| }(); | ||
| var TestAdapter = function (_Adapter) { | ||
| _inheritsLoose(TestAdapter, _Adapter); | ||
| function TestAdapter() { | ||
| return _Adapter.apply(this, arguments) || this; | ||
| } | ||
| var _proto = TestAdapter.prototype; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return typeof block === 'string'; | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet) { | ||
| return Object.keys(styleSheet).reduce(function (obj, key) { | ||
| var _extends2; | ||
| return _extends({}, obj, (_extends2 = {}, _extends2[key] = key, _extends2)); | ||
| }, {}); | ||
| }; | ||
| _proto.transformToClassName = function transformToClassName(styles) { | ||
| return styles.filter(function (style) { | ||
| return style && typeof style === 'string'; | ||
| }).join(' '); | ||
| }; | ||
| return TestAdapter; | ||
| }(Adapter); | ||
| function setupAesthetic(aesthetic, adapter) { | ||
@@ -1382,2 +467,2 @@ aesthetic.configure({ | ||
| export { DIRECTIONS, FONT_CIRCULAR_MULTIPLE, FONT_CIRCULAR_MULTIPLE_FLAT_SRC, FONT_ROBOTO, FONT_ROBOTO_FLAT_SRC, KEYFRAME_FADE, KEYFRAME_SLIDE_PERCENT, SYNTAX_ATTRIBUTE, SYNTAX_CHARSET, SYNTAX_DESCENDANT, SYNTAX_FALLBACKS, SYNTAX_FONT_FACE, SYNTAX_FONT_FACES_INLINE, SYNTAX_FONT_FACE_MIXED, SYNTAX_FONT_FACE_MULTIPLE, SYNTAX_GLOBAL, SYNTAX_IMPORT, SYNTAX_IMPORT_MULTIPLE, SYNTAX_KEYFRAMES, SYNTAX_KEYFRAMES_INLINE, SYNTAX_KEYFRAMES_MIXED, SYNTAX_KEYFRAMES_PERCENT, SYNTAX_MEDIA_QUERY, SYNTAX_MEDIA_QUERY_NESTED, SYNTAX_MULTI_SELECTOR, SYNTAX_NAMESPACE, SYNTAX_PAGE, SYNTAX_PROPERTIES, SYNTAX_PSEUDO, SYNTAX_RAW_CSS, SYNTAX_SUPPORTS, SYNTAX_UNIFIED_GLOBAL_FULL, SYNTAX_UNIFIED_LOCAL, SYNTAX_UNIFIED_LOCAL_FULL, SYNTAX_VIEWPORT, TEST_CLASS_NAMES, TEST_STATEMENT, TestAdapter, cleanupStyleElements, convertDirection, getFlushedStyles, renderAndExpect, setupAesthetic, teardownAesthetic }; | ||
| export { DIRECTIONS, FONT_CIRCULAR_MULTIPLE, FONT_CIRCULAR_MULTIPLE_FLAT_SRC, FONT_ROBOTO, FONT_ROBOTO_FLAT_SRC, KEYFRAME_FADE, KEYFRAME_SLIDE_PERCENT, SYNTAX_ATTRIBUTE, SYNTAX_CHARSET, SYNTAX_DESCENDANT, SYNTAX_FALLBACKS, SYNTAX_FONT_FACE, SYNTAX_FONT_FACES_INLINE, SYNTAX_FONT_FACE_MIXED, SYNTAX_FONT_FACE_MULTIPLE, SYNTAX_GLOBAL, SYNTAX_IMPORT, SYNTAX_IMPORT_MULTIPLE, SYNTAX_KEYFRAMES, SYNTAX_KEYFRAMES_INLINE, SYNTAX_KEYFRAMES_MIXED, SYNTAX_KEYFRAMES_PERCENT, SYNTAX_MEDIA_QUERY, SYNTAX_MEDIA_QUERY_NESTED, SYNTAX_MULTI_SELECTOR, SYNTAX_NAMESPACE, SYNTAX_PAGE, SYNTAX_PROPERTIES, SYNTAX_PSEUDO, SYNTAX_RAW_CSS, SYNTAX_SUPPORTS, SYNTAX_UNIFIED_GLOBAL_FULL, SYNTAX_UNIFIED_LOCAL, SYNTAX_UNIFIED_LOCAL_FULL, SYNTAX_VIEWPORT, TEST_CLASS_NAMES, TEST_STATEMENT, cleanupStyleElements, convertDirection, getFlushedStyles, renderAndExpect, setupAesthetic, teardownAesthetic }; |
@@ -7,2 +7,3 @@ /** | ||
| import Adapter from './Adapter'; | ||
| import TestAdapter from './TestAdapter'; | ||
| import Aesthetic from './Aesthetic'; | ||
@@ -15,4 +16,4 @@ import ClassNameAdapter from './ClassNameAdapter'; | ||
| export * from './types'; | ||
| export { Adapter, Aesthetic, ClassNameAdapter, UnifiedSyntax, Ruleset, Sheet }; | ||
| export { Adapter, TestAdapter, Aesthetic, ClassNameAdapter, UnifiedSyntax, Ruleset, Sheet }; | ||
| export default instance; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -1101,2 +1101,32 @@ 'use strict'; | ||
| var TestAdapter = function (_Adapter) { | ||
| _inheritsLoose(TestAdapter, _Adapter); | ||
| function TestAdapter() { | ||
| return _Adapter.apply(this, arguments) || this; | ||
| } | ||
| var _proto = TestAdapter.prototype; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return typeof block === 'string'; | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet) { | ||
| return Object.keys(styleSheet).reduce(function (obj, key) { | ||
| var _extends2; | ||
| return _extends({}, obj, (_extends2 = {}, _extends2[key] = key, _extends2)); | ||
| }, {}); | ||
| }; | ||
| _proto.transformToClassName = function transformToClassName(styles) { | ||
| return styles.filter(function (style) { | ||
| return style && typeof style === 'string'; | ||
| }).join(' '); | ||
| }; | ||
| return TestAdapter; | ||
| }(Adapter); | ||
| /** | ||
@@ -1113,3 +1143,4 @@ * @copyright 2017-2019, Miles Johnson | ||
| exports.Sheet = Sheet; | ||
| exports.TestAdapter = TestAdapter; | ||
| exports.UnifiedSyntax = UnifiedSyntax; | ||
| exports.default = instance; |
| import CSS from 'csstype'; | ||
| import Aesthetic from './Aesthetic'; | ||
| import Adapter from './Adapter'; | ||
| import TestAdapter from './TestAdapter'; | ||
| import { FontFace, Direction, SheetMap, Keyframes } from './types'; | ||
| import { Aesthetic, Adapter, TestAdapter, FontFace, Direction, SheetMap, Keyframes } from './index'; | ||
| export { TestAdapter }; | ||
@@ -7,0 +4,0 @@ export interface TestTheme { |
@@ -9,21 +9,4 @@ 'use strict'; | ||
| var aestheticUtils = require('aesthetic-utils'); | ||
| var uuid = _interopDefault(require('uuid/v4')); | ||
| var Stylis = _interopDefault(require('stylis')); | ||
| var core = require('rtl-css-js/core'); | ||
| var index = require('./index'); | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _extends() { | ||
@@ -47,904 +30,5 @@ _extends = Object.assign || function (target) { | ||
| function _inheritsLoose(subClass, superClass) { | ||
| subClass.prototype = Object.create(superClass.prototype); | ||
| subClass.prototype.constructor = subClass; | ||
| subClass.__proto__ = superClass; | ||
| } | ||
| var CacheManager = function () { | ||
| function CacheManager() { | ||
| _defineProperty(this, "cache", new Map()); | ||
| } | ||
| var _proto = CacheManager.prototype; | ||
| _proto.clear = function clear(filter) { | ||
| var _this = this; | ||
| if (filter) { | ||
| this.cache.forEach(function (units, key) { | ||
| _this.cache.set(key, units.filter(function (unit) { | ||
| return !filter(unit); | ||
| })); | ||
| }); | ||
| } else { | ||
| this.cache.clear(); | ||
| } | ||
| return this; | ||
| }; | ||
| _proto.compare = function compare(unit, tags) { | ||
| return unit.dir === tags.dir && unit.global === tags.global && unit.theme === tags.theme; | ||
| }; | ||
| _proto.get = function get(key, tags) { | ||
| var _this2 = this; | ||
| var units = this.cache.get(key); | ||
| if (!units || units.length === 0) { | ||
| return null; | ||
| } | ||
| var cache = units.find(function (unit) { | ||
| return _this2.compare(unit, tags); | ||
| }); | ||
| return cache ? cache.value : null; | ||
| }; | ||
| _proto.set = function set(key, value, tags) { | ||
| var units = this.cache.get(key) || []; | ||
| units.push(_extends({}, tags, { | ||
| value: value | ||
| })); | ||
| this.cache.set(key, units); | ||
| return value; | ||
| }; | ||
| return CacheManager; | ||
| }(); | ||
| var Ruleset = function () { | ||
| function Ruleset(selector, root, parent) { | ||
| if (parent === void 0) { | ||
| parent = null; | ||
| } | ||
| _defineProperty(this, "compoundProperties", new Map()); | ||
| _defineProperty(this, "nested", new Map()); | ||
| _defineProperty(this, "parent", null); | ||
| _defineProperty(this, "properties", {}); | ||
| _defineProperty(this, "root", void 0); | ||
| _defineProperty(this, "selector", void 0); | ||
| this.selector = selector; | ||
| this.root = root; | ||
| this.parent = parent; | ||
| } | ||
| var _proto = Ruleset.prototype; | ||
| _proto.addCompoundProperty = function addCompoundProperty(key, value) { | ||
| this.compoundProperties.set(key, value); | ||
| return this; | ||
| }; | ||
| _proto.addNested = function addNested(selector, ruleset, merge) { | ||
| if (merge === void 0) { | ||
| merge = true; | ||
| } | ||
| if (merge && this.nested.has(selector)) { | ||
| this.nested.get(selector).merge(ruleset); | ||
| } else { | ||
| this.nested.set(selector, ruleset); | ||
| } | ||
| return this; | ||
| }; | ||
| _proto.addProperty = function addProperty(key, value) { | ||
| this.properties[key] = value; | ||
| return this; | ||
| }; | ||
| _proto.addProperties = function addProperties(properties) { | ||
| Object.assign(this.properties, properties); | ||
| return this; | ||
| }; | ||
| _proto.createRuleset = function createRuleset(selector) { | ||
| return new Ruleset(selector, this.root, this); | ||
| }; | ||
| _proto.merge = function merge(ruleset) { | ||
| var _this = this; | ||
| Object.assign(this.properties, ruleset.properties); | ||
| ruleset.nested.forEach(function (nested, selector) { | ||
| _this.addNested(selector, nested); | ||
| }); | ||
| return this; | ||
| }; | ||
| _proto.toObject = function toObject() { | ||
| var props = aestheticUtils.isRTL(this.root.options.dir) ? convertRTL(this.properties) : this.properties; | ||
| var compounds = {}; | ||
| this.compoundProperties.forEach(function (compound, key) { | ||
| compounds[key] = compound; | ||
| }); | ||
| return _extends({}, props, {}, compounds, {}, aestheticUtils.toObjectRecursive(this.nested)); | ||
| }; | ||
| return Ruleset; | ||
| }(); | ||
| var Sheet = function () { | ||
| function Sheet(options) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| _defineProperty(this, "atRules", {}); | ||
| _defineProperty(this, "classNames", {}); | ||
| _defineProperty(this, "options", void 0); | ||
| _defineProperty(this, "ruleSets", {}); | ||
| this.options = options; | ||
| } | ||
| var _proto = Sheet.prototype; | ||
| _proto.addAtRule = function addAtRule(rule, value) { | ||
| this.atRules[rule] = value; | ||
| return this; | ||
| }; | ||
| _proto.addClassName = function addClassName(selector, value) { | ||
| this.classNames[selector] = value; | ||
| return this; | ||
| }; | ||
| _proto.addRuleset = function addRuleset(set) { | ||
| this.ruleSets[set.selector] = set; | ||
| return this; | ||
| }; | ||
| _proto.createRuleset = function createRuleset(selector) { | ||
| return new Ruleset(selector, this); | ||
| }; | ||
| _proto.createSheet = function createSheet(options) { | ||
| return new Sheet(options || this.options); | ||
| }; | ||
| _proto.toObject = function toObject() { | ||
| var _this = this; | ||
| var atRules = {}; | ||
| var sets = {}; | ||
| Object.keys(this.atRules).forEach(function (key) { | ||
| var value = _this.atRules[key]; | ||
| if (value instanceof Sheet || value instanceof Ruleset) { | ||
| sets[key] = value; | ||
| } else if (Array.isArray(value)) { | ||
| atRules[key] = value.map(function (item) { | ||
| return item instanceof Ruleset ? item.toObject() : item; | ||
| }); | ||
| } else { | ||
| atRules[key] = value; | ||
| } | ||
| }); | ||
| return _extends({}, atRules, {}, aestheticUtils.toObjectRecursive(sets), {}, aestheticUtils.toObjectRecursive(this.ruleSets)); | ||
| }; | ||
| return Sheet; | ||
| }(); | ||
| var StyleSheetManager = function () { | ||
| function StyleSheetManager() { | ||
| _defineProperty(this, "element", null); | ||
| _defineProperty(this, "sheet", null); | ||
| } | ||
| var _proto = StyleSheetManager.prototype; | ||
| _proto.getFlushedStyles = function getFlushedStyles() { | ||
| return aestheticUtils.getFlushedStyles(this.getStyleElement()); | ||
| }; | ||
| _proto.getStyleElement = function getStyleElement() { | ||
| if (this.element) { | ||
| return this.element; | ||
| } | ||
| this.element = document.createElement('style'); | ||
| this.element.type = 'text/css'; | ||
| this.element.media = 'screen'; | ||
| this.element.setAttribute('data-aesthetic', 'true'); | ||
| document.head.append(this.element); | ||
| this.sheet = this.element.sheet; | ||
| return this.element; | ||
| }; | ||
| _proto.injectRule = function injectRule(rule) { | ||
| this.getStyleElement(); | ||
| this.sheet.insertRule(rule, this.sheet.cssRules.length); | ||
| return this; | ||
| }; | ||
| _proto.injectStatements = function injectStatements(css) { | ||
| this.getStyleElement().textContent += css; | ||
| return this; | ||
| }; | ||
| _proto.purgeStyles = function purgeStyles() { | ||
| aestheticUtils.purgeStyles(this.getStyleElement()); | ||
| return this; | ||
| }; | ||
| return StyleSheetManager; | ||
| }(); | ||
| var SELECTOR = /^((\[[\x2Da-z\u017F\u212A]+\])|(::?[\x2Da-z\u017F\u212A]+))$/i; | ||
| var CLASS_NAME = /^[a-z\u017F\u212A]{1}[\x2D0-9_a-z\u017F\u212A]+$/i; | ||
| function rtlPlugin(context, content) { | ||
| if (context !== 1) { | ||
| return undefined; | ||
| } | ||
| var _content$split = content.split(':', 2), | ||
| rawKey = _content$split[0], | ||
| rawValue = _content$split[1]; | ||
| var isQuoted = rawValue.trim().startsWith("'"); | ||
| var unquotedValue = isQuoted ? rawValue.slice(1).slice(0, -1) : rawValue; | ||
| var _convertProperty = core.convertProperty(rawKey.trim(), unquotedValue.trim()), | ||
| key = _convertProperty.key, | ||
| value = _convertProperty.value; | ||
| return key + ":" + (isQuoted ? "'" + value + "'" : value); | ||
| } | ||
| var UnifiedSyntax = function () { | ||
| function UnifiedSyntax() { | ||
| var _this = this; | ||
| _defineProperty(this, "handlers", {}); | ||
| _defineProperty(this, "keyframesCount", 0); | ||
| _defineProperty(this, "handleAnimationName", function (ruleset, value) { | ||
| if (!value) { | ||
| return undefined; | ||
| } | ||
| return (Array.isArray(value) ? value : [value]).map(function (item) { | ||
| if (typeof item === 'string') { | ||
| return item; | ||
| } | ||
| var name = item.name || "keyframe-" + (_this.keyframesCount += 1); | ||
| _this.convertKeyframe(name, item, ruleset.root); | ||
| return name; | ||
| }).join(', '); | ||
| }); | ||
| _defineProperty(this, "handleFontFamily", function (ruleset, value) { | ||
| if (!value) { | ||
| return undefined; | ||
| } | ||
| var output = new Set(); | ||
| var fontFaces = {}; | ||
| aestheticUtils.toArray(value).forEach(function (item) { | ||
| if (typeof item === 'string') { | ||
| output.add(item); | ||
| return; | ||
| } | ||
| var name = item.fontFamily; | ||
| if (!name) { | ||
| return; | ||
| } | ||
| output.add(name); | ||
| if (fontFaces[name]) { | ||
| fontFaces[name].push(item); | ||
| } else { | ||
| fontFaces[name] = [item]; | ||
| } | ||
| }); | ||
| Object.keys(fontFaces).forEach(function (fontFamily) { | ||
| _this.convertFontFaces(fontFamily, fontFaces[fontFamily], ruleset.root); | ||
| }); | ||
| return Array.from(output).join(', '); | ||
| }); | ||
| this.on('property:animationName', this.handleAnimationName); | ||
| this.on('property:fontFamily', this.handleFontFamily); | ||
| } | ||
| var _proto = UnifiedSyntax.prototype; | ||
| _proto.convertGlobalSheet = function convertGlobalSheet(globalSheet, options) { | ||
| var _this2 = this; | ||
| var sheet = new Sheet(options); | ||
| Object.keys(globalSheet).forEach(function (rule) { | ||
| switch (rule) { | ||
| case '@charset': | ||
| { | ||
| var _charset = globalSheet[rule]; | ||
| if (typeof _charset === 'string') { | ||
| _this2.emit('charset', [sheet, _charset]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('@charset must be a string.'); | ||
| } | ||
| break; | ||
| } | ||
| case '@font-face': | ||
| { | ||
| var faces = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(faces)) { | ||
| throw new Error('@font-face must be an object of font family names to font faces.'); | ||
| } | ||
| } | ||
| Object.keys(faces).forEach(function (fontFamily) { | ||
| _this2.convertFontFaces(fontFamily, aestheticUtils.toArray(faces[fontFamily]), sheet); | ||
| }); | ||
| break; | ||
| } | ||
| case '@global': | ||
| { | ||
| var globals = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(globals)) { | ||
| throw new Error('@global must be an object of selectors to ruleset objects.'); | ||
| } | ||
| } | ||
| Object.keys(globals).forEach(function (selector) { | ||
| if (aestheticUtils.isObject(globals[selector])) { | ||
| _this2.emit('global', [sheet, selector, _this2.convertRuleset(globals[selector], sheet.createRuleset(selector))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("@global \"" + selector + "\" must be a ruleset object."); | ||
| } | ||
| }); | ||
| break; | ||
| } | ||
| case '@import': | ||
| { | ||
| var _paths = globalSheet[rule]; | ||
| if (typeof _paths === 'string' || Array.isArray(_paths)) { | ||
| _this2.emit('import', [sheet, aestheticUtils.toArray(_paths).map(function (path) { | ||
| return String(path); | ||
| })]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('@import must be a string or an array of strings.'); | ||
| } | ||
| break; | ||
| } | ||
| case '@keyframes': | ||
| { | ||
| var frames = globalSheet[rule] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(frames)) { | ||
| throw new Error('@keyframes must be an object of animation names to keyframes.'); | ||
| } | ||
| } | ||
| Object.keys(frames).forEach(function (animationName) { | ||
| _this2.convertKeyframe(animationName, frames[animationName], sheet); | ||
| }); | ||
| break; | ||
| } | ||
| case '@page': | ||
| case '@viewport': | ||
| { | ||
| var style = globalSheet[rule]; | ||
| if (aestheticUtils.isObject(style)) { | ||
| _this2.emit(rule.slice(1), [sheet, _this2.convertRuleset(style, sheet.createRuleset(rule))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error(rule + " must be a ruleset object."); | ||
| } | ||
| break; | ||
| } | ||
| default: | ||
| { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("Unknown property \"" + rule + "\". Only at-rules are allowed in the global style sheet."); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return sheet; | ||
| }; | ||
| _proto.convertStyleSheet = function convertStyleSheet(styleSheet, options) { | ||
| var _this3 = this; | ||
| var sheet = new Sheet(options); | ||
| Object.keys(styleSheet).forEach(function (selector) { | ||
| var ruleset = styleSheet[selector]; | ||
| if (!ruleset) { | ||
| return; | ||
| } | ||
| if (selector.charAt(0) === '@') { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new SyntaxError("At-rules may not be defined in the root, found \"" + selector + "\"."); | ||
| } | ||
| } else if (typeof ruleset === 'string') { | ||
| if (ruleset.match(CLASS_NAME)) { | ||
| sheet.addClassName(selector, ruleset); | ||
| } else { | ||
| sheet.addClassName(selector, _this3.convertRawCss(sheet, selector, ruleset)); | ||
| } | ||
| } else if (aestheticUtils.isObject(ruleset)) { | ||
| sheet.addRuleset(_this3.convertRuleset(ruleset, sheet.createRuleset(selector))); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error("Invalid ruleset for \"" + selector + "\". Must be an object or class name."); | ||
| } | ||
| }); | ||
| return sheet; | ||
| }; | ||
| _proto.convertRawCss = function convertRawCss(sheet, selector, declaration) { | ||
| var styleName = sheet.options.name; | ||
| var className = styleName + "-" + selector; | ||
| var stylis = new Stylis({ | ||
| compress: !("production" !== process.env.NODE_ENV), | ||
| global: false, | ||
| keyframe: true, | ||
| prefix: true | ||
| }); | ||
| if (aestheticUtils.isRTL(sheet.options.dir)) { | ||
| stylis.use(rtlPlugin); | ||
| } | ||
| this.emit('css', [stylis("." + className, declaration.trim()), className]); | ||
| return className; | ||
| }; | ||
| _proto.convertRuleset = function convertRuleset(unifiedRuleset, ruleset) { | ||
| var _this4 = this; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(unifiedRuleset)) { | ||
| throw new TypeError('Ruleset must be an object of properties.'); | ||
| } | ||
| } | ||
| var atRules = []; | ||
| Object.keys(unifiedRuleset).forEach(function (baseKey) { | ||
| var key = baseKey; | ||
| var value = unifiedRuleset[key]; | ||
| if (typeof value === 'undefined') { | ||
| return; | ||
| } | ||
| if (key.startsWith('@')) { | ||
| atRules.push(key); | ||
| } else if (key.startsWith(':') || key.startsWith('[')) { | ||
| _this4.convertSelector(key, value, ruleset); | ||
| } else { | ||
| var newValue = _this4.emit("property:" + key, [ruleset, value]); | ||
| _this4.emit('property', [ruleset, key, newValue || value]); | ||
| } | ||
| }); | ||
| atRules.forEach(function (key) { | ||
| switch (key) { | ||
| case '@fallbacks': | ||
| { | ||
| var fallbacks = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(fallbacks)) { | ||
| throw new Error('@fallbacks must be an object of property names to fallback values.'); | ||
| } | ||
| } | ||
| Object.keys(fallbacks).forEach(function (property) { | ||
| _this4.emit('fallback', [ruleset, property, aestheticUtils.toArray(fallbacks[property])]); | ||
| }); | ||
| break; | ||
| } | ||
| case '@media': | ||
| case '@supports': | ||
| { | ||
| var styles = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(styles)) { | ||
| throw new Error(key + " must be an object of queries to rulesets."); | ||
| } | ||
| } | ||
| Object.keys(styles).forEach(function (query) { | ||
| if (aestheticUtils.isObject(styles[query])) { | ||
| var event = key === '@media' ? 'media' : 'support'; | ||
| _this4.emit(event, [ruleset, query, _this4.convertRuleset(styles[query], ruleset.createRuleset(key + " " + query))]); | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error(key + " " + query + " must be a mapping of conditions to style objects."); | ||
| } | ||
| }); | ||
| break; | ||
| } | ||
| case '@selectors': | ||
| { | ||
| var selectors = unifiedRuleset[key] || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(selectors)) { | ||
| throw new Error('@selectors must be an object of selectors to rulesets.'); | ||
| } | ||
| } | ||
| Object.keys(selectors).forEach(function (selector) { | ||
| _this4.convertSelector(selector, selectors[selector], ruleset, true); | ||
| }); | ||
| break; | ||
| } | ||
| default: | ||
| { | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| throw new SyntaxError("Unsupported local at-rule \"" + key + "\"."); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return ruleset; | ||
| }; | ||
| _proto.convertSelector = function convertSelector(key, value, ruleset, inAtRule) { | ||
| var _this5 = this; | ||
| if (inAtRule === void 0) { | ||
| inAtRule = false; | ||
| } | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (!aestheticUtils.isObject(value)) { | ||
| throw new Error("Selector \"" + key + "\" must be a ruleset object."); | ||
| } else if ((key.includes(',') || !key.match(SELECTOR)) && !inAtRule) { | ||
| throw new Error("Advanced selector \"" + key + "\" must be nested within an @selectors block."); | ||
| } | ||
| } | ||
| key.split(',').forEach(function (k) { | ||
| var selector = k.trim(); | ||
| var type = 'selector'; | ||
| if (selector.charAt(0) === ':') { | ||
| type = 'pseudo'; | ||
| } else if (selector.charAt(0) === '[') { | ||
| type = 'attribute'; | ||
| } | ||
| _this5.emit(type, [ruleset, selector, _this5.convertRuleset(value, ruleset.createRuleset(selector))]); | ||
| }); | ||
| }; | ||
| _proto.convertFontFaces = function convertFontFaces(fontFamily, faces, sheet) { | ||
| var _this6 = this; | ||
| var srcPaths = []; | ||
| var fontFaces = faces.map(function (font) { | ||
| srcPaths.push(font.srcPaths); | ||
| return _this6.convertRuleset(aestheticUtils.formatFontFace(_extends({}, font, { | ||
| fontFamily: fontFamily | ||
| })), sheet.createRuleset(fontFamily)); | ||
| }); | ||
| this.emit('font-face', [sheet, fontFaces, fontFamily, srcPaths]); | ||
| }; | ||
| _proto.convertKeyframe = function convertKeyframe(animationName, frames, sheet) { | ||
| var _this7 = this; | ||
| var keyframe = sheet.createRuleset(animationName); | ||
| Object.keys(frames).forEach(function (key) { | ||
| var value = frames[key]; | ||
| if (typeof value !== 'string' && typeof value !== 'undefined') { | ||
| keyframe.addNested(key, _this7.convertRuleset(value, keyframe.createRuleset(key))); | ||
| } | ||
| }); | ||
| this.emit('keyframe', [sheet, keyframe, animationName]); | ||
| }; | ||
| _proto.injectFontFaces = function injectFontFaces(value, cache) { | ||
| if (value === void 0) { | ||
| value = ''; | ||
| } | ||
| if (cache === void 0) { | ||
| cache = {}; | ||
| } | ||
| var fontFaces = []; | ||
| value.split(',').forEach(function (name) { | ||
| var familyName = name.trim(); | ||
| var fonts = cache[familyName]; | ||
| if (Array.isArray(fonts)) { | ||
| fontFaces.push.apply(fontFaces, fonts); | ||
| } else { | ||
| fontFaces.push(familyName); | ||
| } | ||
| }); | ||
| return fontFaces; | ||
| }; | ||
| _proto.injectKeyframes = function injectKeyframes(value, cache) { | ||
| if (value === void 0) { | ||
| value = ''; | ||
| } | ||
| if (cache === void 0) { | ||
| cache = {}; | ||
| } | ||
| return value.split(',').map(function (name) { | ||
| var animationName = name.trim(); | ||
| return cache[animationName] || animationName; | ||
| }); | ||
| }; | ||
| _proto.emit = function emit(eventName, args) { | ||
| if (this.handlers[eventName]) { | ||
| var _this$handlers; | ||
| return (_this$handlers = this.handlers)[eventName].apply(_this$handlers, args); | ||
| } | ||
| return undefined; | ||
| }; | ||
| _proto.off = function off(eventName) { | ||
| delete this.handlers[eventName]; | ||
| return this; | ||
| }; | ||
| _proto.on = function on(eventName, callback) { | ||
| this.handlers[eventName] = callback; | ||
| return this; | ||
| }; | ||
| return UnifiedSyntax; | ||
| }(); | ||
| var GLOBAL_STYLE_NAME = ':root'; | ||
| var Adapter = function () { | ||
| function Adapter() { | ||
| _defineProperty(this, "aesthetic", void 0); | ||
| _defineProperty(this, "syntax", new UnifiedSyntax()); | ||
| _defineProperty(this, "cacheManager", new CacheManager()); | ||
| _defineProperty(this, "sheetManager", null); | ||
| } | ||
| var _proto = Adapter.prototype; | ||
| _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) { | ||
| if (typeof document !== 'undefined') { | ||
| document.documentElement.setAttribute('dir', this.aesthetic.options.rtl ? 'rtl' : 'ltr'); | ||
| } | ||
| var options = this.prepareTransformOptions(_extends({}, baseOptions, { | ||
| global: true, | ||
| name: GLOBAL_STYLE_NAME | ||
| })); | ||
| var cacheOptions = _extends({}, options); | ||
| delete cacheOptions.dir; | ||
| var cache = this.cacheManager.get(GLOBAL_STYLE_NAME, cacheOptions); | ||
| var globalSheet = this.aesthetic.getGlobalSheet(options.theme); | ||
| if (cache || !globalSheet) { | ||
| return this; | ||
| } | ||
| var parsedSheet = this.cacheManager.set(GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), options), cacheOptions); | ||
| this.transformStyles(Object.values(parsedSheet), options); | ||
| this.flushStyles(GLOBAL_STYLE_NAME); | ||
| return this; | ||
| }; | ||
| _proto.createStyleSheet = function createStyleSheet(styleName, baseOptions) { | ||
| var options = this.prepareTransformOptions(baseOptions); | ||
| var cache = this.cacheManager.get(styleName, options); | ||
| if (cache) { | ||
| return cache; | ||
| } | ||
| this.applyGlobalStyles(baseOptions); | ||
| var nativeSheet = this.syntax.convertStyleSheet(this.aesthetic.getStyleSheet(styleName, options.theme), _extends({}, options, { | ||
| name: styleName | ||
| })); | ||
| var parsedSheet = this.parseStyleSheet(nativeSheet.toObject(), options); | ||
| return this.cacheManager.set(styleName, _extends({}, parsedSheet, {}, nativeSheet.classNames), options); | ||
| }; | ||
| _proto.flushStyles = function flushStyles(styleName) {}; | ||
| _proto.getCacheManager = function getCacheManager() { | ||
| return this.cacheManager; | ||
| }; | ||
| _proto.getStyleSheetManager = function getStyleSheetManager() { | ||
| if (this.sheetManager) { | ||
| return this.sheetManager; | ||
| } | ||
| this.sheetManager = new StyleSheetManager(); | ||
| return this.sheetManager; | ||
| }; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return aestheticUtils.isObject(block); | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet, options) { | ||
| return _extends({}, styleSheet); | ||
| }; | ||
| _proto.purgeStyles = function purgeStyles() {}; | ||
| _proto.resetGlobalStyles = function resetGlobalStyles(prevTheme) { | ||
| this.cacheManager.clear(function (unit) { | ||
| return unit.global === true && unit.theme === prevTheme; | ||
| }); | ||
| this.purgeStyles(); | ||
| return this; | ||
| }; | ||
| _proto.transformStyles = function transformStyles(styles, baseOptions) { | ||
| var _this = this; | ||
| var options = this.prepareTransformOptions(baseOptions); | ||
| var classNames = []; | ||
| var nativeBlocks = []; | ||
| var parsedBlocks = []; | ||
| var inlineName = ''; | ||
| styles.forEach(function (style) { | ||
| if (!style) { | ||
| return; | ||
| } | ||
| if (typeof style === 'string') { | ||
| classNames.push.apply(classNames, String(style).split(' ').map(function (s) { | ||
| return aestheticUtils.stripClassPrefix(s).trim(); | ||
| })); | ||
| } else if (aestheticUtils.isObject(style)) { | ||
| if (_this.isParsedBlock(style)) { | ||
| parsedBlocks.push(style); | ||
| } else { | ||
| nativeBlocks.push(style); | ||
| } | ||
| } else if ("production" !== process.env.NODE_ENV) { | ||
| throw new Error('Unsupported style type to transform.'); | ||
| } | ||
| }); | ||
| if (nativeBlocks.length > 0) { | ||
| var nativeSheet = new Sheet(options); | ||
| var counter = 0; | ||
| inlineName = uuid(); | ||
| nativeBlocks.forEach(function (block) { | ||
| nativeSheet.addRuleset(nativeSheet.createRuleset("inline-" + counter).addProperties(block)); | ||
| counter += 1; | ||
| }); | ||
| parsedBlocks.push.apply(parsedBlocks, Object.values(this.parseStyleSheet(nativeSheet.toObject(), options))); | ||
| } | ||
| if (parsedBlocks.length > 0) { | ||
| classNames.push(this.transformToClassName(parsedBlocks)); | ||
| } | ||
| if (inlineName) { | ||
| this.flushStyles(inlineName); | ||
| } | ||
| return classNames.join(' ').trim(); | ||
| }; | ||
| _proto.prepareTransformOptions = function prepareTransformOptions(options) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| var dir = this.aesthetic.options.rtl ? 'rtl' : 'ltr'; | ||
| return { | ||
| dir: options.dir || dir, | ||
| global: options.global || false, | ||
| name: options.name || '', | ||
| theme: options.theme || this.aesthetic.options.theme | ||
| }; | ||
| }; | ||
| return Adapter; | ||
| }(); | ||
| var TestAdapter = function (_Adapter) { | ||
| _inheritsLoose(TestAdapter, _Adapter); | ||
| function TestAdapter() { | ||
| return _Adapter.apply(this, arguments) || this; | ||
| } | ||
| var _proto = TestAdapter.prototype; | ||
| _proto.isParsedBlock = function isParsedBlock(block) { | ||
| return typeof block === 'string'; | ||
| }; | ||
| _proto.parseStyleSheet = function parseStyleSheet(styleSheet) { | ||
| return Object.keys(styleSheet).reduce(function (obj, key) { | ||
| var _extends2; | ||
| return _extends({}, obj, (_extends2 = {}, _extends2[key] = key, _extends2)); | ||
| }, {}); | ||
| }; | ||
| _proto.transformToClassName = function transformToClassName(styles) { | ||
| return styles.filter(function (style) { | ||
| return style && typeof style === 'string'; | ||
| }).join(' '); | ||
| }; | ||
| return TestAdapter; | ||
| }(Adapter); | ||
| function setupAesthetic(aesthetic, adapter) { | ||
| aesthetic.configure({ | ||
| adapter: adapter || new TestAdapter() | ||
| adapter: adapter || new index.TestAdapter() | ||
| }); | ||
@@ -1017,3 +101,3 @@ aesthetic.registerTheme('default', { | ||
| global = _ref2$global === void 0 ? false : _ref2$global; | ||
| var name = global ? GLOBAL_STYLE_NAME : adapter.constructor.name.replace('Adapter', '').toLowerCase(); | ||
| var name = global ? index.GLOBAL_STYLE_NAME : adapter.constructor.name.replace('Adapter', '').toLowerCase(); | ||
| var options = { | ||
@@ -1390,2 +474,8 @@ name: name, | ||
| Object.defineProperty(exports, 'TestAdapter', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return index.TestAdapter; | ||
| } | ||
| }); | ||
| exports.DIRECTIONS = DIRECTIONS; | ||
@@ -1428,3 +518,2 @@ exports.FONT_CIRCULAR_MULTIPLE = FONT_CIRCULAR_MULTIPLE; | ||
| exports.TEST_STATEMENT = TEST_STATEMENT; | ||
| exports.TestAdapter = TestAdapter; | ||
| exports.cleanupStyleElements = cleanupStyleElements; | ||
@@ -1431,0 +520,0 @@ exports.convertDirection = convertDirection; |
| { | ||
| "name": "aesthetic", | ||
| "version": "5.1.0", | ||
| "version": "5.1.1", | ||
| "description": "Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components through the use of adapters.", | ||
@@ -41,3 +41,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "cd4f3bc37d9f34ba5ff1a7e015a2a4fe33e726dd" | ||
| "gitHead": "15d25fe0065b23f6ba01a1d4d977ffd1cb1f6b2d" | ||
| } |
Sorry, the diff of this file is not supported yet
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
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
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
Improved metrics
- Number of low supply chain risk alerts
- decreased by-43.68%
49
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-23.96%
157686
- Lines of code
- decreased by-27.49%
3690
No dependency changes