From 9f56762fbba3e781dac35f7d22e378a152b4f0b8 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Thu, 29 Jul 2021 11:53:05 -0400 Subject: [PATCH] rename: global to globalCss --- packages/core/src/createCss.js | 2 +- packages/core/src/features/global.d.ts | 15 ---- packages/core/src/features/global.js | 72 ++++++++++--------- packages/core/src/index.js | 11 +-- packages/core/tests/basic.js | 10 +-- packages/core/tests/global-atrules.js | 20 +++--- packages/core/tests/universal-autoprefixer.js | 36 +++++----- .../core/tests/universal-functionality.js | 8 +-- .../tests/universal-logical-properties.js | 16 ++--- packages/core/tests/universal-nesting.js | 18 ++--- .../core/tests/universal-numeric-values.js | 20 +++--- .../universal-polyfill-prefixed-values.js | 8 +-- packages/core/tests/universal-tokens.js | 52 +++++++------- packages/core/types/index.d.ts | 4 +- packages/core/types/sheet.d.ts | 2 +- packages/react/src/index.js | 12 ++-- packages/react/types/index.d.ts | 6 +- packages/react/types/sheet.d.ts | 2 +- 18 files changed, 148 insertions(+), 166 deletions(-) delete mode 100644 packages/core/src/features/global.d.ts diff --git a/packages/core/src/createCss.js b/packages/core/src/createCss.js index 4e3a82e3..18e24e03 100644 --- a/packages/core/src/createCss.js +++ b/packages/core/src/createCss.js @@ -44,7 +44,7 @@ export const createCss = (config) => { const returnValue = { css: createComponentFunction(config, sheet), - global: createGlobalFunction(config, sheet), + globalCss: createGlobalFunction(config, sheet), keyframes: createKeyframesFunction(config, sheet), theme: createThemeFunction(config, sheet), reset() { diff --git a/packages/core/src/features/global.d.ts b/packages/core/src/features/global.d.ts deleted file mode 100644 index d12fc519..00000000 --- a/packages/core/src/features/global.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** CSS styles. */ -export type Styling = { - [prelude: string]: number | string | Styling -} - -/* ========================================================================== */ - -export type Config = { - prefix: string - media: { - [name: string]: string - } -} - -/* ========================================================================== */ diff --git a/packages/core/src/features/global.js b/packages/core/src/features/global.js index ea5d9e77..8c10b24d 100644 --- a/packages/core/src/features/global.js +++ b/packages/core/src/features/global.js @@ -4,47 +4,51 @@ import { define } from '../utility/define.js' import { toCssRules } from '../convert/toCssRules.js' import { toHash } from '../convert/toHash.js' -/** @typedef {import('./global').Config} Config */ -/** @typedef {import('./global').Styling} Styling */ - -/** @typedef {import('../createSheet').SheetGroup} SheetGroup */ - const createGlobalFunctionMap = createMemo() /** Returns a function that applies global styles. */ -export const createGlobalFunction = (/** @type {Config} */ config, /** @type {SheetGroup} */ sheet) => - createGlobalFunctionMap(config, () => (/** @type {Styling} */ style) => { - style = (typeof style === 'object' && style) || {} - - const uuid = toHash(style) - - const render = () => { - 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 [].concat(style['@import'])) { - importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"` - - sheet.sheet.insertRule(`@import ${importValue};`, importIndex++) - } - - delete style['@import'] +export const createGlobalFunction = ( + /** @type {object} */ config, + /** @type {Sheet} */ sheet +) => createGlobalFunctionMap(config, () => ( + /** @type {Style} */ style +) => { + style = typeof style === 'object' && style || {} + + const uuid = toHash(style) + + const render = () => { + 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++) } - toCssRules(style, [], [], config, (cssText) => { - sheet.rules.global.apply(cssText) - }) + delete style['@import'] } - return '' + toCssRules(style, [], [], config, (cssText) => { + sheet.rules.global.apply(cssText) + }) } - return define(render, { - toString: render, - }) + return '' + } + + return define(render, { + toString: render, }) +}) + +/** @typedef {{ [name: string]: number | string | void | Style }} Style */ +/** @typedef {{ rules: { [name: string]: { apply(): void, cache: Set } }, sheet: { insertRule(): number } }} Sheet */ diff --git a/packages/core/src/index.js b/packages/core/src/index.js index e839d0f2..a1b471eb 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -1,16 +1,9 @@ +import { createCss } from './createCss.js' import { getCachedConfig } from './utility/getCachedConfig.js' -/** @type {import('../types/index').createCss} */ export { createCss } from './createCss.js' - -/** @type {import('../types/index').defaultThemeMap} */ export { defaultThemeMap } from './default/defaultThemeMap.js' -/** @type {import('../types/index').css} */ export const css = (...args) => getCachedConfig().css(...args) - -/** @type {import('../types/index').global} */ -export const global = (...args) => getCachedConfig().global(...args) - -/** @type {import('../types/index').keyframes} */ +export const globalCss = (...args) => getCachedConfig().globalCss(...args) export const keyframes = (...args) => getCachedConfig().keyframes(...args) diff --git a/packages/core/tests/basic.js b/packages/core/tests/basic.js index d73476ab..97eb1f8c 100644 --- a/packages/core/tests/basic.js +++ b/packages/core/tests/basic.js @@ -6,7 +6,7 @@ describe('Basic', () => { expect(stitches).toBeInstanceOf(Object) expect(stitches.css).toBeInstanceOf(Function) - expect(stitches.global).toBeInstanceOf(Function) + expect(stitches.globalCss).toBeInstanceOf(Function) expect(stitches.keyframes).toBeInstanceOf(Function) expect(stitches.theme).toBeInstanceOf(Function) }) @@ -49,10 +49,10 @@ describe('Basic', () => { expect(getCssString()).toBe('') }) - test('Functionality of global()', () => { - const { global, getCssString } = createCss() + test('Functionality of globalCss()', () => { + const { globalCss, getCssString } = createCss() - const rendering1of2 = global() + const rendering1of2 = globalCss() const className1of2 = `${rendering1of2}` const cssString1of2 = getCssString() @@ -60,7 +60,7 @@ describe('Basic', () => { expect(className1of2).toBe('') expect(cssString1of2).toBe('') - const rendering2of2 = global({ body: { margin: 0 } }) + const rendering2of2 = globalCss({ body: { margin: 0 } }) const className2of2 = `${rendering2of2}` const cssString2of2 = getCssString() diff --git a/packages/core/tests/global-atrules.js b/packages/core/tests/global-atrules.js index e4d3f22c..84f613ce 100644 --- a/packages/core/tests/global-atrules.js +++ b/packages/core/tests/global-atrules.js @@ -2,11 +2,11 @@ import { createCss } from '../src/index.js' describe('Support @import', () => { test('Authors can define an @import rule', () => { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css` - global({ + globalCss({ '@import': `"${importURL}"`, })() @@ -14,12 +14,12 @@ describe('Support @import', () => { }) test('Authors can define multiple @import rules', () => { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() const importURL1 = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css` const importURL2 = `https://unpkg.com/sanitize.css@12.0.1/typography.css` - global({ + globalCss({ '@import': [`"${importURL1}"`, `"${importURL2}"`], })() @@ -27,11 +27,11 @@ describe('Support @import', () => { }) test('Authors can an @import rule without quotes', () => { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css` - global({ + globalCss({ '@import': importURL, })() @@ -41,9 +41,9 @@ describe('Support @import', () => { describe('Support @font-face', () => { test('Authors can define a @font-face rule', () => { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() - global({ + globalCss({ '@font-face': { fontFamily: 'system-ui', fontStyle: 'normal', @@ -76,9 +76,9 @@ describe('Support @font-face', () => { }) test('Authors can define multiple @font-face rules', () => { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() - global({ + globalCss({ '@font-face': [ { fontFamily: 'system-ui', diff --git a/packages/core/tests/universal-autoprefixer.js b/packages/core/tests/universal-autoprefixer.js index 5161c9f0..d5fa731d 100644 --- a/packages/core/tests/universal-autoprefixer.js +++ b/packages/core/tests/universal-autoprefixer.js @@ -2,9 +2,9 @@ import { createCss } from '../src/index.js' describe('Autoprefixer', () => { test('appearance', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { appearance: 'none', }, @@ -14,9 +14,9 @@ describe('Autoprefixer', () => { }) test('backfaceVisibility', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { backfaceVisibility: 'visible', }, @@ -26,9 +26,9 @@ describe('Autoprefixer', () => { }) test('backgroundClip', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { backgroundClip: 'border-box', }, @@ -38,9 +38,9 @@ describe('Autoprefixer', () => { }) test('clipPath', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { clipPath: 'circle(40%)', }, @@ -50,9 +50,9 @@ describe('Autoprefixer', () => { }) test('hyphens', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { hyphens: 'none', }, @@ -62,9 +62,9 @@ describe('Autoprefixer', () => { }) test('maskImage', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { maskImage: 'none', }, @@ -74,9 +74,9 @@ describe('Autoprefixer', () => { }) test('tabSize', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { tabSize: 'none', }, @@ -86,9 +86,9 @@ describe('Autoprefixer', () => { }) test('textSizeAdjust', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { textSizeAdjust: '100%', }, @@ -98,9 +98,9 @@ describe('Autoprefixer', () => { }) test('userSelect', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { userSelect: 'none', }, diff --git a/packages/core/tests/universal-functionality.js b/packages/core/tests/universal-functionality.js index 378e7b4d..2fe349dc 100644 --- a/packages/core/tests/universal-functionality.js +++ b/packages/core/tests/universal-functionality.js @@ -4,17 +4,17 @@ describe('Configuration', () => { let stitches test('createCss()', () => { - const { css, global } = createCss() + const { css, globalCss } = createCss() expect(css).toBeInstanceOf(Function) - expect(global).toBeInstanceOf(Function) + expect(globalCss).toBeInstanceOf(Function) }) test('createCss({})', () => { - const { css, global } = createCss({}) + const { css, globalCss } = createCss({}) expect(css).toBeInstanceOf(Function) - expect(global).toBeInstanceOf(Function) + expect(globalCss).toBeInstanceOf(Function) }) test('createCss({ prefix: "fusion-" })', () => { diff --git a/packages/core/tests/universal-logical-properties.js b/packages/core/tests/universal-logical-properties.js index 4e8697df..9bbed647 100644 --- a/packages/core/tests/universal-logical-properties.js +++ b/packages/core/tests/universal-logical-properties.js @@ -2,9 +2,9 @@ import { createCss } from '../src/index.js' describe('Logical Properties', () => { test('marginBlock', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { marginBlock: 0, }, @@ -26,9 +26,9 @@ describe('Logical Properties', () => { }) test('marginInline', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { marginInline: 0, }, @@ -50,9 +50,9 @@ describe('Logical Properties', () => { }) test('paddingBlock', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { paddingBlock: 0, }, @@ -74,9 +74,9 @@ describe('Logical Properties', () => { }) test('paddingInline', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ 'x-element': { paddingInline: 0, }, diff --git a/packages/core/tests/universal-nesting.js b/packages/core/tests/universal-nesting.js index cbabe952..03b79869 100644 --- a/packages/core/tests/universal-nesting.js +++ b/packages/core/tests/universal-nesting.js @@ -1,10 +1,10 @@ import { createCss } from '../src/index.js' describe('Nesting', () => { - test('Authors can define global nesting rules', () => { - const { global, getCssString } = createCss() + test('Authors can define globalCss nesting rules', () => { + const { globalCss, getCssString } = createCss() - global({ + globalCss({ 'body > a': { '&:not(:hover)': { textDecoration: 'none', @@ -27,10 +27,10 @@ describe('Nesting', () => { expect(getCssString()).toBe(`--stitches{--:2 c-dweUti}@media{.c-dweUti:not(:hover){text-decoration:none}}`) }) - test('Authors can define recursive global nesting rules', () => { - const { global, getCssString } = createCss() + test('Authors can define recursive globalCss nesting rules', () => { + const { globalCss, getCssString } = createCss() - global({ + globalCss({ p: { 'margin': 0, '& ~ &': { @@ -55,10 +55,10 @@ describe('Nesting', () => { expect(getCssString()).toBe(`--stitches{--:2 c-fuGzNQ}@media{.c-fuGzNQ{margin:0}.c-fuGzNQ ~ .c-fuGzNQ{margin-top:0}}`) }) - test('Authors can define complex recursive global nesting rules', () => { - const { global, getCssString } = createCss() + test('Authors can define complex recursive globalCss nesting rules', () => { + const { globalCss, getCssString } = createCss() - global({ + globalCss({ 'body > p, body > ul': { 'margin': 0, '& ~ &': { diff --git a/packages/core/tests/universal-numeric-values.js b/packages/core/tests/universal-numeric-values.js index 75e0cadb..e158ddc7 100644 --- a/packages/core/tests/universal-numeric-values.js +++ b/packages/core/tests/universal-numeric-values.js @@ -2,11 +2,11 @@ import { createCss } from '../src/index.js' describe('Numeric Values', () => { test('Authors can use numeric values to assign px values', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() expect(toString()).toBe('') - global({ + globalCss({ body: { margin: 0, }, @@ -14,7 +14,7 @@ describe('Numeric Values', () => { expect(toString()).toBe(`--stitches{--:1 cSHHDh}@media{body{margin:0}}`) - global({ + globalCss({ body: { margin: 10, }, @@ -24,11 +24,11 @@ describe('Numeric Values', () => { }) test('Authors can use numeric values to assign numeric values', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() expect(toString()).toBe('') - global({ + globalCss({ body: { lineHeight: 0, width: 0, @@ -37,7 +37,7 @@ describe('Numeric Values', () => { expect(toString()).toBe(`--stitches{--:1 bpctHq}@media{body{line-height:0;width:0}}`) - global({ + globalCss({ body: { lineHeight: 10, width: 10, @@ -49,9 +49,9 @@ describe('Numeric Values', () => { test('Authors can use unit-less properties as known to React', () => { for (let i = 0; i <= 33; i += 11) { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() - global({ + globalCss({ div: { animationIterationCount: i, borderImageOutset: i, @@ -135,9 +135,9 @@ describe('Numeric Values', () => { test(`Author can use the unit-only ${kebabProp} property`, () => { for (let i = 0; i <= 33; i += 11) { - const { global, getCssString } = createCss() + const { globalCss, getCssString } = createCss() - global({ + globalCss({ div: { [prop]: i, }, diff --git a/packages/core/tests/universal-polyfill-prefixed-values.js b/packages/core/tests/universal-polyfill-prefixed-values.js index 7bfac326..a4ac2d1d 100644 --- a/packages/core/tests/universal-polyfill-prefixed-values.js +++ b/packages/core/tests/universal-polyfill-prefixed-values.js @@ -2,9 +2,9 @@ import { createCss } from '../src/index.js' describe('Polyfill prefixed values', () => { test('width:stretch', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ '.gro': { width: 'stretch', }, @@ -16,9 +16,9 @@ describe('Polyfill prefixed values', () => { }) test('width:fit-content', () => { - const { global, toString } = createCss() + const { globalCss, toString } = createCss() - global({ + globalCss({ '.fit': { width: 'fit-content', }, diff --git a/packages/core/tests/universal-tokens.js b/packages/core/tests/universal-tokens.js index 0d954210..b97151fe 100644 --- a/packages/core/tests/universal-tokens.js +++ b/packages/core/tests/universal-tokens.js @@ -2,7 +2,7 @@ import { createCss } from '../src/index.js' describe('Tokens', () => { test('Authors can use a regular token #1', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { colors: { red: 'tomato', @@ -10,7 +10,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { color: '$red', }, @@ -26,7 +26,7 @@ describe('Tokens', () => { }) test('Authors can use a regular token #2', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { shadows: { red: 'tomato', @@ -34,7 +34,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { boxShadow: '0 0 0 1px $red', }, @@ -50,7 +50,7 @@ describe('Tokens', () => { }) test('Authors can use a relative token #1', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { colors: { red: 'tomato', @@ -59,7 +59,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { color: '$red500', }, @@ -75,7 +75,7 @@ describe('Tokens', () => { }) test('Authors can use a relative token #1', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { shadows: { red: 'tomato', @@ -85,7 +85,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { boxShadow: '0 0 0 1px $red500', }, @@ -102,7 +102,7 @@ describe('Tokens', () => { }) test('Authors can use an absolute token #1', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { colors: { red: 'tomato', @@ -110,7 +110,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { boxShadow: '0 0 0 1px $colors$red', }, @@ -127,7 +127,7 @@ describe('Tokens', () => { }) test('Authors can use an absolute token #2', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { colors: { red: 'tomato', @@ -135,7 +135,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { boxShadow: '0 0 0 1px $colors$red', }, @@ -152,7 +152,7 @@ describe('Tokens', () => { }) test('Authors can use a negative token #1', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { space: { sp1: '100px', @@ -161,7 +161,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { marginLeft: '-$sp1', marginTop: '-$sp2', @@ -179,7 +179,7 @@ describe('Tokens', () => { }) test('Authors can use a negative token #2', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { sizes: { sp1: '10px', @@ -189,7 +189,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { marginLeft: '-$sizes$sp1', width: '$sp1', @@ -206,8 +206,8 @@ describe('Tokens', () => { ) }) - test('Authors can use tokens from the global theme object', () => { - const { global, theme, getCssString } = createCss({ + test('Authors can use tokens from the globalCss theme object', () => { + const { globalCss, theme, getCssString } = createCss({ theme: { space: { sp1: '100px', @@ -216,7 +216,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { marginLeft: theme.space.sp1, marginTop: theme.space.sp2, @@ -234,7 +234,7 @@ describe('Tokens', () => { }) test('Authors can use tokens from a new theme object', () => { - const { global, theme, getCssString } = createCss() + const { globalCss, theme, getCssString } = createCss() const mytheme = theme('my-theme', { space: { @@ -243,7 +243,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { marginLeft: mytheme.space.sp1, marginTop: mytheme.space.sp2, @@ -265,8 +265,8 @@ describe('Tokens', () => { ) }) - test('Authors can use tokens from the global theme object', () => { - const { global, theme, getCssString } = createCss({ + test('Authors can use tokens from the globalCss theme object', () => { + const { globalCss, theme, getCssString } = createCss({ theme: { space: { sp1: '100px', @@ -275,7 +275,7 @@ describe('Tokens', () => { }, }) - global({ + globalCss({ article: { marginLeft: theme.space.sp1, marginTop: theme.space.sp2, @@ -312,7 +312,7 @@ describe('Tokens', () => { }) test('Authors can render custom units', () => { - const { global, getCssString } = createCss({ + const { globalCss, getCssString } = createCss({ theme: { sizes: { five: '5px', @@ -320,7 +320,7 @@ describe('Tokens', () => { } }) - global({ + globalCss({ body: { marginLeft: '5--sizes-five' } diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index 40d73ebc..e3420c4b 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -44,8 +44,8 @@ export declare const createCss: CreateCss /** Map of CSS properties to token scales. */ export declare const defaultThemeMap: DefaultThemeMap -/** Returns a function that applies global styles. */ -export declare const global: Sheet['global'] +/** Returns a function that applies globalCss styles. */ +export declare const globalCss: Sheet['globalCss'] /** Returns an object that applies `@keyframes` styles. */ export declare const keyframes: Sheet['keyframes'] diff --git a/packages/core/types/sheet.d.ts b/packages/core/types/sheet.d.ts index a16db4a6..be029a96 100644 --- a/packages/core/types/sheet.d.ts +++ b/packages/core/types/sheet.d.ts @@ -22,7 +22,7 @@ export default interface Sheet< utils: Utils }, prefix: Prefix - global: { + globalCss: { (style: { [prelude: string]: CSS }): { diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 333b3587..d8975cd5 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -1,10 +1,10 @@ import { createCss } from './createCss.js' -import { defaultThemeMap } from '../../core/src/default/defaultThemeMap.js' import { getCachedConfig } from './utility/getCachedConfig.js' -const css = (...args) => getCachedConfig().css(...args) -const global = (...args) => getCachedConfig().global(...args) -const keyframes = (...args) => getCachedConfig().keyframes(...args) -const styled = (...args) => getCachedConfig().styled(...args) +export { createCss } from './createCss.js' +export { defaultThemeMap } from '../../core/src/default/defaultThemeMap.js' -export { createCss, css, global, keyframes, styled, defaultThemeMap } +export const css = (...args) => getCachedConfig().css(...args) +export const globalCss = (...args) => getCachedConfig().globalCss(...args) +export const keyframes = (...args) => getCachedConfig().keyframes(...args) +export const styled = (...args) => getCachedConfig().styled(...args) diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts index 0edccd53..19eca5ce 100644 --- a/packages/react/types/index.d.ts +++ b/packages/react/types/index.d.ts @@ -1,9 +1,9 @@ import type CreateCss from './create-css' import type Sheet from './sheet' -import type StyledComponent from './styled-component' import type * as CSSUtil from './css-util' import type * as Default from './default' +import type * as StyledComponent from './styled-component' export type { CreateCss, Sheet } @@ -44,8 +44,8 @@ export declare const createCss: CreateCss /** Map of CSS properties to token scales. */ export declare const defaultThemeMap: DefaultThemeMap -/** Returns a function that applies global styles. */ -export declare const global: Sheet['global'] +/** Returns a function that applies globalCss styles. */ +export declare const globalCss: Sheet['globalCss'] /** Returns an object that applies `@keyframes` styles. */ export declare const keyframes: Sheet['keyframes'] diff --git a/packages/react/types/sheet.d.ts b/packages/react/types/sheet.d.ts index 8dd5d9f2..a321ac88 100644 --- a/packages/react/types/sheet.d.ts +++ b/packages/react/types/sheet.d.ts @@ -22,7 +22,7 @@ export default interface Sheet< utils: Utils }, prefix: Prefix - global: { + globalCss: { (style: { [prelude: string]: CSS }): {