aesthetic - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+# 3.4.0
+
+#### 🚀 New
+
+- Added support for raw CSS declarations in a style sheet.
+
+#### 🐞 Fixed
+
+- Added missing `@babel/runtime` package.
+- Fixed a bug with explicit class names in style sheets being passed to adapters.
+
 # 3.3.0 - 2019-02-15
@@ -2,0 +13,0 @@

esm/Aesthetic.js

@@ -19,2 +19,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import stripClassPrefix from './helpers/stripClassPrefix';
+import StyleSheetManager from './StyleSheetManager';
 import UnifiedSyntax from './UnifiedSyntax';
@@ -46,2 +47,4 @@
 
+    _defineProperty(this, "sheetManager", null);
+
     _defineProperty(this, "transformStyles", function () {
@@ -120,5 +123,6 @@ var classNames = [];
       this.applyGlobalStyles();
-      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyleSheet(styleName)).toObject(), styleName);
-      this.cache[styleName] = styleSheet;
-      return styleSheet;
+      var baseSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), styleName);
+      var styleSheet = this.processStyleSheet(baseSheet.toObject(), styleName);
+      this.cache[styleName] = _objectSpread({}, styleSheet, baseSheet.classNames);
+      return this.cache[styleName];
     }
@@ -355,2 +359,12 @@ }, {
   }, {
+    key: "getStyleSheetManager",
+    value: function getStyleSheetManager() {
+      if (this.sheetManager) {
+        return this.sheetManager;
+      }
+
+      this.sheetManager = new StyleSheetManager();
+      return this.sheetManager;
+    }
+  }, {
     key: "getTheme",
@@ -357,0 +371,0 @@ value: function getTheme() {

esm/Sheet.js

@@ -62,3 +62,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
       });
-      return _objectSpread({}, atRules, this.classNames, toObjectRecursive(sets), toObjectRecursive(this.ruleSets));
+      return _objectSpread({}, atRules, toObjectRecursive(sets), toObjectRecursive(this.ruleSets));
     }
@@ -65,0 +65,0 @@ }]);

esm/UnifiedSyntax.js

@@ -6,2 +6,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Stylis from 'stylis';
 import formatFontFace from './helpers/formatFontFace';
@@ -12,2 +13,3 @@ import isObject from './helpers/isObject';
 export var SELECTOR = /^((\[[\x2Da-z\u017F\u212A]+\])|(::?[\x2Da-z\u017F\u212A]+))$/i;
+export var CLASS_NAME = /^[a-z\u017F\u212A]{1}[\x2D0-9_a-z\u017F\u212A]+$/i;
 
