aesthetic - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/Aesthetic.js

@@ -36,5 +36,4 @@ 'use strict';
 
-    this.locked = {};
+    this.parents = {};
     this.styles = {};
-    this.prevStyles = {};
     this.themes = {};
@@ -57,4 +56,4 @@ this.classNames = {};
 
+      var parentStyleName = this.parents[styleName];
       var declarations = this.styles[styleName];
-      var prevDeclarations = this.prevStyles[styleName] || {};
 
@@ -69,30 +68,10 @@ if (process.env.NODE_ENV === 'development') {
 
-      var theme = this.themes[themeName] || {};
-
-      if (typeof prevDeclarations === 'function') {
-        prevDeclarations = prevDeclarations(theme, {});
+      if (typeof declarations !== 'function') {
+        return declarations;
       }
 
-      if (typeof declarations === 'function') {
-        declarations = declarations(theme, prevDeclarations);
-      }
-
-      return declarations;
+      return declarations(this.themes[themeName] || {}, parentStyleName ? this.extractDeclarations(parentStyleName, themeName) : {});
     }
 
     /**
-     * Lock the component from being styled any further.
-     */
-
-  }, {
-    key: 'lockStyling',
-    value: function lockStyling(styleName /*: string*/) /*: this*/ {
-      if (this.styles[styleName]) {
-        this.locked[styleName] = true;
-      }
-
-      return this;
-    }
-
-    /**
      * Register a theme with a pre-defined set of theme settings.
@@ -149,5 +128,7 @@ */
     value: function setStyles(styleName /*: string*/, declarations /*: StyleOrCallback*/) /*: this*/ {
+      var extendFrom /*: string*/ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
       if (process.env.NODE_ENV === 'development') {
-        if (this.locked[styleName]) {
-          throw new Error('Styles have been locked for "' + styleName + '".');
+        if (this.styles[styleName]) {
+          throw new Error('Styles have already been set for "' + styleName + '".');
         } else if (!(0, _isObject2.default)(declarations) && typeof declarations !== 'function') {
@@ -158,10 +139,16 @@ throw new TypeError('Styles defined for "' + styleName + '" must be an object or function.');
 
-      // Keep the previous styles
-      if (this.styles[styleName]) {
-        this.prevStyles[styleName] = this.styles[styleName];
+      this.styles[styleName] = declarations;
+
+      if (extendFrom) {
+        if (process.env.NODE_ENV === 'development') {
+          if (!this.styles[extendFrom]) {
+            throw new Error('Cannot extend from "' + extendFrom + '" as those styles do not exist.');
+          } else if (extendFrom === styleName) {
+            throw new Error('Cannot extend styles from itself.');
+          }
+        }
+
+        this.parents[styleName] = extendFrom;
       }
 
-      // Store the new styles
-      this.styles[styleName] = declarations;
-
       return this;
@@ -168,0 +155,0 @@ }

lib/style.js

@@ -52,3 +52,3 @@ 'use strict';
 function style(aesthetic /*: Aesthetic*/) /*: (WrappedComponent) => HOCComponent*/ {
-  var defaultStyles /*: StyleOrCallback*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var styles /*: StyleOrCallback*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var options /*: HOCOptions*/ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -62,8 +62,11 @@
         themePropName = _options$themePropNam === undefined ? 'theme' : _options$themePropNam,
-        _options$lockStyling = options.lockStyling,
-        lockStyling = _options$lockStyling === undefined ? true : _options$lockStyling;
+        _options$extendable = options.extendable,
+        extendable = _options$extendable === undefined ? false : _options$extendable,
+        extendFrom = options.extendFrom;
 
 
     if (process.env.NODE_ENV === 'development') {
-      if (!styleName) {
+      if (!(aesthetic instanceof _Aesthetic2.default)) {
+        throw new Error('An instance of `Aesthetic` is required.');
+      } else if (!styleName) {
         throw new Error('A component name could not be derived. Please provide a unique ' + 'name using `options.styleName` or `displayName`.');
@@ -75,9 +78,5 @@ } else if (aesthetic.styles[styleName]) {
 
-    // Set default styles
-    aesthetic.setStyles(styleName, defaultStyles);
+    // Set base styles
+    aesthetic.setStyles(styleName, styles, extendFrom);
 
-    if (lockStyling) {
-      aesthetic.lockStyling(styleName);
-    }
-
     var StyledComponent = function (_React$Component) {
@@ -132,8 +131,16 @@ _inherits(StyledComponent, _React$Component);
       }], [{
-        key: 'setStyles',
+        key: 'extendStyles',
 
 
-        // Allow consumers to set styles
-        value: function setStyles(declarations /*: StyleOrCallback*/) {
-          aesthetic.setStyles(styleName, declarations).lockStyling(styleName);
+        // Allow consumers to customize styles
+        value: function extendStyles(customStyles /*: StyleOrCallback*/) /*: HOCComponent*/ {
+          var extendOptions /*: HOCOptions*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+          if (process.env.NODE_ENV === 'development' && !extendable) {
+            throw new Error(styleName + ' is not extendable.');
+          }
+
+          return style(aesthetic, customStyles, _extends({}, options, extendOptions, {
+            extendFrom: styleName
+          }))(Component);
         }
@@ -140,0 +147,0 @@ }]);

package.json

 {
   "name": "aesthetic",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Abstract library to support a range of styling options for React components.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -87,25 +87,4 @@ # Aesthetic v0.1.0
 of hard-coded and non-customizable styles. Aesthetic solves this problem by allowing
-[unlocked styles](#creating-a-styler) to be overwritten by the consumer at most one time.
-It also has the added benefit of choosing the styling pattern, as mentioned previously.
+consumers to [extend and inherit styles](#customizing-styles) from the provided component.
 
-```javascript
-// Provider
-function Button() {
-  // ...
-}
-
-export default style({
-  button: { ... },
-}, {
-  lockStyling: false,
-})(Button);
-
-// Consumer
-import Button from 'toolkit/components/Button';
-
-Button.setStyles({
-  button: { ... },
-});
-```
-
 ## Installation
@@ -129,3 +108,3 @@
 * [Defining Components](#defining-components)
-  * [Overwriting Styles](#overwriting-styles)
+  * [Customizing Styles](#customizing-styles)
   * [Combining Classes](#combining-classes)
@@ -228,4 +207,4 @@ * [Styling Components](#styling-components)
   used in logging and caching. Defaults to the component name.
-* `lockStyling` (boolean) - Will lock styles from being written after the default styles
-  have been set. Defaults to `true`.
+* `extendable` (boolean) - Allows the component and its styles to be extended,
+  creating a new component in the process. Defaults to `false`.
 * `classNamesPropName` (string) - Name of the prop in which the compiled class names
@@ -241,3 +220,3 @@ object is passed to. Defaults to `classNames`.
   styleName: 'CustomButton',
-  lockStyling: false,
+  extendable: true,
   classNamesPropName: 'classes',
@@ -284,27 +263,32 @@ themePropName: 'appTheme',
 
-#### Overwriting Styles
+#### Customizing Styles
 
 Since styles are isolated and colocated within a component, they can be impossible to
 customize, especially if the component comes from a third-party library. If a component
-hasn't been locked via the `lockStyling` option, styles can be customized by calling
-the static `setStyles` method on the wrapped component instance.
+styled by Aesthetic is marked as `extendable`, styles can be customized by calling
+the static `extendStyles` method on the wrapped component instance.
 
+This will return the base component wrapped with new styles.
+
 ```javascript
-import Button from '../Button';
+import Button from '../path/to/styled/Button';
 
-Button.setStyles({
+export const Button = Button.extendStyles({
   button: {
-    padding: '5px 10px',
-    fontWeight: 'bold',
+    background: 'white',
     // ...
   },
 });
+
+export const PrimaryButton = Button.extendStyles({
+  button: {
+    background: 'blue',
+    // ...
+  },
+});
 ```
 
-Any previous styles that were overwritten will be available when using a
-[style function](#style-functions).
+Parent styles (the component that was extended) are available when using a
+[style function](#style-functions), allowing multiple layers of styles to be inherited.
 
-> `setStyles` can only be called once, as styles are immediately locked.
-> This avoids unwanted style injections.
-
 #### Combining Classes
@@ -416,3 +400,3 @@
 function is that it provides the [current theme](#using-themes) as the first argument,
-and the [previous styles](#overwriting-styles) as the second argument.
+and the [previous styles](#customizing-styles) as the second argument.
 
@@ -502,2 +486,4 @@ ```javascript
   without having to rewrite all CSS style object syntax.
+* Third-party UI libraries can define their styles using the unified syntax,
+  while consumers can choose their preferred adapter.
 * Only have to learn one form of syntax.
@@ -514,5 +500,7 @@
 that all adapters shared about 90-95% of the same syntax. That remaining percentage could
-easily be abstracted away by a library, and hence, this unified syntax was created. In the end,
-it was mostly for fun, but can easily be disabled if need be.
+easily be abstracted away by a library, and hence, this unified syntax was created.
 
+Furthermore, a unified syntax allows providers of third-party components to define their styles
+with consumers having the choice of their preferred adapter.
+
 **Why a different at-rule structure?**
@@ -677,3 +665,3 @@
 | Themes | ✓ | ✓ | ✓ | |
-| Style Overwriting | ✓ | | | ||
+| Style Extending | ✓ | | ✓ | ||
 
@@ -680,0 +668,0 @@ #### Adapters

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

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

73045

increased by0.59%

Worsened metrics

Lines of code

915

decreased by-0.44%

Number of lines in readme file

680

decreased by-1.73%

Number of low supply chain risk alerts

19

increased by11.76%

No dependency changes