aesthetic - npm Package Compare versions

Comparing version 4.0.0-alpha.7 to 4.0.0-rc.0

CHANGELOG.md

@@ -14,3 +14,2 @@ # 4.0.0
   [aesthetic-utils](https://github.com/milesj/aesthetic/tree/master/packages/utils) package.
-- Updated `Aesthetic#getTheme` to require a name argument. Will no longer default to active theme.
 - Updated `Aesthetic#transformStyles` to require all styles as an array in the 1st argument, instead
@@ -22,2 +21,3 @@ of being spread across all arguments.
 - Renamed `Aesthetic#processStyleSheet` to `parseStyleSheet`.
+- Removed the `pure` option (since class components are no longer used).
 
@@ -34,3 +34,2 @@ #### 🚀 Updates
 - Added `Aesthetic#purgeStyles`, so that adapters can clear their style sheets.
-- Added `getFlushedStyles`, `getStyleElements`, and `purgeStyles` helper functions.
 - Added an options object to `Aesthetic#createStyleSheet`, `Aeshetic#transformStyles`,
@@ -37,0 +36,0 @@ `UnifiedSyntax#convertGlobalSheet`, `UnifiedSyntax#convertStyleSheet`, and `Sheet`.

esm/Aesthetic.js

@@ -12,2 +12,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import UnifiedSyntax from './UnifiedSyntax';
+import { GLOBAL_STYLE_NAME } from './constants';
 
@@ -40,3 +41,2 @@ var Aesthetic = function () {
       passThemeProp: false,
-      pure: true,
       rtl: false,
@@ -53,9 +53,8 @@ stylesPropName: 'styles',
     document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
-    var name = ':root';
     var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
       global: true,
-      name: name
+      name: GLOBAL_STYLE_NAME
     }));
     delete options.dir;
-    var cache = this.cacheManager.get(name, options);
+    var cache = this.cacheManager.get(GLOBAL_STYLE_NAME, options);
     var globalDef = this.globals[options.theme];
@@ -68,5 +67,5 @@
     var globalSheet = globalDef(this.getTheme(options.theme));
-    var parsedSheet = this.cacheManager.set(name, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), name), options);
+    var parsedSheet = this.cacheManager.set(GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), GLOBAL_STYLE_NAME), options);
     this.transformStyles(Object.values(parsedSheet), options);
-    this.flushStyles(name);
+    this.flushStyles(GLOBAL_STYLE_NAME);
     return this;
@@ -76,4 +75,9 @@ };
   _proto.changeTheme = function changeTheme(themeName) {
+    var oldTheme = this.options.theme;
     this.getTheme(themeName);
     this.options.theme = themeName;
+    this.purgeStyles(GLOBAL_STYLE_NAME);
+    this.cacheManager.clear(function (unit) {
+      return !!unit.global && unit.theme === oldTheme;
+    });
     this.applyGlobalStyles({
@@ -94,3 +98,3 @@ theme: themeName
     this.applyGlobalStyles(baseOptions);
-    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), _extends({}, options, {
+    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName, options.theme), _extends({}, options, {
       name: styleName
@@ -158,3 +162,3 @@ }));
 
-  _proto.purgeStyles = function purgeStyles() {};
+  _proto.purgeStyles = function purgeStyles(styleName) {};
 
@@ -174,3 +178,3 @@ _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
 
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+    this.styles[styleName] = this.validateDefinition(styleName, styleSheet);
     return this;
@@ -193,3 +197,3 @@ };
     this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
+    this.globals[themeName] = this.validateDefinition(themeName, globalSheet);
     return this;
@@ -271,7 +275,5 @@ };
 
