## Background

> Custom built Gatsby site -> Gatsby site based on [Josh](https://joshwcomeau.com/)'s site -> Next.js site based on [Paco](https://paco.sh/)'s site

After months of testing, I realise that a simple and robust tool is truely what I need to spread my thoughts.



Inspired by [Leon](http://leongao.com/), I started to redesign this whole site.

Restart

I had an idea for caching SVG paths. Not the usual kind of async request caching of remote SVGs, but local re-use of DOM elements that have already rendered.

SVG's [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) element allows re-use of an existing DOM element, without manually duplicating the node. It works like this:

```html

<svg>
  <circle id="circle" cx="5" r="5" fill="black" />
</svg>


<svg>
  <use href="#circle" />
</svg>


```

## Setup

When using an icon set like [Feather](https://feathericons.com/) in React, I prefer to use a higher-order component (HOC) and a generic `Icon` component to render each icon with consistent properties. We'll use this HOC to demonstrate SVG caching:

```jsx
import { memo } from 'react'

const withIcon = (icon, opts) => {
  const Icon = props => {
    const { size = 24, color = 'currentColor' } = props

    return (
      <svg
        viewBox="0 0 24 24"
        width={size}
        height={size}
        stroke="currentColor"
        style={{
          color
        }}
        dangerouslySetInnerHTML={{
          __html: icon
        }}
      />
    )
  }

  return memo(Icon)
}

export default withIcon
```

Each icon is simply the SVG contents wrapped with the HOC:

```jsx
const ArrowLeft = withIcon('<path d="M21 12H3m0 0l6.146-6M3 12l6.146 6" />')
```

## Caching

We'll use React context to add an icon cache. First, create a new context and the appropriate hook to access it:

```jsx
export const IconCache = React.createContext(null)
export const useIconCache = () => React.useContext(IconCache)
```

Setup the provider at the application root. The cache will be a plain, empty object where each key is the icon string and each value is the cached id.

```jsx raw
const App = () => (
  <IconCache.Provider value={{}}>{/* ... */}</IconCache.Provider>
)
```

Inside of `Icon`, read the cache from context and check if this icon has a cached id. If not, generate the new id and add it to the cache:

```jsx
const cache = useIconCache()

let cachedId = cache[icon]

if (!cachedId) {
  cachedId = `icon-` + hash(icon).toString(16)
  cache[icon] = cachedId
}
```

Generate a stable id by hashing the icon using the [fnv1a](https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function) <a href="#footnote"><sup>1</sup></a> algorithm (commonly used in CSS-in-JS libraries) and then converting it to hexadecimal for a smaller string:

```jsx
import hash from 'fnv1a'
```

If we have a cached id, we can render the `<use>` tag instead of inserting the entire icon again. If this icon has not rendered before, wrap it in a group tag and attach the unique id.

```jsx highlight=11-13
return (
  <svg
    viewBox="0 0 24 24"
    width={size}
    height={size}
    stroke="currentColor"
    style={{
      color
    }}
    dangerouslySetInnerHTML={{
      __html: cachedId
        ? `<use href="#${cachedId}" />`
        : `<g id="${id}">${icon}</g>`
    }}
  />
)
```

## Conclusion

Here's our new `withIcon` HOC with caching:

```jsx highlight=2,4-5,10,12,13,15-18,30-32
import { memo } from 'react'
import hash from 'fnv1a'

export const IconCache = React.createContext({})
export const useIconCache = () => React.useContext(IconCache)

const withIcon = icon => {
  const Icon = props => {
    const { size = 24, color = 'currentColor' } = props
    const cache = useIconCache()

    const cachedId = cache[icon]
    let id

    if (!cachedId) {
      id = 'icon-' + hash(icon).toString(16)
      cache[icon] = id
    }

    return (
      <svg
        viewBox="0 0 24 24"
        width={size}
        height={size}
        stroke="currentColor"
        style={{
          color
        }}
        dangerouslySetInnerHTML={{
          __html: cachedId
            ? `<use href="#${cachedId}" />`
            : `<g id="${id}">${icon}</g>`
        }}
      />
    )
  }

  return memo(Icon)
}

export default withIcon
```

Rendering the same icon multiple times will reuse existing DOM elements, decreasing the size of your HTML:

```jsx raw
/* React */

<IconCache.Provider value={{}}>
  <ArrowLeft />
  <ArrowLeft />
  <ArrowLeft />
</IconCache.Provider>

/* HTML Output:
  <svg>
    <g id="icon-dacb5a47"><path d="M21 12H3m0 0l6.146-6M3 12l6.146 6" /></g>
  </svg>

  <svg>
    <use href="#icon-dacb5a47" />
  </svg>

  <svg>
    <use href="#icon-dacb5a47" />
  </svg>
*/
```

In this example, the cached version is about 40% fewer characters!

You can still customize each icon, because the props apply to the outer svg element and don't involve the inner elements at all:

```jsx
<ArrowLeft />
<ArrowLeft size={30} color="blue" />
<ArrowLeft size={50} color="red" />
```

---

Here's a [live demo](https://svgcache.vercel.app) and the [demo source code](https://github.com/pacocoursey/svgcache).

<div id="footnote"></div>

1. You don't have to use fnv1a, any stable id generation technique will work. Just make sure it's consistent between server and client to avoid hydration mismatch.

Smaller DOM size by reusing existing SVG icons

SVG Caching with <use>


If you want to add custom CSS to a website without using a [browser extension](https://userstyles.org/), you can proxy the site using a serverless function and inject a new stylesheet.

I love [Aaron Swartz's blog](http://aaronsw.com/weblog/archive), but the font size is tiny, the content is not centered, and the colors aren't late-night friendly. Let's improve it.

Create `api/index.js` and add a server-side fetching library like [node-fetch](https://github.com/node-fetch/node-fetch):

```js
const fetch = require('node-fetch')

module.exports = (req, res) => {
  res.end()
}
```

Fetch the HTML of the actual site:

```js
module.exports = (req, res) => {
  const html = (
    await (await fetch('http://aaronsw.com' + req.url)).text()
  )
  res.end()
}
```

Add a `link` tag to the head:

```js
const html = (
  await (await fetch('http://aaronsw.com' + req.url)).text()
).replace(
  '</head>',
  '<link media="all" href="/custom.css" rel="stylesheet" /></head>"
)
```

Return the modified HTML. Use `.send` instead of passing the string to `.end` so that the correct content headers are set.

```js
res.send(html)
```

If the website content you're proxying doesn't update frequently, you should add caching of your serverless function's response. Aaron passed away a few years ago, so his blog isn't updated anymore.

The final function looks like this:

```js
const fetch = require('node-fetch')

module.exports = async (req, res) => {
  const html = (
    await (await fetch('http://aaronsw.com' + req.url)).text()
  ).replace(
    '</head>',
    '<link media="all" href="/custom.css" rel="stylesheet" /></head>'
  )

  // 1 year
  res.setHeader('Cache-Control', 'max-age=0, s-maxage=31536000')

  res.send(html)
  res.end()
}
```

Add your custom CSS in a `custom.css` file.

## Deploy

Create a `vercel.json` configuration file that rewrites all requests to your deployment through our `api/index` serverless function:

```json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}
```

Deploy with Vercel:

```bash
$ vercel
```

Visit your deployment to see the proxy in action. My Aaron Swartz blog proxy is available here: [aaronsw.now.sh/weblog/archive](https://aaronsw.now.sh/weblog/archive).



Adding arbitrary styles to a website without browser extensions.

Custom CSS via Serverless Proxy

![HYG v3](/blog/hyg-v3/hyg.jpg)

Around two years ago, I took over this project and was responsible for the UI design and frontend development since then. I've designed a version called **v2.0** before, but it's just semi-finished. So at the end of 2019, I decided to make a whole new design as well as rewrite the code in React instead of Vue.

# Abstract

The original project was based on Vue 2, for better development, I spent around one month to redesign and recode everything from ground up in React. To save time, I used the package of **Umi + Ant Design + Ant Mobile + Dva**.

1. **Whole New Design** - I redesigned every single page。
2. **New Code Base** - Mainly used React, Dva and Antd UI Components.
3. **Dark Mode** - I Followed the [guide](https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/) from CSS-Tricks to implement the Dark Mode. I've already used [Styled Components](https://styled-components.com/) for several React projects and what impressed me is it can make the file structure more distinct, just like Vue's single file structure.

# Design

I wanna talk this part like a seasoned web designer, however, I don't even know the color design principle.😅 Thus, I cannot tell you why I apply this color or that layout. What always prompts me to do design stuff is quite simple - I just like it! This is what I want! Besides, I enjoy playing with new things and partly know a little coding stuff.



Thanks to [Remix Icon](https://remixicon.com/) for offering such concise and practical icons.

# Code

This is not a complicated project, including 11 pages which are Login, Logout, Forget Password, Home, Me, Flipped, Search, Profile, User Detail, Verification, File Uploads.

The homepage uses [`react-swipeable-views`](https://github.com/oliviertassinari/react-swipeable-views) to aggregate the common used features, and the **Popup Filter** is also integrated into the Tab button to save more space. And that is inspired by the Zhihu APP. However, there is a bit of lag in switching Tabs on the real device, maybe my iPhone 6SP should retire, but considering that the next version will be launched with the new section called "circle", if the lag is more serious, I'll think over to customize a Tab component with virtualization.

The user card list uses the [ListView](https://mobile.ant.design/components/list-view-cn/) from [Ant Mobile](https://mobile.ant.design/). I think it used a virtual list technique? I haven't dig deep into that, but the actual experience seems to be smooth. There is another problem that some user cards will not update the view on the theme switch. It might be related to virtualization and is ready to be improved in the next version.

Another expected function is to remember the scroll position, so that it can return to the current browsing position when the user comes back from other pages. Fortunately, `ListView` provides an `onScroll` API, but when `ref` is an object, it will not trigger view update. Instead of applying the [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) according to the official document, I used `requestAnimationFrame` to reposition in `useEffect`. I have no idea about the difference in performance, but from the intuitive feeling of page switching, there is an obvious white screen flashing when routing to other page with `useCallback` while the transition with `requestAnimationFrame` is smoother.

# Conclusion

This is a project without Party A and Deadline, I have the full control over design and code, just like doing my own project. So it's quite a **free** and pleasant experience.

See you next version.

A non-profit social platform for blind dating.

HYG V3 Updates


[SWR](https://github.com/zeit/swr) is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. <a href="#footnote"><sup>1</sup></a>

Let's look at an example of a `useUsername` hook:

```js
const useUsername = () => {
  return useState('')
}

const UsernameInput = () => {
  const [username, setUsername] = useUsername()

  return (
    <div>
      <input value={username} onChange={setUsername} />
    </div>
  )
}

const DisplayUsername = () => {
  const [username] = useUsername()

  return (
    <span>Username: {username}</span>
  )
}
```

This won't work, because each time we call `useUsername`, we receive a new instance of state. Updating the input won't affect what our `DisplayUsername` component renders.

### Solving with Context

With React context, we typically lift the username state to the highest level and `useContext` to read the value in our components:

```js
const UsernameContext = createContext()

const App = () => (
  <UsernameProvider>
    {/* ... */}
  </UsernameProvider>
)

const UsernameProvider = ({ children }) => {
  const [username, setUsername] = useState('')

  return (
    <UsernameContext.Provider value={[username, setUsername]}>
      {children}
    </UsernameContext.Provider>
  )
}

const DisplayUsername = () => {
  const [username] = useContext(UsernameContext)

  return (
    <span>Username: {username}
  )
}
```

This will work, but in big applications you'll end up with a lot of context.

## Solving with SWR

We can simulate `useState` with SWR by using the [`mutate`](https://github.com/zeit/swr#bound-mutate) function as our `setState`, and the [`config.initialData`](https://github.com/zeit/swr#options) option the initial state. Now when we call `mutate`, the updated data will be reflected everywhere the hook is used.

```js
import useSWR from 'swr'

const useUsername = () => {
  const { data: username, mutate: setUsername } = useSWR('username', {
    initialData: ''
  })

  return [username, setUsername]
}
```

It works, no context required. Every `useUsername` will share the same state, and calling `setUsername` will update the state across all uses of the hook.

### useSharedState

We can go one step further and build a shared addition to `useState`:

```js
const useSharedState = (key, initial) => {
  const { data: state, mutate: setState } = useSWR(key, {
    initialData: initial
  })

  return [state, setState]
}
```

Use it like `useState`, but pass a key as the first argument:

```js
const [username, setUsername] = useSharedState('username', 'paco')
const [os, setOS] = useSharedState('os', 'macos')
```

SWR is mainly used to manage remote data requests, but it also provides a powerful cache and API that you can use to share local state between hooks. Kudos to [Shu](https://twitter.com/shuding_) for his excellent work!

---

<div id="footnote"></div>

1. Two components using the same React hook [**don't share state by default**](https://reactjs.org/docs/hooks-custom.html#:~:text=Do%20two%20components%20using%20the%20same%20Hook%20share%20state).

2. SWR uses a client-side only cache, so your data won't persist between sessions or windows unless you keep external state like `localStorage`, at which point SWR may not be useful.


Using useSWR to share state between hook calls.

Shared Hook State with SWR


There is no previous sibling selector in CSS. Instead, we can achieve the same behavior by using flexbox and the `order` property.

Let's say you're adding a prefix to an input, and would like to style the prefix when the input is focused. If you read from left to right and top to bottom (English), you likely structure your DOM like that too:

```html
<div class="container">
  <div class="prefix">https://</div>
  <input type="text" />
</div>
```

<div class="example">
  <div class="container">
    <div class="prefix">https://</div>
    <input type="text" />
  </div>
</div>

In this markup, there's no way to target the `.prefix` class using `input:focus`, because we have no preceding selector. Instead, we can rewrite the DOM structure so that prefix appears _after_ the input:

```html
<div class="container">
  <input type="text" />
  <div class="prefix">https://</div>
</div>
```

And use flexbox to change the order of appearance:

```css
.container {
  display: flex;
}

.container input {
  order: 1;
}

.container .prefix {
  order: 2;
}
```

Now you can select the prefix using the sibling selector:

```css
.container input:focus + .prefix {
  /* Focus styles... */
}
```

<div class="example">
  <div class="container fixed">
    <input type="text" />
    <div class="prefix">https://</div>
  </div>
</div>

In the case of an input, the simple solution is to use [`:focus-within`](https://caniuse.com/#search=focus-within), which has good browser support but is still experimental. Maybe you have other use cases for this trick though, [let me know](https://twitter.com/pacocoursey)!

---

This post is inspired by my own work on inputs, and this paragraph:

> Unfortunately, trying to use `:focus` limits what you can do: you can style the input or siblings that come after the input… but that’s it.
> — [Initializing focus state in React](https://exogen.github.io/blog/focus-state)

<style>
  .example {
    border-radius: var(--radius);
    background: var(--lighter-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
  }

  .example .container {
    display: flex;
    align-items: center;
  }

  .example input {
    height: 2.5rem;
    font-size: 1rem;
    border-radius: 0 var(--inline-radius) var(--inline-radius) 0;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--light-gray);
    padding: 0 var(--gap-half);
    outline: none;
    transition: border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .example input:focus {
    border-color: var(--gray);
  }

  .example .prefix {
    background: var(--lightest-gray);
    border-radius: var(--inline-radius) 0 0 var(--inline-radius);
    padding: 0 var(--gap-half);
    height: 2.5rem;
    font-size: 1rem;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--light-gray);
    border-right: 0;
    user-select: none;
    color: var(--gray);
    transition: color var(--transition);
    margin: 0;
  }

  .example .container.fixed input {
    order: 1;
  }

  .example .container.fixed .prefix {
    order: 0;
  }

  .example .container.fixed input:focus + .prefix {
    color: var(--fg);
  }
</style>


CSS trick to style preceding elements using flexbox and order.

CSS Previous Sibling Selector


It's difficult to transition between themes smoothly. Adding a CSS `transition` to every element negatively impacts rendering performance, and it also won't work for images, icons, and CSS properties that don't support transitions.

Instead, we can temporarily remove transitions from all elements so that toggling themes feels snappy and consistent. We'll manually create a stylesheet that disables transitions:

```js
const css = document.createElement('style')
css.type = 'text/css'
css.appendChild(
  document.createTextNode(
    `* {
       -webkit-transition: none !important;
       -moz-transition: none !important;
       -o-transition: none !important;
       -ms-transition: none !important;
       transition: none !important;
    }`
  )
)
document.head.appendChild(css)
```

Note that we need to manually specify browser prefixes, as this CSS isn't run through any preprocessing.

After changing the theme (usually this involves toggling a class on `<body>`), we force a browser repaint and remove the stylesheet:

```js
// Toggle the theme here...

// Calling getComputedStyle forces the browser to redraw
const _ = window.getComputedStyle(css).opacity
document.head.removeChild(css)
```

Calling `requestAnimationFrame` before removing the stylesheet seemed to work at first, but it was unreliable and elements still transitioned. Using `getComputedStyle` works reliably on every major browser, because it forcibly [applies all active stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle).

Before:

![Toggling between light and dark theme, with elements flashing](/blog/disable-theme-transitions/before.gif)

After (or press <kbd>t</kbd> to try it yourself):

![Toggling between light and dark theme, with no elements flashing](/blog/disable-theme-transitions/after.gif)

---

Thanks to [Guillermo](https://twitter.com/rauchg) for the idea!


Prevent element flashing when switching between themes.

Disable transitions on theme toggle


Nine days after first writing this post, the Next.js team [landed support for paths](https://github.com/zeit/next.js/pull/11293) in `tsconfig.json` and `jsconfig.json` by default! In Next.js 9.4 and onwards, you only need to specify a `baseURL` in your config file to support absolute imports:

```json
// tsconfig.json or jsconfig.json
{
  compilerOptions: {
    "baseURL": "."
  }
}

// import Button from 'components/button'
```

To use a custom prefix, add a `paths` configuration:

```json
{
  compilerOptions: {
    "baseURL": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

// import Button from '@components/button'
```

---

Editors like VSCode automatically support the config in `jsconfig.json`, so Command+Click to jump to the source of a file will work as usual. [Atom and IntelliJ](https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion) also have support for rewrites.

---

<details>
  <summary>The original post, using a babel plugin.</summary>

Relative import statements are a pain. To avoid `../` chains, improve code portability, and type less, I've started using [`babel-plugin-module-resolver`](https://github.com/tleunen/babel-plugin-module-resolver) in my Next.js projects.

The goal is to transform verbose import statements like this:

```js
import Button from '../../../../components/button'
```

into absolute import statements that work anywhere in your project:

```js
import Button from '@components/button'
```

Let's do it. Install the babel plugin as a `devDependency`:

```bash
$ yarn add babel-plugin-module-resolver -D
```

In the root of your Next.js project, create a `.babelrc.json` file and add the `module-resolver` plugin:

```js
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@components': './components'
        }
      }
    ]
  ]
}
```

Create a `jsconfig.json` (or `tsconfig.json` if you're using TypeScript) and add the `paths` property:

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}
```

Note that the syntax is slightly different than the babel config.

If you're using a mixed JS/TS codebase, you should include JS files in your `tsconfig.json`:

```json
{
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
}
```

Now you can update your import statements to use the new syntax!
</details>


Improved import statements with absolute paths using babel plugins.

Better Next.js Imports


The `text-decoration: underline` CSS property provides insufficient control over the underline styling and position. While we wait for the [CSS Text Decoration Module specification](https://www.w3.org/TR/css-text-decor-4/) to become standard, we must rely on custom implementations.

My favorite approach is to use a `linear-gradient` to create an underline:

```css
background-image: linear-gradient(gray, gray);
background-size: 100% 1px;
background-position: left bottom;
background-repeat: no-repeat;
```

<div class="l">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

## Position

Position the underline by changing the vertical value of `background-position`:

```css
background-position: left 1.05em;
```

<div class="l _2">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

## Descenders

You'll notice that the underline overlaps the [descenders](https://www.figma.com/dictionary/descender/) of the text. By adding a `text-shadow` with a small offset to the right and left with the color of the background, you can hide the underline around descenders.

```css
text-shadow: 0.1em 0 var(--background), -0.1em 0 var(--background);
```

<div class="l _2 _3">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

Remember to set `text-shadow: none` in your `::selection` rules.

## Weight

Change the height of the background to increase the underline weight:

```css
background-size: 100% 0.25em;
```

<div class="l _4">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

## Dashes

By using a `repeating-linear-gradient` and leaving half the gradient transparent, you can customize a dashed underline:

```css
background-image: repeating-linear-gradient(
  to right,
  var(--gray) 0%,
  var(--gray) 50%,
  transparent 50%,
  transparent 100%
);
background-size: 1ch 1px;
```

<div class="l _5">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

Change the horizontal value of `background-size` to modify the dash width:

```css
background-size: 5ch 1px;
```

<div class="l _5 _6">
  <div>
    <span>Day by day, what you do is what you become.</span>
  </div>
</div>

The `ch` unit is equal to the width of the "0" glyph in the current font, which can be useful for natural alignment.

## Wrapping

Lastly, this approach also supports multi-line text:

<div class="l">
  <div>
    <span>Day by day,<br /> what you do is what you become.</span>
  </div>
</div>

[Let me know](https://twitter.com/pacocoursey) if you end up using this, or read more about other approaches in "[Crafting link underlines on Medium.](https://medium.design/crafting-link-underlines-on-medium-7c03a9274f9)"

---

Thanks to [Franco](https://twitter.com/arzafran) for reminding me about this technique!

<style>

.l {
  background: var(--lighter-gray);
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  font-size: 1.25rem;
  color: var(--fg);
  text-align: center;
}

.l span {
  background-image: linear-gradient(var(--gray), var(--gray));
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.l._2 span {
  background-position: left 1.05em;
}

.l._3 span {
  text-shadow: 0.1em 0 var(--lighter-gray), -0.1em 0 var(--lighter-gray);
}

.l._4 span {
  background-size: 100% 0.25em;
}

.l._5 span {
  background: repeating-linear-gradient(
    to right,
    var(--gray) 0%,
    var(--gray) 50%,
    transparent 50%,
    transparent 100%
  );
  background-repeat: repeat-x;
  background-size: 1ch 1px;
  background-position: bottom left;
}


.l._6 span {
  background-size: 2ch 1px;
}
</style>


Implementing custom CSS text underlines that work with descenders and wrapping.

Custom text underlines


[Styled System](https://styled-system.com/) is an excellent alternative to writing ad-hoc `style` declarations in your React components. By giving components standardized props like `bg` and `fontSize`, it's easier to build custom UI that respects your system constraints. That's because you can quickly specify your design tokens and use them in real code:

```js
// theme.js
colors: {
  blue: '#0070F3'
}

// your React code
<Box color="blue" />
```

Styled System's responsive syntax is impressively concise, too:

```js
// 16px on mobile, 14px on tablet, 12px on desktop
<Box fontSize={[16, 14, 12]} />
```

These two features make it extremely easy to scaffold new components.

I want to use Styled System with [styled-jsx](https://github.com/zeit/styled-jsx), because styled-jsx is included with [Next.js](https://github.com/zeit/next.js), and I use Next.js for everything React. But all the Styled System tooling I found was for styled-components or Emotion, so I made my own.

## styled-jsx-system

[styled-jsx-system](https://github.com/pacocoursey/styled-jsx-system) lets you use Styled System with styled-jsx.

```bash
$ yarn add styled-jsx-system
```

Wrap your components with the provided HOC and accept a `className` prop:

```js
import withStyledSystem from 'styled-jsx-system'
import { color } from 'styled-system'

const Box = ({ className, children }) => {
  return (
    <div className={className}>
      {children}

      <style jsx>{`
        div {
          padding: 8px;
        }
      `}</style>
    </div>
  )
}

export default withStyledSystem(Box, [color])
```

That's it! You can now use Styled System props with your Box component:

```js
<Box color={['#000', '#666', '#fff']}>Hello</Box>
```

Other Styled System features like compose, system, and themeing are supported too. Check out the [repository](https://github.com/pacocoursey/styled-jsx-system) for more information.

Cool. [Let me know](https://twitter.com/pacocoursey) if you end up using it.

---

Thanks to [jxnblk](https://twitter.com/jxnblk) for Styled System and all his cool CSS experiments, and thanks to [Giuseppe](https://twitter.com/giuseppegurgone), [JJ](https://twitter.com/_ijjk), and [Shu](https://twitter.com/shuding_) for help with compiling and publishing!


styled-jsx-system is a way to use Styled System with styled-jsx.

Styled System with styled-jsx


I created [Dusk](https://dusk.now.sh) to make my dock look more visually harmonious. [LiteIcon](https://freemacsoft.net/liteicon/) does a great job of automating the icon changing process, but every time I opened Discord, the dock icon reverted back to default. Not cool.

![Original Discord Icon in Dock](https://paco.sh/blog/persistent-icons/dock-1.png)

It happens to other Electron applications (Hyper, VSCode) over time. Even Safari reverts back occasionally. It's frustratingly ugly. Let's fix it.

Find the application in Finder and right click to "Show Package Contents".

![Show Package Contents on Discord.app](https://paco.sh/blog/persistent-icons/show.png)


Navigate to `Contents/Resources/`. Here, `electron.icns` is the culprit. Let's replace it with our custom icon.

![electron.icns in Contents/Resources Folder](https://paco.sh/blog/persistent-icons/icns.png)

We'll need to convert our custom `.png` icon from Dusk (or anywhere else) to an `.icns` file. MacOS ships with the command line tool `sips` to help with this.

Run the following from the command line, replacing ICON as needed.

```bash
sips -s format icns ICON.png --out ICON.icns
```

Move your new `.icns` file into the previously opened `Resources/` folder. I like to save the old icon by renaming it, just in case I have to revert later. Rename your new file to match the old (in this case, `electron.icns`).

![New electron.icns File](https://paco.sh/blog/persistent-icons/fixed-icns.png)

Restart the app, and your custom application icon should persist!

![Much better](https://paco.sh/blog/persistent-icons/dock-2.png)


Make your custom macOS application icons persistent across app restarts.