Last active
July 1, 2023 22:50
-
-
Save nebomilic/938f93695b4ed6756fb37db757aca06f to your computer and use it in GitHub Desktop.
Styleguidist configuration for Create React App 5 + Typescript + Tailwind CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const webpack = require('webpack'); | |
const path = require('path'); | |
// Styleguidist (v11.2.0) doesn't display components with create ract app 5 | |
// This webpackConfig is a workaround for that | |
// For more information see https://github.com/styleguidist/react-styleguidist/issues/1910#issuecomment-1013763698 | |
const webpackConfig = { | |
module: { | |
rules: [ | |
{ | |
test: /.\.md$/, // look for .md files in component folder | |
type: 'javascript/auto', // Tell webpack to interpret the result from examples-loader as JavaScript | |
}, | |
{ | |
test: /\.tsx?$/, | |
use: [{ | |
loader: 'ts-loader', | |
options: { | |
configFile: "tsconfig.styleguidist.json" // important to have "noEmit": false in the config | |
} | |
}], | |
exclude: /node_modules/, | |
}, | |
{ | |
test: /\.svg$/, | |
use: ['@svgr/webpack'], | |
}, | |
{ | |
test: /\.css$/i, | |
use: ["style-loader", "css-loader"], | |
}, | |
], | |
}, | |
resolve: { | |
extensions: ['.tsx', '.ts', '.js'], | |
}, | |
plugins: [ | |
// Rewrites the absolute paths to those two files into relative paths | |
new webpack.NormalModuleReplacementPlugin( | |
/react-styleguidist\/lib\/loaders\/utils\/client\/requireInRuntime$/, | |
'react-styleguidist/lib/loaders/utils/client/requireInRuntime' | |
), | |
new webpack.NormalModuleReplacementPlugin( | |
/react-styleguidist\/lib\/loaders\/utils\/client\/evalInContext$/, | |
'react-styleguidist/lib/loaders/utils/client/evalInContext' | |
), | |
], | |
}; | |
module.exports = { | |
webpackConfig, | |
components: 'src/components/**/*.{jsx,tsx}', | |
propsParser: require('react-docgen-typescript').withCustomConfig( | |
'./tsconfig.styleguidist.json' | |
).parse, | |
require: [ | |
path.join(__dirname, './dist/styles.css') // for styleguidist to work with tailwind we have to reference compiled css here | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This solution is based on this suggestion from @timroes.
For this to work properly:
"noEmit": false
in the typescript confignpx tailwindcss -i ./src/index.css -o ./dist/styles.css --watch