open-index/open-npm huggingface dataset:
npm package: @react-app/css-modules-fix-local-keyframes-loader
Description: For some reason when using keyframes keyword in :local scope, the output contains :local(classname) instead of just class name like it should. This loader fixes this bug.
Author: Peter Pristas
Latest version: 1.2.2

# css-modules-fix-local-keyframes-loader

For some reason when using keyframes keyword in :local scope, the output contains :local(classname) instead of just class name like it should. This loader fixes this bug.

```
npm i @react-app/css-modules-fix-local-keyframes-loader
```


<br />
To use this loader add it to chain after css-loader.

In development:

```
{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    'css-modules-fix-local-keyframes-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
  ],
}
```

In production:

```
{
  test: /\.module\.css$/,
  use: [
    MiniCssExtractPlugin.loader
    'css-modules-fix-local-keyframes-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
  ],
}
```
npm package: @react-app/css-modules-typings-loader
Description: Webpack loader to generate TS typings of local classnames as [filename].d.ts file alongside source file.
Author: Peter Pristas
Latest version: 1.2.7

# css-modules-typings-loader

Webpack loader to generate TS typings of local classnames as [filename].d.ts file alongside source file.

```
npm i @react-app/css-modules-typings-loader
```

<br />
To use this loader add it to chain after css-loader.

In development:

```
{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    'css-modules-typings-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
  ],
}
```

In production:

```
{
  test: /\.module\.css$/,
  use: [
    MiniCssExtractPlugin.loader
    'css-modules-typings-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
  ],
}
```
<br>

**Configuration**

You can create .cssmodulestypings.js config file in the current working directory or pass options object via loader options. It supports following:

```
{
    suffix: (filename: string) => string // add custom suffix to generated interface name (defaults to Styles)
}
```
npm package: @react-app/graphql-typings-loader
Description: Webpack loader to generate TS typings of graphql files as d.ts file alongside source file. Uses apollo-codegen under the hood. Supports #import syntax. If d.ts file contains GraphQL enums, they are also extracted to [filename].types.ts file so they can be
Author: Peter Pristas
Latest version: 1.2.5

# graphql-typings-loader

Webpack loader to generate TS typings of graphql files as d.ts file alongside source file. Uses apollo-codegen under the hood. Supports #import syntax. If d.ts file contains GraphQL enums, they are also extracted to [filename].types.ts file so they can be used in TS code.

```
npm i @react-app/graphql-typings-loader
```

<br />
To use this loader add it to chain before any graphql loader which outputs document in JS.


```
{
  test: /\.graphql$/,
  use: [
    'graphql-tag/loader'
    'graphql-typings-loader',
  ],
}
```

By default it tries to read './schema.json' in the current working directory (directory from which webpack was run). If it does not exist, it outputs nothing. 

<br />

**Configuration**

You can create .graphqltypings.js config file in the current working directory or pass options object via loader options. It supports following:

```
{
    schema: "string | filename to read schema from,
        default: ./schema.json",

    legacy: "boolean | uses apollo-codegen-typescript-legacy when true instead of apollo-codegen-typescript,
        default: false,

    options: "object | options for apollo-codegen-typescript,
        default: {
            addTypename: true,
            mergeInFieldsFromFragmentSpreads: true,
            passthroughCustomScalars: true,
            customScalarsPrefix: 'GraphQLScalar'," 
        }
}
```

**Scalars**

By default custom graphql scalars have prefix 'GraphQLScalar'. You can that create graphql-scalars.d.ts file in your root directory with mappings to ts(js) types. 

graphql-scalars.d.ts
```
type GraphQLScalarUpload = File | Blob; 
type GraphQLScalarDateTime = string;
```
npm package: @react-app/responsive-image-loader
Description: Webpack loader to create responsive images. Uses responsive-loader with sharp adapter under the hood with custom predefined options.
Author: Peter Pristas
Latest version: 1.2.2

# responsive-image-loader

Webpack loader to create responsive images. Uses responsive-loader with sharp adapter under the hood with custom predefined options.

```
npm i @react-app/responsive-image-loader
```

<br />
<br />
Can be used with babel-plugin-named-asset-import (create-react-app) to export responsiveImage instance like so:

```
// loaderMap comes from babel-plugin-named-asset-import configuration

['png', 'jpg', 'bmp', 'jpeg'].forEach(ext => {
    loaderMap[ext] = {
        responsiveImage: `!!${require.resolve('@react-app/responsive-loader')}![path]`,
    }
})
```
npm package: @react-app/ssr-webpack-dev-server
Description: Devserver for ssr with webpack watch mode support. More docs coming soon.
Author: Peter Pristas
Latest version: 1.2.2

# ssr-webpack-dev-server

Devserver for ssr with webpack watch mode support.
More docs coming soon.

```
npm i @react-app/ssr-webpack-dev-server
```
npm package: @react-app/styled
Description: React HOC to style React components with css modules. Typescript compatible.
Author: Peter Pristas
Latest version: 1.2.10

# styled

React HOC to style React components with css modules. Typescript compatible.

```
npm i @react-app/styled
```

test.module.css
```
.test {
    background-color: blue;
}
```

test.tsx
```
import Styled from '@react-app/styled';
import defaultStyles from './test.module.css';

interface Props {
    styles: typeof defaultStyles;
}

const Test: React.FunctionComponent<Props> = ({styles}) => (
    <div className={styles.test} />
);

export default Styled(defaultStyles)(Test);
```

fragment.module.css
```
.fragment { // <- name of the class does not matter
    composes: test from './test.module.css';
    background-color: red;
}

.random {
    color: yellow;
}

```

fragment.tsx

``` 
import * as React from 'react';
import Test from './test';
import defaultStyles from 'test2.module.css';

const Test2 = Test.extend(defaultStyles);

export default Styled(defaultStyles)(({styles}) => {
    return (
        <React.Fragment>
            <Test /> { /* <- has blue background */}
            <Test2 /> { /* <- has red background */}
            <div className={styles.random} />
        </React.Fragment>
    );
});

```

parent.module.css
```
.changeAllTestChildren { // <- name of the class does not matter
    composes: test from './test.module.css';
    background-color: green;
}

.button {
    color: blue;
}
```

parent.tsx
```
import * as React from 'react';
import Test from './test';
import Fragment from './fragment';
import defaultStyles from './parent.module.css';

const TestProvider = Test.compose(defaultStyles); // <- affects all children of Test down under, it is possible to target only certain children of Test with css selectors in parent.module.css 

class Parent extends React.PureComponent {
    render() {
        return (
            <TestProvider>
                <Fragment /> {/* Test has green background, Test2 is not affected */}
                <button className={this.props.styles.button}>B</button>
            </TestProvider>
        )
    }
}

export default Styled(defaultStyles)(Parent);
```

```
... and so on
```

## API

```
interface Styles {
    {key: string}: string;
}

interface StyledComponent<Props> = React.ForwardRef<Props without styles prop>> & {
    compose(styles: Styles) => StyledComponent<Props>,
    extend(styles: Styles) => React.FunctionComponent<{}>,
}

Styled(styles: Styles)(Component: React.ComponentClass<Props> | React.FunctionComponent<Props> | React.ForwardRefComponent<Props> ): StyledComponent<Props>;
```
npm package: @react-app/watcher-webpack-plugin
Description: Webpack plugin to watch files with chokidar using glob. Runs webpack's subcompiler on file change if it is not already watched by webpack, runs callback on delete. This plugin is mainly used to enhance developer experience when generating typings on the f
Author: Peter Pristas
Latest version: 1.2.2

# watcher-webpack-plugin

Webpack plugin to watch files with chokidar using glob. Runs webpack's subcompiler on file change if it is not already watched by webpack, runs callback on delete. This plugin is mainly used to enhance developer experience when generating typings on the fly when creating new files (*.module.css, *.graphql, ...) so you can use typings straight away when writing new TS files.

```
npm i @react-app/watcher-webpack-plugin
```

<br />
Example usage:

```
const WatcherWebpackPlugin = require('@react-app/watcher-webpack-plugin');

config.plugins = [
    ...
    new WatcherWebpackPlugin('src/**/*.(module.css|graphql)' ,{
        onRemove: (file) => Promise.all([
          unlinkIfExists(`${file}.d.ts`),
          unlinkIfExists(`${file}.types.ts`),
        ]),
    }),
];

```