fela - npm Package Compare versions

Comparing version 11.1.2 to 11.2.0

es/createRenderer.js

@@ -14,4 +14,4 @@ var _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; };
 import cssifyStaticStyle from './cssifyStaticStyle';
-import generateAnimationName from './generateAnimationName';
-import generateClassName from './generateClassName';
+import _generateAnimationName from './generateAnimationName';
+import _generateClassName from './generateClassName';
 import generateFontSource from './generateFontSource';
@@ -51,2 +51,3 @@ import generateStaticReference from './generateStaticReference';
     supportQueryOrder: config.supportQueryOrder || [],
+    styleNodeAttributes: config.styleNodeAttributes || {},
     ruleOrder: [/^:link/, /^:visited/, /^:hover/, /^:focus-within/, /^:focus/, /^:active/],
@@ -69,2 +70,5 @@ selectorPrefix: validateSelectorPrefix(config.selectorPrefix),
     },
+    getNextKeyframeIdentifier: function getNextKeyframeIdentifier() {
+      return ++renderer.uniqueKeyframeIdentifier;
+    },
     renderRule: function renderRule(rule) {
@@ -85,3 +89,3 @@ var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         // use another unique identifier to ensure minimal css markup
-        var animationName = renderer.selectorPrefix + generateAnimationName(++renderer.uniqueKeyframeIdentifier);
+        var animationName = renderer.selectorPrefix + renderer.generateAnimationName(props);
 
@@ -102,2 +106,5 @@ var cssKeyframe = cssifyKeyframe(processedKeyframe, animationName, renderer.keyframePrefixes);
     },
+    generateAnimationName: function generateAnimationName(_props) {
+      return _generateAnimationName(renderer.getNextKeyframeIdentifier());
+    },
     renderFont: function renderFont(family, files) {
@@ -215,3 +222,3 @@ var properties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-            var className = renderer.selectorPrefix + generateClassName(renderer.getNextRuleIdentifier, renderer.filterClassName);
+            var className = renderer.selectorPrefix + renderer.generateClassName(property, value, pseudo, media, support);
 
@@ -246,2 +253,5 @@ var declaration = cssifyDeclaration(property, value);
     },
