@stylexjs/shared 0.2.0-beta.9 → 0.4.0

package/lib/types/index.js.flow

@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+// import type { Color as ColorType } from './stylex-types-color';
+
+// We want all in one file?
+// option 1, create interface an implement it in the class
+// why? All the types have a single base definition of props
+// We want on type that defines CSS Types
+// Option 2: Do a union type and make
+
+// interface ICSSType {
+//   toString(): string;
+// }
+
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: T,
+      [string]: ValueWithDefault<T>,
+    }>;
+
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+
+type CSSSyntaxType = CSSSyntax | $ReadOnlyArray<CSSSyntax>;
+
+declare export class CSSType {}
+
+export interface ICSSType<+T: string | number> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+}
+
+type AnguleValue = string;
+declare export class Angle<+T: AnguleValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  static +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: AnguleValue = AnguleValue>(
+    value: ValueWithDefault<T>,
+  ): Angle<T>;
+}
+declare export const angle: $FlowFixMe;
+
+type ColorValue = string;
+declare export class Color<+T: ColorValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ColorValue = ColorValue>(
+    value: ValueWithDefault<T>,
+  ): Color<T>;
+}
+declare export const color: $FlowFixMe;
+
+type URLValue = string;
+
+declare export class Url<+T: URLValue> extends CSSType implements ICSSType<T> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: URLValue = URLValue>(value: ValueWithDefault<T>): Url<T>;
+}
+declare export const url: $FlowFixMe;
+
+type ImageValue = string;
+
+declare export class Image<+T: ImageValue>
+  extends Url<T>
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ImageValue = ImageValue>(
+    value: ValueWithDefault<T>,
+  ): Image<T>;
+}
+declare export const image: $FlowFixMe;
+
+type IntegerValue = number;
+
+declare export class Integer<+T: IntegerValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: IntegerValue = IntegerValue>(value: T): Integer<T>;
+}
+declare export const integer: $FlowFixMe;
+
+type LengthPercentageValue = string;
+
+declare export class LengthPercentage<+T: LengthPercentageValue>
+  extends CSSType
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static createLength<T: LengthPercentageValue | number>(
+    value: ValueWithDefault<T>,
+  ): LengthPercentage<string>;
+  static createPercentage<T: LengthPercentageValue | number>(
+    value: ValueWithDefault<T>,
+  ): LengthPercentage<string>;
+}
+declare export const lengthPercentage: $FlowFixMe;
+
+type LengthValue = number | string;
+
+declare export class Length<+T: LengthValue>
+  extends LengthPercentage<string>
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: LengthValue = LengthValue>(
+    value: ValueWithDefault<T>,
+  ): Length<T>;
+}
+declare export const length: $FlowFixMe;
+
+type PercentageValue = string | number;
+
+declare export class Percentage<+T: PercentageValue>
+  extends LengthPercentage<string>
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: PercentageValue = PercentageValue>(
+    value: ValueWithDefault<T>,
+  ): Percentage<T>;
+}
+declare export const percentage: $FlowFixMe;
+
+type NumberValue = number;
+
+declare export class Num<+T: NumberValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: NumberValue = NumberValue>(
+    value: ValueWithDefault<T>,
+  ): Num<T>;
+}
+declare export const number: $FlowFixMe;
+
+type ResolutionValue = string | 0;
+
+declare export class Resolution<+T: ResolutionValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ResolutionValue = ResolutionValue>(
+    value: ValueWithDefault<T>,
+  ): Resolution<T>;
+}
+declare export const resolution: $FlowFixMe;
+
+type TimeValue = string | 0;
+
+declare export class Time<+T: TimeValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TimeValue = TimeValue>(value: ValueWithDefault<T>): Time<T>;
+}
+declare export const time: $FlowFixMe;
+
+type TransformFunctionValue = string;
+
+declare export class TransformFunction<+T: TransformFunctionValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TransformFunctionValue = TransformFunctionValue>(
+    value: ValueWithDefault<T>,
+  ): TransformFunction<T>;
+}
+declare export const transformFunction: $FlowFixMe;
+
+type TransformListValue = string;
+
+declare export class TransformList<T: TransformListValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TransformListValue = TransformListValue>(
+    value: ValueWithDefault<T>,
+  ): TransformList<T>;
+}
+declare export const transformList: $FlowFixMe;

