@ladifire/stylex - npm Package Compare versions

Comparing version 0.1.0-alpha.1 to 0.1.0-alpha.2

package.json

 {
   "name": "@ladifire/stylex",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Stylex",
   "license": "Apache-2.0",
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
-  "source": "src/index.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
+  "main": "src/index.ts",
   "repository": {
@@ -20,13 +13,11 @@ "type": "git",
     "@babel/core": "^7.5.5",
-    "@babel/types": "^7.8.3",
-    "known-css-properties": "^0.20.0",
-    "postcss": "^7.0.32",
-    "postcss-discard-duplicates": "^4.0.2",
-    "postcss-selector-parser": "^6.0.2",
-    "sort-css-media-queries": "^1.5.2",
-    "webpack-virtual-modules": "^0.2.2"
+    "@babel/types": "^7.8.3"
   },
+  "peerDependencies": {
+    "react": "~16.12.0"
+  },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "bc2e90fa21dbe6a70f0f200af121d108a7aa026f"
 }

src/CometStyleXDefaultTheme.ts

@@ -293,2 +293,4 @@ /*
     "lf-duration-none": "0ms",
+    "light-color": "rgba(0,0,0,0.05)",
+    "light-light-color": "rgba(29,28,29,0.04)",
     accent: "hsl(214, 89%, 52%)",
@@ -369,2 +371,3 @@ "always-white": "#FFFFFF",
     "primary-button-pressed": "#77A7FF",
+    "lf-primary-button-disabled": "rgb(176, 213, 255)",
     "primary-button-text": "#FFFFFF",
@@ -378,4 +381,4 @@ "primary-deemphasized-button-background": "#E7F3FF",
     "primary-text-on-media": "#FFFFFF",
-    "progress-ring-neutral-background": "rgba(0, 0, 0, 0.2)",
-    "progress-ring-neutral-foreground": "#000000",
+    "progress-ring-neutral-background": "rgba(190,195,201, 0.2)",
+    "progress-ring-neutral-foreground": "rgba(0, 0, 0, 0.2)",
     "progress-ring-on-media-background": "rgba(255, 255, 255, 0.2)",
@@ -419,5 +422,7 @@ "progress-ring-on-media-foreground": "#FFFFFF",
     "dataviz-supplementary-3": "rgb(49,162,76)",
-    "dataviz-supplementary-4": "rgb(50,52,54)"
-}
+    "dataviz-supplementary-4": "rgb(50,52,54)",
+    "success-color": "rgb(0, 164, 0)",
+    "success-disabled-color": "rgb(134, 223, 129)"
+};
 
 export default CometStyleXDefaultTheme;

src/CometStyleXSheet.ts

@@ -15,3 +15,2 @@ /*
 import CometStyleXDefaultTheme from './CometStyleXDefaultTheme';
-// import ExecutionEnvironment from 'src/components/MOVE_TO_PACKAGES/utils/ExecutionEnvironment';
 import StyleXSheet from './StyleXSheet';
@@ -18,0 +17,0 @@

src/FDSStyleXDefaultTheme.ts

@@ -344,5 +344,9 @@ /*
     "dataviz-supplementary-3": "rgb(49,162,76)",
-    "dataviz-supplementary-4": "rgb(50,52,54)"
-}
+    "dataviz-supplementary-4": "rgb(50,52,54)",
+    "light-color": "rgba(0,0,0,0.05)",
+    "light-light-color": "rgba(29,28,29,0.04)",
+    "success-color": "rgb(0, 164, 0)",
+    "success-disabled-color": "rgb(134, 223, 129)"
+};
 
 export default FDSStyleXDefaultTheme;

src/index.ts

@@ -13,3 +13,2 @@ /*
 
-export {default} from './stylex';
 export * from './CometStyleXDarkTheme';
@@ -19,1 +18,3 @@ export * from './CometStyleXDefaultTheme';
 export * from './StyleXSheet';
+export * from './joinClasses';
+export {default} from './stylex';

src/stylex.ts

@@ -13,3 +13,6 @@ /*
 
+import * as React from 'react';
+
 import CometStyleXSheet from './CometStyleXSheet';
+import {CSSPropertiesWithNestedPseudo, CSSObject} from './types';
 
@@ -21,165 +24,169 @@ CometStyleXSheet.rootStyleSheet.injectTheme();
 function h(a) {
-    a = a.reverse();
-    const b = {};
-    while (a.length) {
-        var c = a.pop();
-        if (Array.isArray(c)) {
-            for (var d = c.length - 1; d >= 0; d--) a.push(c[d]);
-            continue
+  a = a.reverse();
+  const b = {};
+  while (a.length) {
+    var c = a.pop();
+    if (Array.isArray(c)) {
+      for (var d: any = c.length - 1; d >= 0; d--) a.push(c[d]);
+      continue
+    }
+    d = c;
+    if (d != null && typeof d === "object")
+      for (var e in d) {
+        c = d[e];
+        if (typeof c === "string") b[e] = c;
+        else if (typeof c === "object") {
+          var f;
+          b[e] = (f = b[e]) != null ? f : {};
+          Object.assign(b[e], c)
         }
-        d = c;
-        if (d != null && typeof d === "object")
-            for (var e in d) {
-                c = d[e];
-                if (typeof c === "string") b[e] = c;
-                else if (typeof c === "object") {
-                    var f;
-                    b[e] = (f = b[e]) != null ? f : {};
-                    Object.assign(b[e], c)
-                }
-            }
-    }
-    return b
+      }
+  }
+  return b
 }
 
-function stylex(args?: any) {
-    for (var a = arguments.length, b = new Array(a), c = 0; c < a; c++) b[c] = arguments[c];
-    var d = h(b),
-        e = "";
-    for (var f in d)
-        if (Boolean(d[f]))
-            if (typeof d[f] === "string") e += e ? " " + d[f] : d[f];
-            else if (typeof d[f] === "object") {
-                var g = d[f];
-                for (var i in g) {
-                    var j = g[i];
-                    e += e ? " " + j : j
-                }
-            }
-    return e
+function stylex(...args: CSSObject[]) {
+  for (var a = arguments.length, b = new Array(a), c = 0; c < a; c++) b[c] = arguments[c];
+  var d = h(b),
+    e = "";
+  for (var f in d)
+    if (Boolean(d[f]))
+      if (typeof d[f] === "string") e += e ? " " + d[f] : d[f];
+      else if (typeof d[f] === "object") {
+        var g = d[f];
+        for (var i in g) {
+          var j = g[i];
+          e += e ? " " + j : j
+        }
+      }
+  return e
 }
 
-function a(a) {
-    throw console.log("stylex.create should never be called. It should be compiled away.", "comet_ui")
-}
-
 stylex.compose = function () {
-    for (var a = arguments.length, b = new Array(a), c = 0; c < a; c++) b[c] = arguments[c];
-    return h(b)
+  for (var a = arguments.length, b = new Array(a), c = 0; c < a; c++) b[c] = arguments[c];
+  return h(b)
 };
 
-stylex.create = a;
+stylex.create = function<T extends string>(styles: CSSPropertiesWithNestedPseudo<T>):
+  { [key in T]: React.CSSProperties } & (
+  (...styles: (
+    | keyof T
+    | boolean
+    | undefined
+    | null
+    | { [key in keyof T]?: boolean | undefined | null }
+    )[]) => string
+  ) {
+  throw console.warn("stylex.create should never be called. It should be compiled away.")
+};
 
 stylex.keyframes = function (a) {
-    throw console.log("stylex.keyframes should never be called", "comet_ui")
+  throw console.warn("stylex.keyframes should never be called.")
 };
 
 stylex.inject = function (a, c, d) {
-    d === void 0 && (d = null), !g && /*b("gkx")("708253")*/true && a.indexOf("@keyframes") === -1 && (g = !0), CometStyleXSheet.rootStyleSheet.insert(a, c, d)
+  d === void 0 && (d = null), !g && /*b("gkx")("708253")*/true && a.indexOf("@keyframes") === -1 && (g = !0), CometStyleXSheet.rootStyleSheet.insert(a, c, d)
 };
 
