Change strict to true in tsconfig.json

.changeset/slimy-taxis-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@teiler/core": patch
+---
+
+Change `strict` to `true` in `tsconfig.json`

packages/core/src/constructor.test.ts

@@ -206,7 +206,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'teiler-1ep7axc',
       styles: [[['from { background-color: red; } to { background-color: green; }'], []]],
       tag: null,
@@ -229,7 +229,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'tytz3vv',
       styles: [[['body { color: red; }'], []]],
       tag: null,

packages/core/src/constructor.ts

@@ -11,17 +11,17 @@ type Arguments<Props> = {
   theme: DefaultTheme
 } & Props
 
-type CSS = { styles: Style<unknown>[]; id: string; __css__: true }
-type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS
+type CSS<Props> = { styles: Style<Props>[]; id: string; __css__: true }
+type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS<Props>
 type Raw = string | number
 type Properties<Props> = Expression<Props> | StyleDefinition<HTMLElements, Props> | Pattern<HTMLElements, Props> | TeilerComponent<HTMLElements, Props> | Raw
 type Style<Props> = [string[], Properties<Props>[]]
 
-type StyleDefinition<Target extends HTMLElements | null, Props> = {
+type StyleDefinition<Target extends HTMLElements, Props> = {
   type: 'component' | 'global' | 'keyframes'
   id: string
   styles: Array<Style<Props>>
-  tag: Target | null
+  tag: Target
 }
 
 type TeilerComponent<Target extends HTMLElements, Props> = {
@@ -37,23 +37,23 @@ function styled<Props, Type extends TeilerComponent<HTMLElements, Props>>(
   createComponent: CreateCallback<Type, Props>,
   stringOrBinded: TeilerComponent<HTMLElements, Props> | ReadonlyArray<string>,
   ...properties: Properties<Props>[]
-): ExtendCallback<Type, Props> | Type {
+): Type | ExtendCallback<Type, Props> {
   if (Array.isArray(stringOrBinded)) {
     const strings = stringOrBinded as ReadonlyArray<string>
     const style: Style<Props> = [Array.from(strings), properties]
     const styleDefinition = compiler(tag, [style])
     return createComponent(styleDefinition)
   } else {
     const binded = stringOrBinded as TeilerComponent<HTMLElements, Props>
-    return (strings: ReadonlyArray<string>, ...properties: Expression<Props>[]) => {
+    return (strings: ReadonlyArray<string>, ...properties: Properties<Props>[]) => {
       const style: Style<Props> = [Array.from(strings), properties]
       const styleDefinition = compiler(binded.styleDefinition.tag, [...binded.styleDefinition.styles, style])
       return createComponent(styleDefinition)
     }
   }
 }
 
-type Compiler = <Target extends HTMLElements | null, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
+type Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
 
 const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
@@ -66,7 +66,7 @@ const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, st
   }
 }
 
-const global: Compiler = <Target extends HTMLElements, Props>(tag: null, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
+const global: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
 
   return {
@@ -89,14 +89,14 @@ function keyframes(strings: ReadonlyArray<string>, ...properties: Raw[]): StyleD
   }
 }
 
-function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS {
+function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS<Props> {
   const style: Style<Props> = [Array.from(strings), properties]
   const styles = [style]
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
   return { styles: styles, id: 't' + hash(id), __css__: true }
 }
 
-function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>, props: Arguments<unknown>): string | null {
+function insert<Props = {}>(sheet: Sheet, definition: StyleDefinition<HTMLElements, Props>, props: Arguments<Props>): string | null {
   const { styles, type } = definition
   const { css, definitions } = compile(styles, props)
   const compiledId = hash(css)
@@ -120,5 +120,5 @@ function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>
   return null
 }
 
-export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
+export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Raw, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
 export { component, css, global, insert, keyframes, styled }

packages/core/src/css.test.ts

@@ -127,7 +127,7 @@ describe('compile', () => {
   })
 
   test('with css', () => {
-    const css: CSS = {
+    const css: CSS<{}> = {
       id: 't1vxhd59',
       styles: [[['background: ', ';'], ['red']]],
       __css__: true,

packages/core/src/css.ts

@@ -1,4 +1,4 @@
-import type { Arguments, HTMLElements } from './constructor'
+import type { Arguments, HTMLElements, Raw } from './constructor'
 import type { Pattern, Style, StyleDefinition } from '.'
 
 import { middleware, prefixer, rulesheet, serialize, stringify, compile as stylisCompile } from 'stylis'
@@ -11,10 +11,10 @@ type CompileResult<Props> = {
 }
 
 function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): CompileResult<Props> {
-  return styles.reduce(
+  return styles.reduce<CompileResult<Props>>(
     (result, [strings, properties]) => {
       const compiled = strings
-        .reduce((acc, strings, index) => {
+        .reduce<(string | true | Raw)[]>((acc, strings, index) => {
           acc = [...acc, strings]
 
           const property = properties.at(index)
@@ -67,7 +67,7 @@ function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): C
 }
 
 function transpile(css: string): string {
-  const results = []
+  const results: string[] = []
 
   serialize(
     stylisCompile(css),

packages/core/src/pattern.test.ts

@@ -57,13 +57,13 @@ describe('pattern', () => {
   })
 })
 
-type TestComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & {
+type TestComponent<Target extends HTMLElements> = TeilerComponent<Target, {}> & {
   render(): string
 }
 
 const sheet = createStyleSheet({})
 
-const createComponent = <Target extends HTMLElements, Props>(styles: StyleDefinition<Target, Props>): TestComponent<Target, Props> => {
+const createComponent = <Target extends HTMLElements>(styles: StyleDefinition<Target, {}>): TestComponent<Target> => {
   return {
     styleDefinition: styles,
     render() {

packages/core/src/pattern.ts

@@ -6,29 +6,29 @@ import hash from './hash'
 
 type PropertiesWithPattern<Props> = Properties<Props> | Pattern<HTMLElements, Props>
 
-type Pattern<Target extends HTMLElements | null, Props> = {
+type Pattern<Target extends HTMLElements, Props = {}> = {
   styles: Style<Props>[]
   tag: Target
   id: string
   __pattern__: true
 }
 
-type ExtendCallback<Target extends HTMLElements | null, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
+type ExtendCallback<Target extends HTMLElements, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
 
-type Constructor<Target extends HTMLElements | null> = {
-  <Props>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
-  <Props>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+type Constructor<Target extends HTMLElements> = {
+  <Props = {}>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  <Props = {}>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
 }
 
-type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElements]: Constructor<K> } & { global: Constructor<null> }
-
 type Infer<Component, Props> = Component extends Pattern<HTMLElements, infer P> ? P & Props : Props
 
-const construct = (tag: HTMLElements) => {
-  return <Props>(stringOrPattern: Pattern<HTMLElements, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<HTMLElements, Props> | ExtendCallback<HTMLElements, Props> => {
+const construct = <Target extends HTMLElements>(tag: Target) => {
+  function create<Props = {}>(stringOrPattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  function create<Props = {}>(stringOrPattern: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+  function create<Props>(stringOrPattern: Pattern<Target, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<Target, Props> | ExtendCallback<Target, Props> {
     if ('__pattern__' in stringOrPattern) {
       return <Component>(strings: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => {
-        const style: Style<Props> = [Array.from(strings), properties]
+        const style: Style<Infer<Component, Props>> = [Array.from(strings), properties]
         const styles = [...stringOrPattern.styles, style]
         const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
         return { styles: styles, id: 't' + hash(id), tag: stringOrPattern.tag, __pattern__: true }
@@ -41,11 +41,18 @@ const construct = (tag: HTMLElements) => {
       return { styles: styles, id: 't' + hash(id), tag, __pattern__: true }
     }
   }
+
+  return create
 }
 
-const pattern = construct('div')
+type HTMLElementsWithoutNull = Exclude<HTMLElements, null>
+type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElementsWithoutNull]: Constructor<K> } & { global: Constructor<null> }
+
+const pattern = construct('div') as ConstructorWithTags
 
 tags.forEach((tag) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   pattern[tag] = construct(tag)
 })
 

packages/core/src/sheet/index.test.ts

@@ -17,7 +17,7 @@ describe('createStyleSheet CSR', () => {
 })
 
 describe('createStyleSheet SSR', () => {
-  beforeAll(() => (global.document = undefined))
+  beforeAll(() => (global.document = undefined!))
 
   test('should create a new StyleSheet object', () => {
     const sheet = createStyleSheet({})

packages/core/src/sheet/tag.ts

@@ -1,7 +1,7 @@
 type Tag = {
   insertRule(key: string, rule: string): number
   deleteRule(key: string): void
-  getRule(key: string): string
+  getRule(key: string): string | null
   getAllRules(): string
   getAllKeys(): string[]
   [k: string]: unknown
@@ -55,7 +55,7 @@ export function createBrowserTag(container?: HTMLElement): Tag {
       return inserted.size
     },
     deleteRule: function (key: string): void {
-      rules.removeChild(inserted.get(key))
+      rules.removeChild(inserted.get(key)!)
       inserted.delete(key)
     },
     getRule: function (key: string): string | null {

packages/core/src/tags.ts

@@ -131,5 +131,5 @@ const elements = [
   'text',
 ] as const
 
-export default new Set(elements)
-export type HTMLElements = (typeof elements)[number]
+export default elements
+export type HTMLElements = (typeof elements)[number] | null

packages/core/tsconfig.json

@@ -8,7 +8,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "strict": false,
+    "strict": true,
     "strictPropertyInitialization": false,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,