-  _proto.validateDefinition = function validateDefinition(key, value, cache) {
+  _proto.validateDefinition = function validateDefinition(key, value) {
     if ("production" !== process.env.NODE_ENV) {
-      if (cache[key]) {
-        throw new Error("Styles have already been defined for \"" + key + "\".");
-      } else if (value !== null && typeof value !== 'function') {
+      if (value !== null && typeof value !== 'function') {
         throw new TypeError("Definition for \"" + key + "\" must be null or a function.");
@@ -278,0 +280,0 @@ }

esm/CacheManager.js

@@ -12,2 +12,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+  _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) {
@@ -18,3 +34,3 @@ return unit.dir === tags.dir && unit.global === tags.global && unit.theme === tags.theme;
   _proto.get = function get(key, tags) {
-    var _this = this;
+    var _this2 = this;
 
@@ -28,3 +44,3 @@ var units = this.cache.get(key);
     var cache = units.find(function (unit) {
-      return _this.compare(unit, tags);
+      return _this2.compare(unit, tags);
     });
@@ -31,0 +47,0 @@ return cache ? cache.value : null;

esm/index.js

@@ -10,4 +10,5 @@ /**
 import Sheet from './Sheet';
+export * from './constants';
 export * from './types';
 export { ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };
 export default Aesthetic;

esm/testUtils.js

@@ -8,2 +8,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import Aesthetic from './Aesthetic';
+import { GLOBAL_STYLE_NAME } from './constants';
 export { getStyleElements };
@@ -88,3 +89,3 @@ export var TestAesthetic = function (_Aesthetic) {
       global = _ref2$global === void 0 ? false : _ref2$global;
-  var name = aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
+  var name = global ? GLOBAL_STYLE_NAME : aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
   var options = {
@@ -312,3 +313,21 @@ name: name,
         color: 'darkred'
+      },
+      '@selectors': {
+        ':focus': {
+          color: 'lightred'
+        }
       }
+    },
+    ul: {
+      margin: 0,
+      '@selectors': {
+        '> li': {
+          margin: 0
+        }
+      },
+      '@media': {
+        '(max-width: 500px)': {
+          margin: 20
+        }
+      }
     }
@@ -315,0 +334,0 @@ }

lib/Aesthetic.d.ts

@@ -30,4 +30,3 @@ import CacheManager from './CacheManager';
      * Change the current theme to another registered theme.
-     * This requires all flushed styles to be purged, and for new styles
-     * to be regenerated.
+     * This will purge all flushed global styles and regenerate new ones.
      */
@@ -48,14 +47,15 @@ changeTheme(themeName: ThemeName): this;
     /**
-     * Flush transformed styles and inject them into the DOM.
+     * Flush a target component's transformed styles and inject them into the DOM.
+     * If no target defined, will flush all buffered styles.
      */
-    flushStyles(styleName: StyleName): void;
+    flushStyles(styleName?: StyleName): void;
     /**
-     * Retrieve the defined component style sheet for the current theme.
+     * Retrieve the component style sheet for the defined theme.
      * If the definition is a function, execute it while passing the current theme.
      */
-    getStyleSheet(styleName: StyleName, themeName?: ThemeName): StyleSheet;
+    getStyleSheet(styleName: StyleName, themeName: ThemeName): StyleSheet;
     /**
      * Return a theme object or throw an error.
      */
-    getTheme(name: ThemeName): Theme;
+    getTheme(name?: ThemeName): Theme;
     /**
@@ -70,6 +70,6 @@ * Return true if the style object is a parsed block and not a native block.
     /**
-     * Purge and remove all flushed styles from the DOM.
-     * If no name is provided, purge all transformed styles.
+     * Purge and remove all styles from the DOM for the target component.
+     * If no target defined, will purge all possible styles.
      */
-    purgeStyles(): void;
+    purgeStyles(styleName?: StyleName): void;
     /**
@@ -76,0 +76,0 @@ * Register a style sheet definition. Optionally extend from a parent style sheet if defined.

lib/Aesthetic.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,3 +55,2 @@
       passThemeProp: false,
-      pure: true,
       rtl: false,
@@ -66,9 +67,8 @@ stylesPropName: 'styles',
     document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
-    var name = ':root';
     var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
       global: true,
-      name: name
+      name: _constants.GLOBAL_STYLE_NAME
     }));
     delete options.dir;
-    var cache = this.cacheManager.get(name, options);
+    var cache = this.cacheManager.get(_constants.GLOBAL_STYLE_NAME, options);
     var globalDef = this.globals[options.theme];
@@ -81,5 +81,5 @@
     var globalSheet = globalDef(this.getTheme(options.theme));
-    var parsedSheet = this.cacheManager.set(name, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), name), options);
+    var parsedSheet = this.cacheManager.set(_constants.GLOBAL_STYLE_NAME, this.parseStyleSheet(this.syntax.convertGlobalSheet(globalSheet, options).toObject(), _constants.GLOBAL_STYLE_NAME), options);
     this.transformStyles(Object.values(parsedSheet), options);
-    this.flushStyles(name);
+    this.flushStyles(_constants.GLOBAL_STYLE_NAME);
     return this;
@@ -89,4 +89,9 @@ };
   _proto.changeTheme = function changeTheme(themeName) {
+    var oldTheme = this.options.theme;
     this.getTheme(themeName);
     this.options.theme = themeName;
+    this.purgeStyles(_constants.GLOBAL_STYLE_NAME);
+    this.cacheManager.clear(function (unit) {
+      return !!unit.global && unit.theme === oldTheme;
+    });
     this.applyGlobalStyles({
@@ -107,3 +112,3 @@ theme: themeName
     this.applyGlobalStyles(baseOptions);
-    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), _extends({}, options, {
+    var nativeSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName, options.theme), _extends({}, options, {
       name: styleName
@@ -171,3 +176,3 @@ }));
 
-  _proto.purgeStyles = function purgeStyles() {};
+  _proto.purgeStyles = function purgeStyles(styleName) {};
 
@@ -187,3 +192,3 @@ _proto.registerStyleSheet = function registerStyleSheet(styleName, styleSheet, extendFrom) {
 
-    this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
+    this.styles[styleName] = this.validateDefinition(styleName, styleSheet);
     return this;
@@ -206,3 +211,3 @@ };
     this.themes[themeName] = theme;
-    this.globals[themeName] = this.validateDefinition(themeName, globalSheet, this.globals);
+    this.globals[themeName] = this.validateDefinition(themeName, globalSheet);
     return this;
@@ -284,7 +289,5 @@ };
 
-  _proto.validateDefinition = function validateDefinition(key, value, cache) {
+  _proto.validateDefinition = function validateDefinition(key, value) {
     if ("production" !== process.env.NODE_ENV) {
-      if (cache[key]) {
-        throw new Error("Styles have already been defined for \"" + key + "\".");
-      } else if (value !== null && typeof value !== 'function') {
+      if (value !== null && typeof value !== 'function') {
         throw new TypeError("Definition for \"" + key + "\" must be null or a function.");
@@ -291,0 +294,0 @@ }

lib/CacheManager.d.ts

@@ -12,2 +12,3 @@ import { Direction, ThemeName } from './types';
     protected cache: Map<string, CacheUnit<T>[]>;
+    clear(filter?: (unit: CacheUnit<T>) => boolean): this;
     compare(unit: CacheUnit<T>, tags: CacheTags): boolean;
@@ -14,0 +15,0 @@ get(key: string, tags: CacheTags): T | null;

lib/CacheManager.js

@@ -17,2 +17,18 @@ "use strict";
 
+  _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) {
@@ -23,3 +39,3 @@ return unit.dir === tags.dir && unit.global === tags.global && unit.theme === tags.theme;
   _proto.get = function get(key, tags) {
-    var _this = this;
+    var _this2 = this;
 
@@ -33,3 +49,3 @@ var units = this.cache.get(key);
     var cache = units.find(function (unit) {
-      return _this.compare(unit, tags);
+      return _this2.compare(unit, tags);
     });
@@ -36,0 +52,0 @@ return cache ? cache.value : null;

lib/index.d.ts

@@ -10,2 +10,3 @@ /**
 import Sheet from './Sheet';
+export * from './constants';
 export * from './types';
@@ -12,0 +13,0 @@ export { ClassNameAesthetic, UnifiedSyntax, Ruleset, Sheet };

lib/index.js

@@ -30,2 +30,10 @@ "use strict";
 
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  exports[key] = _constants[key];
+});
+
 var _types = require("./types");
@@ -32,0 +40,0 @@

lib/testUtils.d.ts

@@ -215,3 +215,21 @@ import CSS from 'csstype';
             };
+            '@selectors': {
+                ':focus': {
+                    color: string;
+                };
+            };
         };
+        ul: {
+            margin: number;
+            '@selectors': {
+                '> li': {
+                    margin: number;
+                };
+            };
+            '@media': {
+                '(max-width: 500px)': {
+                    margin: number;
+                };
+            };
+        };
     };
@@ -218,0 +236,0 @@ };

lib/testUtils.js

@@ -19,2 +19,4 @@ "use strict";
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -111,3 +113,3 @@
       global = _ref2$global === void 0 ? false : _ref2$global;
-  var name = aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
+  var name = global ? _constants.GLOBAL_STYLE_NAME : aesthetic.constructor.name.replace('Aesthetic', '').toLowerCase();
   var options = {
@@ -358,3 +360,21 @@ name: name,
         color: 'darkred'
+      },
+      '@selectors': {
+        ':focus': {
+          color: 'lightred'
+        }
       }
+    },
+    ul: {
+      margin: 0,
+      '@selectors': {
+        '> li': {
+          margin: 0
+        }
+      },
+      '@media': {
+        '(max-width: 500px)': {
+          margin: 20
+        }
+      }
     }
@@ -361,0 +381,0 @@ }

lib/types.d.ts

@@ -81,3 +81,2 @@ import CSS from 'csstype';
     passThemeProp: boolean;
-    pure: boolean;
     rtl: boolean;
@@ -84,0 +83,0 @@ stylesPropName: string;

package.json

 {
   "name": "aesthetic",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-rc.0",
   "description": "Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components through the use of adapters.",
@@ -30,3 +30,3 @@ "keywords": [
   "dependencies": {
-    "aesthetic-utils": "^2.0.0-alpha.6",
+    "aesthetic-utils": "^2.0.0-rc.0",
     "csstype": "^2.6.5",
@@ -43,3 +43,3 @@ "extend": "^3.0.2",
   },
-  "gitHead": "8a8e92b75a056555209a0690098d0fa855fd1cf3"
+  "gitHead": "fffc4bd0af4e34bc4efceb1d39f2a3dbf3b58545"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162591

increased by5.99%

Number of package files

49

increased by11.36%

Lines of code

3437

increased by2.97%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedaesthetic-utils@^2.0.0-rc.0