-stylex.dedupe = function () {
-    return stylex.apply(void 0, arguments)
+stylex.dedupe = function<T>(...args: CSSObject[]) {
+  return stylex.apply(void 0, arguments)
 };
 
 stylex.absoluteFill = {
-    bottom: 0,
-    boxSizing: "border-box",
-    end: 0,
-    position: "absolute",
-    start: 0,
-    top: 0
-}
+  bottom: 0,
+  boxSizing: "border-box",
+  end: 0,
+  position: "absolute",
+  start: 0,
+  top: 0
+};
 
 stylex.absoluteCenter = {
-    boxSizing: "border-box",
-    left: "50%",
-    position: "absolute",
-    top: "50%",
-    transform: "translate(-50%, -50%)"
-}
+  boxSizing: "border-box",
+  left: "50%",
+  position: "absolute",
+  top: "50%",
+  transform: "translate(-50%, -50%)"
+};
 
 stylex.blockBase = {
-    borderStyle: "solid",
-    borderWidth: 0,
-    boxSizing: "border-box",
-    display: "block",
-    flexGrow: 1,
-    flexShrink: 1,
-    margin: 0,
-    padding: 0,
-    position: "relative",
-    zIndex: 0
-}
+  borderStyle: "solid",
+  borderWidth: 0,
+  boxSizing: "border-box",
+  display: "block",
+  flexGrow: 1,
+  flexShrink: 1,
+  margin: 0,
+  padding: 0,
+  position: "relative",
+  zIndex: 0
+};
 
 stylex.inlineBase = Object.assign({}, stylex.blockBase, {
-    display: "inline"
-})
+  display: "inline"
+});
 
 stylex.buttonBase = {
-    appearance: "none",
-    backgroundColor: "transparent",
-    borderStyle: "solid",
-    borderWidth: 0,
-    boxSizing: "border-box",
-    margin: 0,
-    padding: 0,
-    position: "relative",
-    textAlign: "inherit",
-    zIndex: 0
-}
+  appearance: "none",
+  backgroundColor: "transparent",
+  borderStyle: "solid",
+  borderWidth: 0,
+  boxSizing: "border-box",
+  margin: 0,
+  padding: 0,
+  position: "relative",
+  textAlign: "inherit",
+  zIndex: 0
+};
 
 stylex.flexBase = {
-    alignItems: "stretch",
-    borderStyle: "solid",
-    borderWidth: 0,
-    boxSizing: "border-box",
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    flexShrink: 1,
-    justifyContent: "space-between",
-    margin: 0,
-    minHeight: 0,
-    minWidth: 0,
-    padding: 0,
-    position: "relative",
-    zIndex: 0
-}
+  alignItems: "stretch",
+  borderStyle: "solid",
+  borderWidth: 0,
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  flexShrink: 1,
+  justifyContent: "space-between",
+  margin: 0,
+  minHeight: 0,
+  minWidth: 0,
+  padding: 0,
+  position: "relative",
+  zIndex: 0
+};
 
 stylex.flexInlineBase = Object.assign({}, stylex.flexBase, {
-    display: "inline-flex"
-})
+  display: "inline-flex"
+});
 
 stylex.linkBase = {
-    backgroundColor: "transparent",
-    backgroundImage: "none",
-    boxSizing: "border-box",
-    color: "inherit",
-    cursor: "pointer",
-    position: "relative",
-    textDecoration: "none",
-    zIndex: 0
-}
+  backgroundColor: "transparent",
+  backgroundImage: "none",
+  boxSizing: "border-box",
+  color: "inherit",
+  cursor: "pointer",
+  position: "relative",
+  textDecoration: "none",
+  zIndex: 0
+};
 
 stylex.listBase = {
-    boxSizing: "border-box",
-    listStyle: "none",
-    marginBottom: 0,
-    marginTop: 0,
-    paddingStart: 0
-}
+  boxSizing: "border-box",
+  listStyle: "none",
+  marginBottom: 0,
+  marginTop: 0,
+  paddingStart: 0
+};
 
 stylex.visuallyHidden = {
-    clip: "rect(0, 0, 0, 0)",
-    clipPath: "inset(50%)",
-    height: 1,
-    overflow: "hidden",
-    position: "absolute",
-    width: 1
-}
+  clip: "rect(0, 0, 0, 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  overflow: "hidden",
+  position: "absolute",
+  width: 1
+};
 
 export default stylex;
