From 1fa120b8c29789d5ef464958bdb5e9e493b16fe8 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 22 Jun 2021 10:20:56 -0400 Subject: [PATCH 1/4] =?UTF-8?q?0.2.x=20=E2=80=94=20rollback=20token.name?= =?UTF-8?q?=20to=20be=20token.token=20(#644)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/ThemeToken.d.ts | 6 +- packages/core/src/ThemeToken.js | 6 +- packages/core/tests/universal-tokens.js | 378 ++++++++++++------------ 3 files changed, 191 insertions(+), 199 deletions(-) diff --git a/packages/core/src/ThemeToken.d.ts b/packages/core/src/ThemeToken.d.ts index a4255711..4a15d038 100644 --- a/packages/core/src/ThemeToken.d.ts +++ b/packages/core/src/ThemeToken.d.ts @@ -2,10 +2,10 @@ import { Optional, Primitive, ToString, ToTailDashed } from './utility' /** Theme Tokens represent named reusable values, which may be unique to a scale and prefixed. */ export declare class ThemeToken { - constructor(name: T1, value: T2, scale?: T3, prefix?: T4) + constructor(token: T1, value: T2, scale?: T3, prefix?: T4) /** Name of the token. */ - name: Primitive extends T1 ? '' : ToString + token: Primitive extends T1 ? '' : ToString /** Original value of the token. */ value: Primitive extends T2 ? '' : `${T2}` @@ -17,7 +17,7 @@ export declare class ThemeToken}${ToTailDashed}${this['name']}` + variable: `--${ToTailDashed}${ToTailDashed}${this['token']}` /** Serialized CSS var() representing the token. */ computedValue: `var(${this['variable']})` diff --git a/packages/core/src/ThemeToken.js b/packages/core/src/ThemeToken.js index 78027c21..e582296a 100644 --- a/packages/core/src/ThemeToken.js +++ b/packages/core/src/ThemeToken.js @@ -1,8 +1,8 @@ import { toTailDashed } from './convert/toTailDashed.js' export class ThemeToken { - constructor(name, value, scale, prefix) { - this.name = name == null ? '' : String(name) + constructor(token, value, scale, prefix) { + this.token = token == null ? '' : String(token) this.value = value == null ? '' : String(value) this.scale = scale == null ? '' : String(scale) this.prefix = prefix == null ? '' : String(prefix) @@ -13,7 +13,7 @@ export class ThemeToken { } get variable() { - return '--' + toTailDashed(this.prefix) + toTailDashed(this.scale) + this.name + return '--' + toTailDashed(this.prefix) + toTailDashed(this.scale) + this.token } toString() { diff --git a/packages/core/tests/universal-tokens.js b/packages/core/tests/universal-tokens.js index 5b9182c7..0d954210 100644 --- a/packages/core/tests/universal-tokens.js +++ b/packages/core/tests/universal-tokens.js @@ -1,217 +1,209 @@ import { createCss } from '../src/index.js' describe('Tokens', () => { - test('Authors can use a regular token', () => { - { - const { global, getCssString } = createCss({ - theme: { - colors: { - red: 'tomato', - }, + test('Authors can use a regular token #1', () => { + const { global, getCssString } = createCss({ + theme: { + colors: { + red: 'tomato', }, - }) + }, + }) - global({ - article: { - color: '$red', - }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-iknykm}@media{` + - `:root,.t-iknykm{--colors-red:tomato}` + - `}--stitches{--:1 fMIGFF}@media{` + - `article{color:var(--colors-red)}` + - `}` - ) - } - - { - const { global, getCssString } = createCss({ - theme: { - shadows: { - red: 'tomato', - }, - }, - }) + global({ + article: { + color: '$red', + }, + })() - global({ - article: { - boxShadow: '0 0 0 1px $red', - }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-daOLKV}@media{` + - `:root,.t-daOLKV{--shadows-red:tomato}` + - `}--stitches{--:1 bstpNq}@media{` + - `article{box-shadow:0 0 0 1px var(--shadows-red)}` + - `}` - ) - } + expect(getCssString()).toBe( + `--stitches{--:0 t-iknykm}@media{` + + `:root,.t-iknykm{--colors-red:tomato}` + + `}--stitches{--:1 fMIGFF}@media{` + + `article{color:var(--colors-red)}` + + `}` + ) }) - test('Authors can use a relative token', () => { - { - const { global, getCssString } = createCss({ - theme: { - colors: { - red: 'tomato', - red500: '$red', - }, + test('Authors can use a regular token #2', () => { + const { global, getCssString } = createCss({ + theme: { + shadows: { + red: 'tomato', }, - }) + }, + }) - global({ - article: { - color: '$red500', - }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-eZaaph}@media{` + - `:root,.t-eZaaph{--colors-red:tomato;--colors-red500:var(--colors-red)}` + - `}--stitches{--:1 fdgxsg}@media{` + - `article{color:var(--colors-red500)}` + - `}` - ) - } - - { - const { global, getCssString } = createCss({ - theme: { - shadows: { - red: 'tomato', - red500: '$red', - redUnique: '$$red' - }, - }, - }) + global({ + article: { + boxShadow: '0 0 0 1px $red', + }, + })() - global({ - article: { - boxShadow: '0 0 0 1px $red500', - }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-gxqihb}@media{` + - `:root,.t-gxqihb{--shadows-red:tomato;--shadows-red500:var(--shadows-red);--shadows-redUnique:var(---red)}` + - `}` + - `--stitches{--:1 kyFUgb}@media{` + - `article{box-shadow:0 0 0 1px var(--shadows-red500)}` + - `}` - ) - } + expect(getCssString()).toBe( + `--stitches{--:0 t-daOLKV}@media{` + + `:root,.t-daOLKV{--shadows-red:tomato}` + + `}--stitches{--:1 bstpNq}@media{` + + `article{box-shadow:0 0 0 1px var(--shadows-red)}` + + `}` + ) }) - test('Authors can use an absolute token', () => { - { - const { global, getCssString } = createCss({ - theme: { - colors: { - red: 'tomato', - }, + test('Authors can use a relative token #1', () => { + const { global, getCssString } = createCss({ + theme: { + colors: { + red: 'tomato', + red500: '$red', }, - }) + }, + }) - global({ - article: { - boxShadow: '0 0 0 1px $colors$red', - }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-iknykm}@media{` + - `:root,.t-iknykm{--colors-red:tomato}` + - `}` + - `--stitches{--:1 hNRkrs}@media{` + - `article{box-shadow:0 0 0 1px var(--colors-red)}` + - `}` - ) - } - - { - const { global, getCssString } = createCss({ - theme: { - colors: { - red: 'tomato', - }, - }, - }) + global({ + article: { + color: '$red500', + }, + })() - global({ - article: { - boxShadow: '0 0 0 1px $colors$red', + expect(getCssString()).toBe( + `--stitches{--:0 t-eZaaph}@media{` + + `:root,.t-eZaaph{--colors-red:tomato;--colors-red500:var(--colors-red)}` + + `}--stitches{--:1 fdgxsg}@media{` + + `article{color:var(--colors-red500)}` + + `}` + ) + }) + + test('Authors can use a relative token #1', () => { + const { global, getCssString } = createCss({ + theme: { + shadows: { + red: 'tomato', + red500: '$red', + redUnique: '$$red' }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-iknykm}@media{` + - `:root,.t-iknykm{--colors-red:tomato}` + - `}` + - `--stitches{--:1 hNRkrs}@media{` + - `article{box-shadow:0 0 0 1px var(--colors-red)}` + - `}` - ) - } + }, + }) + + global({ + article: { + boxShadow: '0 0 0 1px $red500', + }, + })() + + expect(getCssString()).toBe( + `--stitches{--:0 t-gxqihb}@media{` + + `:root,.t-gxqihb{--shadows-red:tomato;--shadows-red500:var(--shadows-red);--shadows-redUnique:var(---red)}` + + `}` + + `--stitches{--:1 kyFUgb}@media{` + + `article{box-shadow:0 0 0 1px var(--shadows-red500)}` + + `}` + ) }) - test('Authors can use a negative token', () => { - { - const { global, getCssString } = createCss({ - theme: { - space: { - sp1: '100px', - sp2: '200px', - }, + test('Authors can use an absolute token #1', () => { + const { global, getCssString } = createCss({ + theme: { + colors: { + red: 'tomato', }, - }) + }, + }) - global({ - article: { - marginLeft: '-$sp1', - marginTop: '-$sp2', + global({ + article: { + boxShadow: '0 0 0 1px $colors$red', + }, + })() + + expect(getCssString()).toBe( + `--stitches{--:0 t-iknykm}@media{` + + `:root,.t-iknykm{--colors-red:tomato}` + + `}` + + `--stitches{--:1 hNRkrs}@media{` + + `article{box-shadow:0 0 0 1px var(--colors-red)}` + + `}` + ) + }) + + test('Authors can use an absolute token #2', () => { + const { global, getCssString } = createCss({ + theme: { + colors: { + red: 'tomato', }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-hxjLZl}@media{` + - `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + - `}` + - `--stitches{--:1 kTSGli}@media{` + - `article{margin-left:calc(var(--space-sp1)*-1);margin-top:calc(var(--space-sp2)*-1)}` + - `}` - ) - } - - { - const { global, getCssString } = createCss({ - theme: { - sizes: { - sp1: '10px', - sp2: '20px', - sp3: '30px', - }, + }, + }) + + global({ + article: { + boxShadow: '0 0 0 1px $colors$red', + }, + })() + + expect(getCssString()).toBe( + `--stitches{--:0 t-iknykm}@media{` + + `:root,.t-iknykm{--colors-red:tomato}` + + `}` + + `--stitches{--:1 hNRkrs}@media{` + + `article{box-shadow:0 0 0 1px var(--colors-red)}` + + `}` + ) + }) + + test('Authors can use a negative token #1', () => { + const { global, getCssString } = createCss({ + theme: { + space: { + sp1: '100px', + sp2: '200px', }, - }) + }, + }) + + global({ + article: { + marginLeft: '-$sp1', + marginTop: '-$sp2', + }, + })() + + expect(getCssString()).toBe( + `--stitches{--:0 t-hxjLZl}@media{` + + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + + `}` + + `--stitches{--:1 kTSGli}@media{` + + `article{margin-left:calc(var(--space-sp1)*-1);margin-top:calc(var(--space-sp2)*-1)}` + + `}` + ) + }) - global({ - article: { - marginLeft: '-$sizes$sp1', - width: '$sp1', + test('Authors can use a negative token #2', () => { + const { global, getCssString } = createCss({ + theme: { + sizes: { + sp1: '10px', + sp2: '20px', + sp3: '30px', }, - })() - - expect(getCssString()).toBe( - `--stitches{--:0 t-ereMzu}@media{` + - `:root,.t-ereMzu{--sizes-sp1:10px;--sizes-sp2:20px;--sizes-sp3:30px}` + - `}` + - `--stitches{--:1 kuTEdV}@media{` + - `article{margin-left:calc(var(--sizes-sp1)*-1);width:var(--sizes-sp1)}` + - `}` - ) - } + }, + }) + + global({ + article: { + marginLeft: '-$sizes$sp1', + width: '$sp1', + }, + })() + + expect(getCssString()).toBe( + `--stitches{--:0 t-ereMzu}@media{` + + `:root,.t-ereMzu{--sizes-sp1:10px;--sizes-sp2:20px;--sizes-sp3:30px}` + + `}` + + `--stitches{--:1 kuTEdV}@media{` + + `article{margin-left:calc(var(--sizes-sp1)*-1);width:var(--sizes-sp1)}` + + `}` + ) }) test('Authors can use tokens from the global theme object', () => { @@ -235,7 +227,7 @@ describe('Tokens', () => { `--stitches{--:0 t-hxjLZl}@media{` + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + `}` + - `--stitches{--:1 ejuGBl}@media{` + + `--stitches{--:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + `}` ) @@ -259,7 +251,7 @@ describe('Tokens', () => { })() expect(getCssString()).toBe( - `--stitches{--:1 ejuGBl}@media{article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}}`, + `--stitches{--:1 lcIUgV}@media{article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}}`, ) void `${mytheme}` @@ -267,7 +259,7 @@ describe('Tokens', () => { expect(getCssString()).toBe( `--stitches{--:0 my-theme}@media{` + `.my-theme{--space-sp1:100px;--space-sp2:200px}` + - `}--stitches{--:1 ejuGBl}@media{` + + `}--stitches{--:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + `}` ) @@ -294,7 +286,7 @@ describe('Tokens', () => { `--stitches{--:0 t-hxjLZl}@media{` + `:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` + `}` + - `--stitches{--:1 ejuGBl}@media{` + + `--stitches{--:1 lcIUgV}@media{` + `article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` + `}` ) From 3a9ac0d6a41f92ec257957a584b56793dc135adc Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Thu, 22 Jul 2021 12:08:36 -0400 Subject: [PATCH 2/4] =?UTF-8?q?0.2.x=20=E2=80=94=20Expand=20`peerDependenc?= =?UTF-8?q?y`=20for=20`react`=20to=20include=20v16=20(#648)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: expand react peerDependency coverage to include v16 * nit: Update packages/react/package.json Co-authored-by: Pedro Duarte Co-authored-by: Pedro Duarte --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index feb7e82e..21485493 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -34,7 +34,7 @@ "react": "17.0.2" }, "peerDependencies": { - "react": ">= 17.0.0" + "react": ">= 16.3.0" }, "publishConfig": { "access": "public" From 0694a39c3ac646806b64fc9dd1841394b4604e6c Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Thu, 22 Jul 2021 12:08:45 -0400 Subject: [PATCH 3/4] Fix issue with default variants not applying during composition (#658) --- packages/core/src/features/css.js | 3 ++- packages/core/tests/issue-652.js | 34 +++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 packages/core/tests/issue-652.js diff --git a/packages/core/src/features/css.js b/packages/core/src/features/css.js index 17df6a94..187afe4e 100644 --- a/packages/core/src/features/css.js +++ b/packages/core/src/features/css.js @@ -320,7 +320,8 @@ const getPreparedDataFromComposers = (/** @type {Set} */ composers) => combinedUndefinedVariants.push(...undefinedVariants) for (const name in prefilledVariants) { - combinedPrefilledVariants[name] = prefilledVariants[name] + const data = prefilledVariants[name] + if (combinedPrefilledVariants[name] === undefined || data !== 'undefined' || undefinedVariants.includes(data)) combinedPrefilledVariants[name] = data } } diff --git a/packages/core/tests/issue-652.js b/packages/core/tests/issue-652.js new file mode 100644 index 00000000..c718a53c --- /dev/null +++ b/packages/core/tests/issue-652.js @@ -0,0 +1,34 @@ +import { createCss } from '../src/index.js' + +describe('Issue #652', () => { + test('Applying both variants from the one default variant', () => { + const { css } = createCss() + + const component1 = css({ + variants: { + hue: { + primary: { + color: 'red', + }, + }, + }, + defaultVariants: { + hue: 'primary', + }, + }) + + const component2 = css(component1, { + variants: { + hue: { + primary: { + color: 'blue', + }, + }, + }, + }) + + const expression2 = component2() + + expect(expression2.className).toBe(`c-PJLV c-PJLV-gmqXFB-hue-primary c-PJLV-kydkiA-hue-primary`) + }) +}) From db468ab31dc03a662e7545ecd44cfc796bd78a58 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Thu, 22 Jul 2021 12:50:02 -0400 Subject: [PATCH 4/4] add: text-size-adjust polyfill Fixes #595 --- packages/core/src/convert/toPolyfilledValue.js | 1 + packages/core/tests/universal-autoprefixer.js | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/core/src/convert/toPolyfilledValue.js b/packages/core/src/convert/toPolyfilledValue.js index b7165fd8..887e8739 100644 --- a/packages/core/src/convert/toPolyfilledValue.js +++ b/packages/core/src/convert/toPolyfilledValue.js @@ -13,6 +13,7 @@ export const toPolyfilledValue = { hyphens: (d) => ({ WebkitHyphens: d, hyphens: d }), maskImage: (d) => ({ WebkitMaskImage: d, maskImage: d }), tabSize: (d) => ({ MozTabSize: d, tabSize: d }), + textSizeAdjust: (d) => ({ WebkitTextSizeAdjust: d, textSizeAdjust: d }), userSelect: (d) => ({ WebkitUserSelect: d, userSelect: d }), // logical properties diff --git a/packages/core/tests/universal-autoprefixer.js b/packages/core/tests/universal-autoprefixer.js index 7a8309a6..5161c9f0 100644 --- a/packages/core/tests/universal-autoprefixer.js +++ b/packages/core/tests/universal-autoprefixer.js @@ -85,6 +85,18 @@ describe('Autoprefixer', () => { expect(toString()).toBe('--stitches{--:1 kPCdtQ}@media{x-element{-moz-tab-size:none;tab-size:none}}') }) + test('textSizeAdjust', () => { + const { global, toString } = createCss() + + global({ + 'x-element': { + textSizeAdjust: '100%', + }, + })() + + expect(toString()).toBe('--stitches{--:1 gVFtip}@media{x-element{-webkit-text-size-adjust:100%;text-size-adjust:100%}}') + }) + test('userSelect', () => { const { global, toString } = createCss()