stylin
@stylin/ts-loader
Webpack loader for type auto-generation.
Installation
npm install --save-dev @stylin/ts-loader
In webpack configuration file, place @stylin/ts-loader after @stylin/msa-loader in modules/rules section.
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.scss$/i,
use: [
`@stylin/ts-loader`,
`@stylin/msa-loader`,
{loader: MiniCssExtractPlugin.loader}, // it can be `style-loader`
{loader: `css-loader`, options: {modules: true}},
`sass-loader`, // optional
],
}],
}
}
Options
You can customize the generated type names. By default, they are equal:
propsType: (componentName: string) => `${componentName}Props`
styledPropsType: (componentName: string) => `Styled${componentName}Props`,
The generated interfaces for User component will be:
💅 *.scss.d.ts
export interface UserProps extends ComponentProps<'div'> {
status: 'online' | 'busy' | 'offline'
}
export const User: FC<UserProps>
Optional property
For optional component properties, add a question mark as you do in typescript:
/**
@tag: input
@component: Input
disabled?: true
*/
âš Webpack watcher
Webpack in watch mode keeps tracking file changes only if it is in the dependency graph. It means if you create a file that is not imported in your application code source, webpack will not track it and will not generate types for it. Before starting coding a new component, first of all, import it into your code and then begin implementation.