aesthetic - npm Package Compare versions

Comparing version 3.0.0-alpha.4 to 3.0.0-alpha.5

CHANGELOG.md

@@ -16,2 +16,4 @@ # 3.0.0
   function that returns an object.
+- Dropped support for current props passed as the 2nd argument to the `withStyles` styling function.
+  This pattern was non-deterministic and caused cache invalidation issues.
 - Removed the `Adapter` class. Adapters now extend `Aesthetic` instead of being passed to it through
@@ -18,0 +20,0 @@ the constructor.

lib/Aesthetic.d.ts

@@ -44,3 +44,3 @@ /**
      */
-    createStyleSheet(styleName: StyleName, props?: object): SheetMap<ParsedBlock>;
+    createStyleSheet(styleName: StyleName): SheetMap<ParsedBlock>;
     /**
@@ -58,3 +58,3 @@ * Register a theme by extending and merging with a previously defined theme.
      */
-    getStyles(styleName: StyleName, props?: object): StyleSheet;
+    getStyles(styleName: StyleName): StyleSheet;
     /**
@@ -88,4 +88,4 @@ * Return a theme object or throw an error.
      */
-    withStyles<P>(styleSheet: StyleSheetDefinition<Theme, P>, options?: WithStylesOptions): <Props extends object>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
+    withStyles(styleSheet: StyleSheetDefinition<Theme>, options?: WithStylesOptions): <Props extends object>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
     private validateDefinition;
 }

lib/Aesthetic.js

@@ -46,3 +46,2 @@ "use strict";
 var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
-var shallowequal_1 = __importDefault(require("shallowequal"));
 var extend_1 = __importDefault(require("extend"));
@@ -84,4 +83,3 @@ var isObject_1 = __importDefault(require("./helpers/isObject"));
      */
-    Aesthetic.prototype.createStyleSheet = function (styleName, props) {
-        if (props === void 0) { props = {}; }
+    Aesthetic.prototype.createStyleSheet = function (styleName) {
         if (this.cache[styleName]) {
@@ -91,3 +89,3 @@ return this.cache[styleName];
         this.applyGlobalStyles();
-        var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyles(styleName, props)).toObject(), styleName);
+        var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyles(styleName)).toObject(), styleName);
         this.cache[styleName] = styleSheet;
@@ -111,10 +109,9 @@ return styleSheet;
      */
-    Aesthetic.prototype.getStyles = function (styleName, props) {
-        if (props === void 0) { props = {}; }
+    Aesthetic.prototype.getStyles = function (styleName) {
         var parentStyleName = this.parents[styleName];
         var styleDef = this.styles[styleName];
-        var styleSheet = styleDef ? styleDef(this.getTheme(), props) : {};
+        var styleSheet = styleDef ? styleDef(this.getTheme()) : {};
         // Merge from parent
         if (parentStyleName) {
-            return extend_1.default(true, {}, this.getStyles(parentStyleName, props), styleSheet);
+            return extend_1.default(true, {}, this.getStyles(parentStyleName), styleSheet);
         }
@@ -229,3 +226,3 @@ return styleSheet;
                     _this.state = {
-                        styles: {},
+                        styles: aesthetic.createStyleSheet(styleName),
                     };
@@ -243,11 +240,2 @@ return _this;
                 };
-                WithStyles.getDerivedStateFromProps = function (props, state) {
-                    if (shallowequal_1.default(props, state.props)) {
-                        return null;
-                    }
-                    return {
-                        props: props,
-                        styles: aesthetic.createStyleSheet(styleName, __assign({}, WrappedComponent.defaultProps, props)),
-                    };
-                };
                 WithStyles.prototype.componentDidMount = function () {
@@ -254,0 +242,0 @@ aesthetic.flushStyles(styleName);

lib/types.d.ts

@@ -52,3 +52,3 @@ /**
 export declare type StyleSheet = SheetMap<ClassName | ComponentBlock>;
-export declare type StyleSheetDefinition<Theme, Props = any> = ((theme: Theme, props: Props) => StyleSheet) | null;
+export declare type StyleSheetDefinition<Theme> = ((theme: Theme) => StyleSheet) | null;
 export declare type GlobalSheet = {
@@ -104,3 +104,3 @@ '@charset'?: string;
     WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, any>>;
-    extendStyles(styleSheet: StyleSheetDefinition<Theme, Props>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponentClass<Theme, Props>;
+    extendStyles(styleSheet: StyleSheetDefinition<Theme>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponentClass<Theme, Props>;
 }

lib/UnifiedSyntax.d.ts

@@ -30,3 +30,3 @@ /**
      */
-    convertSelector(key: string, value: ComponentBlock, ruleset: Ruleset<NativeBlock>): void;
+    convertSelector(key: string, value: ComponentBlock, ruleset: Ruleset<NativeBlock>, inAtRule?: boolean): void;
     /**
@@ -33,0 +33,0 @@ * Convert a unified syntax list of font face objects to rulesets.

lib/UnifiedSyntax.js

@@ -26,2 +26,3 @@ "use strict";
 var Sheet_1 = __importDefault(require("./Sheet"));
+var SELECTOR = /^((\[[a-z-]+\])|(::?[a-z-]+))$/iu;
 var UnifiedSyntax = /** @class */ (function () {
@@ -292,3 +293,3 @@ function UnifiedSyntax() {
                     Object.keys(selectors_1).forEach(function (selector) {
-                        _this.convertSelector(selector, selectors_1[selector], ruleset);
+                        _this.convertSelector(selector, selectors_1[selector], ruleset, true);
                     });
@@ -309,4 +310,5 @@ break;
      */
-    UnifiedSyntax.prototype.convertSelector = function (key, value, ruleset) {
+    UnifiedSyntax.prototype.convertSelector = function (key, value, ruleset, inAtRule) {
         var _this = this;
+        if (inAtRule === void 0) { inAtRule = false; }
         if (process.env.NODE_ENV !== 'production') {
@@ -316,2 +318,5 @@ if (!isObject_1.default(value)) {
             }
+            else if ((key.includes(',') || !key.match(SELECTOR)) && !inAtRule) {
+                throw new Error("Advanced selector \"" + key + "\" must be nested within an @selectors block.");
+            }
         }
@@ -318,0 +323,0 @@ key.split(',').forEach(function (k) {

package.json

 {
   "name": "aesthetic",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
@@ -31,3 +31,2 @@ "keywords": [
     "@types/react": "^16.7.18",
-    "@types/shallowequal": "^1.1.0",
     "@types/uuid": "^3.4.4",
@@ -37,3 +36,2 @@ "csstype": "^2.6.0",
     "hoist-non-react-statics": "^3.2.1",
-    "shallowequal": "^1.1.0",
     "utility-types": "^3.2.1",
@@ -50,3 +48,3 @@ "uuid": "^3.3.2"
   },
-  "gitHead": "e16b8d7f186fbe1ea20b3928fd2a83e00e73b334"
+  "gitHead": "97f09056e29d37a438711bf45b754724e0185502"
 }

No alert changes

Improved metrics

Dependency count

10

decreased by-16.67%

Worsened metrics

Total package byte prevSize

70538

decreased by-0.3%

Lines of code

1362

decreased by-0.51%

Dependency changes

• - Removed@types/shallowequal@^1.1.0

• - Removedshallowequal@^1.1.0

• - Removed@types/shallowequal@1.1.5(transitive)

• - Removedshallowequal@1.1.0(transitive)