@@ -24,2 +26,4 @@ var UnifiedSyntax = function () {
 
+    _defineProperty(this, "stylis", void 0);
+
     _defineProperty(this, "handleAnimationName", function (ruleset, value) {
@@ -78,2 +82,8 @@ if (!value) {
     this.on('property:fontFamily', this.handleFontFamily);
+    this.stylis = new Stylis({
+      compress: !("production" !== process.env.NODE_ENV),
+      global: false,
+      keyframe: true,
+      prefix: true
+    });
   }
@@ -195,3 +205,3 @@
     key: "convertStyleSheet",
-    value: function convertStyleSheet(styleSheet) {
+    value: function convertStyleSheet(styleSheet, styleName) {
       var _this3 = this;
@@ -212,3 +222,7 @@
         } else if (typeof ruleset === 'string') {
-          sheet.addClassName(selector, ruleset);
+          if (ruleset.match(CLASS_NAME)) {
+            sheet.addClassName(selector, ruleset);
+          } else {
+            sheet.addClassName(selector, _this3.convertRawCss(styleName, selector, ruleset));
+          }
         } else if (isObject(ruleset)) {
@@ -223,2 +237,9 @@ sheet.addRuleset(_this3.convertRuleset(ruleset, sheet.createRuleset(selector)));
   }, {
+    key: "convertRawCss",
+    value: function convertRawCss(styleName, selector, declaration) {
+      var className = "".concat(styleName, "-").concat(selector);
+      this.emit('css', [this.stylis(".".concat(className), declaration.trim()), className]);
+      return className;
+    }
+  }, {
     key: "convertRuleset",
@@ -225,0 +246,0 @@ value: function convertRuleset(unifiedRuleset, ruleset) {

lib/Aesthetic.d.ts

 import React from 'react';
+import StyleSheetManager from './StyleSheetManager';
 import UnifiedSyntax from './UnifiedSyntax';
@@ -31,2 +32,3 @@ import { ClassName, ClassNameGenerator, GlobalSheetDefinition, SheetMap, StyledComponentClass, StyleName, StyleSheet, StyleSheetDefinition, ThemeName, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, WithThemeOptions, WithThemeProps, WithThemeWrapperProps } from './types';
     protected appliedGlobals: boolean;
+    protected sheetManager: StyleSheetManager | null;
     constructor(options?: Partial<AestheticOptions>);
@@ -84,2 +86,6 @@ /**
     /**
+     * Return a native style sheet manager used for injecting CSS.
+     */
+    protected getStyleSheetManager(): StyleSheetManager;
+    /**
      * Return a theme object or throw an error.
@@ -86,0 +92,0 @@ */

lib/Aesthetic.js

@@ -48,2 +48,4 @@ "use strict";
 
+var _StyleSheetManager = _interopRequireDefault(require("./StyleSheetManager"));
+
 var _UnifiedSyntax = _interopRequireDefault(require("./UnifiedSyntax"));
@@ -65,2 +67,3 @@
     (0, _defineProperty2.default)(this, "appliedGlobals", false);
+    (0, _defineProperty2.default)(this, "sheetManager", null);
     (0, _defineProperty2.default)(this, "transformStyles", function () {
@@ -138,5 +141,6 @@ var classNames = [];
       this.applyGlobalStyles();
-      var styleSheet = this.processStyleSheet(this.syntax.convertStyleSheet(this.getStyleSheet(styleName)).toObject(), styleName);
-      this.cache[styleName] = styleSheet;
-      return styleSheet;
+      var baseSheet = this.syntax.convertStyleSheet(this.getStyleSheet(styleName), styleName);
+      var styleSheet = this.processStyleSheet(baseSheet.toObject(), styleName);
+      this.cache[styleName] = (0, _objectSpread2.default)({}, styleSheet, baseSheet.classNames);
+      return this.cache[styleName];
     }
@@ -361,2 +365,12 @@ }, {
   }, {
+    key: "getStyleSheetManager",
+    value: function getStyleSheetManager() {
+      if (this.sheetManager) {
+        return this.sheetManager;
+      }
+
+      this.sheetManager = new _StyleSheetManager.default();
+      return this.sheetManager;
+    }
+  }, {
     key: "getTheme",
@@ -363,0 +377,0 @@ value: function getTheme() {

lib/Sheet.js

@@ -73,3 +73,3 @@ "use strict";
       });
-      return (0, _objectSpread2.default)({}, atRules, this.classNames, (0, _toObjectRecursive.default)(sets), (0, _toObjectRecursive.default)(this.ruleSets));
+      return (0, _objectSpread2.default)({}, atRules, (0, _toObjectRecursive.default)(sets), (0, _toObjectRecursive.default)(this.ruleSets));
     }
@@ -76,0 +76,0 @@ }]);

lib/types.d.ts

@@ -8,2 +8,3 @@ /// <reference types="react" />
 export declare type ClassNameGenerator<N extends object, P extends object | string> = (...styles: (undefined | false | ClassName | N | P)[]) => ClassName;
+export declare type RawCss = string;
 export declare type ExtendedProperty<B, T> = B | T | (B | T)[];
@@ -52,3 +53,3 @@ export declare type AtRule = '@charset' | '@font-face' | '@global' | '@import' | '@keyframes' | '@media' | '@page' | '@selectors' | '@supports' | '@viewport' | '@fallbacks';
 };
-export declare type StyleSheet = SheetMap<ClassName | ComponentBlock>;
+export declare type StyleSheet = SheetMap<ClassName | RawCss | ComponentBlock>;
 export declare type StyleSheetNeverize<T> = {
@@ -55,0 +56,0 @@ [K in keyof T]: ComponentBlockNeverize<T[K]>;

lib/UnifiedSyntax.d.ts

@@ -0,5 +1,7 @@
+import Stylis from 'stylis';
 import Ruleset from './Ruleset';
 import Sheet from './Sheet';
-import { ComponentBlock, FontFace, GlobalSheet, Keyframes, Properties, StyleSheet } from './types';
+import { ComponentBlock, FontFace, GlobalSheet, Keyframes, Properties, StyleSheet, ClassName } from './types';
 export declare const SELECTOR: RegExp;
+export declare const CLASS_NAME: RegExp;
 export declare type Handler = (...args: any[]) => void;
@@ -11,2 +13,3 @@ export default class UnifiedSyntax<NativeBlock extends object> {
     keyframesCount: number;
+    stylis: typeof Stylis;
     constructor();
@@ -20,4 +23,9 @@ /**
      */
-    convertStyleSheet(styleSheet: StyleSheet): Sheet<NativeBlock>;
+    convertStyleSheet(styleSheet: StyleSheet, styleName: string): Sheet<NativeBlock>;
     /**
+     * Convert a pseudo CSS declaration block to raw CSS using Stylis.
+     * Emit the raw CSS so that adapters can inject it into the DOM.
+     */
+    convertRawCss(styleName: string, selector: string, declaration: string): ClassName;
+    /**
      * Convert a ruleset including local at-rules, blocks, and properties.
@@ -63,2 +71,3 @@ */
     emit(eventName: 'charset', args: [Sheet<NativeBlock>, string]): any;
+    emit(eventName: 'css', args: [string, string]): any;
     emit(eventName: 'fallback', args: [Ruleset<NativeBlock>, keyof NativeBlock, any[]]): any;
@@ -87,2 +96,3 @@ emit(eventName: 'font-face', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>[], string, string[][]]): any;
     on(eventName: 'charset', callback: (sheet: Sheet<NativeBlock>, charset: string) => void): this;
+    on(eventName: 'css', callback: (css: string, className: string) => void): this;
     on(eventName: 'fallback', callback: (ruleset: Ruleset<NativeBlock>, name: keyof NativeBlock, values: any[]) => void): this;
@@ -89,0 +99,0 @@ on(eventName: 'font-face', callback: (sheet: Sheet<NativeBlock>, fontFaces: Ruleset<NativeBlock>[], fontFamily: string, srcPaths: string[][]) => void): this;

lib/UnifiedSyntax.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.SELECTOR = void 0;
+exports.default = exports.CLASS_NAME = exports.SELECTOR = void 0;
 
@@ -21,2 +21,4 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _stylis = _interopRequireDefault(require("stylis"));
+
 var _formatFontFace = _interopRequireDefault(require("./helpers/formatFontFace"));
@@ -32,2 +34,4 @@
 exports.SELECTOR = SELECTOR;
+var CLASS_NAME = /^[a-z\u017F\u212A]{1}[\x2D0-9_a-z\u017F\u212A]+$/i;
+exports.CLASS_NAME = CLASS_NAME;
 
@@ -41,2 +45,3 @@ var UnifiedSyntax = function () {
     (0, _defineProperty2.default)(this, "keyframesCount", 0);
+    (0, _defineProperty2.default)(this, "stylis", void 0);
     (0, _defineProperty2.default)(this, "handleAnimationName", function (ruleset, value) {
@@ -93,2 +98,8 @@ if (!value) {
     this.on('property:fontFamily', this.handleFontFamily);
+    this.stylis = new _stylis.default({
+      compress: !("production" !== process.env.NODE_ENV),
+      global: false,
+      keyframe: true,
+      prefix: true
+    });
   }
@@ -210,3 +221,3 @@
     key: "convertStyleSheet",
-    value: function convertStyleSheet(styleSheet) {
+    value: function convertStyleSheet(styleSheet, styleName) {
       var _this3 = this;
@@ -227,3 +238,7 @@
         } else if (typeof ruleset === 'string') {
-          sheet.addClassName(selector, ruleset);
+          if (ruleset.match(CLASS_NAME)) {
+            sheet.addClassName(selector, ruleset);
+          } else {
+            sheet.addClassName(selector, _this3.convertRawCss(styleName, selector, ruleset));
+          }
         } else if ((0, _isObject.default)(ruleset)) {
@@ -238,2 +253,9 @@ sheet.addRuleset(_this3.convertRuleset(ruleset, sheet.createRuleset(selector)));
   }, {
+    key: "convertRawCss",
+    value: function convertRawCss(styleName, selector, declaration) {
+      var className = "".concat(styleName, "-").concat(selector);
+      this.emit('css', [this.stylis(".".concat(className), declaration.trim()), className]);
+      return className;
+    }
+  }, {
     key: "convertRuleset",
@@ -240,0 +262,0 @@ value: function convertRuleset(unifiedRuleset, ruleset) {

package.json

 {
   "name": "aesthetic",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
@@ -30,5 +30,6 @@ "keywords": [
   "dependencies": {
+    "@babel/runtime": "^7.3.1",
     "@types/extend": "^3.0.1",
     "@types/hoist-non-react-statics": "^3.0.1",
-    "@types/react": "^16.8.3",
+    "@types/react": "^16.8.4",
     "@types/uuid": "^3.4.4",
@@ -38,2 +39,3 @@ "csstype": "^2.6.2",
     "hoist-non-react-statics": "^3.3.0",
+    "stylis": "^3.5.4",
     "utility-types": "^3.4.1",
@@ -51,3 +53,3 @@ "uuid": "^3.3.2"
   },
-  "gitHead": "dac52ca81819af254c9f4e3734813914fb29432b"
+  "gitHead": "1dbb15feffeb83789a63e299abef0df1b8ca566c"
 }

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

120105

increased by7.13%

Number of package files

47

increased by14.63%

Lines of code

2529

increased by9.2%

Worsened metrics

Dependency count

12

increased by20%

Number of low supply chain risk alerts

51

increased by4.08%

Dependency changes

• + Added@babel/runtime@^7.3.1

• + Addedstylis@^3.5.4

• + Added@babel/runtime@7.26.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedstylis@3.5.4(transitive)

• Updated@types/react@^16.8.4