typescript-test.ts

import * as polished from './lib/index'
import { ENGINE_METHOD_NONE } from 'constants'

/*
 * Math
 */
const math = polished.math('20px + 10px')

/*
 * Mixins
 */
let between: string = polished.between('20px', '100px', '400px', '1000px')
between = polished.between('20px', '100px')

let clearFix: object = polished.clearFix()
clearFix = polished.clearFix('&')

let cover: object = polished.cover()
cover = polished.cover('100px')

let ellipsis: object = polished.ellipsis()
ellipsis = polished.ellipsis('250px')

let fluidRange: object = polished.fluidRange(
  {
    prop: 'padding',
    fromSize: '20px',
    toSize: '100px',
  },
  '400px',
  '1000px'
)

fluidRange = polished.fluidRange(
  [
    {
      prop: 'padding',
      fromSize: '20px',
      toSize: '100px',
    },
    {
      prop: 'margin',
      fromSize: '5px',
      toSize: '25px',
    },
  ],
  '400px',
  '1000px'
)

fluidRange = polished.fluidRange({
  prop: 'padding',
  fromSize: '20px',
  toSize: '100px',
})

const fontFace: object = polished.fontFace({
  fontFamily: 'Sans-Pro',
  fontFilePath: 'path/to/file',
  fontStretch: '',
  fontStyle: '',
  fontVariant: '',
  fontWeight: '',
  fileFormats: [''],
  localFonts: [''],
  unicodeRange: '',
})

const hideText: object = polished.hideText()
const hideVisually: object = polished.hideVisually()

let hiDPI: string = polished.hiDPI()
hiDPI = polished.hiDPI(1.5)

const normalize: object = polished.normalize()

const radialGradient: object = polished.radialGradient({
  colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  extent: 'farthest-corner at 45px 45px',
  position: 'center',
  shape: 'ellipse',
  fallback: '',
})

const linearGradient: object = polished.linearGradient({
  colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  toDirection: 'to top right',
  fallback: '#FFF',
})

let retinaImage: object = polished.retinaImage('')
retinaImage = polished.retinaImage('', '')
retinaImage = polished.retinaImage('', '', '')
retinaImage = polished.retinaImage('', '', '', '')
retinaImage = polished.retinaImage('', '', '', '', '')

const timingFunctions = polished.timingFunctions('easeInBack')

const triangle = polished.triangle({
  backgroundColor: 'red',
  foregroundColor: 'red',
  pointingDirection: 'right',
  width: 100,
  height: 100,
})

let wordWrap: object = polished.wordWrap()
wordWrap = polished.wordWrap('')

/*
 * Colors
 */
const adjustHue: string = polished.adjustHue(180, '#448')
const complement: string = polished.complement('#448')
const darken: string = polished.darken(0.2, '#FFCD64')
const desaturate: string = polished.desaturate(0.2, '#CCCD64')
const getContrast: number = polished.getContrast('#444', '#fff')
const getLuminance: number = polished.getLuminance('#6564CDB3')
const grayscale: string = polished.grayscale('#CCCD64')

let hsl: string = polished.hsl(359, 0.75, 0.4)
hsl = polished.hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })

let hsla: string = polished.hsla(359, 0.75, 0.4, 0.7)
hsla = polished.hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.7 })

const invert: string = polished.invert('#CCCD64')
const lighten: string = polished.lighten(0.2, '#CCCD64')
const meetsContrastGuidelines: object = polished.meetsContrastGuidelines('#444', '#fff')
const mix: string = polished.mix(0.5, '#f00', '#00f')
const opacify: string = polished.opacify(0.1, 'rgba(255, 255, 255, 0.9)')
const parseToHsl = polished.parseToHsl('rgb(255, 0, 0)')
const parseToRgb = polished.parseToRgb('rgb(255, 0, 0)')
const readableColor = polished.readableColor('rgb(255,0,0)')

let rgb: string = polished.rgb(255, 205, 100)
rgb = polished.rgb({ red: 255, green: 205, blue: 100 })

let rgba: string = polished.rgba(255, 205, 100, 0.7)
rgba = polished.rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })

const saturate: string = polished.saturate(0.2, '#CCCD64')
const setHue: string = polished.setHue(42, '#CCCD64')
const setLightness: string = polished.setLightness(0.2, '#CCCD64')
const setSaturation: string = polished.setSaturation(0.2, '#CCCD64')
const shade: string = polished.shade(0.25, '#00f')
const tint: string = polished.tint(0.25, '#00f')

let toColorString: string = polished.toColorString({ red: 255, green: 205, blue: 100 })
toColorString = polished.toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })
toColorString = polished.toColorString({ hue: 240, saturation: 1, lightness: 0.5 })
toColorString = polished.toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })

const transparentize: string = polished.transparentize(0.1, '#fff')

/*
 * Shorthands
 */
const animation: object = polished.animation(['rotate', 1, 'ease-in-out'], ['colorchange', '2s'])
const backgroundImages: object = polished.backgroundImages(
  'url("/image/background.jpg")',
  'linear-gradient(red, green)'
)
const backgrounds: object = polished.backgrounds(
  'url("/image/background.jpg")',
  'linear-gradient(red, green)',
  'center no-repeat'
)
const border: object = polished.border('top', '1px', 'solid', 'red')
const borderColor: object = polished.borderColor('red', null, undefined, 'green')
const borderRadius: object = polished.borderRadius('top', '5px')
const borderStyle: object = polished.borderStyle('solid', null, undefined, 'dashed')
const borderWidth: object = polished.borderWidth('12px', null, undefined, '24px')
const buttons: string = polished.buttons(null, undefined, 'active')
const margin: object = polished.margin('12px', null, undefined, '24px')
const padding: object = polished.padding('12px', null, undefined, '24px')

let position: object = polished.position(null)
polished.position('absolute', '12px', null, undefined, '24px')
position = polished.position(null, '12px', null, undefined, '24px')
position = polished.position(undefined, '12px', null, undefined, '24px')

let size: object = polished.size('')
size = polished.size('', '')

const textInputs: string = polished.textInputs('active', null, undefined)
const transitions: object = polished.transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')

/*
 * Helpers
 */
const directionalProperty: object = polished.directionalProperty(
  'padding',
  '12px',
  null,
  undefined,
  '24px'
)

let em: string = polished.em('12px')
em = polished.em(12)

const getValueAndUnit: [number | string, string | void] = polished.getValueAndUnit('100px')

let modularScale: string = polished.modularScale(2)
modularScale = polished.modularScale(2, 2)
modularScale = polished.modularScale(2, '')
modularScale = polished.modularScale(2, 2, 5)
modularScale = polished.modularScale(2, 2, 'minorSecond')

let rem: string = polished.rem('12px')
rem = polished.rem(12)

const remToPx: string = polished.remToPx('1.6rem', '10px')

const stripUnit: number | string = polished.stripUnit('100px')