@stylexjs/shared 0.1.0-beta.6 → 0.1.0-beta.7

package/lib/index.d.ts

@@ -25,10 +25,12 @@ export type InjectableStyle = {
 export type StyleRule = readonly [string, string, InjectableStyle];
 
 export type CompiledStyles = {
-  readonly [key: string]: string | { readonly [key: string]: string };
+  readonly [key: string]: string | null;
+  readonly $$css: true;
 };
 export type MutableCompiledStyles = {
-  [key: string]: string | { [key: string]: string };
+  [key: string]: string | null;
+  $$css: true;
 };
 
 export type CompiledNamespaces = { readonly [key: string]: CompiledStyles };

package/lib/stylex-create.js

@@ -41,7 +41,11 @@ function styleXCreateSet(namespaces) {
       throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
     }
     const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
-    resolvedNamespaces[namespaceName] = (0, _objectUtils.flattenObject)(resolvedNamespace);
+    const compiledNamespace = (0, _objectUtils.flattenObject)(resolvedNamespace);
+    resolvedNamespaces[namespaceName] = {
+      ...compiledNamespace,
+      $$css: true
+    };
     for (const cn of Object.keys(injected)) {
       if (injectedStyles[cn] == null) {
         injectedStyles[cn] = injected[cn];
@@ -88,7 +92,7 @@ function styleXCreateNamespace(style, options) {
         return (0, _expandShorthands.default)([innerKey, innerValue]);
       }))]];
     } else {
-      if (typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
+      if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
         throw new Error(messages.ILLEGAL_PROP_VALUE);
       }
       if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
@@ -112,15 +116,23 @@ function styleXCreateNamespace(style, options) {
       const pseudo = key;
       const innerObj = {};
       for (const [innerKey, innerVal] of (0, _objectUtils.objEntries)(val)) {
-        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
-        innerObj[updatedKey] = className;
-        injectedStyles[updatedKey + pseudo] = [className, cssRule];
+        if (innerVal === null) {
+          innerObj[innerKey] = null;
+        } else {
+          const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
+          innerObj[updatedKey] = className;
+          injectedStyles[updatedKey + pseudo] = [className, cssRule];
+        }
       }
       resolvedNamespace[key] = innerObj;
     } else {
-      const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
-      resolvedNamespace[updatedKey] = className;
-      injectedStyles[updatedKey] = [className, cssRule];
+      if (val === null) {
+        resolvedNamespace[key] = null;
+      } else {
+        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
+        resolvedNamespace[updatedKey] = className;
+        injectedStyles[updatedKey] = [className, cssRule];
+      }
     }
   }
   const finalInjectedStyles = (0, _objectUtils.objFromEntries)((0, _objectUtils.objValues)(injectedStyles));

