Missing styles using styled-components

[ikhudo]

trying to setup a lib of react components using styled components and react-styleguidist, I've created 3 components like this

import React from 'react'
import styled from 'styled-components'
const Wrapper = styled.div`
  color: red;
  background-color: yellow;
`
export default function SampleComponent() {
  return <Wrapper>This is sample component</Wrapper>
}

and when I run styleguidist server there only last component on the page is styled (has red text on yellow background).

// styleguide.config.js
module.exports = {
  components: 'packages/**/index.js',
  ignore: ['**/node_modules/**', '**/lib/**', '**/src/**'],
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: require.resolve('babel-loader'),
        },
      ],
    },
  },
}

// balel.config.js
module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false,
        useBuiltIns: 'usage',
      },
    ],
    '@babel/react',
  ],
  plugins: ['babel-plugin-styled-components'],
}

but it works if i run styleguidist build

[kopax]

Hi, not sure if that help but:

• you don't need the babel-plugin-styled-components for development, nor distrubution, I suggest you tu use it only in production

Also, we already shared a UI library for react-styleguidist (called @bootstrap-styled/rsg-components). It is build on top of bootstrap-styled which is built on top of styled-components.

You can see how we configured the thing, you might get your answer. Is your project on Github? I agree styled is a better starting choice for doing css-in-js.

Also, you might be interested in this extensions (doc) that bring other features such as layout package for building documentations.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.