+    generateClassName: function generateClassName(_property, _value, _pseudo, _media, _support) {
+      return _generateClassName(renderer.getNextRuleIdentifier, renderer.filterClassName);
+    },
     _emitChange: function _emitChange(change) {
@@ -248,0 +258,0 @@ arrayEach(renderer.listeners, function (listener) {

index.d.ts

@@ -204,2 +204,8 @@ declare module "fela" {
 
+declare module "fela-sort-media-query-mobile-first" {
+  import { TEnhancer } from "fela";
+
+  export default function(): TEnhancer;
+}
+
 /**
@@ -313,5 +319,5 @@ * PLUGINS
 
-  type Unit = "ch" | "em" | "ex" | "rem" | "vh" | "vw" | "vmin" | "vmax" | "px" | "cm" | "mm" | "in" | "pc" | "pt" | "mozmm";
+  export type Unit = "ch" | "em" | "ex" | "rem" | "vh" | "vw" | "vmin" | "vmax" | "px" | "cm" | "mm" | "in" | "pc" | "pt" | "mozmm";
 
-  interface UnitPerProperty {
+  export interface UnitPerProperty {
     [key: string]: string;
@@ -344,3 +350,12 @@ }
   import { TPlugin } from "fela";
+  import { Unit, UnitPerProperty } from "fela-plugin-unit";
 
+  type UnitConfig1 = [Unit]
+  type UnitConfig2 = [Unit, UnitPerProperty]
+  type UnitConfig3 = [Unit, UnitPerProperty, (property: string) => boolean]
+
+  type UnitConfig = UnitConfig1 | UnitConfig2 | UnitConfig3
+
+  export function createWebPreset({ unit }: { unit?: UnitConfig }): TPlugin[];
+
   const presets: TPlugin[];
@@ -347,0 +362,0 @@ export default presets;

lib/createRenderer.js

@@ -37,9 +37,9 @@ 'use strict';
 
-var _generateAnimationName = require('./generateAnimationName');
+var _generateAnimationName2 = require('./generateAnimationName');
 
-var _generateAnimationName2 = _interopRequireDefault(_generateAnimationName);
+var _generateAnimationName3 = _interopRequireDefault(_generateAnimationName2);
 
-var _generateClassName = require('./generateClassName');
+var _generateClassName2 = require('./generateClassName');
 
-var _generateClassName2 = _interopRequireDefault(_generateClassName);
+var _generateClassName3 = _interopRequireDefault(_generateClassName2);
 
@@ -101,2 +101,3 @@ var _generateFontSource = require('./generateFontSource');
     supportQueryOrder: config.supportQueryOrder || [],
+    styleNodeAttributes: config.styleNodeAttributes || {},
     ruleOrder: [/^:link/, /^:visited/, /^:hover/, /^:focus-within/, /^:focus/, /^:active/],
@@ -119,2 +120,5 @@ selectorPrefix: (0, _validateSelectorPrefix2.default)(config.selectorPrefix),
     },
+    getNextKeyframeIdentifier: function getNextKeyframeIdentifier() {
+      return ++renderer.uniqueKeyframeIdentifier;
+    },
     renderRule: function renderRule(rule) {
@@ -135,3 +139,3 @@ var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         // use another unique identifier to ensure minimal css markup
-        var animationName = renderer.selectorPrefix + (0, _generateAnimationName2.default)(++renderer.uniqueKeyframeIdentifier);
+        var animationName = renderer.selectorPrefix + renderer.generateAnimationName(props);
 
@@ -152,2 +156,5 @@ var cssKeyframe = (0, _cssifyKeyframe2.default)(processedKeyframe, animationName, renderer.keyframePrefixes);
     },
+    generateAnimationName: function generateAnimationName(_props) {
+      return (0, _generateAnimationName3.default)(renderer.getNextKeyframeIdentifier());
+    },
     renderFont: function renderFont(family, files) {
@@ -265,3 +272,3 @@ var properties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-            var className = renderer.selectorPrefix + (0, _generateClassName2.default)(renderer.getNextRuleIdentifier, renderer.filterClassName);
+            var className = renderer.selectorPrefix + renderer.generateClassName(property, value, pseudo, media, support);
 
@@ -296,2 +303,5 @@ var declaration = (0, _cssifyDeclaration2.default)(property, value);
     },
+    generateClassName: function generateClassName(_property, _value, _pseudo, _media, _support) {
+      return (0, _generateClassName3.default)(renderer.getNextRuleIdentifier, renderer.filterClassName);
+    },
     _emitChange: function _emitChange(change) {
@@ -298,0 +308,0 @@ (0, _arrayEach2.default)(renderer.listeners, function (listener) {

package.json

 {
   "name": "fela",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "description": "State-Driven Styling in JavaScript",
@@ -10,2 +10,5 @@ "typings": "index.d.ts",
   "sideEffects": false,
+  "scripts": {
+    "build:umd": "webpack --config webpack.config.js"
+  },
   "files": [
@@ -16,3 +19,4 @@ "LICENSE",
     "lib/**",
-    "es/**"
+    "es/**",
+    "umd/**"
   ],
@@ -40,6 +44,6 @@ "repository": "https://github.com/robinweser/fela/",
     "fast-loops": "^1.0.0",
-    "fela-utils": "^11.1.2",
+    "fela-utils": "^11.2.0",
     "isobject": "^3.0.1"
   },
-  "gitHead": "a4f6498c8842873285a80ed1c9eb8dcde4b3370b"
+  "gitHead": "180a1819c65d52f8f83d70fa717deeb6bb52389e"
 }

README.md

@@ -10,6 +10,6 @@ <h1><img alt="Fela" src="docs/res/logo.png" width="203"/></h1>
 
-<img alt="TravisCI" src="https://travis-ci.org/robinweser/fela.svg?branch=master"> <a href="https://codeclimate.com/github/robinweser/fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/robinweser/fela/badges/coverage.svg"></a> <a href="https://bundlephobia.com/result?p=fela@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/fela.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela.svg"> <a href="https://spectrum.chat/fela?tab=posts"><img alt="Spectrum" src="https://img.shields.io/badge/support-spectrum-brightgreen.svg"></a>
+<a href="https://bundlephobia.com/result?p=fela@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/fela.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela.svg"> <a href="https://spectrum.chat/fela?tab=posts"><img alt="Spectrum" src="https://img.shields.io/badge/support-spectrum-brightgreen.svg"></a>
 
 ## Support Us
-Support Robin Frischmann's work on Fela and its ecosystem directly via [**Patreon**](https://www.patreon.com/robinweser).
+Support Robin Weser's work on Fela and its ecosystem directly via [**Patreon**](https://www.patreon.com/robinweser).
 
@@ -16,0 +16,0 @@ ## Installation

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

79906

increased by17.32%

Number of package files

43

increased by2.38%

Lines of code

1268

increased by3.51%

Dependency changes

• Updatedfela-utils@^11.2.0