-
-
-

src/StyleXSheet.ts

@@ -16,6 +16,7 @@ /*
 import ExecutionEnvironment from './utils/ExecutionEnvironment';
+import {
+  LIGHT_MODE_CLASS_NAME as _LIGHT_MODE_CLASS_NAME,
+  DARK_MODE_CLASS_NAME as _DARK_MODE_CLASS_NAME,
+} from './constants';
 
-var h = "__fb-light-mode",
-    i = "__fb-dark-mode";
-
 function j(a, b) {
@@ -66,4 +67,4 @@ const c = [];
 
-    static LIGHT_MODE_CLASS_NAME = h;
-    static DARK_MODE_CLASS_NAME = i;
+    static LIGHT_MODE_CLASS_NAME = _LIGHT_MODE_CLASS_NAME;
+    static DARK_MODE_CLASS_NAME = _DARK_MODE_CLASS_NAME;
 
@@ -122,3 +123,3 @@ constructor(props: StyleXSheetProps = {}) {
     injectTheme = () => {
-        this.rootTheme != null && this.insert(j(":root, ." + h, this.rootTheme), 0), this.rootDarkTheme != null && this.insert(j("." + i + ":root, ." + i, this.rootDarkTheme), 0)
+        this.rootTheme != null && this.insert(j(":root, ." + _LIGHT_MODE_CLASS_NAME, this.rootTheme), 0), this.rootDarkTheme != null && this.insert(j("." + _DARK_MODE_CLASS_NAME + ":root, ." + _DARK_MODE_CLASS_NAME, this.rootDarkTheme), 0)
     }
@@ -125,0 +126,0 @@

No alert changes

Improved metrics

Total package byte prevSize

90002

increased by30.83%

Dependency count

3

decreased by-62.5%

Number of package files

18

increased by80%

Lines of code

1897

increased by17.32%

Dependency changes

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.12.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedknown-css-properties@^0.20.0

• - Removedpostcss@^7.0.32

• - Removedpostcss-discard-duplicates@^4.0.2

• - Removedpostcss-selector-parser@^6.0.2

• - Removedsort-css-media-queries@^1.5.2

• - Removedwebpack-virtual-modules@^0.2.2

• - Removedcssesc@3.0.0(transitive)

• - Removeddebug@3.2.7(transitive)

• - Removedknown-css-properties@0.20.0(transitive)

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedpostcss-discard-duplicates@4.0.2(transitive)

• - Removedpostcss-selector-parser@6.1.2(transitive)

• - Removedsort-css-media-queries@1.5.4(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedutil-deprecate@1.0.2(transitive)

• - Removedwebpack-virtual-modules@0.2.2(transitive)