package/lib/utils/Rule.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+/**
+ * This could be an interface, but we use a class so that we can
+ * use instanceof to check for it.
+ */
+export declare class Rule<V> {}
+/**
+ * This is a class that represents a raw style rule.
+ *
+ * It exists to track the actual CSS rule that should be compiled
+ * even as we transform the structure of the RawStyles object.
+ */
+export declare class RawRule<V> extends Rule<V> {
+  readonly key: string;
+  readonly value: V;
+  readonly psuedos: null | undefined | ReadonlyArray<string>;
+  readonly atRules: null | undefined | ReadonlyArray<string>;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: null | undefined | ReadonlyArray<string>,
+    atRules: null | undefined | ReadonlyArray<string>,
+  );
+}
+export declare class RawRuleList<V> extends Rule<V> {
+  readonly rules: ReadonlyArray<Rule<V>>;
+  constructor(rules: ReadonlyArray<Rule<V>>);
+}
+export declare class RawRuleRTLTuple<V1, V2> extends Rule<V1 | V2> {
+  readonly rules: [RawRule<V1>, RawRule<V2>];
+  constructor(rule1: RawRule<V1>, rule2: RawRule<V2>);
+}
+export declare class CompiledRule<V> extends Rule<V> {
+  readonly key: string;
+  readonly value: V;
+  readonly psuedos: null | undefined | ReadonlyArray<string>;
+  readonly atRules: null | undefined | ReadonlyArray<string>;
+  readonly className: string;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: null | undefined | ReadonlyArray<string>,
+    atRules: null | undefined | ReadonlyArray<string>,
+    className: string,
+  );
+}
+export declare class CompiledRuleTuple2<V1, V2> extends Rule<V1 | V2> {
+  readonly rules: [CompiledRule<V1>, CompiledRule<V2>];
+  constructor(rule1: CompiledRule<V1>, rule2: CompiledRule<V2>);
+}

package/lib/utils/Rule.js

@@ -4,28 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Rule = exports.RawRuleRTLTuple = exports.RawRuleList = exports.RawRule = exports.CompiledRuleTuple2 = exports.CompiledRule = void 0;
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-/**
- * This could be an interface, but we use a class so that we can
- * use instanceof to check for it.
- */
-// eslint-disable-next-line no-unused-vars
 class Rule {}
-
-/**
- * This is a class that represents a raw style rule.
- *
- * It exists to track the actual CSS rule that should be compiled
- * even as we transform the structure of the RawStyles object.
- */
 exports.Rule = Rule;
 class RawRule extends Rule {
   constructor(key, value, psuedos, atRules) {

package/lib/utils/Rule.js.flow

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+/**
+ * This could be an interface, but we use a class so that we can
+ * use instanceof to check for it.
+ */
+// eslint-disable-next-line no-unused-vars
+declare export class Rule<+V> {}
+
+/**
+ * This is a class that represents a raw style rule.
+ *
+ * It exists to track the actual CSS rule that should be compiled
+ * even as we transform the structure of the RawStyles object.
+ */
+declare export class RawRule<V> extends Rule<V> {
+  +key: string;
+  +value: V;
+  +psuedos: ?$ReadOnlyArray<string>;
+  +atRules: ?$ReadOnlyArray<string>;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: ?$ReadOnlyArray<string>,
+    atRules: ?$ReadOnlyArray<string>,
+  ): void;
+}
+
+declare export class RawRuleList<V> extends Rule<V> {
+  +rules: $ReadOnlyArray<Rule<V>>;
+  constructor(rules: $ReadOnlyArray<Rule<V>>): void;
+}
+
+declare export class RawRuleRTLTuple<V1, V2> extends Rule<V1 | V2> {
+  +rules: [RawRule<V1>, RawRule<V2>];
+  constructor(rule1: RawRule<V1>, rule2: RawRule<V2>): void;
+}
+
+declare export class CompiledRule<V> extends Rule<V> {
+  +key: string;
+  +value: V;
+  +psuedos: ?$ReadOnlyArray<string>;
+  +atRules: ?$ReadOnlyArray<string>;
+  +className: string;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: ?$ReadOnlyArray<string>,
+    atRules: ?$ReadOnlyArray<string>,
+    className: string,
+  ): void;
+}
+
+declare export class CompiledRuleTuple2<V1, V2> extends Rule<V1 | V2> {
+  +rules: [CompiledRule<V1>, CompiledRule<V2>];
+  constructor(rule1: CompiledRule<V1>, rule2: CompiledRule<V2>): void;
+}

package/lib/utils/dashify.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+declare function dashify(str: string): string;
+export default dashify;

package/lib/utils/dashify.js

@@ -4,14 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = dashify;
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * 
- */
-
 function dashify(str) {
   return str.replace(/(^|[a-z])([A-Z])/g, '$1-$2').toLowerCase();
 }

package/lib/utils/dashify.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+declare export default function dashify(str: string): string;

package/lib/utils/default-options.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { StyleXOptions } from '../common-types';
+export declare const defaultOptions: StyleXOptions;

