Using CSS-in-JS with Preact

#preact #styled #emotion

The two most popular CSS-in-JS libraries, styled-components and Emotion, don’t support Preact out of the box. However there is an easy workaround.

Add these aliases to your webpack.config.js file:

module.exports = {
    resolve: {
        alias: {
            react: 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom': 'preact/compat',
        },
    },
};

Adding these aliases allows you to use other libraries intended for React too!

And if you’re using Storybook, you’ll need to add the same alias to your .storybook/main.js file:

module.exports = {
    stories: ['../app/javascript/**/story.tsx'],
    webpackFinal: async config => {
        config.resolve.alias = Object.assign({}, config.resolve.alias, {
            react: "preact/compat",
            'react-dom': 'preact/compat'
        })
        return config;
      },
};

After this you can install your preferred package:

npm i @emotion/styled
# OR
npm i styled-components

And use either styled-components or Emotion without any problems:

import styled from '@emotion/styled'; 
// OR
import styled from 'styled-components';

export const Container = styled.div`
  background-color: pink;
`;

Top comments (6)

Adam Crockett 🌀 • Aug 17 '20 • Edited

Hey Emma, last night I released this library: npmjs.com/package/reactive-css-pro... I was wondering, would you be willing to try this out with preact? I'm wondering how it would fit into styled components, since you know what your doing I'd really appreciate the help ☺️

Emma Goto 🍙 • Aug 18 '20

Hi Adam, if the library works with React, then it should work with Preact (if you use the method I outlined in this post).

In terms of how it fits into styled components - it seems like your library would be used standalone, and not together with a CSS-in-JS library. Styled-components lets you pass in props to change CSS so I think it would cover at least part of what your library can do.

Adam Crockett 🌀 • Aug 18 '20 • Edited

Thanks Emma taking a look! I wrote a Vue version which I suspect will be similar to the React Hook version I will write today. I'm not a react developer but I'd love to hear if I got it right.

In the Vue version basically, a prop of type CSSProp is declared giving access to the functionality of the library. Changing the CSS variable from devtools caused a Vue lifecycle to fire meaning I have successfully made CSS reactive, this opens the door for bi-directional communication between js and CSS and storing styling configuration in CSS or SCSS files to drive the JavaScript styling logic.
I'm going to bodly say the big advantage of my library over a CSS in JS library would be that you can style before even JS is loaded then hand over control to JavaScript then start using it just like a CSS in JS library, passing props ect.

The idea of stylesheets driving styling logic in JavaScript is super exciting to me and I hope it might gain traction.

Thanks for being a great person and for the post it was helpful in my design.

Emma Goto 🍙 • Aug 18 '20

I'm going to bodly say the big advantage of my library over a CSS in JS library would be that you can style before even JS is loaded

I think if there is a performance benefit to be had you should definitely make sure to highlight that in your docs! e.g. do a performance comparison against other popular libraries.