From 7dbb9e6b8a0bb47f82b88df9cb231e225aed9894 Mon Sep 17 00:00:00 2001 From: John Gozde Date: Sat, 9 Mar 2024 09:06:44 -0700 Subject: [PATCH] Prettify --- package.json | 2 +- packages/core/src/convert/toCamelCase.js | 3 +- packages/core/src/convert/toCssRules.js | 58 +- packages/core/src/convert/toHash.js | 7 +- packages/core/src/convert/toHyphenCase.js | 7 +- .../core/src/convert/toPolyfilledValue.js | 9 +- .../src/convert/toResolvedMediaQueryRanges.js | 80 +- .../core/src/convert/toResolvedSelectors.js | 30 +- packages/core/src/convert/toSizingValue.js | 20 +- packages/core/src/convert/toTailDashed.js | 2 +- packages/core/src/convert/toTokenizedValue.js | 44 +- packages/core/src/createStitches.js | 14 +- packages/core/src/features/createTheme.js | 8 +- packages/core/src/features/css.js | 169 +- packages/core/src/features/globalCss.js | 68 +- packages/core/src/features/keyframes.js | 3 +- packages/core/src/sheet.js | 19 +- packages/core/src/utility/createMemo.js | 4 +- packages/core/src/utility/hasOwn.js | 1 - packages/core/tests/basic.js | 26 +- packages/core/tests/component-composition.js | 4 +- packages/core/tests/component-conditions.js | 2 +- packages/core/tests/component-css-prop.js | 6 +- .../core/tests/component-empty-variants.js | 4 +- .../core/tests/component-utils-and-types.js | 4 +- packages/core/tests/component-variants.js | 94 +- packages/core/tests/global-atrules.js | 33 +- packages/core/tests/issue-450.js | 48 +- packages/core/tests/issue-492.js | 40 +- packages/core/tests/issue-655.js | 4 +- packages/core/tests/issue-725.js | 8 +- packages/core/tests/issue-788.js | 15 +- packages/core/tests/issue-908.js | 24 +- packages/core/tests/issue-921.ts | 38 +- packages/core/tests/issue-943.js | 8 +- packages/core/tests/issue-999.js | 26 +- packages/core/tests/theme.js | 18 +- packages/core/tests/types.test.ts | 10 +- packages/core/tests/universal-autoprefixer.js | 16 +- .../tests/universal-logical-properties.js | 8 +- .../core/tests/universal-numeric-values.js | 139 +- .../universal-polyfill-prefixed-values.js | 8 +- packages/core/tests/universal-tokens.js | 76 +- packages/core/tests/with-config-api.js | 16 +- packages/core/types/config.d.ts | 34 +- packages/core/types/css-util.d.ts | 123 +- packages/core/types/css.d.ts | 18588 ++++++++-------- packages/core/types/index.d.ts | 47 +- packages/core/types/stitches.d.ts | 234 +- packages/core/types/styled-component.d.ts | 72 +- packages/core/types/theme.d.ts | 3 - packages/core/types/util.d.ts | 15 +- packages/react/src/features/styled.js | 22 +- packages/react/tests/component-composition.js | 4 +- .../react/tests/component-css-prop-react.js | 4 +- packages/react/tests/component-css-prop.js | 4 +- .../tests/component-repeated-variants.js | 9 +- packages/react/tests/component-variants.js | 56 +- packages/react/tests/issue-416.js | 27 +- packages/react/tests/issue-450.js | 46 +- packages/react/tests/issue-555.js | 12 +- packages/react/tests/issue-671-forwardRef.js | 4 +- packages/react/tests/issue-737.js | 7 +- packages/react/tests/issue-943.js | 8 +- packages/react/tests/react.js | 18 +- packages/react/tests/with-config-api.js | 16 +- packages/react/types/config.d.ts | 34 +- packages/react/types/css-util.d.ts | 123 +- packages/react/types/css.d.ts | 18588 ++++++++-------- packages/react/types/index.d.ts | 45 +- packages/react/types/stitches.d.ts | 342 +- packages/react/types/styled-component.d.ts | 114 +- packages/react/types/theme.d.ts | 3 - packages/react/types/util.d.ts | 15 +- .../stringify/src/getResolvedSelectors.js | 32 +- packages/stringify/src/index.js | 17 +- packages/stringify/src/toCase.js | 10 +- packages/stringify/tests/at-rule-font-face.js | 2 +- packages/stringify/tests/at-rule-import.js | 5 +- packages/stringify/tests/at-rule-keyframes.js | 11 +- packages/stringify/tests/index.js | 36 +- packages/stringify/tests/nesting-rules.js | 39 +- .../stringify/tests/replacer-prefixing.js | 12 +- packages/test/Issue-803-core.ts | 103 +- packages/test/Issue-803-react.ts | 103 +- packages/test/Issue-813-core.ts | 20 +- packages/test/Issue-813-react.ts | 20 +- packages/test/built-types/Issue-803-core.d.ts | 2 +- .../test/built-types/Issue-803-react.d.ts | 2 +- packages/test/built-types/Issue-813-core.d.ts | 143 +- .../test/built-types/Issue-813-react.d.ts | 143 +- packages/test/built-types/index.d.ts | 1845 +- .../test/built-types/issue-749-react.d.ts | 2 +- .../test/built-types/stitches.config.d.ts | 11706 +++++----- packages/test/stitches.config.ts | 918 +- 95 files changed, 27657 insertions(+), 27354 deletions(-) diff --git a/package.json b/package.json index bb81f576..1ddbdacf 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "prettier": { "arrowParens": "always", "bracketSpacing": true, - "printWidth": 240, + "printWidth": 120, "quoteProps": "consistent", "semi": false, "singleQuote": true, diff --git a/packages/core/src/convert/toCamelCase.js b/packages/core/src/convert/toCamelCase.js index eca8bef2..332b9de8 100644 --- a/packages/core/src/convert/toCamelCase.js +++ b/packages/core/src/convert/toCamelCase.js @@ -1,2 +1,3 @@ /** Returns the given value converted to camel-case. */ -export const toCamelCase = (/** @type {string} */ value) => (!/[A-Z]/.test(value) ? value.replace(/-[^]/g, (capital) => capital[1].toUpperCase()) : value) +export const toCamelCase = (/** @type {string} */ value) => + !/[A-Z]/.test(value) ? value.replace(/-[^]/g, (capital) => capital[1].toUpperCase()) : value diff --git a/packages/core/src/convert/toCssRules.js b/packages/core/src/convert/toCssRules.js index e15d76c4..35306493 100644 --- a/packages/core/src/convert/toCssRules.js +++ b/packages/core/src/convert/toCssRules.js @@ -13,13 +13,7 @@ const comma = /\s*,\s*(?![^()]*\))/ /** Default toString method of Objects. */ const toStringOfObject = Object.prototype.toString -export const toCssRules = ( - style, - selectors, - conditions, - config, - onCssText -) => { +export const toCssRules = (style, selectors, conditions, config, onCssText) => { /** @type {[string[], string[], string[]]} CSSOM-compatible rule being created. */ let currentRule = undefined @@ -50,9 +44,13 @@ export const toCssRules = ( for (data of datas) { const camelName = toCamelCase(name) - + /** Whether the current data represents a nesting rule, which is a plain object whose key is not already a util. */ - const isRuleLike = typeof data === 'object' && data && data.toString === toStringOfObject && (!config.utils[camelName] || !selectors.length) + const isRuleLike = + typeof data === 'object' && + data && + data.toString === toStringOfObject && + (!config.utils[camelName] || !selectors.length) // if the left-hand "name" matches a configured utility // conditionally transform the current data using the configured utility @@ -88,7 +86,9 @@ export const toCssRules = ( // if the left-hand "name" matches a configured at-rule if (isAtRuleLike) { // transform the current name with the configured media at-rule prelude - name = toResolvedMediaQueryRanges(name.slice(1) in config.media ? '@media ' + config.media[name.slice(1)] : name) + name = toResolvedMediaQueryRanges( + name.slice(1) in config.media ? '@media ' + config.media[name.slice(1)] : name, + ) } if (isRuleLike) { @@ -109,24 +109,27 @@ export const toCssRules = ( if (currentRule === undefined) currentRule = [[], selectors, conditions] /** CSS left-hand side value, which may be a specially-formatted custom property. */ - name = !isAtRuleLike && name.charCodeAt(0) === 36 ? `--${toTailDashed(config.prefix)}${name.slice(1).replace(/\$/g, '-')}` : name + name = + !isAtRuleLike && name.charCodeAt(0) === 36 + ? `--${toTailDashed(config.prefix)}${name.slice(1).replace(/\$/g, '-')}` + : name /** CSS right-hand side value, which may be a specially-formatted custom property. */ - data = ( + data = // preserve object-like data - isRuleLike ? data - // replace all non-unitless props that are not custom properties with pixel versions - : typeof data === 'number' - ? data && !(camelName in unitlessProps) && !(name.charCodeAt(0) === 45) - ? String(data) + 'px' - : String(data) - // replace tokens with stringified primitive values - : toTokenizedValue( - toSizingValue(camelName, data == null ? '' : data), - config.prefix, - config.themeMap[camelName] - ) - ) + isRuleLike + ? data + : // replace all non-unitless props that are not custom properties with pixel versions + typeof data === 'number' + ? data && !(camelName in unitlessProps) && !(name.charCodeAt(0) === 45) + ? String(data) + 'px' + : String(data) + : // replace tokens with stringified primitive values + toTokenizedValue( + toSizingValue(camelName, data == null ? '' : data), + config.prefix, + config.themeMap[camelName], + ) currentRule[0].push(`${isAtRuleLike ? `${name} ` : `${toHyphenCase(name)}:`}${data}`) } @@ -145,9 +148,8 @@ export const toCssRules = ( walk(style, selectors, conditions) } -const toCssString = (declarations, selectors, conditions) => ( +const toCssString = (declarations, selectors, conditions) => `${conditions.map((condition) => `${condition}{`).join('')}${selectors.length ? `${selectors.join(',')}{` : ''}${declarations.join(';')}${selectors.length ? `}` : ''}${Array(conditions.length ? conditions.length + 1 : 0).join('}')}` -) /** CSS Properties whose number values should be unitless. */ export const unitlessProps = { @@ -197,5 +199,5 @@ export const unitlessProps = { strokeDashoffset: 1, strokeMiterlimit: 1, strokeOpacity: 1, - strokeWidth: 1 + strokeWidth: 1, } diff --git a/packages/core/src/convert/toHash.js b/packages/core/src/convert/toHash.js index f43e5cbe..a934a5c5 100644 --- a/packages/core/src/convert/toHash.js +++ b/packages/core/src/convert/toHash.js @@ -15,9 +15,4 @@ const toPhash = (/** @type {number} */ h, /** @type {string} */ x) => { return h } -export const toHash = (/** @type {object} */ value) => toAlphabeticName( - toPhash( - 5381, - JSON.stringify(value) - ) >>> 0 -) +export const toHash = (/** @type {object} */ value) => toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0) diff --git a/packages/core/src/convert/toHyphenCase.js b/packages/core/src/convert/toHyphenCase.js index c1199009..08b878e6 100644 --- a/packages/core/src/convert/toHyphenCase.js +++ b/packages/core/src/convert/toHyphenCase.js @@ -1,8 +1,7 @@ /** Returns the given value converted to kebab-case. */ -export const toHyphenCase = (/** @type {string} */ value) => ( +export const toHyphenCase = (/** @type {string} */ value) => // ignore kebab-like values value.includes('-') ? value - // replace any upper-case letter with a dash and the lower-case variant - : value.replace(/[A-Z]/g, (capital) => '-' + capital.toLowerCase()) -) + : // replace any upper-case letter with a dash and the lower-case variant + value.replace(/[A-Z]/g, (capital) => '-' + capital.toLowerCase()) diff --git a/packages/core/src/convert/toPolyfilledValue.js b/packages/core/src/convert/toPolyfilledValue.js index ca9e8dca..7a8b144c 100644 --- a/packages/core/src/convert/toPolyfilledValue.js +++ b/packages/core/src/convert/toPolyfilledValue.js @@ -9,7 +9,14 @@ export const toPolyfilledValue = { backgroundClip: (d) => ({ WebkitBackgroundClip: d, backgroundClip: d }), boxDecorationBreak: (d) => ({ WebkitBoxDecorationBreak: d, boxDecorationBreak: d }), clipPath: (d) => ({ WebkitClipPath: d, clipPath: d }), - content: (d) => ({ content: d.includes('"') || d.includes("'") || /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(d) ? d : `"${d}"` }), + content: (d) => ({ + content: + d.includes('"') || + d.includes("'") || + /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(d) + ? d + : `"${d}"`, + }), hyphens: (d) => ({ WebkitHyphens: d, hyphens: d }), maskImage: (d) => ({ WebkitMaskImage: d, maskImage: d }), maskSize: (d) => ({ WebkitMaskSize: d, maskSize: d }), diff --git a/packages/core/src/convert/toResolvedMediaQueryRanges.js b/packages/core/src/convert/toResolvedMediaQueryRanges.js index 925b8169..7b57956b 100644 --- a/packages/core/src/convert/toResolvedMediaQueryRanges.js +++ b/packages/core/src/convert/toResolvedMediaQueryRanges.js @@ -3,45 +3,47 @@ const mqunit = /([\d.]+)([^]*)/ /** Returns a media query with polyfilled ranges. */ export const toResolvedMediaQueryRanges = ( /** @type {string} */ - media -) => media.replace( - /\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, - ( - __, - /** @type {string} 1st param, either the name or value in the query. */ - p1, - /** @type {string} 1st operator. */ - o1, - /** @type {string} 2nd param, either the name or value in the query. */ - p2, - /** @type {string} Optional 2nd operator. */ - o2, - /** @type {string} Optional 3rd param, always a value in the query.*/ - p3 - ) => { - /** Whether the first param is a value. */ - const isP1Value = mqunit.test(p1) + media, +) => + media.replace( + /\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, + ( + __, + /** @type {string} 1st param, either the name or value in the query. */ + p1, + /** @type {string} 1st operator. */ + o1, + /** @type {string} 2nd param, either the name or value in the query. */ + p2, + /** @type {string} Optional 2nd operator. */ + o2, + /** @type {string} Optional 3rd param, always a value in the query.*/ + p3, + ) => { + /** Whether the first param is a value. */ + const isP1Value = mqunit.test(p1) - /** Numeric shift applied to a value when an operator is `<` or `>`. */ - const shift = 0.0625 * (isP1Value ? -1 : 1) + /** Numeric shift applied to a value when an operator is `<` or `>`. */ + const shift = 0.0625 * (isP1Value ? -1 : 1) - const [name, value] = isP1Value ? [p2, p1] : [p1, p2] + const [name, value] = isP1Value ? [p2, p1] : [p1, p2] - return ( - '(' + - ( - o1[0] === '=' ? '' : (o1[0] === '>' === isP1Value ? 'max-' : 'min-') - ) + name + ':' + - (o1[0] !== '=' && o1.length === 1 ? value.replace(mqunit, (_, v, u) => Number(v) + shift * (o1 === '>' ? 1 : -1) + u) : value) + - ( - o2 - ? ') and (' + ( - (o2[0] === '>' ? 'min-' : 'max-') + name + ':' + - (o2.length === 1 ? p3.replace(mqunit, (_, v, u) => Number(v) + shift * (o2 === '>' ? -1 : 1) + u) : p3) - ) - : '' - ) + - ')' - ) - } -) + return ( + '(' + + (o1[0] === '=' ? '' : (o1[0] === '>') === isP1Value ? 'max-' : 'min-') + + name + + ':' + + (o1[0] !== '=' && o1.length === 1 + ? value.replace(mqunit, (_, v, u) => Number(v) + shift * (o1 === '>' ? 1 : -1) + u) + : value) + + (o2 + ? ') and (' + + ((o2[0] === '>' ? 'min-' : 'max-') + + name + + ':' + + (o2.length === 1 ? p3.replace(mqunit, (_, v, u) => Number(v) + shift * (o2 === '>' ? -1 : 1) + u) : p3)) + : '') + + ')' + ) + }, + ) diff --git a/packages/core/src/convert/toResolvedSelectors.js b/packages/core/src/convert/toResolvedSelectors.js index e00028dc..3634a53d 100644 --- a/packages/core/src/convert/toResolvedSelectors.js +++ b/packages/core/src/convert/toResolvedSelectors.js @@ -4,26 +4,20 @@ export const toResolvedSelectors = ( parentSelectors, /** @type {string[]} Nested selectors (e.g. `["&:hover", "&:focus"]`). */ nestedSelectors, -) => ( +) => parentSelectors.length - ? parentSelectors.reduce( - (resolvedSelectors, parentSelector) => { + ? parentSelectors.reduce((resolvedSelectors, parentSelector) => { resolvedSelectors.push( - ...nestedSelectors.map( - (selector) => ( - selector.includes('&') ? selector.replace( - /&/g, - /[ +>|~]/.test(parentSelector) && /&.*&/.test(selector) - ? `:is(${parentSelector})` - : parentSelector - ) : parentSelector + ' ' + selector - ) - ) + ...nestedSelectors.map((selector) => + selector.includes('&') + ? selector.replace( + /&/g, + /[ +>|~]/.test(parentSelector) && /&.*&/.test(selector) ? `:is(${parentSelector})` : parentSelector, + ) + : parentSelector + ' ' + selector, + ), ) return resolvedSelectors - }, - [] - ) - : nestedSelectors -) + }, []) + : nestedSelectors diff --git a/packages/core/src/convert/toSizingValue.js b/packages/core/src/convert/toSizingValue.js index 89c4ce8e..334910c0 100644 --- a/packages/core/src/convert/toSizingValue.js +++ b/packages/core/src/convert/toSizingValue.js @@ -1,20 +1,18 @@ import { toHyphenCase } from './toHyphenCase.js' /** Returns a declaration sizing value with polyfilled sizing keywords. */ -export const toSizingValue = (/** @type {string} */ declarationName, /** @type {string} */ declarationValue) => ( +export const toSizingValue = (/** @type {string} */ declarationName, /** @type {string} */ declarationValue) => declarationName in sizeProps && typeof declarationValue === 'string' ? declarationValue.replace( - /^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/, - (data, lead, main, tail) => ( - lead + ( - main === 'stretch' + /^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/, + (data, lead, main, tail) => + lead + + (main === 'stretch' ? `-moz-available${tail};${toHyphenCase(declarationName)}:${lead}-webkit-fill-available` - : `-moz-fit-content${tail};${toHyphenCase(declarationName)}:${lead}fit-content` - ) + tail - ), - ) - : String(declarationValue) -) + : `-moz-fit-content${tail};${toHyphenCase(declarationName)}:${lead}fit-content`) + + tail, + ) + : String(declarationValue) /** CSS Properties whose value include a sizing keyword. */ const sizeProps = { diff --git a/packages/core/src/convert/toTailDashed.js b/packages/core/src/convert/toTailDashed.js index 14c08e22..21842edc 100644 --- a/packages/core/src/convert/toTailDashed.js +++ b/packages/core/src/convert/toTailDashed.js @@ -1,2 +1,2 @@ /** Returns a filled value with a dash prefix. */ -export const toTailDashed = (/** @type {string} */ value) => value ? value + '-' : '' +export const toTailDashed = (/** @type {string} */ value) => (value ? value + '-' : '') diff --git a/packages/core/src/convert/toTokenizedValue.js b/packages/core/src/convert/toTokenizedValue.js index dafda17c..7cb8f46e 100644 --- a/packages/core/src/convert/toTokenizedValue.js +++ b/packages/core/src/convert/toTokenizedValue.js @@ -8,33 +8,17 @@ export const toTokenizedValue = ( prefix, /** @type {string} */ scale, -) => value.replace( - /([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g, - ($0, direction, multiplier, separator, token) => ( - separator == "$" == !!multiplier - ? $0 - : ( - direction || separator == '--' - ? 'calc(' - : '' - ) + ( - 'var(--' + ( - separator === '$' - ? toTailDashed(prefix) + ( - !token.includes('$') - ? toTailDashed(scale) - : '' - ) + token.replace(/\$/g, '-') - : token - ) + ')' + ( - direction || separator == '--' - ? '*' + ( - direction || '' - ) + ( - multiplier || '1' - ) + ')' - : '' - ) - ) - ), -) +) => + value.replace( + /([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g, + ($0, direction, multiplier, separator, token) => + (separator == '$') == !!multiplier + ? $0 + : (direction || separator == '--' ? 'calc(' : '') + + ('var(--' + + (separator === '$' + ? toTailDashed(prefix) + (!token.includes('$') ? toTailDashed(scale) : '') + token.replace(/\$/g, '-') + : token) + + ')' + + (direction || separator == '--' ? '*' + (direction || '') + (multiplier || '1') + ')' : '')), + ) diff --git a/packages/core/src/createStitches.js b/packages/core/src/createStitches.js index 1223a9b8..ea512381 100644 --- a/packages/core/src/createStitches.js +++ b/packages/core/src/createStitches.js @@ -17,15 +17,15 @@ export const createStitches = (config) => { const instance = createCssMap(config, (initConfig) => { didRun = true - initConfig = typeof initConfig === 'object' && initConfig || {} + initConfig = (typeof initConfig === 'object' && initConfig) || {} // internal configuration const prefix = 'prefix' in initConfig ? String(initConfig.prefix) : '' - const media = typeof initConfig.media === 'object' && initConfig.media || {} + const media = (typeof initConfig.media === 'object' && initConfig.media) || {} const root = typeof initConfig.root === 'object' ? initConfig.root || null : globalThis.document || null - const theme = typeof initConfig.theme === 'object' && initConfig.theme || {} - const themeMap = typeof initConfig.themeMap === 'object' && initConfig.themeMap || { ...defaultThemeMap } - const utils = typeof initConfig.utils === 'object' && initConfig.utils || {} + const theme = (typeof initConfig.theme === 'object' && initConfig.theme) || {} + const themeMap = (typeof initConfig.themeMap === 'object' && initConfig.themeMap) || { ...defaultThemeMap } + const utils = (typeof initConfig.utils === 'object' && initConfig.utils) || {} /** External configuration. */ const config = { @@ -57,9 +57,7 @@ export const createStitches = (config) => { } // initialize default theme - String( - returnValue.theme = returnValue.createTheme(theme) - ) + String((returnValue.theme = returnValue.createTheme(theme))) return returnValue }) diff --git a/packages/core/src/features/createTheme.js b/packages/core/src/features/createTheme.js index 6d4b403d..027d5be0 100644 --- a/packages/core/src/features/createTheme.js +++ b/packages/core/src/features/createTheme.js @@ -8,13 +8,10 @@ import { toTokenizedValue } from '../convert/toTokenizedValue.js' const createCreateThemeFunctionMap = createMemo() /** Returns a function that applies a theme and returns tokens of that theme. */ -export const createCreateThemeFunction = ( - config, - sheet -) => ( +export const createCreateThemeFunction = (config, sheet) => createCreateThemeFunctionMap(config, () => (className, style) => { // theme is the first argument if it is an object, otherwise the second argument as an object - style = typeof className === 'object' && className || Object(style) + style = (typeof className === 'object' && className) || Object(style) // class name is the first argument if it is a string, otherwise an empty string className = typeof className === 'string' ? className : '' @@ -62,4 +59,3 @@ export const createCreateThemeFunction = ( toString: render, } }) -) diff --git a/packages/core/src/features/css.js b/packages/core/src/features/css.js index 51f4e430..f4c085ee 100644 --- a/packages/core/src/features/css.js +++ b/packages/core/src/features/css.js @@ -13,57 +13,68 @@ const createCssFunctionMap = createMemo() /** Returns a function that applies component styles. */ export const createCssFunction = (config, sheet) => - createCssFunctionMap(config, () => { - const _css = (args, componentConfig = {}) => { - let internals = { - type: null, - composers: new Set(), - } - - for (const arg of args) { - // skip any void argument - if (arg == null) continue - - // conditionally extend the component - if (arg[internal]) { - if (internals.type == null) internals.type = arg[internal].type - - for (const composer of arg[internal].composers) { - internals.composers.add(composer) - } - } - - // otherwise, conditionally define the component type - else if (arg.constructor !== Object || arg.$$typeof) { - if (internals.type == null) internals.type = arg - } - - // otherwise, add a new composer to this component - else { - internals.composers.add(createComposer(arg, config, componentConfig)) - } - } - - // set the component type if none was set - if (internals.type == null) internals.type = 'span' - if (!internals.composers.size) internals.composers.add(['PJLV', {}, [], [], {}, []]) - - return createRenderer(config, internals, sheet, componentConfig) - } + createCssFunctionMap(config, () => { + const _css = (args, componentConfig = {}) => { + let internals = { + type: null, + composers: new Set(), + } - const css = (...args) => _css(args) + for (const arg of args) { + // skip any void argument + if (arg == null) continue + + // conditionally extend the component + if (arg[internal]) { + if (internals.type == null) internals.type = arg[internal].type + + for (const composer of arg[internal].composers) { + internals.composers.add(composer) + } + } - css.withConfig = (componentConfig) => (...args) => _css(args, componentConfig) + // otherwise, conditionally define the component type + else if (arg.constructor !== Object || arg.$$typeof) { + if (internals.type == null) internals.type = arg + } - return css - }) + // otherwise, add a new composer to this component + else { + internals.composers.add(createComposer(arg, config, componentConfig)) + } + } + // set the component type if none was set + if (internals.type == null) internals.type = 'span' + if (!internals.composers.size) internals.composers.add(['PJLV', {}, [], [], {}, []]) + + return createRenderer(config, internals, sheet, componentConfig) + } + + const css = (...args) => _css(args) + + css.withConfig = + (componentConfig) => + (...args) => + _css(args, componentConfig) + + return css + }) /** Creates a composer from a configuration object. */ -const createComposer = ({ variants: initSingularVariants, compoundVariants: initCompoundVariants, defaultVariants: initDefaultVariants, ...style }, config, {componentId, displayName}) => { +const createComposer = ( + { + variants: initSingularVariants, + compoundVariants: initCompoundVariants, + defaultVariants: initDefaultVariants, + ...style + }, + config, + { componentId, displayName }, +) => { /** @type {string} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}` */ const hash = componentId || toHash(style) - const componentNamePrefix = displayName ? ('c-' + displayName +'') : 'c' + const componentNamePrefix = displayName ? 'c-' + displayName + '' : 'c' const className = `${toTailDashed(config.prefix)}${componentNamePrefix}-${hash}` const singularVariants = [] @@ -104,7 +115,7 @@ const createComposer = ({ variants: initSingularVariants, compoundVariants: init for (const compoundVariant of initCompoundVariants) { let { css: vStyle, ...vMatch } = compoundVariant - vStyle = typeof vStyle === 'object' && vStyle || {} + vStyle = (typeof vStyle === 'object' && vStyle) || {} // serialize all compound variant pairs for (const name in vMatch) vMatch[name] = String(vMatch[name]) @@ -115,24 +126,22 @@ const createComposer = ({ variants: initSingularVariants, compoundVariants: init } } - return ([className, style, singularVariants, compoundVariants, prefilledVariants, undefinedVariants]) + return [className, style, singularVariants, compoundVariants, prefilledVariants, undefinedVariants] } const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) => { - const [ - baseClassName, - baseClassNames, - prefilledVariants, - undefinedVariants - ] = getPreparedDataFromComposers(internals.composers) - - const deferredInjector = typeof internals.type === 'function' || !!internals.type.$$typeof ? createRulesInjectionDeferrer(sheet) : null + const [baseClassName, baseClassNames, prefilledVariants, undefinedVariants] = getPreparedDataFromComposers( + internals.composers, + ) + + const deferredInjector = + typeof internals.type === 'function' || !!internals.type.$$typeof ? createRulesInjectionDeferrer(sheet) : null const injectionTarget = (deferredInjector || sheet).rules const selector = `.${baseClassName}${baseClassNames.length > 1 ? `:where(.${baseClassNames.slice(1).join('.')})` : ``}` const render = (props) => { - props = typeof props === 'object' && props || empty + props = (typeof props === 'object' && props) || empty // 1. we cannot mutate `props` // 2. we delete variant props @@ -155,18 +164,14 @@ const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) } else { data = String(data) - variantProps[name] = ( - data === 'undefined' && !undefinedVariants.has(name) - ? prefilledVariants[name] - : data - ) + variantProps[name] = data === 'undefined' && !undefinedVariants.has(name) ? prefilledVariants[name] : data } } else { variantProps[name] = prefilledVariants[name] } } - const classSet = new Set([ ...baseClassNames ]) + const classSet = new Set([...baseClassNames]) // 1. builds up the variants (fills in defaults, calculates @initial on responsive, etc.) // 2. iterates composers @@ -195,8 +200,8 @@ const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) classSet.add(variantClassName) - const groupCache = (isResponsive ? sheet.rules.resonevar : sheet.rules.onevar ).cache - /* + const groupCache = (isResponsive ? sheet.rules.resonevar : sheet.rules.onevar).cache + /* * make sure that normal variants are injected before responsive ones * @see {@link https://github.com/stitchesjs/stitches/issues/737|github} */ @@ -233,7 +238,7 @@ const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) // apply css property styles const css = forwardProps.css if (typeof css === 'object' && css) { - if (!shouldForwardStitchesProp?.('css')) delete forwardProps.css + if (!shouldForwardStitchesProp?.('css')) delete forwardProps.css /** @type {string} Inline Class Unique Identifier. @see `{COMPOSER_UUID}-i{VARIANT_UUID}-css` */ const iClass = `${baseClassName}-i${toHash(css)}-css` @@ -248,11 +253,13 @@ const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) } } - for (const propClassName of String(props.className || '').trim().split(/\s+/)) { + for (const propClassName of String(props.className || '') + .trim() + .split(/\s+/)) { if (propClassName) classSet.add(propClassName) } - const renderedClassName = forwardProps.className = [ ...classSet ].join(' ') + const renderedClassName = (forwardProps.className = [...classSet].join(' ')) const renderedToString = () => renderedClassName @@ -303,27 +310,17 @@ const getPreparedDataFromComposers = (composers) => { for (const name in prefilledVariants) { const data = prefilledVariants[name] - if (combinedPrefilledVariants[name] === undefined || data !== 'undefined' || undefinedVariants.includes(data)) combinedPrefilledVariants[name] = data + if (combinedPrefilledVariants[name] === undefined || data !== 'undefined' || undefinedVariants.includes(data)) + combinedPrefilledVariants[name] = data } } - const preparedData = [ - baseClassName, - baseClassNames, - combinedPrefilledVariants, - new Set(combinedUndefinedVariants) - ] + const preparedData = [baseClassName, baseClassNames, combinedPrefilledVariants, new Set(combinedUndefinedVariants)] return preparedData } -const getTargetVariantsToAdd = ( - targetVariants, - variantProps, - media, - isCompoundVariant, -) => { - +const getTargetVariantsToAdd = (targetVariants, variantProps, media, isCompoundVariant) => { const targetVariantsToAdd = [] targetVariants: for (let [vMatch, vStyle, vEmpty] of targetVariants) { @@ -354,11 +351,13 @@ const getTargetVariantsToAdd = ( for (const query in pPair) { if (vPair === String(pPair[query])) { if (query !== '@initial') { - // check if the cleanQuery is in the media config and then we push the resulting media query to the matchedQueries array, + // check if the cleanQuery is in the media config and then we push the resulting media query to the matchedQueries array, // if not, we remove the @media from the beginning and push it to the matched queries which then will be resolved a few lines down // when we finish working on this variant and want wrap the vStyles with the matchedQueries - const cleanQuery = query.slice(1); - (matchedQueries = matchedQueries || []).push(cleanQuery in media ? media[cleanQuery] : query.replace(/^@media ?/, '')) + const cleanQuery = query.slice(1) + ;(matchedQueries = matchedQueries || []).push( + cleanQuery in media ? media[cleanQuery] : query.replace(/^@media ?/, ''), + ) isResponsive = true } @@ -380,7 +379,11 @@ const getTargetVariantsToAdd = ( // non-matches else continue targetVariants } - (targetVariantsToAdd[vOrder] = targetVariantsToAdd[vOrder] || []).push([isCompoundVariant ? `cv` : `${vName}-${vMatch[vName]}`, vStyle, isResponsive]) + ;(targetVariantsToAdd[vOrder] = targetVariantsToAdd[vOrder] || []).push([ + isCompoundVariant ? `cv` : `${vName}-${vMatch[vName]}`, + vStyle, + isResponsive, + ]) } return targetVariantsToAdd diff --git a/packages/core/src/features/globalCss.js b/packages/core/src/features/globalCss.js index eb70ba3e..0a1d4e45 100644 --- a/packages/core/src/features/globalCss.js +++ b/packages/core/src/features/globalCss.js @@ -7,47 +7,41 @@ import { toHash } from '../convert/toHash.js' const createGlobalCssFunctionMap = createMemo() /** Returns a function that applies global styles. */ -export const createGlobalCssFunction = ( - config, - sheet -) => createGlobalCssFunctionMap(config, () => ( - ...styles -) => { - const render = () => { - for (let style of styles) { - style = typeof style === 'object' && style || {} - - let uuid = toHash(style) - - if (!sheet.rules.global.cache.has(uuid)) { - sheet.rules.global.cache.add(uuid) - - // support @import rules - if ('@import' in style) { - let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1 - - // wrap import in quotes as a convenience - for ( - let importValue of /** @type {string[]} */ ([].concat(style['@import'])) - ) { - importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"` - - sheet.sheet.insertRule(`@import ${importValue};`, importIndex++) +export const createGlobalCssFunction = (config, sheet) => + createGlobalCssFunctionMap(config, () => (...styles) => { + const render = () => { + for (let style of styles) { + style = (typeof style === 'object' && style) || {} + + let uuid = toHash(style) + + if (!sheet.rules.global.cache.has(uuid)) { + sheet.rules.global.cache.add(uuid) + + // support @import rules + if ('@import' in style) { + let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1 + + // wrap import in quotes as a convenience + for (let importValue of /** @type {string[]} */ ([].concat(style['@import']))) { + importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"` + + sheet.sheet.insertRule(`@import ${importValue};`, importIndex++) + } + + delete style['@import'] } - delete style['@import'] + toCssRules(style, [], [], config, (cssText) => { + sheet.rules.global.apply(cssText) + }) } - - toCssRules(style, [], [], config, (cssText) => { - sheet.rules.global.apply(cssText) - }) } - } - return '' - } + return '' + } - return define(render, { - toString: render, + return define(render, { + toString: render, + }) }) -}) diff --git a/packages/core/src/features/keyframes.js b/packages/core/src/features/keyframes.js index ff1c6528..5a64007a 100644 --- a/packages/core/src/features/keyframes.js +++ b/packages/core/src/features/keyframes.js @@ -12,7 +12,7 @@ import { toTailDashed } from '../convert/toTailDashed.js' const createKeyframesFunctionMap = createMemo() /** Returns a function that applies a keyframes rule. */ -export const createKeyframesFunction = (/** @type {Config} */ config, /** @type {GroupSheet} */ sheet) => ( +export const createKeyframesFunction = (/** @type {Config} */ config, /** @type {GroupSheet} */ sheet) => createKeyframesFunctionMap(config, () => (style) => { /** @type {string} Keyframes Unique Identifier. @see `{CONFIG_PREFIX}-?k-{KEYFRAME_UUID}` */ const name = `${toTailDashed(config.prefix)}k-${toHash(style)}` @@ -40,4 +40,3 @@ export const createKeyframesFunction = (/** @type {Config} */ config, /** @type toString: render, }) }) -) diff --git a/packages/core/src/sheet.js b/packages/core/src/sheet.js index b6ffbba0..6d819b76 100644 --- a/packages/core/src/sheet.js +++ b/packages/core/src/sheet.js @@ -124,13 +124,22 @@ export const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => { type, cssRules: [], insertRule(cssText, index) { - this.cssRules.splice(index, 0, createCSSMediaRule(cssText, { - import: 3, - undefined: 1 - }[(cssText.toLowerCase().match(/^@([a-z]+)/) || [])[1]] || 4)) + this.cssRules.splice( + index, + 0, + createCSSMediaRule( + cssText, + { + import: 3, + undefined: 1, + }[(cssText.toLowerCase().match(/^@([a-z]+)/) || [])[1]] || 4, + ), + ) }, get cssText() { - return sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule) => cssRule.cssText).join('')}}` : sourceCssText + return sourceCssText === '@media{}' + ? `@media{${[].map.call(this.cssRules, (cssRule) => cssRule.cssText).join('')}}` + : sourceCssText }, }) } diff --git a/packages/core/src/utility/createMemo.js b/packages/core/src/utility/createMemo.js index 25ce7471..e8d37553 100644 --- a/packages/core/src/utility/createMemo.js +++ b/packages/core/src/utility/createMemo.js @@ -1,8 +1,8 @@ -const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data) +const stringifyReplacer = (name, data) => + typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data const stringify = (value) => JSON.stringify(value, stringifyReplacer) - export const createMemo = () => { const cache = Object.create(null) diff --git a/packages/core/src/utility/hasOwn.js b/packages/core/src/utility/hasOwn.js index b56216e1..a35fdf42 100644 --- a/packages/core/src/utility/hasOwn.js +++ b/packages/core/src/utility/hasOwn.js @@ -1,4 +1,3 @@ const { hasOwnProperty } = Object.prototype - export const hasOwn = (target, key) => hasOwnProperty.call(target, key) diff --git a/packages/core/tests/basic.js b/packages/core/tests/basic.js index e8409f61..dc028ee7 100644 --- a/packages/core/tests/basic.js +++ b/packages/core/tests/basic.js @@ -103,7 +103,9 @@ describe('Basic', () => { expect(rendering1of1).toBeInstanceOf(Object) expect(className1of1).toBe('t-kfidiM') - expect(cssString1of1).toBe(`--sxs{--sxs:0 t-kfidiM}@media{.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`) + expect(cssString1of1).toBe( + `--sxs{--sxs:0 t-kfidiM}@media{.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`, + ) }) test('Functionality of css() — css prop', () => { @@ -118,10 +120,10 @@ describe('Basic', () => { expect(cssString1of1).toBe( `--sxs{--sxs:2 c-dataoT}@media{` + `.c-dataoT{color:DodgerBlue}` + - `}` + - `--sxs{--sxs:6 c-dataoT-icaIZdx-css}@media{` + + `}` + + `--sxs{--sxs:6 c-dataoT-icaIZdx-css}@media{` + `.c-dataoT-icaIZdx-css{color:Crimson}` + - `}` + `}`, ) }) @@ -146,7 +148,9 @@ describe('Basic', () => { expect(component1of1).toBeInstanceOf(Function) expect(className1of1).toBe('c-imTdEZ c-imTdEZ-caIZdx-shade-red') - expect(cssString1of1).toBe(`--sxs{--sxs:2 c-imTdEZ}@media{.c-imTdEZ{font-size:100%}}--sxs{--sxs:3 c-imTdEZ-caIZdx-shade-red}@media{.c-imTdEZ-caIZdx-shade-red{color:Crimson}}`) + expect(cssString1of1).toBe( + `--sxs{--sxs:2 c-imTdEZ}@media{.c-imTdEZ{font-size:100%}}--sxs{--sxs:3 c-imTdEZ-caIZdx-shade-red}@media{.c-imTdEZ-caIZdx-shade-red{color:Crimson}}`, + ) }) test('Functionality of css() — utils', () => { @@ -225,7 +229,9 @@ describe('Basic', () => { const cssString1of1 = getCssText() expect(className1of1).toBe('fusion-c-elRGCe') - expect(cssString1of1).toBe(`--sxs{--sxs:2 fusion-c-elRGCe}@media{.fusion-c-elRGCe{--fusion--brand:500px;width:var(--fusion--brand)}}`) + expect(cssString1of1).toBe( + `--sxs{--sxs:2 fusion-c-elRGCe}@media{.fusion-c-elRGCe{--fusion--brand:500px;width:var(--fusion--brand)}}`, + ) }) test('Stringification: Utils + Local Tokens', () => { @@ -247,7 +253,9 @@ describe('Basic', () => { const cssString1of1 = getCssText() expect(className1of1).toBe('c-brAtkJ') - expect(cssString1of1).toBe(`--sxs{--sxs:2 c-brAtkJ}@media{.c-brAtkJ{---blur:test;-webkit-backdrop-filter:var(---blur);backdrop-filter:var(---blur)}}`) + expect(cssString1of1).toBe( + `--sxs{--sxs:2 c-brAtkJ}@media{.c-brAtkJ{---blur:test;-webkit-backdrop-filter:var(---blur);backdrop-filter:var(---blur)}}`, + ) }) test('Theme', () => { @@ -260,6 +268,8 @@ describe('Basic', () => { }, }) - expect(getCssText()).toBe(`--sxs{--sxs:0 t-kfidiM}@media{:root,.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:0 t-kfidiM}@media{:root,.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`, + ) }) }) diff --git a/packages/core/tests/component-composition.js b/packages/core/tests/component-composition.js index 1a400cc6..dda1feb0 100644 --- a/packages/core/tests/component-composition.js +++ b/packages/core/tests/component-composition.js @@ -25,7 +25,7 @@ describe('Composition', () => { `.c-hzkWus{font-size:14px}` + `.c-cQFdVt{font-weight:bold}` + `.c-kngyIZ{font-family:monospace}` + - `}` + `}`, ) }) @@ -43,7 +43,7 @@ describe('Composition', () => { `.c-hzkWus{font-size:14px}` + `.c-cQFdVt{font-weight:bold}` + `.c-kngyIZ{font-family:monospace}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/component-conditions.js b/packages/core/tests/component-conditions.js index 722ec499..a6f1ee85 100644 --- a/packages/core/tests/component-conditions.js +++ b/packages/core/tests/component-conditions.js @@ -19,7 +19,7 @@ describe('Component Medias', () => { `--sxs{--sxs:2 c-jEGvho}@media{` + `.c-jEGvho{font-size:16px}` + `@media (min-width:768px){.c-jEGvho{font-size:24px}}` + - `}`, + `}`, ) }) }) diff --git a/packages/core/tests/component-css-prop.js b/packages/core/tests/component-css-prop.js index c3328c05..40ce821b 100644 --- a/packages/core/tests/component-css-prop.js +++ b/packages/core/tests/component-css-prop.js @@ -21,10 +21,10 @@ describe('Component with CSS prop', () => { expect(toString()).toBe( `--sxs{--sxs:2 c-hhyRYU}@media{` + `.c-hhyRYU{order:1}` + - `}` + - `--sxs{--sxs:6 c-hhyRYU-ilhKMMn-css}@media{` + + `}` + + `--sxs{--sxs:6 c-hhyRYU-ilhKMMn-css}@media{` + `.c-hhyRYU-ilhKMMn-css{order:2}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/component-empty-variants.js b/packages/core/tests/component-empty-variants.js index 91a57cfb..7a859603 100644 --- a/packages/core/tests/component-empty-variants.js +++ b/packages/core/tests/component-empty-variants.js @@ -52,9 +52,7 @@ describe('Empty Variants', () => { }) expect(getCssText()).toBe( - `--sxs{--sxs:5 c-PJLV-lhHHWD-cv}@media{` + - `.c-PJLV-lhHHWD-cv{font-size:24px;color:black}` + - `}` + `--sxs{--sxs:5 c-PJLV-lhHHWD-cv}@media{` + `.c-PJLV-lhHHWD-cv{font-size:24px;color:black}` + `}`, ) }) }) diff --git a/packages/core/tests/component-utils-and-types.js b/packages/core/tests/component-utils-and-types.js index 20d155a3..cea33c7f 100644 --- a/packages/core/tests/component-utils-and-types.js +++ b/packages/core/tests/component-utils-and-types.js @@ -33,6 +33,8 @@ describe('Component: Utilities & Tokens', () => { ftw: '$sp', })() - expect(toString()).toBe(`--sxs{--sxs:2 c-ilqzId}@media{.c-ilqzId{color:var(--colors-sp);padding-left:var(--space-sp);padding-right:var(--space-sp)}}`) + expect(toString()).toBe( + `--sxs{--sxs:2 c-ilqzId}@media{.c-ilqzId{color:var(--colors-sp);padding-left:var(--space-sp);padding-right:var(--space-sp)}}`, + ) }) }) diff --git a/packages/core/tests/component-variants.js b/packages/core/tests/component-variants.js index e50293f6..e89afc66 100644 --- a/packages/core/tests/component-variants.js +++ b/packages/core/tests/component-variants.js @@ -65,7 +65,9 @@ describe('Variants', () => { const expression2CssText = '.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}' expect(expression2.className).toBe('c-PJLV c-PJLV-kaCQqN-color-blue') - expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-kaCQqN-color-blue}@media{${expression1CssText + expression2CssText}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-kaCQqN-color-blue}@media{${expression1CssText + expression2CssText}}`, + ) }) test('Renders a component with 2 matching variants', () => { @@ -88,7 +90,7 @@ describe('Variants', () => { padding: '1em', }, }, - } + }, }) const expression = component({ size: 'small', level: 1 }) @@ -97,7 +99,9 @@ describe('Variants', () => { const expressionSizeSmallCssText = '.c-PJLV-Gaggi-size-small{font-size:16px}' const expressionLevel1CssText = '.c-PJLV-iRwLiB-level-1{padding:0.5em}' - expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{${expressionSizeSmallCssText + expressionLevel1CssText}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{${expressionSizeSmallCssText + expressionLevel1CssText}}`, + ) }) test('Renders a component with a 2 matching variants and 1 matching compound', () => { @@ -111,11 +115,7 @@ describe('Variants', () => { expect(expression.className).toBe(`c-PJLV c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small c-PJLV-cChFtv-cv`) expect(getCssText()).toBe( - `--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{${ - expressionColorBlueCssText + expressionSizeSmallCssText - }}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{${ - expressionCompoundCssText - }}` + `--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{${expressionColorBlueCssText + expressionSizeSmallCssText}}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{${expressionCompoundCssText}}`, ) }) }) @@ -188,7 +188,9 @@ describe('Variants with defaults', () => { const expression = component({ size: 'large' }) expect(expression.className).toBe('c-PJLV c-PJLV-hsYHIj-size-large') - expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-hsYHIj-size-large}@media{.c-PJLV-hsYHIj-size-large{font-size:24px}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:3 c-PJLV-hsYHIj-size-large}@media{.c-PJLV-hsYHIj-size-large{font-size:24px}}`, + ) }) test('Renders a component with the default variant applied and a different variant explicitly applied', () => { @@ -219,10 +221,10 @@ describe('Variants with defaults', () => { `.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}` + // implicit size:small `.c-PJLV-Gaggi-size-small{font-size:16px}` + - `}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{` + + `}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{` + // compound color:blue + size:small `.c-PJLV-cChFtv-cv{transform:scale(1.2)}` + - `}`, + `}`, ) }) @@ -313,7 +315,7 @@ describe('Conditional variants', () => { expect(getCssText()).toBe( `--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small}@media{` + `@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` + - `}` + `}`, ) }) @@ -326,12 +328,14 @@ describe('Conditional variants', () => { const componentSmallBp1CssText = `@media (max-width: 767px){.${componentSmallBp1ClassName}{font-size:16px}}` const componentLargeBp2CssText = `@media (min-width: 768px){.${componentLargeBp2ClassName}{font-size:24px}}` - expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' ')) + expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe( + [componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '), + ) expect(getCssText()).toBe( `--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` + componentSmallBp1CssText + componentLargeBp2CssText + - `}` + `}`, ) }) @@ -339,28 +343,34 @@ describe('Conditional variants', () => { const { css, getCssText } = createStitches(config) const component = css(componentConfig) - expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`) + expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe( + `c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`, + ) expect(getCssText()).toBe( `--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` + `@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` + `@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` + - `}` + `}`, ) - expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`) + expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe( + `c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`, + ) expect(getCssText()).toBe( `--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` + `@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` + `@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` + - `}` + `}`, ) - expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`) + expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe( + `c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`, + ) expect(getCssText()).toBe( `--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` + `@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` + `@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` + - `}` + `}`, ) }) @@ -393,7 +403,7 @@ describe('Conditional variants', () => { `--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` + `@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` + `@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` + - `}` + `}`, ) } @@ -425,7 +435,7 @@ describe('Conditional variants', () => { `--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` + `@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` + `@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` + - `}` + `}`, ) } }) @@ -434,16 +444,16 @@ describe('Conditional variants', () => { describe('Variant pairing types', () => { const componentConfigForBooleanVariant = { '--component': true, - variants: { + 'variants': { testBoolean: { true: { '--test-boolean': true, }, false: { '--test-boolean': false, - } - } - } + }, + }, + }, } test('Renders a variant with an inactive string variant', () => { @@ -452,9 +462,7 @@ describe('Variant pairing types', () => { const rendering = component() expect(rendering.className).toBe('c-foEXqW') - expect(getCssText()).toBe(`--sxs{--sxs:2 c-foEXqW}@media{` + - `.c-foEXqW{--component:true}` + - `}`) + expect(getCssText()).toBe(`--sxs{--sxs:2 c-foEXqW}@media{` + `.c-foEXqW{--component:true}` + `}`) }) test('Renders a variant with an active string variant', () => { @@ -466,10 +474,10 @@ describe('Variant pairing types', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-foEXqW}@media{` + `.c-foEXqW{--component:true}` + - `}` + - `--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` + + `}` + + `--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` + `.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` + - `}` + `}`, ) }) @@ -482,10 +490,10 @@ describe('Variant pairing types', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-foEXqW}@media{` + `.c-foEXqW{--component:true}` + - `}` + - `--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` + + `}` + + `--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` + `.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` + - `}` + `}`, ) }) @@ -498,12 +506,12 @@ describe('Variant pairing types', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-foEXqW}@media{` + `.c-foEXqW{--component:true}` + - `}` + - `--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` + + `}` + + `--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` + `@media (min-width: 640px){` + - `.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` + + `.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` + `}` + - `}` + `}`, ) }) @@ -516,12 +524,12 @@ describe('Variant pairing types', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-foEXqW}@media{` + `.c-foEXqW{--component:true}` + - `}` + - `--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` + + `}` + + `--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` + `@media (min-width: 640px){` + - `.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` + + `.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` + `}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/global-atrules.js b/packages/core/tests/global-atrules.js index a6f4109e..3ce6803f 100644 --- a/packages/core/tests/global-atrules.js +++ b/packages/core/tests/global-atrules.js @@ -64,14 +64,14 @@ describe('Support @font-face', () => { expect(getCssText()).toBe( `--sxs{--sxs:1 PCbjJ}` + - `@media{` + + `@media{` + `@font-face{` + - `font-family:system-ui;` + - `font-style:normal;` + - `font-weight:400;` + - `src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` + + `font-family:system-ui;` + + `font-style:normal;` + + `font-weight:400;` + + `src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` + `}` + - `}`, + `}`, ) }) @@ -117,21 +117,20 @@ describe('Support @font-face', () => { expect(getCssText()).toBe( `--sxs{--sxs:1 JJHhj}` + - `@media{` + + `@media{` + `@font-face{` + - `font-family:system-ui;` + - `font-style:normal;` + - `font-weight:400;` + - `src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` + + `font-family:system-ui;` + + `font-style:normal;` + + `font-weight:400;` + + `src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` + `}` + - `@font-face{` + - `font-family:system-ui;` + - `font-style:italic;` + - `font-weight:400;` + - `src:local(".SFNS-Italic"),local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")` + + `font-family:system-ui;` + + `font-style:italic;` + + `font-weight:400;` + + `src:local(".SFNS-Italic"),local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")` + `}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/issue-450.js b/packages/core/tests/issue-450.js index b6677744..d5d28213 100644 --- a/packages/core/tests/issue-450.js +++ b/packages/core/tests/issue-450.js @@ -19,7 +19,7 @@ describe('Issue #450', () => { defaultVariants: { color: 'red', }, - }); + }) const component2 = css(component1, { variants: { @@ -33,7 +33,7 @@ describe('Issue #450', () => { defaultVariants: { color: 'orange', }, - }); + }) const component3 = css(component2, { variants: { @@ -77,7 +77,9 @@ describe('Issue #450', () => { const { component1, getCssText } = getFreshComponents() const render = component1({ color: { '@media (min-width: 640px)': 'blue' } }) expect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red c-PJLV-bBevdw-color-blue`) - expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}}`, + ) }) test('Render component2() as orange, inherited from defaultVariants', () => { @@ -85,7 +87,9 @@ describe('Issue #450', () => { const render = component2() expect(render.className).toBe(`c-PJLV c-PJLV-vMTTG-color-orange`) - expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}@media{.c-PJLV-vMTTG-color-orange{color:orange}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}@media{.c-PJLV-vMTTG-color-orange{color:orange}}`, + ) }) test('Render component2({ color: { "@media (width >= 640px)": "blue" } }) as orange then blue, inherited from defaultVariants, assigned from props', () => { @@ -93,7 +97,11 @@ describe('Issue #450', () => { const render = component2({ color: { '@media (min-width: 640px)': 'blue' } }) expect(render.className).toBe(`c-PJLV c-PJLV-bBevdw-color-blue c-PJLV-vMTTG-color-orange`) expect(getCssText()).toBe( - `--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}` + `@media{.c-PJLV-vMTTG-color-orange{color:orange}}` + `--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{` + `@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}` + `}`, + `--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}` + + `@media{.c-PJLV-vMTTG-color-orange{color:orange}}` + + `--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{` + + `@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}` + + `}`, ) }) }) @@ -105,7 +113,7 @@ describe('Issue #450', () => { const component1 = css({ '--component': 1, - variants: { + 'variants': { appearance: { primary: {}, secondary: { '--appearance': 'secondary' }, @@ -117,7 +125,7 @@ describe('Issue #450', () => { }, }, - compoundVariants: [ + 'compoundVariants': [ { appearance: 'secondary', color: 'lightBlue', @@ -127,7 +135,7 @@ describe('Issue #450', () => { }, ], - defaultVariants: { + 'defaultVariants': { appearance: 'primary', color: 'red', }, @@ -159,10 +167,10 @@ describe('Issue #450', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-jyxqjt}@media{` + `.c-jyxqjt{--component:1}` + - `}` + - `--sxs{--sxs:3 c-jyxqjt-ilDyRi-color-lightBlue}@media{` + + `}` + + `--sxs{--sxs:3 c-jyxqjt-ilDyRi-color-lightBlue}@media{` + `.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` + - `}` + `}`, ) }) @@ -173,17 +181,19 @@ describe('Issue #450', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-jyxqjt}@media{` + `.c-jyxqjt{--component:1}` + - `}` + - `--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary}@media{` + + `}` + + `--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary}@media{` + `.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` + - `}` + `}`, ) }) test('Render component1({ appearance: "secondary", color: "lightBlue" })', () => { const { component1, getCssText } = getFreshComponents() const render = component1({ appearance: 'secondary', color: 'lightBlue' }) - expect(render.className).toBe(`c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`) + expect(render.className).toBe( + `c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`, + ) expect(getCssText()).toBe( `--sxs{--sxs:2 c-jyxqjt}@media{` + `.c-jyxqjt{--component:1}` + @@ -201,7 +211,9 @@ describe('Issue #450', () => { test('Render component2()', () => { const { component2, getCssText } = getFreshComponents() const render = component2() - expect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`) + expect(render.className).toBe( + `c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`, + ) expect(getCssText()).toBe( `--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` + `.c-jyxqjt{--component:1}` + @@ -220,7 +232,9 @@ describe('Issue #450', () => { test('Render component2({ appearance: "secondary", color: "lightBlue" })', () => { const { component2, getCssText } = getFreshComponents() const render = component2({ appearance: 'secondary', color: 'lightBlue' }) - expect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`) + expect(render.className).toBe( + `c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`, + ) expect(getCssText()).toBe( `--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` + `.c-jyxqjt{--component:1}` + diff --git a/packages/core/tests/issue-492.js b/packages/core/tests/issue-492.js index ee6038f9..a72a9d8b 100644 --- a/packages/core/tests/issue-492.js +++ b/packages/core/tests/issue-492.js @@ -30,18 +30,12 @@ describe('Issue #492', () => { /** Rendering of the component as-is. */ const rendering1 = component() - expect( - rendering1.className - ).toBe( - `${componentClassName} ${variantSweetCarolineClassName}` - ) + expect(rendering1.className).toBe(`${componentClassName} ${variantSweetCarolineClassName}`) - expect( - getCssText() - ).toBe( + expect(getCssText()).toBe( `--sxs{--sxs:3 ${variantSweetCarolineClassName}}@media{` + `.${variantSweetCarolineClassName}{--sweet-caroline:true}` + - `}` + `}`, ) /** Rendering of the component as-is. */ @@ -51,10 +45,8 @@ describe('Issue #492', () => { }, }) - expect( - rendering2.className - ).toBe( - `${componentClassName} ${variantSweetCarolineClassName} ${variantResponsiveSweetDreamsClassName}` + expect(rendering2.className).toBe( + `${componentClassName} ${variantSweetCarolineClassName} ${variantResponsiveSweetDreamsClassName}`, ) expect(getCssText()).toBe( @@ -73,11 +65,13 @@ describe('Issue #492', () => { }, }) - expect(rendering3.className).toBe(`${componentClassName} ${variantSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}`) + expect(rendering3.className).toBe( + `${componentClassName} ${variantSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}`, + ) expect(getCssText()).toBe( - // initial variants - `--sxs{--sxs:3 ${variantSweetCarolineClassName} ${variantSweetDreamsClassName}}` + + // initial variants + `--sxs{--sxs:3 ${variantSweetCarolineClassName} ${variantSweetDreamsClassName}}` + `@media{.${variantSweetCarolineClassName}{--sweet-caroline:true}.${variantSweetDreamsClassName}{--sweet-dreams:true}}` + // responsive variants `--sxs{--sxs:4 ${variantResponsiveSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}}@media{` + @@ -92,7 +86,7 @@ describe('Issue #492', () => { const component = css({ '--rock': true, - variants: { + 'variants': { heavy: { 'iron-butterfly': { '--weight-iron-butterfly': true, @@ -116,14 +110,12 @@ describe('Issue #492', () => { const variantInitialHeavyIronButterfly = `c-evVBJo-kiVNrc-heavy-iron-butterfly` const variantMinWidth640LedZeppelin = `c-evVBJo-lgYcvN-heavy-led-zeppelin` - expect( - rendering1.className - ).toBe( - `${componentClassName} ${variantInitialHeavyIronButterfly} ${variantMinWidth640LedZeppelin}` + expect(rendering1.className).toBe( + `${componentClassName} ${variantInitialHeavyIronButterfly} ${variantMinWidth640LedZeppelin}`, ) - expect( - getCssText() - ).toBe('--sxs{--sxs:2 c-evVBJo}@media{.c-evVBJo{--rock:true}}--sxs{--sxs:3 c-evVBJo-kiVNrc-heavy-iron-butterfly}@media{.c-evVBJo-kiVNrc-heavy-iron-butterfly{--weight-iron-butterfly:true}}--sxs{--sxs:4 c-evVBJo-lgYcvN-heavy-led-zeppelin}@media{@media (min-width: 640px){.c-evVBJo-lgYcvN-heavy-led-zeppelin{--weight-led-zeppelin:true}}}') + expect(getCssText()).toBe( + '--sxs{--sxs:2 c-evVBJo}@media{.c-evVBJo{--rock:true}}--sxs{--sxs:3 c-evVBJo-kiVNrc-heavy-iron-butterfly}@media{.c-evVBJo-kiVNrc-heavy-iron-butterfly{--weight-iron-butterfly:true}}--sxs{--sxs:4 c-evVBJo-lgYcvN-heavy-led-zeppelin}@media{@media (min-width: 640px){.c-evVBJo-lgYcvN-heavy-led-zeppelin{--weight-led-zeppelin:true}}}', + ) }) }) diff --git a/packages/core/tests/issue-655.js b/packages/core/tests/issue-655.js index 1a07083d..069a013d 100644 --- a/packages/core/tests/issue-655.js +++ b/packages/core/tests/issue-655.js @@ -11,10 +11,10 @@ describe('Issue #655', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-dAAqmb}` + - `@media{.c-dAAqmb{` + + `@media{.c-dAAqmb{` + `max-width:-moz-fit-content;max-width:fit-content;` + `min-width:-moz-fit-content;min-width:fit-content` + - `}}` + `}}`, ) }) }) diff --git a/packages/core/tests/issue-725.js b/packages/core/tests/issue-725.js index 273ba496..de4414f7 100644 --- a/packages/core/tests/issue-725.js +++ b/packages/core/tests/issue-725.js @@ -22,7 +22,9 @@ describe('Issue #725', () => { '@wide': 'end', }, }) - expect(getCssText()).toBe(`--sxs{--sxs:4 c-PJLV-jobbEJ-justify-end}@media{@media (min-width: 720px), (min-width: 1536px){.c-PJLV-jobbEJ-justify-end{justify-content:flex-end}}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:4 c-PJLV-jobbEJ-justify-end}@media{@media (min-width: 720px), (min-width: 1536px){.c-PJLV-jobbEJ-justify-end{justify-content:flex-end}}}`, + ) }) test('Combination with other variants', () => { @@ -92,6 +94,8 @@ describe('Issue #725', () => { variant: { '@bp1': 'red', '@bp2': 'red' }, disabled: { '@bp2': true, '@bp1': false }, }) - expect(getCssText()).toBe(`--sxs{--sxs:4 c-PJLV-dJnmKC-disabled-true c-PJLV-gSmlSg-variant-red}@media{@media (min-width: 1536px){.c-PJLV-dJnmKC-disabled-true{background-color:gray}}@media (min-width: 720px), (min-width: 1536px){.c-PJLV-gSmlSg-variant-red{background-color:tomato}}}--sxs{--sxs:5 c-PJLV-elpmbs-cv}@media{@media (min-width: 1536px){@media (min-width: 720px), (min-width: 1536px){.c-PJLV-elpmbs-cv{padding:50px}}}}`) + expect(getCssText()).toBe( + `--sxs{--sxs:4 c-PJLV-dJnmKC-disabled-true c-PJLV-gSmlSg-variant-red}@media{@media (min-width: 1536px){.c-PJLV-dJnmKC-disabled-true{background-color:gray}}@media (min-width: 720px), (min-width: 1536px){.c-PJLV-gSmlSg-variant-red{background-color:tomato}}}--sxs{--sxs:5 c-PJLV-elpmbs-cv}@media{@media (min-width: 1536px){@media (min-width: 720px), (min-width: 1536px){.c-PJLV-elpmbs-cv{padding:50px}}}}`, + ) }) }) diff --git a/packages/core/tests/issue-788.js b/packages/core/tests/issue-788.js index 2a2427b8..da39d050 100644 --- a/packages/core/tests/issue-788.js +++ b/packages/core/tests/issue-788.js @@ -16,15 +16,10 @@ describe('Issue #788', () => { globalCss({ p: { color: 'red', - } + }, })() - expect(getCssText()).toBe( - `--sxs{--sxs:1 gllaiB}` + - `@media{p{` + - `color:red` + - `}}` - ) + expect(getCssText()).toBe(`--sxs{--sxs:1 gllaiB}` + `@media{p{` + `color:red` + `}}`) }) test('Test that a util with the name of a selector works in a component', () => { @@ -40,17 +35,17 @@ describe('Issue #788', () => { }) css({ - p: 10 + p: 10, })() expect(getCssText()).toBe( `--sxs{--sxs:2 c-csWWxC}` + - `@media{.c-csWWxC{` + + `@media{.c-csWWxC{` + `padding-top:10px;` + `padding-bottom:10px;` + `padding-left:10px;` + `padding-right:10px` + - `}}` + `}}`, ) }) }) diff --git a/packages/core/tests/issue-908.js b/packages/core/tests/issue-908.js index 4fddf833..dccd5329 100644 --- a/packages/core/tests/issue-908.js +++ b/packages/core/tests/issue-908.js @@ -1,32 +1,32 @@ import { createStitches } from '../src/index.js' -const styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }`; -const mediaRule = `@media { body { margin: auto; }`; +const styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }` +const mediaRule = `@media { body { margin: auto; }` const createStylesheet = (...preloadedStyles) => { - let rules = []; + let rules = [] const insertRule = (rule, index = rules.length) => { if (rule.startsWith('--sxs')) { - rules.splice(index, 0, {type: 1, cssText: rule}); + rules.splice(index, 0, { type: 1, cssText: rule }) } if (rule.startsWith('@media')) { - rules.splice(index, 0, {type: 4, cssText: rule, cssRules: []}); + rules.splice(index, 0, { type: 4, cssText: rule, cssRules: [] }) } - }; - preloadedStyles.forEach(insertRule); + } + preloadedStyles.forEach(insertRule) return { insertRule, - cssRules: rules - }; + cssRules: rules, + } } describe('Issue #908', () => { test('Getting hydratable stylesheet', () => { const { getCssText } = createStitches({ root: { - styleSheets: [createStylesheet(styleRule, mediaRule)] - } - }); + styleSheets: [createStylesheet(styleRule, mediaRule)], + }, + }) expect(getCssText()).toBe(mediaRule) }) diff --git a/packages/core/tests/issue-921.ts b/packages/core/tests/issue-921.ts index 3fdf0230..1ddf7463 100644 --- a/packages/core/tests/issue-921.ts +++ b/packages/core/tests/issue-921.ts @@ -4,15 +4,17 @@ const config = { utils: { background: (value: boolean | PropertyValue<'background'>) => { if (typeof value === 'boolean') { - return value ? { - background: 'red' - } : {} + return value + ? { + background: 'red', + } + : {} } else { return { - background: value + background: value, } } - } + }, }, } @@ -20,44 +22,44 @@ const { css, globalCss } = createStitches(config) globalCss({ html: { - background: true + background: true, }, body: { - background: 'green' + background: 'green', }, }) const Component = css({ - background: true, + 'background': true, '> *': { - background: 'green' - } + background: 'green', + }, }) Component({ - background: 'green', + 'background': 'green', '> *': { - background: true - } + background: true, + }, }) css(Component, { - background: 'green' + background: 'green', }) css(Component, { - background: true + background: true, }) const style: CSS = { // @ts-expect-error - background: true + background: true, } const style2: CSS = { - background: true + background: true, } const style3: CSS = { - background: 'green' + background: 'green', } diff --git a/packages/core/tests/issue-943.js b/packages/core/tests/issue-943.js index b58a8c5d..578531e2 100644 --- a/packages/core/tests/issue-943.js +++ b/packages/core/tests/issue-943.js @@ -13,10 +13,12 @@ describe('Issue #943', () => { lineGapOverride: '0%', advanceOverride: '10', src: 'local(Arial)', - } - ] + }, + ], })() - expect(getCssText()).toBe('--sxs{--sxs:1 jGZRm}@media{@font-face{font-family:fallback-font;ascent-override:83.6%;descent-override:20.5%;line-gap-override:0%;advance-override:10;src:local(Arial)}}') + expect(getCssText()).toBe( + '--sxs{--sxs:1 jGZRm}@media{@font-face{font-family:fallback-font;ascent-override:83.6%;descent-override:20.5%;line-gap-override:0%;advance-override:10;src:local(Arial)}}', + ) }) }) diff --git a/packages/core/tests/issue-999.js b/packages/core/tests/issue-999.js index 8e737a12..cf9a1a26 100644 --- a/packages/core/tests/issue-999.js +++ b/packages/core/tests/issue-999.js @@ -14,10 +14,10 @@ describe('Issue #519', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 fusion-c-fjkySu}` + - `@media{` + + `@media{` + `.fusion-c-fjkySu{--fusion--syntax:red}` + `.fusion-c-fjkySu h1{color:var(--fusion--syntax)}` + - `}` + `}`, ) }) @@ -33,11 +33,7 @@ describe('Issue #519', () => { })() expect(getCssText()).toBe( - `--sxs{--sxs:2 c-fjkySu}` + - `@media{` + - `.c-fjkySu{---syntax:red}` + - `.c-fjkySu h1{color:var(---syntax)}` + - `}` + `--sxs{--sxs:2 c-fjkySu}` + `@media{` + `.c-fjkySu{---syntax:red}` + `.c-fjkySu h1{color:var(---syntax)}` + `}`, ) }) @@ -58,11 +54,11 @@ describe('Issue #519', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 fusion-c-lkpaIy}` + - `@media{` + + `@media{` + `.fusion-c-lkpaIy{--fusion--syntax:red}` + `.fusion-c-lkpaIy h1{color:var(--fusion--syntax)}` + `.fusion-c-lkpaIy h2{color:var(--fusion--syntax)}` + - `}` + `}`, ) }) @@ -83,11 +79,11 @@ describe('Issue #519', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-lkpaIy}` + - `@media{` + + `@media{` + `.c-lkpaIy{---syntax:red}` + `.c-lkpaIy h1{color:var(---syntax)}` + `.c-lkpaIy h2{color:var(---syntax)}` + - `}` + `}`, ) }) @@ -112,12 +108,12 @@ describe('Issue #519', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 fusion-c-kbkiiL}` + - `@media{` + + `@media{` + `.fusion-c-kbkiiL{--fusion--syntax:red}` + `.fusion-c-kbkiiL h1{color:var(--fusion--syntax)}` + `.fusion-c-kbkiiL h2{color:var(--fusion--syntax)}` + `.fusion-c-kbkiiL h3{color:var(--fusion--syntax)}` + - `}` + `}`, ) }) @@ -142,12 +138,12 @@ describe('Issue #519', () => { expect(getCssText()).toBe( `--sxs{--sxs:2 c-kbkiiL}` + - `@media{` + + `@media{` + `.c-kbkiiL{---syntax:red}` + `.c-kbkiiL h1{color:var(---syntax)}` + `.c-kbkiiL h2{color:var(---syntax)}` + `.c-kbkiiL h3{color:var(---syntax)}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/theme.js b/packages/core/tests/theme.js index 3a14c6e2..367991f3 100644 --- a/packages/core/tests/theme.js +++ b/packages/core/tests/theme.js @@ -26,13 +26,11 @@ describe('Theme', () => { md: 200, lg: 500, }, - } + }, }) expect(getCssText()).toBe( - `--sxs{--sxs:0 t-egkarf}@media{` + - `:root,.t-egkarf{--sizes-sm:100;--sizes-md:200;--sizes-lg:500}` + - `}` + `--sxs{--sxs:0 t-egkarf}@media{` + `:root,.t-egkarf{--sizes-sm:100;--sizes-md:200;--sizes-lg:500}` + `}`, ) } @@ -44,17 +42,17 @@ describe('Theme', () => { md: 'calc($sm * 3)', lg: 'calc($md * 3)', }, - } + }, }) expect(getCssText()).toBe( `--sxs{--sxs:0 t-eJkcVD}@media{` + `:root,.t-eJkcVD{` + - `--sizes-sm:100;` + - `--sizes-md:calc(var(--sizes-sm) * 3);` + - `--sizes-lg:calc(var(--sizes-md) * 3)` + + `--sizes-sm:100;` + + `--sizes-md:calc(var(--sizes-sm) * 3);` + + `--sizes-lg:calc(var(--sizes-md) * 3)` + `}` + - `}` + `}`, ) } }) @@ -65,7 +63,7 @@ describe('Theme', () => { const theme = createTheme({ colors: { blue: '#0000ff', - } + }, }) expect(getCssText()).toBe(``) diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts index fb118a73..1d6946c9 100644 --- a/packages/core/tests/types.test.ts +++ b/packages/core/tests/types.test.ts @@ -56,7 +56,7 @@ globalCss({ '@bp1': { backgroundColor: '$gray100', }, - backgroundColor: '$gray300', + 'backgroundColor': '$gray300', }, }) @@ -113,7 +113,7 @@ const two = css(PotatoButton, { good: { color: 'GoldenRod', }, - } + }, }, defaultVariants: { hue: 'red', @@ -137,14 +137,14 @@ two({ PotatoButton({ className: '', css: { - backgroundColor: '$gray300', + 'backgroundColor': '$gray300', '@all': { - backgroundColor: 'initial' + backgroundColor: 'initial', }, '@bp1': { backgroundColor: 'initial', - } + }, }, }) diff --git a/packages/core/tests/universal-autoprefixer.js b/packages/core/tests/universal-autoprefixer.js index 6284ec9f..3d0fa14d 100644 --- a/packages/core/tests/universal-autoprefixer.js +++ b/packages/core/tests/universal-autoprefixer.js @@ -22,7 +22,9 @@ describe('Autoprefixer', () => { }, })() - expect(toString()).toBe('--sxs{--sxs:1 gaCVoe}@media{x-element{-webkit-backface-visibility:visible;backface-visibility:visible}}') + expect(toString()).toBe( + '--sxs{--sxs:1 gaCVoe}@media{x-element{-webkit-backface-visibility:visible;backface-visibility:visible}}', + ) }) test('backgroundClip', () => { @@ -34,7 +36,9 @@ describe('Autoprefixer', () => { }, })() - expect(toString()).toBe('--sxs{--sxs:1 gIcRdw}@media{x-element{-webkit-background-clip:border-box;background-clip:border-box}}') + expect(toString()).toBe( + '--sxs{--sxs:1 gIcRdw}@media{x-element{-webkit-background-clip:border-box;background-clip:border-box}}', + ) }) test('clipPath', () => { @@ -46,7 +50,9 @@ describe('Autoprefixer', () => { }, })() - expect(toString()).toBe('--sxs{--sxs:1 ccZNl}@media{x-element{-webkit-clip-path:circle(40%);clip-path:circle(40%)}}') + expect(toString()).toBe( + '--sxs{--sxs:1 ccZNl}@media{x-element{-webkit-clip-path:circle(40%);clip-path:circle(40%)}}', + ) }) test('hyphens', () => { @@ -94,7 +100,9 @@ describe('Autoprefixer', () => { }, })() - expect(toString()).toBe('--sxs{--sxs:1 gVFtip}@media{x-element{-webkit-text-size-adjust:100%;text-size-adjust:100%}}') + expect(toString()).toBe( + '--sxs{--sxs:1 gVFtip}@media{x-element{-webkit-text-size-adjust:100%;text-size-adjust:100%}}', + ) }) test('userSelect', () => { diff --git a/packages/core/tests/universal-logical-properties.js b/packages/core/tests/universal-logical-properties.js index 99c8966b..b13f5f12 100644 --- a/packages/core/tests/universal-logical-properties.js +++ b/packages/core/tests/universal-logical-properties.js @@ -21,7 +21,7 @@ describe('Logical Properties', () => { `x-element{margin-block-start:0;margin-block-end:0}` + `y-element{margin-block-start:10px;margin-block-end:10px}` + `z-element{margin-block-start:5px;margin-block-end:10px}` + - `}` + `}`, ) }) @@ -45,7 +45,7 @@ describe('Logical Properties', () => { `x-element{margin-inline-start:0;margin-inline-end:0}` + `y-element{margin-inline-start:10px;margin-inline-end:10px}` + `z-element{margin-inline-start:5px;margin-inline-end:10px}` + - `}` + `}`, ) }) @@ -69,7 +69,7 @@ describe('Logical Properties', () => { `x-element{padding-block-start:0;padding-block-end:0}` + `y-element{padding-block-start:10px;padding-block-end:10px}` + `z-element{padding-block-start:5px;padding-block-end:10px}` + - `}` + `}`, ) }) @@ -93,7 +93,7 @@ describe('Logical Properties', () => { `x-element{padding-inline-start:0;padding-inline-end:0}` + `y-element{padding-inline-start:10px;padding-inline-end:10px}` + `z-element{padding-inline-start:5px;padding-inline-end:10px}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/universal-numeric-values.js b/packages/core/tests/universal-numeric-values.js index 75d113da..a99bfdef 100644 --- a/packages/core/tests/universal-numeric-values.js +++ b/packages/core/tests/universal-numeric-values.js @@ -44,7 +44,9 @@ describe('Numeric Values', () => { }, })() - expect(toString()).toBe(`--sxs{--sxs:1 bpctHq cudWGu}@media{body{line-height:0;width:0}body{line-height:10;width:10px}}`) + expect(toString()).toBe( + `--sxs{--sxs:1 bpctHq cudWGu}@media{body{line-height:0;width:0}body{line-height:10;width:10px}}`, + ) }) test('Authors can use unit-less properties as known to React', () => { @@ -89,43 +91,106 @@ describe('Numeric Values', () => { const cssText = getCssText().replace(/^.+@media\{|\}$/g, '') expect(cssText).toBe( - 'div' + '{' + - 'animation-iteration-count:' + i + ';' + - 'border-image-outset:' + i + ';' + - 'border-image-slice:' + i + ';' + - 'border-image-width:' + i + ';' + - 'box-flex:' + i + ';' + - 'box-flex-group:' + i + ';' + - 'box-ordinal-group:' + i + ';' + - 'column-count:' + i + ';' + - 'columns:' + i + ';' + - 'flex:' + i + ';' + - 'flex-grow:' + i + ';' + - 'flex-shrink:' + i + ';' + - 'flex-order:' + i + ';' + - 'grid-row:' + i + ';' + - 'grid-row-end:' + i + ';' + - 'grid-row-span:' + i + ';' + - 'grid-row-start:' + i + ';' + - 'grid-column:' + i + ';' + - 'grid-column-end:' + i + ';' + - 'grid-column-span:' + i + ';' + - 'grid-column-start:' + i + ';' + - 'font-weight:' + i + ';' + - 'line-height:' + i + ';' + - 'opacity:' + i + ';' + - 'order:' + i + ';' + - 'orphans:' + i + ';' + - 'tab-size:' + i + ';' + - 'widows:' + i + ';' + - 'z-index:' + i + ';' + - 'zoom:' + i + - '}' + 'div' + + '{' + + 'animation-iteration-count:' + + i + + ';' + + 'border-image-outset:' + + i + + ';' + + 'border-image-slice:' + + i + + ';' + + 'border-image-width:' + + i + + ';' + + 'box-flex:' + + i + + ';' + + 'box-flex-group:' + + i + + ';' + + 'box-ordinal-group:' + + i + + ';' + + 'column-count:' + + i + + ';' + + 'columns:' + + i + + ';' + + 'flex:' + + i + + ';' + + 'flex-grow:' + + i + + ';' + + 'flex-shrink:' + + i + + ';' + + 'flex-order:' + + i + + ';' + + 'grid-row:' + + i + + ';' + + 'grid-row-end:' + + i + + ';' + + 'grid-row-span:' + + i + + ';' + + 'grid-row-start:' + + i + + ';' + + 'grid-column:' + + i + + ';' + + 'grid-column-end:' + + i + + ';' + + 'grid-column-span:' + + i + + ';' + + 'grid-column-start:' + + i + + ';' + + 'font-weight:' + + i + + ';' + + 'line-height:' + + i + + ';' + + 'opacity:' + + i + + ';' + + 'order:' + + i + + ';' + + 'orphans:' + + i + + ';' + + 'tab-size:' + + i + + ';' + + 'widows:' + + i + + ';' + + 'z-index:' + + i + + ';' + + 'zoom:' + + i + + '}', ) } }) - const commonProps = 'fontSize margin marginTop marginRight marginBottom marginLeft padding paddingTop paddingRight paddingBottom paddingLeft'.split(' ') + const commonProps = + 'fontSize margin marginTop marginRight marginBottom marginLeft padding paddingTop paddingRight paddingBottom paddingLeft'.split( + ' ', + ) for (const prop of commonProps) { const kebabProp = prop.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase()) @@ -142,11 +207,7 @@ describe('Numeric Values', () => { const cssText = getCssText().replace(/^.+@media\{|\}$/g, '') - expect(cssText).toBe( - `div{` + - kebabProp + `:` + i + (i ? 'px' : '') + - `}` - ) + expect(cssText).toBe(`div{` + kebabProp + `:` + i + (i ? 'px' : '') + `}`) } }) } diff --git a/packages/core/tests/universal-polyfill-prefixed-values.js b/packages/core/tests/universal-polyfill-prefixed-values.js index 6723d4aa..920acbe5 100644 --- a/packages/core/tests/universal-polyfill-prefixed-values.js +++ b/packages/core/tests/universal-polyfill-prefixed-values.js @@ -10,9 +10,7 @@ describe('Polyfill prefixed values', () => { }, })() - expect(toString()).toBe( - `--sxs{--sxs:1 coIeei}@media{.gro{width:-moz-available;width:-webkit-fill-available}}` - ) + expect(toString()).toBe(`--sxs{--sxs:1 coIeei}@media{.gro{width:-moz-available;width:-webkit-fill-available}}`) }) test('width:fit-content', () => { @@ -24,8 +22,6 @@ describe('Polyfill prefixed values', () => { }, })() - expect(toString()).toBe( - `--sxs{--sxs:1 gZsLvv}@media{.fit{width:-moz-fit-content;width:fit-content}}` - ) + expect(toString()).toBe(`--sxs{--sxs:1 gZsLvv}@media{.fit{width:-moz-fit-content;width:fit-content}}`) }) }) diff --git a/packages/core/tests/universal-tokens.js b/packages/core/tests/universal-tokens.js index be56b111..669fc75b 100644 --- a/packages/core/tests/universal-tokens.js +++ b/packages/core/tests/universal-tokens.js @@ -19,9 +19,9 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-iknykm}@media{` + `:root,.t-iknykm{--colors-red:tomato}` + - `}--sxs{--sxs:1 fMIGFF}@media{` + + `}--sxs{--sxs:1 fMIGFF}@media{` + `article{color:var(--colors-red)}` + - `}` + `}`, ) }) @@ -43,9 +43,9 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-daOLKV}@media{` + `:root,.t-daOLKV{--shadows-red:tomato}` + - `}--sxs{--sxs:1 bstpNq}@media{` + + `}--sxs{--sxs:1 bstpNq}@media{` + `article{box-shadow:0 0 0 1px var(--shadows-red)}` + - `}` + `}`, ) }) @@ -68,9 +68,9 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-eZaaph}@media{` + `:root,.t-eZaaph{--colors-red:tomato;--colors-red500:var(--colors-red)}` + - `}--sxs{--sxs:1 fdgxsg}@media{` + + `}--sxs{--sxs:1 fdgxsg}@media{` + `article{color:var(--colors-red500)}` + - `}` + `}`, ) }) @@ -80,7 +80,7 @@ describe('Tokens', () => { shadows: { red: 'tomato', red500: '$red', - redUnique: '$$red' + redUnique: '$$red', }, }, }) @@ -94,10 +94,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-gxqihb}@media{` + `:root,.t-gxqihb{--shadows-red:tomato;--shadows-red500:var(--shadows-red);--shadows-redUnique:var(---red)}` + - `}` + - `--sxs{--sxs:1 kyFUgb}@media{` + + `}` + + `--sxs{--sxs:1 kyFUgb}@media{` + `article{box-shadow:0 0 0 1px var(--shadows-red500)}` + - `}` + `}`, ) }) @@ -119,10 +119,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-iknykm}@media{` + `:root,.t-iknykm{--colors-red:tomato}` + - `}` + - `--sxs{--sxs:1 hNRkrs}@media{` + + `}` + + `--sxs{--sxs:1 hNRkrs}@media{` + `article{box-shadow:0 0 0 1px var(--colors-red)}` + - `}` + `}`, ) }) @@ -144,10 +144,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-iknykm}@media{` + `:root,.t-iknykm{--colors-red:tomato}` + - `}` + - `--sxs{--sxs:1 hNRkrs}@media{` + + `}` + + `--sxs{--sxs:1 hNRkrs}@media{` + `article{box-shadow:0 0 0 1px var(--colors-red)}` + - `}` + `}`, ) }) @@ -171,10 +171,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-hxjLZl}@media{` + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + - `}` + - `--sxs{--sxs:1 kTSGli}@media{` + + `}` + + `--sxs{--sxs:1 kTSGli}@media{` + `article{margin-left:calc(var(--space-sp1)*-1);margin-top:calc(var(--space-sp2)*-1)}` + - `}` + `}`, ) }) @@ -199,10 +199,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-ereMzu}@media{` + `:root,.t-ereMzu{--sizes-sp1:10px;--sizes-sp2:20px;--sizes-sp3:30px}` + - `}` + - `--sxs{--sxs:1 kuTEdV}@media{` + + `}` + + `--sxs{--sxs:1 kuTEdV}@media{` + `article{margin-left:calc(var(--sizes-sp1)*-1);width:var(--sizes-sp1)}` + - `}` + `}`, ) }) @@ -226,10 +226,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-hxjLZl}@media{` + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + - `}` + - `--sxs{--sxs:1 lcIUgV}@media{` + + `}` + + `--sxs{--sxs:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + - `}` + `}`, ) }) @@ -259,9 +259,9 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 my-theme}@media{` + `.my-theme{--space-sp1:100px;--space-sp2:200px}` + - `}--sxs{--sxs:1 lcIUgV}@media{` + + `}--sxs{--sxs:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + - `}` + `}`, ) }) @@ -285,10 +285,10 @@ describe('Tokens', () => { expect(getCssText()).toBe( `--sxs{--sxs:0 t-hxjLZl}@media{` + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + - `}` + - `--sxs{--sxs:1 lcIUgV}@media{` + + `}` + + `--sxs{--sxs:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + - `}` + `}`, ) }) @@ -299,15 +299,13 @@ describe('Tokens', () => { colors: { blue: 'dodgerblue', }, - } + }, }) expect(`
`).toBe(`
`) expect(getCssText()).toBe( - `--sxs{--sxs:0 pedro-t-jPkpUS}@media{` + - `:root,.pedro-t-jPkpUS{--pedro-colors-blue:dodgerblue}` + - `}` + `--sxs{--sxs:0 pedro-t-jPkpUS}@media{` + `:root,.pedro-t-jPkpUS{--pedro-colors-blue:dodgerblue}` + `}`, ) }) @@ -317,21 +315,21 @@ describe('Tokens', () => { sizes: { five: '5px', }, - } + }, }) globalCss({ body: { - marginLeft: '5--sizes-five' - } + marginLeft: '5--sizes-five', + }, })() expect(getCssText()).toBe( `--sxs{--sxs:0 t-bhZLEQ}@media{` + `:root,.t-bhZLEQ{--sizes-five:5px}` + - `}--sxs{--sxs:1 gvABwA}@media{` + + `}--sxs{--sxs:1 gvABwA}@media{` + `body{margin-left:calc(var(--sizes-five)*5)}` + - `}` + `}`, ) }) }) diff --git a/packages/core/tests/with-config-api.js b/packages/core/tests/with-config-api.js index 6a7aa8fb..05114261 100644 --- a/packages/core/tests/with-config-api.js +++ b/packages/core/tests/with-config-api.js @@ -49,7 +49,9 @@ describe('css.withConfig', () => { expect(componentToRender).toBeInstanceOf(Function) expect(className).toBe('c-my-cool-display-name-gmqXFB') - expect(cssString).toBe(`--sxs{--sxs:2 c-my-cool-display-name-gmqXFB}@media{.c-my-cool-display-name-gmqXFB{color:red}}`) + expect(cssString).toBe( + `--sxs{--sxs:2 c-my-cool-display-name-gmqXFB}@media{.c-my-cool-display-name-gmqXFB{color:red}}`, + ) }) test('Creates the correct className with a displayName and componentId', () => { @@ -65,7 +67,9 @@ describe('css.withConfig', () => { expect(componentToRender).toBeInstanceOf(Function) expect(className).toBe('c-my-cool-display-name-cool-id') - expect(cssString).toBe(`--sxs{--sxs:2 c-my-cool-display-name-cool-id}@media{.c-my-cool-display-name-cool-id{color:red}}`) + expect(cssString).toBe( + `--sxs{--sxs:2 c-my-cool-display-name-cool-id}@media{.c-my-cool-display-name-cool-id{color:red}}`, + ) }) test('Creates the correct className with a componentConfig while extending components', () => { @@ -79,7 +83,9 @@ describe('css.withConfig', () => { expect(className).toBe('c-component-to-extend-id c-cool-component-id') const cssString = getCssText() - expect(cssString).toBe(`--sxs{--sxs:2 c-component-to-extend-id c-cool-component-id}@media{.c-component-to-extend-id{color:red}.c-cool-component-id{color:blue}}`) + expect(cssString).toBe( + `--sxs{--sxs:2 c-component-to-extend-id c-cool-component-id}@media{.c-component-to-extend-id{color:red}.c-cool-component-id{color:blue}}`, + ) }) }) @@ -98,7 +104,7 @@ describe('shouldForwardStitchesProp', () => { }, }) - const {props: firstComponentProps} = componentOne({ variant: 'red', css: {} }) + const { props: firstComponentProps } = componentOne({ variant: 'red', css: {} }) expect(firstComponentProps.variant).toBe(undefined) expect(firstComponentProps.css).toEqual(undefined) @@ -114,7 +120,7 @@ describe('shouldForwardStitchesProp', () => { }, }) - const {props: secondComponentProps} = componentTwo({ variant: 'red', css: {} }) + const { props: secondComponentProps } = componentTwo({ variant: 'red', css: {} }) expect(secondComponentProps.variant).toBe('red') expect(secondComponentProps.css).toEqual({}) }) diff --git a/packages/core/types/config.d.ts b/packages/core/types/config.d.ts index 775d6371..d362f545 100644 --- a/packages/core/types/config.d.ts +++ b/packages/core/types/config.d.ts @@ -4,7 +4,7 @@ import type Stitches from './stitches.js' /** Configuration Interface */ declare namespace ConfigType { /** Prefix interface. */ - export type Prefix = T extends string ? T: string + export type Prefix = T extends string ? T : string /** Media interface. */ export type Media = { @@ -29,7 +29,9 @@ declare namespace ConfigType { zIndices?: { [token in number | string]: boolean | number | string } } & { [Scale in keyof T]: { - [Token in keyof T[Scale]]: T[Scale][Token] extends (boolean | number | string) ? T[Scale][Token] : (boolean | number | string) + [Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string + ? T[Scale][Token] + : boolean | number | string } } @@ -40,9 +42,13 @@ declare namespace ConfigType { /** Utility interface. */ export type Utils = { - [Property in keyof T]: T[Property] extends (value: infer V) => {} ? T[Property] | ((value: V) => { - [K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V - }) : never + [Property in keyof T]: T[Property] extends (value: infer V) => {} + ? + | T[Property] + | ((value: V) => { + [K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V + }) + : never } } @@ -197,14 +203,12 @@ export type CreateStitches = { Media extends {} = {}, Theme extends {} = {}, ThemeMap extends {} = DefaultThemeMap, - Utils extends {} = {} - >( - config?: { - prefix?: ConfigType.Prefix - media?: ConfigType.Media - theme?: ConfigType.Theme - themeMap?: ConfigType.ThemeMap - utils?: ConfigType.Utils - } - ): Stitches + Utils extends {} = {}, + >(config?: { + prefix?: ConfigType.Prefix + media?: ConfigType.Media + theme?: ConfigType.Theme + themeMap?: ConfigType.ThemeMap + utils?: ConfigType.Utils + }): Stitches } diff --git a/packages/core/types/css-util.d.ts b/packages/core/types/css-util.d.ts index 5452ca4a..3cb13151 100644 --- a/packages/core/types/css-util.d.ts +++ b/packages/core/types/css-util.d.ts @@ -6,101 +6,70 @@ import type * as Util from './util.js' export { Native } /** CSS style declaration object. */ -export interface CSSProperties extends Native.StandardLonghandProperties, Native.StandardShorthandProperties, Native.SvgProperties {} +export interface CSSProperties + extends Native.StandardLonghandProperties, + Native.StandardShorthandProperties, + Native.SvgProperties {} type ValueByPropertyName = PropertyName extends keyof CSSProperties ? CSSProperties[PropertyName] : never -type TokenByPropertyName = PropertyName extends keyof ThemeMap ? TokenByScaleName : never +type TokenByPropertyName = PropertyName extends keyof ThemeMap + ? TokenByScaleName + : never -type TokenByScaleName = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never +type TokenByScaleName = ScaleName extends keyof Theme + ? Util.Prefixed<'$', keyof Theme[ScaleName]> + : never /** Returns a Style interface, leveraging the given media and style map. */ -export type CSS< - Media = {}, - Theme = {}, - ThemeMap = Config.DefaultThemeMap, - Utils = {}, -> = ( +export type CSS = // nested at-rule css styles - & { + { [K in Util.Prefixed<'@', keyof Media>]?: CSS - } - // known property styles - & { - [K in keyof CSSProperties as K extends keyof Utils ? never : K]?: ( + } & { // known property styles + [K in keyof CSSProperties as K extends keyof Utils ? never : K]?: | ValueByPropertyName | TokenByPropertyName | Native.Globals | ThemeUtil.ScaleValue | Util.Index | undefined - ) - } - // known utility styles - & { + } & { // known utility styles [K in keyof Utils]?: Utils[K] extends (arg: infer P) => any - ? ( - | ( - P extends any[] - ? ( - | ( - $$PropertyValue extends keyof P[0] - ? ( - | ValueByPropertyName - | TokenByPropertyName + ? + | (P extends any[] + ? + | ($$PropertyValue extends keyof P[0] + ? + | ValueByPropertyName + | TokenByPropertyName + | Native.Globals + | ThemeUtil.ScaleValue + | undefined + : $$ScaleValue extends keyof P[0] + ? TokenByScaleName | { scale: P[0][$$ScaleValue] } | undefined + : never)[] + | P + : $$PropertyValue extends keyof P + ? + | ValueByPropertyName + | TokenByPropertyName | Native.Globals - | ThemeUtil.ScaleValue - | undefined - ) - : $$ScaleValue extends keyof P[0] - ? ( - | TokenByScaleName - | { scale: P[0][$$ScaleValue] } | undefined - ) - : never - )[] - | P - ) - : $$PropertyValue extends keyof P - ? ( - | ValueByPropertyName - | TokenByPropertyName - | Native.Globals - | undefined - ) - : $$ScaleValue extends keyof P - ? ( - | TokenByScaleName - | { scale: P[$$ScaleValue] } - | undefined - ) - : never - ) - | P - ) - : never - } - // known theme styles - & { - [K in keyof ThemeMap as K extends keyof CSSProperties ? never : K extends keyof Utils ? never : K]?: ( - | Native.Globals - | Util.Index - | undefined - ) - } - // unknown css declaration styles - & { - /** Unknown property. */ - [K: string]: ( - | number - | string - | CSS - | {} + : $$ScaleValue extends keyof P + ? TokenByScaleName | { scale: P[$$ScaleValue] } | undefined + : never) + | P + : never + } & { // known theme styles + [K in keyof ThemeMap as K extends keyof CSSProperties ? never : K extends keyof Utils ? never : K]?: + | Native.Globals + | Util.Index | undefined - ) + } & { // unknown css declaration styles + /** Unknown property. */ + [K: string]: number | string | CSS | {} | undefined } -) /** Unique symbol used to reference a property value. */ export declare const $$PropertyValue: unique symbol @@ -123,5 +92,5 @@ export type WithPropertyValue = { readonly [K in $$PropertyValue]: T } export type WithScaleValue = { - readonly [K in $$ScaleValue]: T; + readonly [K in $$ScaleValue]: T } diff --git a/packages/core/types/css.d.ts b/packages/core/types/css.d.ts index 91f45927..a6c27ef4 100644 --- a/packages/core/types/css.d.ts +++ b/packages/core/types/css.d.ts @@ -21,7727 +21,7714 @@ * SOFTWARE. */ -export {}; - +export {} export interface StandardLonghandProperties { - /** - * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. - * - * **Syntax**: `normal | | | ? ` - * - * **Initial value**: `normal` - * - */ - alignContent?: Property.AlignContent; - /** - * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. - * - * **Syntax**: `normal | stretch | | [ ? ]` - * - * **Initial value**: `normal` - * - */ - alignItems?: Property.AlignItems; - /** - * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. - * - * **Syntax**: `auto | normal | stretch | | ? ` - * - * **Initial value**: `auto` - * - */ - alignSelf?: Property.AlignSelf; - /** - * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. - * - * **Syntax**: `[ normal | | | ? ]#` - * - * **Initial value**: `normal` - * - */ - alignTracks?: Property.AlignTracks; - /** - * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. - * - * **Syntax**: `