package/lib/utils/default-options.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = void 0;
+const defaultOptions = exports.defaultOptions = {
+  dev: false,
+  useRemForFontSize: true,
+  test: false,
+  classNamePrefix: 'x',
+  styleResolution: 'application-order'
+};

package/lib/utils/default-options.js.flow

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from '../common-types';
+
+// {
+//   ...options,
+//   dev: !!(options as any).dev,
+//   test: !!(options as any).test,
+//   stylexSheetName: (options as any).stylexSheetName ?? undefined,
+//   classNamePrefix: (options as any).classNamePrefix ?? 'x',
+//   importSources: (options as any).importSources ?? [name, 'stylex'],
+//   definedStylexCSSVariables:
+//     (options as any).definedStylexCSSVariables ?? {},
+//   genConditionalClasses: !!(options as any).genConditionalClasses,
+//   skipShorthandExpansion: !!(options as any).skipShorthandExpansion,
+// } as StyleXOptions;
+
+declare export const defaultOptions: StyleXOptions;

package/lib/utils/file-based-identifier.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+declare function genFileBasedIdentifier($$PARAM_0$$: {
+  readonly fileName: string;
+  readonly exportName: string;
+  readonly key?: string;
+}): string;
+export default genFileBasedIdentifier;

package/lib/utils/file-based-identifier.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = genFileBasedIdentifier;
+function genFileBasedIdentifier(_ref) {
+  let {
+    fileName,
+    exportName,
+    key
+  } = _ref;
+  return `${fileName}//${exportName}${key != null ? `.${key}` : ''}`;
+}

package/lib/utils/file-based-identifier.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+declare export default function genFileBasedIdentifier({
+  +fileName: string,
+  +exportName: string,
+  +key?: string,
+}): string;

package/lib/utils/genCSSRule.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+export declare function genCSSRule(
+  className: string,
+  decls: string,
+  pseudos: ReadonlyArray<string>,
+  atRules: ReadonlyArray<string>,
+): string;

package/lib/utils/genCSSRule.js

@@ -1,24 +1,15 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- *
- */
-
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generateCSSRule;
-function generateCSSRule(className, decls, pseudo) {
-  if (pseudo === '::thumb') {
-    const selector = THUMB_VARIANTS.map(suffix => '.' + className + suffix).join(', ');
-    return `${selector}{${decls}}`;
+exports.genCSSRule = genCSSRule;
+const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+function genCSSRule(className, decls, pseudos, atRules) {
+  const pseudo = pseudos.filter(p => p !== '::thumb').join('');
+  let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join('') + pseudo;
+  if (pseudos.includes('::thumb')) {
+    selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(', ');
   }
-  return pseudo != null && pseudo[0] === '@' ? `${pseudo}{.${className}.${className}{${decls}}}` : pseudo != null && pseudo[0] === ':' ? `.${className}${pseudo}{${decls}}` : `.${className}{${decls}}`;
-}
-const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+  return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
+}

package/lib/utils/genCSSRule.js.flow

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+declare export function genCSSRule(
+  className: string,
+  decls: string,
+  pseudos: $ReadOnlyArray<string>,
+  atRules: $ReadOnlyArray<string>,
+): string;

package/lib/utils/normalize-value.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { StyleXOptions } from '../common-types';
+declare function normalizeValue(
+  value: string,
+  key: string,
+  $$PARAM_2$$: StyleXOptions,
+): string;
+export default normalizeValue;

package/lib/utils/normalize-value.js

@@ -1,13 +1,3 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- *
- */
-
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -22,14 +12,17 @@ var _whitespace = _interopRequireDefault(require("./normalizers/whitespace"));
 var _zeroDimensions = _interopRequireDefault(require("./normalizers/zero-dimensions"));
 var _detectUnclosedFns = _interopRequireDefault(require("./normalizers/detect-unclosed-fns"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _convertCamelCaseValues = _interopRequireDefault(require("./normalizers/convert-camel-case-values"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// `Timings` should be before `LeadingZero`, because it
-// changes 500ms to 0.5s, then `LeadingZero` makes it .5s
-const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
-function normalizeValue(value, key) {
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
+function normalizeValue(value, key, _ref) {
+  let {
+    useRemForFontSize
+  } = _ref;
   if (value == null) {
     return value;
   }
   const parsedAST = (0, _postcssValueParser.default)(value);
-  return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
+  const relevantNormalizers = useRemForFontSize ? [...normalizers, _fontSizePxToRem.default] : normalizers;
+  return relevantNormalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
 }

package/lib/utils/normalize-value.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from '../common-types';
+
+declare export default function normalizeValue(
+  value: string,
+  key: string,
+  StyleXOptions,
+): string;