package/lib/stylex-defaultValue.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StylexValueBuilder = void 0;
+exports.default = stylexDefaultValue;
+var messages = _interopRequireWildcard(require("./messages"));
+var _dashify = _interopRequireDefault(require("./utils/dashify"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+var _set = /*#__PURE__*/new WeakSet();
+class StylexValueBuilder {
+  constructor(defaultValue) {
+    _classPrivateMethodInitSpec(this, _set);
+    this.default = defaultValue;
+  }
+  // @media Queries
+
+  mediaPrint(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media print', value);
+  }
+  mediaWidth(_ref, value) {
+    let [min, max] = _ref;
+    if (min > 0 && max < Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px and max-width: ${max}px)`, value);
+    } else if (min === 0) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-width: ${max}px)`, value);
+    } else if (max === Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px)`, value);
+    }
+    throw new Error(messages.INVALID_MEDIA_QUERY);
+  }
+  mediaHeight(_ref2, value) {
+    let [min, max] = _ref2;
+    if (min > 0 && max < Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px and max-height: ${max}px)`, value);
+    } else if (min === 0) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-height: ${max}px)`, value);
+    } else if (max === Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px)`, value);
+    }
+    throw new Error(messages.INVALID_MEDIA_QUERY);
+  }
+  mediaAspectRatio(_ref3, value) {
+    let [min, max] = _ref3;
+    if (min > 0 && max < Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-aspect-ratio: ${min} and max-aspect-ratio: $, })`, value);
+    } else if (min === 0) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-aspect-ratio: ${max})`, value);
+    } else if (max === Infinity) {
+      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-aspect-ratio: ${min})`, value);
+    }
+    throw new Error(messages.INVALID_MEDIA_QUERY);
+  }
+  mediaPortrait(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (orientation: portrait)', value);
+  }
+  mediaLandscape(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (orientation: landscape)', value);
+  }
+  mediaSRGBDisplay(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: srgb)', value);
+  }
+  mediaP3Display(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: p3)', value);
+  }
+  mediaRec2020Display(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: rec2020)', value);
+  }
+  mediaIsFullscreen(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (display-mode: fullscreen)', value);
+  }
+
+  // These are confusing, so skipping them for now
+  // mediaIsStandalone
+  // mediaIsMinimalUI
+
+  mediaSDRDisplay(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (dynamic-range: standard)', value);
+  }
+  mediaHDRDisplay(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (dynamic-range: high)', value);
+  }
+  mediaSupportsHDRVideo(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (video-dynamic-range: high)', value);
+  }
+
+  //<TAddedValue> mediaHasColor(value: TAddedValue): StylexValueBuilder<TValue | TAddedValue> {
+  //  return this.#set('@media (color)', value);
+  // }
+
+  primaryInputCanHover(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (hover: hover)', value);
+  }
+  primaryInputCanNotHover(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (hover: none)', value);
+  }
+  someInputCanHover(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-hover: hover)', value);
+  }
+  noInputCanHover(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-hover: none)', value);
+  }
+  somePointerIsFine(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-pointer: fine)', value);
+  }
+  somePointerIsCoarse(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-pointer: coarse)', value);
+  }
+  primaryPointerIsFine(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (pointer: fine)', value);
+  }
+  primaryPointerIsCoarse(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (pointer: coarse)', value);
+  }
+  lightMode(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-color-scheme: light)', value);
+  }
+  darkMode(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-color-scheme: dark)', value);
+  }
+  userPrefersMoreContrast(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-contrast: more)', value);
+  }
+  userPrefersLessContrast(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-contrast: less)', value);
+  }
+  userPrefersReducedMotion(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-reduced-motion)', value);
+  }
+  noScript(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (scripting: none)', value);
+  }
+  matchMediaUNSAFE(query, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `@media ${query}`, value);
+  }
+  supports(selector, value) {
+    const toSelector = _ref4 => {
+      let [k, v] = _ref4;
+      return `(${(0, _dashify.default)(k)}: ${String(v)})`;
+    };
+    const query = Object.entries(selector).map(toSelector).join(' and ');
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
+  }
+  supportsNot(selector, value) {
+    const toSelector = _ref5 => {
+      let [k, v] = _ref5;
+      return `(not (${(0, _dashify.default)(k)}: ${String(v)}))`;
+    };
+    const query = Object.entries(selector).map(toSelector).join(' and ');
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
+  }
+
+  // Pseudo Classes
+
+  hover(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':hover', value);
+  }
+  focus(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus', value);
+  }
+  focusVisible(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus-visible', value);
+  }
+  focusWithin(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus-within', value);
+  }
+  active(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':active', value);
+  }
+  anyLink(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':any-link', value);
+  }
+  autofill(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':autofill', value);
+  }
+  checked(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':checked', value);
+  }
+  defaultSelection(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':default', value);
+  }
+  disabled(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':disabled', value);
+  }
+  empty(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':empty', value);
+  }
+  enabled(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':enabled', value);
+  }
+  fullscreen(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':fullscreen', value);
+  }
+  indeterminate(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':indeterminate', value);
+  }
+  invalid(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':invalid', value);
+  }
+  isUNSAFE(selector, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
+  }
+  notUNSAFE(selector, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
+  }
+  lang(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':lang', value);
+  }
+  dirRTLUNSFAE(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':dir(rtl)', value);
+  }
+  link(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':link', value);
+  }
+  optional(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':optional', value);
+  }
+  pictureInPicture(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':picture-in-picture', value);
+  }
+  placeholderShown(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':placeholder-shown', value);
+  }
+  paused(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':paused', value);
+  }
+  playing(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':playing', value);
+  }
+  readOnly(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':read-only', value);
+  }
+  readWrite(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':read-write', value);
+  }
+  required(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':required', value);
+  }
+  target(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':target', value);
+  }
+  valid(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':valid', value);
+  }
+  visited(value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, ':visited', value);
+  }
+  pseudoUNSAFE(selector, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `:${selector}`, value);
+  }
+}
+exports.StylexValueBuilder = StylexValueBuilder;
+function _set2(key, value) {
+  this[key] = value;
+  return this;
+}
+function stylexDefaultValue(value) {
+  return new StylexValueBuilder(value);
+}

package/lib/utils/object-utils.js

@@ -26,7 +26,7 @@ var _stylexInclude = require("../stylex-include");
 function flattenObject(obj) {
   const result = {};
   for (const [key, value] of objEntries(obj)) {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' || value == null) {
       result[key] = value;
     } else if (value instanceof _stylexInclude.IncludedStyles) {
       result[key] = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "description": "Shared Code for Stylex compile and runtime.",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebookexternal/stylex",