Search for a command to run...
Styling Utilities Inspired By Sass for CSS-inJS
🚀 Tech Lead / Lead Developer 🔥 Writing about CSS, JavaScript, Typescript, Angular, Vue.js, Nuxt.js, Serverless functions, and a lot more web-related topics. https://byrayray.dev/
No comments yet. Be the first to comment.
A true story about how one "efficient" non-technical decision doomed two projects, ignited a team conflict, and cost us a mountain of technical debt.
How to use a simple branch policy to add your whole team with a single rule
How I Use AI as a Tech Lead to Stay in Control
Without the headache 🧠😅
Back in 2022, when I first heard the term "AI-powered developer", I pictured a robot typing code while I sat back. Today, that "robot" looks more like a VS Code extension, a CLI plugin, or even a teammate suggesting solutions right when I need them. ...
Sass functions like lighten(), darken(), complement(), invert() are pretty useful. I was wondering if there was something for styled-components. Well, I found the great library Polished.js.
The nice thing about this library is that it doesn’t matter if you use styled-components, emotion, jss, aphrodite, radium, or just inline styling in JavaScript. It works with all of them!
It is a utility library, so you only import what you need to save some bytes for the user. Do you need typings for TypeScript? They got you covered!
So let’s dive into how to use Polished.js.
Running the all-familiar command is enough for the installation.
npm install --save polished
# or if you're using yarn
yarn add polished
Import the utility function you need in the JavaScript, TypeScript, or React component file.
import { cssVar, darken } from 'polished'
My favorite functions are lighten(), darken(), complement() and linearGradient() but they have loads more functions in their documentation.
To demonstrate how you can use Polished.js with styled-components, we will create a component for a <input> field. I'm gonna use the CSS variable to make it darker for the background of my <input> field.
My CSS variables are defined in the global.css file in the public folder. I'm currently using this in a Next.js project.
The cssVar() function can pull the variables from the root and turn them to a darker color.
import styled from 'styled-components'
import { cssVar, darken } from 'polished'
const Input = styled.input<HTMLInputElement>`
padding: 0.8rem 0.8rem;
min-width: 300px;
outline: 0;
border: 1px solid var(--greyLight);
border-radius: 8px;
background: ${darken(0.01, '#f1f1f1')};
&:focus {
border: 1px solid var(--sec-color);
}
`
export default Input
The output color becomes #eee. So I don't have to decide that for myself.
But I think it would be even better to define this as its own color in the root component from my React/Next application. I have a <Layout> component as my root component, so it's best to define those CSS variables in there.
// Layout.tsx
import styled, { createGlobalStyle } from 'styled-components'
import { Footer } from 'styles/styled'
const LayoutEl = styled.div`
background: #fff;
min-height: calc(100vh - 1rem);
height: 100%;
box-sizing: border-box;
padding-bottom: 82px;
position: relative;
`
const Layout = (props) => {
return (
<LayoutEl>
<GlobalStyle />
// more code
{props.children}
<Footer />
</LayoutEl>
)
}
export default Layout
Since I want my colors to be available in my JavaScript, I’ve created a function with all the colors in it. I’ve added this to a separate file to make it easier to re-use in the future. Now I can assign this to a const variable root to make it available in a component.
// global-styles.tsx
import { lighten, darken } from 'polished'
import styled, { createGlobalStyle } from 'styled-components'
const rootColors = () => {
const mainColor = '#00E271'
const secColor = '#0076FF'
const white = '#fff'
const grey = '#ccc'
const greyLight = lighten(0.01, grey)
const greyDarken = darken(0.01, grey)
return {
mainColor,
secColor,
white,
grey,
greyLight,
greyDarken,
}
}
export const root = rootColors()
export const GlobalStyle = createGlobalStyle`
:root {
--header-height: calc(48px + 2rem);
--main-color: ${root.mainColor};
--sec-color: ${root.secColor};
--white: ${root.white};
--grey: ${root.grey};
--greyLight: ${root.greyLight};
--greyDarken: ${root.greyDarken};
}
`
Now we can use the <GlobalStyle /> component in the <Layout /> component. Now all the CSS variables are available across the application.
// Layout.tsx
import styled from 'styled-components'
import { Footer } from 'styles/styled'
import { GlobalStyle } from '../styles/styled'
const LayoutEl = styled.div`
background: #fff;
min-height: calc(100vh - 1rem);
height: 100%;
box-sizing: border-box;
padding-bottom: 82px;
position: relative;
`
const Layout = (props) => {
return (
<LayoutEl>
<GlobalStyle />
// more code
{props.children}
<Footer />
</LayoutEl>
)
}
export default Layout
So in my <Input /> component, I can use my CSS variables like any other component.
// Input.tsx
import styled from 'styled-components'
const Input = styled.input<HTMLInputElement>`
padding: 0.8rem 0.8rem;
min-width: 300px;
outline: 0;
border: 1px solid var(--greyLight);
border-radius: 8px;
background: var(--greyDarken);
&:focus {
border: 1px solid var(--sec-color);
}
`
export default Input
I hope you learned something new from this post. If you use other utilities for your CSS-in-JS, please share them. I love to hear them!
I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.
Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥
If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