@stylexjs/shared
Advanced tools
Comparing version 0.5.1 to 0.6.0
@@ -12,3 +12,3 @@ /** | ||
export declare function convertStyleToClassName( | ||
objEntry: [string, TRawValue], | ||
objEntry: Readonly<[string, TRawValue]>, | ||
pseudos: ReadonlyArray<string>, | ||
@@ -18,1 +18,5 @@ atRules: ReadonlyArray<string>, | ||
): StyleRule; | ||
declare function variableFallbacks( | ||
values: ReadonlyArray<string>, | ||
): Array<string>; | ||
export default variableFallbacks; |
@@ -7,2 +7,3 @@ "use strict"; | ||
exports.convertStyleToClassName = convertStyleToClassName; | ||
exports.default = variableFallbacks; | ||
var _hash = _interopRequireDefault(require("./hash")); | ||
@@ -14,2 +15,5 @@ var _dashify = _interopRequireDefault(require("./utils/dashify")); | ||
var _objectUtils = require("./utils/object-utils"); | ||
var messages = _interopRequireWildcard(require("./messages")); | ||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } | ||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -23,3 +27,6 @@ function convertStyleToClassName(objEntry, pseudos, atRules) { | ||
const dashedKey = (0, _dashify.default)(key); | ||
const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue, options)) : (0, _transformValue.default)(key, rawValue, options); | ||
let value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue, options)) : (0, _transformValue.default)(key, rawValue, options); | ||
if (Array.isArray(value) && value.find(val => val.startsWith('var(') && val.endsWith(')'))) { | ||
value = variableFallbacks(value); | ||
} | ||
const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []); | ||
@@ -34,2 +41,27 @@ const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []); | ||
return [key, className, cssRules]; | ||
} | ||
function variableFallbacks(values) { | ||
const firstVar = values.findIndex(val => val.startsWith('var(') && val.endsWith(')')); | ||
const lastVar = values.findLastIndex(val => val.startsWith('var(') && val.endsWith(')')); | ||
const valuesBeforeFirstVar = values.slice(0, firstVar); | ||
let varValues = values.slice(firstVar, lastVar + 1).reverse(); | ||
const valuesAfterLastVar = values.slice(lastVar + 1); | ||
if (varValues.find(val => !val.startsWith('var(') || !val.endsWith(')'))) { | ||
throw new Error(messages.NON_CONTIGUOUS_VARS); | ||
} | ||
varValues = varValues.map(val => val.slice(4, -1)); | ||
return [...(valuesBeforeFirstVar.length > 0 ? valuesBeforeFirstVar.map(val => composeVars(...varValues, val)) : composeVars(...varValues)), ...valuesAfterLastVar]; | ||
} | ||
function composeVars() { | ||
for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) { | ||
vars[_key] = arguments[_key]; | ||
} | ||
const [first, ...rest] = vars; | ||
if (rest.length > 0) { | ||
return `var(${first},${composeVars(...rest)})`; | ||
} else if (first.startsWith('--')) { | ||
return `var(${first})`; | ||
} else { | ||
return first; | ||
} | ||
} |
@@ -42,1 +42,2 @@ /** | ||
export declare const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.'; | ||
export declare const NON_CONTIGUOUS_VARS: 'All variables passed to `stylex.firstThatWorks` must be contiguous.'; |
@@ -6,3 +6,3 @@ 'use strict'; | ||
}); | ||
exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INCLUDES = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0; | ||
exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INCLUDES = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.NON_CONTIGUOUS_VARS = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0; | ||
const ILLEGAL_ARGUMENT_LENGTH = exports.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.'; | ||
@@ -39,2 +39,3 @@ const ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.'; | ||
const ANONYMOUS_THEME = exports.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.'; | ||
const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.'; | ||
const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.'; | ||
const NON_CONTIGUOUS_VARS = exports.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.'; |
@@ -8,2 +8,4 @@ "use strict"; | ||
var _hash = _interopRequireDefault(require("./hash")); | ||
var _stylexVarsUtils = require("./stylex-vars-utils"); | ||
var _types = require("./types"); | ||
var _defaultOptions = require("./utils/default-options"); | ||
@@ -21,44 +23,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
}; | ||
const rulesByAtRule = {}; | ||
const sortedKeys = Object.keys(variables).sort(); | ||
const atRules = {}; | ||
const cssVariablesOverrideString = sortedKeys.map(key => { | ||
const varNameHash = themeVars[key].slice(4, -1); | ||
const value = variables[key]; | ||
if (varNameHash != null && value !== null && typeof value === 'object') { | ||
if (value.default === undefined) { | ||
throw new Error('Default value is not defined for ' + key + ' variable.'); | ||
} | ||
const definedVarString = `${varNameHash}:${value.default};`; | ||
Object.keys(value).forEach(key => { | ||
if (key.startsWith('@')) { | ||
const definedVarStringForAtRule = `${varNameHash}:${value[key]};`; | ||
if (atRules[key] == null) { | ||
atRules[key] = [definedVarStringForAtRule]; | ||
} else { | ||
atRules[key].push(definedVarStringForAtRule); | ||
} | ||
} | ||
}); | ||
return definedVarString; | ||
for (const key of sortedKeys) { | ||
const value = (0, _types.isCSSType)(variables[key]) ? variables[key].value : variables[key]; | ||
const nameHash = themeVars[key].slice(6, -1); | ||
(0, _stylexVarsUtils.collectVarsByAtRule)(key, { | ||
nameHash, | ||
value | ||
}, rulesByAtRule); | ||
} | ||
const sortedAtRules = Object.keys(rulesByAtRule).sort((a, b) => a === 'default' ? -1 : b === 'default' ? 1 : a.localeCompare(b)); | ||
const atRulesStringForHash = sortedAtRules.map(atRule => (0, _stylexVarsUtils.wrapWithAtRules)(rulesByAtRule[atRule].join(''), atRule)).join(''); | ||
const overrideClassName = classNamePrefix + (0, _hash.default)(atRulesStringForHash); | ||
const stylesToInject = {}; | ||
for (const atRule of sortedAtRules) { | ||
const decls = rulesByAtRule[atRule].join(''); | ||
const rule = `.${overrideClassName}{${decls}}`; | ||
if (atRule === 'default') { | ||
stylesToInject[overrideClassName] = { | ||
ltr: rule, | ||
priority: 0.5, | ||
rtl: null | ||
}; | ||
} else { | ||
stylesToInject[overrideClassName + '-' + (0, _hash.default)(atRule)] = { | ||
ltr: (0, _stylexVarsUtils.wrapWithAtRules)(rule, atRule), | ||
priority: 0.5 + 0.1 * (0, _stylexVarsUtils.priorityForAtRule)(atRule), | ||
rtl: null | ||
}; | ||
} | ||
return varNameHash != null && typeof value !== 'object' ? `${varNameHash}:${value};` : ''; | ||
}).join(''); | ||
const sortedAtRules = Object.keys(atRules).sort(); | ||
const atRulesStringForHash = sortedAtRules.map(atRule => { | ||
return `${atRule}{${atRules[atRule].sort().join('')}}`; | ||
}).join(''); | ||
const overrideClassName = classNamePrefix + (0, _hash.default)(cssVariablesOverrideString + atRulesStringForHash); | ||
const stylesToInject = { | ||
[overrideClassName]: { | ||
ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`, | ||
priority: 0.8, | ||
rtl: undefined | ||
} | ||
}; | ||
for (const atRule of sortedAtRules) { | ||
stylesToInject[overrideClassName + '-' + (0, _hash.default)(atRule)] = { | ||
ltr: `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`, | ||
priority: 0.9, | ||
rtl: null | ||
}; | ||
} | ||
@@ -65,0 +55,0 @@ return [{ |
@@ -11,9 +11,5 @@ /** | ||
import type { InjectableStyle, StyleXOptions } from './common-types'; | ||
type VarsConfig = Readonly<{ | ||
[$$Key$$: string]: | ||
| string | ||
| Readonly<{ default: string; [$$Key$$: string]: string }>; | ||
}>; | ||
import type { VarsConfig } from './stylex-vars-utils'; | ||
type VarsObject<Vars extends VarsConfig> = Readonly</** | ||
* > 17 | ...$ObjMapConst<Vars, string>, | ||
* > 14 | ...$ObjMapConst<Vars, string>, | ||
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported. | ||
@@ -20,0 +16,0 @@ **/ |
@@ -10,2 +10,4 @@ "use strict"; | ||
var _defaultOptions = require("./utils/default-options"); | ||
var _stylexVarsUtils = require("./stylex-vars-utils"); | ||
var _types = require("./types"); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -21,4 +23,16 @@ function styleXDefineVars(variables, options) { | ||
const themeNameHash = classNamePrefix + (0, _hash.default)(themeName); | ||
const typedVariables = {}; | ||
const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => { | ||
const nameHash = classNamePrefix + (0, _hash.default)(`${themeName}.${key}`); | ||
if ((0, _types.isCSSType)(value)) { | ||
const v = value; | ||
typedVariables[nameHash] = { | ||
initialValue: (0, _stylexVarsUtils.getDefaultValue)(v.value), | ||
syntax: v.syntax | ||
}; | ||
return { | ||
nameHash, | ||
value: v.value | ||
}; | ||
} | ||
return { | ||
@@ -36,33 +50,38 @@ nameHash, | ||
const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash); | ||
const injectableTypes = (0, _objectUtils.objMap)(typedVariables, (_ref2, nameHash) => { | ||
let { | ||
initialValue: iv, | ||
syntax | ||
} = _ref2; | ||
return { | ||
ltr: `@property --${nameHash} { syntax: "${syntax}"; inherits: true;${iv != null ? ` initial-value: ${iv}` : ''} }`, | ||
rtl: null, | ||
priority: 0 | ||
}; | ||
}); | ||
return [{ | ||
...themeVariablesObject, | ||
__themeName__: themeNameHash | ||
}, injectableStyles]; | ||
}, { | ||
...injectableTypes, | ||
...injectableStyles | ||
}]; | ||
} | ||
function constructCssVariablesString(variables, themeNameHash) { | ||
const ruleByAtRule = {}; | ||
const rulesByAtRule = {}; | ||
for (const [key, { | ||
nameHash, | ||
value | ||
}] of (0, _objectUtils.objEntries)(variables)) { | ||
if (value !== null && typeof value === 'object') { | ||
if (value.default === undefined) { | ||
throw new Error('Default value is not defined for ' + key + ' variable.'); | ||
} | ||
const v = value; | ||
for (const [key, value] of (0, _objectUtils.objEntries)(v)) { | ||
ruleByAtRule[key] ??= []; | ||
ruleByAtRule[key].push(`--${nameHash}:${value};`); | ||
} | ||
} else { | ||
ruleByAtRule.default ??= []; | ||
ruleByAtRule.default.push(`--${nameHash}:${value};`); | ||
} | ||
}] of Object.entries(variables)) { | ||
(0, _stylexVarsUtils.collectVarsByAtRule)(key, { | ||
nameHash, | ||
value | ||
}, rulesByAtRule); | ||
} | ||
const result = {}; | ||
for (const [key, value] of (0, _objectUtils.objEntries)(ruleByAtRule)) { | ||
const suffix = key === 'default' ? '' : `-${(0, _hash.default)(key)}`; | ||
for (const [atRule, value] of Object.entries(rulesByAtRule)) { | ||
const suffix = atRule === 'default' ? '' : `-${(0, _hash.default)(atRule)}`; | ||
let ltr = `:root{${value.join('')}}`; | ||
if (key !== 'default') { | ||
ltr = `${key}{${ltr}}`; | ||
if (atRule !== 'default') { | ||
ltr = (0, _stylexVarsUtils.wrapWithAtRules)(ltr, atRule); | ||
} | ||
@@ -72,3 +91,3 @@ result[themeNameHash + suffix] = { | ||
rtl: null, | ||
priority: key === 'default' ? 0 : 0.1 | ||
priority: (0, _stylexVarsUtils.priorityForAtRule)(atRule) * 0.1 | ||
}; | ||
@@ -75,0 +94,0 @@ } |
@@ -10,5 +10,5 @@ /** | ||
declare function stylexFirstThatWorks<T>( | ||
declare function stylexFirstThatWorks<T extends string>( | ||
...args: ReadonlyArray<T> | ||
): ReadonlyArray<T>; | ||
export default stylexFirstThatWorks; |
@@ -10,5 +10,15 @@ /** | ||
type ValueWithDefault<T> = | ||
| T | ||
| Readonly<{ default: T; [$$Key$$: string]: ValueWithDefault<T> }>; | ||
type NestedWithNumbers = | ||
| number | ||
| string | ||
| Readonly<{ | ||
default: NestedWithNumbers; | ||
[$$Key$$: string]: NestedWithNumbers; | ||
}>; | ||
type ValueWithDefault = | ||
| string | ||
| Readonly<{ | ||
default: ValueWithDefault; | ||
[$$Key$$: string]: ValueWithDefault; | ||
}>; | ||
type CSSSyntax = | ||
@@ -30,19 +40,25 @@ | '*' | ||
| '<transform-list>'; | ||
type CSSSyntaxType = CSSSyntax | ReadonlyArray<CSSSyntax>; | ||
export declare class CSSType {} | ||
export interface ICSSType<T extends string | number> { | ||
readonly value: ValueWithDefault<T>; | ||
type CSSSyntaxType = CSSSyntax; | ||
declare class BaseCSSType { | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault); | ||
} | ||
export interface CSSType<_T extends string | number = string | number> { | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
} | ||
export declare const isCSSType: ( | ||
value: unknown, | ||
) => value is CSSType<string | number>; | ||
type AnguleValue = string; | ||
export declare class Angle<T extends AnguleValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
static readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends AnguleValue = AnguleValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): Angle<T>; | ||
@@ -53,10 +69,9 @@ } | ||
export declare class Color<T extends ColorValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends ColorValue = ColorValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): Color<T>; | ||
@@ -67,11 +82,8 @@ } | ||
export declare class Url<T extends URLValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends URLValue = URLValue>( | ||
value: ValueWithDefault<T>, | ||
): Url<T>; | ||
static create<T extends URLValue = URLValue>(value: ValueWithDefault): Url<T>; | ||
} | ||
@@ -82,9 +94,9 @@ export declare const url: any; | ||
extends Url<T> | ||
implements ICSSType<T> | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
constructor(value: ValueWithDefault); | ||
static create<T extends ImageValue = ImageValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): Image<T>; | ||
@@ -95,8 +107,7 @@ } | ||
export declare class Integer<T extends IntegerValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends IntegerValue = IntegerValue>(value: T): Integer<T>; | ||
@@ -106,14 +117,13 @@ } | ||
type LengthPercentageValue = string; | ||
export declare class LengthPercentage<T extends LengthPercentageValue> | ||
extends CSSType | ||
implements ICSSType<string> | ||
export declare class LengthPercentage<_T extends LengthPercentageValue> | ||
extends BaseCSSType | ||
implements CSSType<string> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static createLength<T extends LengthPercentageValue | number>( | ||
value: ValueWithDefault<T>, | ||
static createLength<_T extends LengthPercentageValue | number>( | ||
value: ValueWithDefault, | ||
): LengthPercentage<string>; | ||
static createPercentage<T extends LengthPercentageValue | number>( | ||
value: ValueWithDefault<T>, | ||
static createPercentage<_T extends LengthPercentageValue | number>( | ||
value: ValueWithDefault, | ||
): LengthPercentage<string>; | ||
@@ -123,11 +133,10 @@ } | ||
type LengthValue = number | string; | ||
export declare class Length<T extends LengthValue> | ||
export declare class Length<_T extends LengthValue> | ||
extends LengthPercentage<string> | ||
implements ICSSType<string> | ||
implements CSSType<string> | ||
{ | ||
readonly value: ValueWithDefault<string>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends LengthValue = LengthValue>( | ||
value: ValueWithDefault<T>, | ||
value: NestedWithNumbers, | ||
): Length<T>; | ||
@@ -137,11 +146,10 @@ } | ||
type PercentageValue = string | number; | ||
export declare class Percentage<T extends PercentageValue> | ||
export declare class Percentage<_T extends PercentageValue> | ||
extends LengthPercentage<string> | ||
implements ICSSType<string> | ||
implements CSSType<string> | ||
{ | ||
readonly value: ValueWithDefault<string>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends PercentageValue = PercentageValue>( | ||
value: ValueWithDefault<T>, | ||
value: NestedWithNumbers, | ||
): Percentage<T>; | ||
@@ -152,10 +160,9 @@ } | ||
export declare class Num<T extends NumberValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends NumberValue = NumberValue>( | ||
value: ValueWithDefault<T>, | ||
value: NestedWithNumbers, | ||
): Num<T>; | ||
@@ -166,10 +173,9 @@ } | ||
export declare class Resolution<T extends ResolutionValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends ResolutionValue = ResolutionValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): Resolution<T>; | ||
@@ -180,10 +186,9 @@ } | ||
export declare class Time<T extends TimeValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends TimeValue = TimeValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): Time<T>; | ||
@@ -194,10 +199,9 @@ } | ||
export declare class TransformFunction<T extends TransformFunctionValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends TransformFunctionValue = TransformFunctionValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): TransformFunction<T>; | ||
@@ -208,12 +212,11 @@ } | ||
export declare class TransformList<T extends TransformListValue> | ||
extends CSSType | ||
implements ICSSType<T> | ||
extends BaseCSSType | ||
implements CSSType<T> | ||
{ | ||
readonly value: ValueWithDefault<T>; | ||
readonly value: ValueWithDefault; | ||
readonly syntax: CSSSyntaxType; | ||
constructor(value: ValueWithDefault<T>); | ||
static create<T extends TransformListValue = TransformListValue>( | ||
value: ValueWithDefault<T>, | ||
value: ValueWithDefault, | ||
): TransformList<T>; | ||
} | ||
export declare const transformList: any; |
@@ -6,12 +6,15 @@ "use strict"; | ||
}); | ||
exports.url = exports.transformList = exports.transformFunction = exports.time = exports.resolution = exports.percentage = exports.number = exports.lengthPercentage = exports.length = exports.integer = exports.image = exports.color = exports.angle = exports.Url = exports.TransformList = exports.TransformFunction = exports.Time = exports.Resolution = exports.Percentage = exports.Num = exports.LengthPercentage = exports.Length = exports.Integer = exports.Image = exports.Color = exports.CSSType = exports.Angle = void 0; | ||
class CSSType {} | ||
exports.CSSType = CSSType; | ||
class Angle extends CSSType { | ||
syntax = '<angle>'; | ||
static syntax = '<angle>'; | ||
exports.url = exports.transformList = exports.transformFunction = exports.time = exports.resolution = exports.percentage = exports.number = exports.lengthPercentage = exports.length = exports.isCSSType = exports.integer = exports.image = exports.color = exports.angle = exports.Url = exports.TransformList = exports.TransformFunction = exports.Time = exports.Resolution = exports.Percentage = exports.Num = exports.LengthPercentage = exports.Length = exports.Integer = exports.Image = exports.Color = exports.Angle = void 0; | ||
class BaseCSSType { | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
} | ||
const isCSSType = value => { | ||
return value instanceof BaseCSSType && value.value != null && typeof value.syntax === 'string'; | ||
}; | ||
exports.isCSSType = isCSSType; | ||
class Angle extends BaseCSSType { | ||
syntax = '<angle>'; | ||
static syntax = '<angle>'; | ||
static create(value) { | ||
@@ -23,8 +26,4 @@ return new Angle(value); | ||
const angle = exports.angle = Angle.create; | ||
class Color extends CSSType { | ||
class Color extends BaseCSSType { | ||
syntax = '<color>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -36,8 +35,4 @@ return new Color(value); | ||
const color = exports.color = Color.create; | ||
class Url extends CSSType { | ||
class Url extends BaseCSSType { | ||
syntax = '<url>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -61,10 +56,6 @@ return new Url(value); | ||
const image = exports.image = Image.create; | ||
class Integer extends CSSType { | ||
class Integer extends BaseCSSType { | ||
syntax = '<integer>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
return new Integer(value); | ||
return new Integer(convertNumberToStringUsing(String, '0')(value)); | ||
} | ||
@@ -74,8 +65,4 @@ } | ||
const integer = exports.integer = Integer.create; | ||
class LengthPercentage extends CSSType { | ||
class LengthPercentage extends BaseCSSType { | ||
syntax = '<length-percentage>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static createLength(value) { | ||
@@ -92,7 +79,4 @@ return new LengthPercentage(convertNumberToLength(value)); | ||
syntax = '<length>'; | ||
constructor(value) { | ||
super(convertNumberToLength(value)); | ||
} | ||
static create(value) { | ||
return new Length(value); | ||
return new Length(convertNumberToLength(value)); | ||
} | ||
@@ -104,7 +88,4 @@ } | ||
syntax = '<percentage>'; | ||
constructor(value) { | ||
super(convertNumberToPercentage(value)); | ||
} | ||
static create(value) { | ||
return new Percentage(value); | ||
return new Percentage(convertNumberToPercentage(value)); | ||
} | ||
@@ -114,10 +95,6 @@ } | ||
const percentage = exports.percentage = Percentage.create; | ||
class Num extends CSSType { | ||
class Num extends BaseCSSType { | ||
syntax = '<number>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
return new Num(value); | ||
return new Num(convertNumberToBareString(value)); | ||
} | ||
@@ -127,8 +104,4 @@ } | ||
const number = exports.number = Num.create; | ||
class Resolution extends CSSType { | ||
class Resolution extends BaseCSSType { | ||
syntax = '<resolution>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -140,8 +113,4 @@ return new Resolution(value); | ||
const resolution = exports.resolution = Resolution.create; | ||
class Time extends CSSType { | ||
class Time extends BaseCSSType { | ||
syntax = '<time>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -153,8 +122,4 @@ return new Time(value); | ||
const time = exports.time = Time.create; | ||
class TransformFunction extends CSSType { | ||
class TransformFunction extends BaseCSSType { | ||
syntax = '<transform-function>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -166,8 +131,4 @@ return new TransformFunction(value); | ||
const transformFunction = exports.transformFunction = TransformFunction.create; | ||
class TransformList extends CSSType { | ||
class TransformList extends BaseCSSType { | ||
syntax = '<transform-list>'; | ||
constructor(value) { | ||
super(); | ||
this.value = value; | ||
} | ||
static create(value) { | ||
@@ -187,12 +148,6 @@ return new TransformList(value); | ||
if (typeof value === 'object') { | ||
const { | ||
default: defaultValue, | ||
...rest | ||
} = value; | ||
const defaultResult = convertNumberToLength(defaultValue); | ||
const result = { | ||
default: typeof defaultResult === 'string' ? defaultResult : defaultStr | ||
}; | ||
for (const [key, value] of Object.entries(rest)) { | ||
result[key] = convertNumberToLength(value); | ||
const val = value; | ||
const result = {}; | ||
for (const key of Object.keys(val)) { | ||
result[key] = convertNumberToStringUsing(transformNumber, defaultStr)(val[key]); | ||
} | ||
@@ -203,3 +158,4 @@ return result; | ||
}; | ||
const convertNumberToBareString = convertNumberToStringUsing(value => String(value), '0'); | ||
const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`, '0px'); | ||
const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`, '0'); |
@@ -12,3 +12,2 @@ 'use strict'; | ||
var _whitespace = _interopRequireDefault(require("./normalizers/whitespace")); | ||
var _zeroDimensions = _interopRequireDefault(require("./normalizers/zero-dimensions")); | ||
var _detectUnclosedFns = _interopRequireDefault(require("./normalizers/detect-unclosed-fns")); | ||
@@ -18,3 +17,3 @@ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser")); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default]; | ||
const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default]; | ||
function normalizeValue(value, key, _ref) { | ||
@@ -21,0 +20,0 @@ let { |
@@ -11,4 +11,4 @@ /** | ||
/** | ||
* Remove units in zero values, except when required: in angles and timings, | ||
* in which case make them consistent 0deg and 0s. | ||
* Remove units in zero values, except when required: in angles, timings, fractions, and percentages, | ||
* in which case make them consistent 0deg, 0s, 0fr, and 0%. | ||
*/ | ||
@@ -15,0 +15,0 @@ |
@@ -11,2 +11,4 @@ 'use strict'; | ||
const timings = ['ms', 's']; | ||
const fraction = 'fr'; | ||
const percentage = '%'; | ||
function normalizeZeroDimensions(ast, _) { | ||
@@ -32,2 +34,6 @@ let endFunction = 0; | ||
node.value = '0s'; | ||
} else if (dimension.unit === fraction) { | ||
node.value = '0fr'; | ||
} else if (dimension.unit === percentage) { | ||
node.value = '0%'; | ||
} else if (!endFunction) { | ||
@@ -34,0 +40,0 @@ node.value = '0'; |
{ | ||
"name": "@stylexjs/shared", | ||
"version": "0.5.1", | ||
"version": "0.6.0", | ||
"main": "lib/index.js", | ||
@@ -16,3 +16,3 @@ "repository": "https://www.github.com/facebook/stylex", | ||
"devDependencies": { | ||
"@stylexjs/scripts": "0.5.1" | ||
"@stylexjs/scripts": "0.6.0" | ||
}, | ||
@@ -19,0 +19,0 @@ "jest": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
863350
179
26094