@charcoal-ui/styled 2.4.0 → 2.5.0

package/src/internals/index.ts

@@ -0,0 +1,84 @@
+import { CSSObject } from 'styled-components'
+
+export interface Context {
+  cancelHalfLeadingPx?: number
+  hasVerticalPadding?: boolean
+  boxShadowTransition?: boolean
+  colorTransition?: boolean
+  backgroundColorTransition?: boolean
+}
+
+/**
+ * 絶対にこれを export してはいけない
+ *
+ * さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
+ */
+const internalSym: unique symbol = Symbol('internal')
+
+/**
+ * CSSObject に変換可能なオブジェクトを作成する
+ *
+ * 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
+ *
+ * これ以降メソッドチェーンが続いてもいいし、続かなくても良い
+ */
+export function createInternal({
+  toCSS,
+  context = {},
+}: {
+  toCSS: (context: Context) => CSSObject
+  context?: Context
+}): Internal {
+  return {
+    [internalSym]: {
+      toCSS,
+      context,
+    },
+  }
+}
+
+function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal: Internal) {
+  return internal[internalSym]
+}
+
+export interface Internal {
+  [internalSym]: {
+    toCSS: (context: Context) => CSSObject
+    context: Context
+  }
+}
+
+// half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
+// -> before/afterを入れる
+export const shouldCancelHalfLeading = ({
+  cancelHalfLeadingPx,
+  hasVerticalPadding = false,
+}: Context) => cancelHalfLeadingPx !== undefined && !hasVerticalPadding
+
+/**
+ * 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
+ */
+export function getContext(internals: Internal[]) {
+  return internals.reduce<Context>(
+    (context, internal) => ({
+      ...context,
+      ...__DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context,
+    }),
+    {}
+  )
+}
+
+/**
+ * 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
+ */
+export function toCSSObjects(internals: Internal[]): CSSObject[] {
+  // 1パス目
+  // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
+  const context = getContext(internals)
+
+  // 2パス目
+  // コンテキストを見ながら最適化されたCSSを構築
+  return internals.map((v) =>
+    __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context)
+  )
+}

package/src/util.ts

@@ -1,10 +1,12 @@
 import {
   applyEffect,
   customPropertyToken,
+  disabledSelector,
   filterObject,
   flatMapObject,
+  notDisabledSelector,
 } from '@charcoal-ui/utils'
-import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { CharcoalAbstractTheme, EffectType, Key } from '@charcoal-ui/theme'
 import { CSSObject } from 'styled-components'
 
 /**
@@ -76,8 +78,23 @@ export function objectAssign<T extends any[]>(...sources: T) {
   return Object.assign({}, ...sources) as ObjectAssign<T>
 }
 
-export function objectKeys<V extends object, K extends keyof V>(obj: V) {
-  return Object.keys(obj) as K[]
+/**
+ * Object.keys の返り値の型を厳しめにしてくれるやつ。
+ *
+ * ジェネリクスは基本的に明示して使うことを推奨。
+ *
+ * このライブラリでは Theme オブジェクトのジェネリクスを引き回すケースが多く、
+ * ジェネリクスを省略するといつのまにか keys の返り値が `string | number | symbol` になりがちなので
+ *
+ * @param obj - キーを取りたいオブジェクト。ジェネリクスを省略したとき `never[]` のような使えない型が返って欲しい
+ */
+export function keyof<
+  // このジェネリクスは必須（書かないと返り値が `never[]` になる ）
+  T,
+  // このジェネリクスは書かなくて良い、obj の内容から推論される（ T と矛盾してはいけない ）
+  _ extends T = T
+>(obj: _) {
+  return Object.keys(obj) as unknown as (keyof T & string)[]
 }
 
 export interface ReadonlyArrayConstructor {
@@ -93,6 +110,15 @@ export function extractNonNullKeys<V, K extends keyof V>(obj: {
     .map(([k]) => k) as { [key in K]: V[key] extends null ? never : key }[K][]
 }
 
+/**
+ * 配列じゃなかったら配列にする
+ */
+export function wrapArray<T>(value: ArrayOrSingle<T>): T[] {
+  return Array.isArray(value) ? value : [value]
+}
+
+export type ArrayOrSingle<T> = T | T[]
+
 export const noThemeProvider = new Error(
   '`theme` is invalid. `<ThemeProvider>` is not likely mounted.'
 )
@@ -143,3 +169,20 @@ export function defineThemeVariables(
     ])
   }
 }
+
+export function isSupportedEffect(effect: Key): effect is EffectType {
+  return ['hover', 'press', 'disabled'].includes(effect as string)
+}
+
+export const variable = (value: string) => `var(${value})`
+
+export function onEffectPseudo(effect: EffectType, css: CSSObject) {
+  return effect === 'hover'
+    ? { '&:hover': { [notDisabledSelector]: css } }
+    : effect === 'press'
+    ? { '&:active': { [notDisabledSelector]: css } }
+    : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    effect === 'disabled'
+    ? { [disabledSelector]: css }
+    : unreachable(effect)
+}

package/dist/lib.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAGxC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,OAAO,0LAa0C,CAAA;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,yQAwB3B,CAAA;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;0DAKP,CAAA;AAElB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,uHAapB,CAAA;AAER,oBAAY,QAAQ,CAAC,OAAO,EAAE,UAAU,SAAS,GAAG,IAAI,OAAO,GAAG;IAChE,QAAQ,EAAE,GAAG,IAAI,UAAU,GAAG,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CAC1E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,6NAuB9B,CAAA;AAER,oBAAY,kBAAkB,CAC5B,OAAO,EACP,UAAU,SAAS,MAAM,EACzB,UAAU,SAAS,OAAO,EAAE,IAC1B,OAAO,GAAG;IACZ,QAAQ,EAAE,GAAG,IAAI,UAAU,GAAG,CAC5B,GAAG,IAAI,EAAE,UAAU,KAChB,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,UAAU,CAAC;CACvE,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,WAAoB,CAAA"}