😊

Polishedの便利なhelper5選

2023/12/28に公開

こんにちは、スペースマーケットでエンジニアをしている8zkです。

みなさん、polished使ってますか?
私は使っていません。

というと終わってしまいそうですね。
ただ、個人開発で使ってみてとても便利だと思ったcssのhelperがいくつかあったので紹介したいと思います。
ちなみにpolishedは簡単に説明すると JavaScript でスタイルを記述するための軽量ツールセット とのことです。

GitHub: https://github.com/styled-components/polished
Docs: https://polished.js.org/

導入方法

npm install --save polished

以上です。簡単ですね。

便利なhelper5選

cover

coverはmodalの下に敷くoverrayなどで使えるutility helperです。

const div = styled.div`
  ${cover()}
`

// CSS as JS Output

div: {
  'position': 'absolute',
  'top': '0',
  'right': '0',
  'bottom': '0',
  'left': '0'
}

ellipsis

ellipsisは文章が伸びたときに3点リーダーを表示するためのutility helperです。

const div = styled.div`
  ${ellipsis('250px')}
`

// CSS as JS Output

div: {
  'display': 'inline-block',
  'maxWidth': '250px',
  'overflow': 'hidden',
  'textOverflow': 'ellipsis',
  'whiteSpace': 'nowrap',
  'wordWrap': 'normal'
}

hideText

hideTextはSEOのためのbackground imageに文字をユーザーに表示させずに認識させるutility helperです。

const div = styled.div`
  backgroundImage: url(logo.png);
  ${hideText()};
`

// CSS as JS Output

'div': {
  'backgroundImage': 'url(logo.png)',
  'textIndent': '101%',
  'overflow': 'hidden',
  'whiteSpace': 'nowrap',
}

wordWrap

wordWrapはローマ字の文章の折り返しを制御するutility helperです。

const div = styled.div`
  ${wordWrap('break-word')}
`

// CSS as JS Output

const styles = {
  overflowWrap: 'break-word',
  wordWrap: 'break-word',
  wordBreak: 'break-all',
}
  • easeIn, easeInOut, easeOut

これらはcssのアニメーションをショートハンドでかけるutility helperです。

const easeIn = styled.div`
  transitionTimingFunction: ${easeIn('quad')};
`
const easeInOut = styled.div`
  transitionTimingFunction: ${easeInOut('quad')};
`
const easeOut = styled.div`
  transitionTimingFunction: ${easeOut('quad')};
`

// CSS as JS Output

'easeIn': {
  'transitionTimingFunction': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
}
'easeInOut': {
  'transitionTimingFunction': 'cubic-bezier(0.455,  0.030, 0.515, 0.955)',
}
'easeOut': {
  'transitionTimingFunction': 'cubic-bezier(0.250,  0.460, 0.450, 0.940)',
}

まとめ

以上が私が個人的に便利だなと思ったpolishedのutility helper5選です。
cssは記述が長くなりがちで、「あのスタイルを書きたいけどどうやって書くんだっけ...」となることが多いのでpolishedを使ってストレスフルにCSSを書けると嬉しいですね。
この他にもCOLORやMATH、HELPERS、SHORTHANDSなどたくさんの種類があるので自分だけのお気に入りを見つけてみるのも楽しそうです!

最後に

スペースマーケットでは一緒に働く仲間を募集しています!
少しでも興味を持ってくださったら、ぜひご連絡ください!

https://herp.careers/v1/spmhr/oZ-mn0UYmzXj

https://herp.careers/v1/spmhr/kXsNqAxjlbaI

https://herp.careers/v1/spmhr/qZ-3RxrPtDgM

https://herp.careers/v1/spmhr/m2LlDFRg7Ck0

https://herp.careers/v1/spmhr/SgOXIYU-ovNw

スペースマーケット Engineer Blog

Discussion