Using styled-components and its babel plugin

[EnixCoda]

I had a weird issue setting up my snowpack react project with styled-components. Somehow I finally managed to make it work, I think it may help other people if I post it here. Or it could even help improve snowpack.

Steps

1. Install styled-components and babel-plugin-styled-components as the same as I did in other non-snowpack projects.
2. Add babel-plugin-styled-components to the babel config as a plugin.
3. Use the css prop in react, which is a special prop to be consumed by babel-plugin-styled-components.

   # App.jsx
   import React from 'react';
   
   function App() {
     return (
       <span
         css={`
           font-weight: bolder;
         `}
       >
         Hello, World!
       </span>
     );
   }

4. No errors in the console, but one in the browser.
   
5. Add import "styled-components" to the App.jsx file.
6. Refresh browser and the error is gone! (Note the path of styled-components is mapped to a js file under /web_modules/ now)
   
7. Remove the import "styled-components", no errors.
8. Rerun yarn start, still no errors.

If run yarn build before step 1, the output code could run well without errors.

I guess snowpack resolves dependencies before transpiling code with babel and caches dependency mapping otherwhere so that the above import "styled-components" trick worked. 🤔

[FredKSchott]

Ah yea, we have a PR out to make this flow more clear in our dev output. Luckily it's an easy fix.

When a package import is added as a part of your build (could not be scanned automatically from source) you just need to tell Snowpack about it via your snowpack config's install array:

// snowpack.config.json
{
  "install": ["styled-components"]
}