# webpack-fix-style-only-entries

> Package to fix style (css/sass/less/stylus) only entries generating a extra js file.

Latest version **0.6.1** (published 2021-01-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpack-fix-style-only-entries
pnpm add webpack-fix-style-only-entries
yarn add webpack-fix-style-only-entries
bun add webpack-fix-style-only-entries
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.1 |
| Published | 2021-01-18 |
| First published | 2018-08-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 266 |
| Author | fqborges |
| Maintainers | fqborges |
| Keywords | webpack, fix, css, js, style |

## Links

- npm: https://www.npmjs.com/package/webpack-fix-style-only-entries
- Repository: https://github.com/fqborges/webpack-fix-style-only-entries
- Homepage: https://github.com/fqborges/webpack-fix-style-only-entries#readme
- Issues: https://github.com/fqborges/webpack-fix-style-only-entries/issues
- npm.io page: https://npm.io/package/webpack-fix-style-only-entries

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.6.1 (latest) — 2021-01-18
- 0.6.0 — 2020-10-13
- 0.5.2 — 2020-10-07
- 0.5.1 — 2020-06-15
- 0.5.0 — 2020-05-18
- 0.4.0 — 2019-09-09
- 0.3.1 — 2019-08-23
- 0.3.0 — 2019-05-31
- 0.2.2 — 2019-05-24
- 0.2.1 — 2019-03-12
- 0.2.0 — 2019-02-06
- 0.1.0 — 2018-12-27
- 0.0.5 — 2018-11-13
- 0.0.4 — 2018-08-29
- 0.0.3 — 2018-08-29
- … 1 more at https://npm.io/package/webpack-fix-style-only-entries/versions

## README

[![npm version](https://badge.fury.io/js/webpack-fix-style-only-entries.svg)](https://www.npmjs.com/package/webpack-fix-style-only-entries)

# [webpack-fix-style-only-entries](https://www.npmjs.com/package/webpack-fix-style-only-entries)

This is a small plugin developed to solve the problem of having a style only entry (css/sass/less/stylus) generating an extra js file.

You can find more info by reading the following issues:

 - https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518
 - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151

View on: [Github](https://github.com/fqborges/webpack-fix-style-only-entries) - [npm](https://www.npmjs.com/package/webpack-fix-style-only-entries)

## How it works
It just find js files from chunks of css only entries and remove the js file from the compilation.

## How to use
install using your package manager of choice:
 - npm: `npm install -D webpack-fix-style-only-entries`
 - yarn: `yarn add -D webpack-fix-style-only-entries`

Require and add to webpack.config plugins.

Warning: this plugin does not load styles or split your bundles, it just fix chunks of css only entries by removing the (almost) empty js file.

```javascript
// ... other plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

module.exports = {
    entry: {
        "main" : "./app/main.js"
        "styles": ["./common/styles.css", "./app/styles.css"]
    },
    module: {
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
        ]
    },
    plugins: [
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
        }),
    ],
};
```

## Options
 
| Name       | Type             | Default                                | Description |
|------------|---------------   |----------------------------------------|-------------|
| extensions | Array[string]    | ["less", "scss", "css", "styl","sass"] | file extensions for styles      |
| silent     | boolean          | false                                  | supress logs to console         |
| ignore     | string or RegExp | undefined                              | match resource to be ignored    |

### Example config:
    // to identify only 'foo' and 'bar' extensions as styles
    new FixStyleOnlyEntriesPlugin({ extensions:['foo', 'bar'] }),

## Recipes

### I use a javascript entry to styles:
Give an especial extension to your file (`.css.js` for example) and configure `new FixStyleOnlyEntriesPlugin({ extensions:['css.js'] })`. See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/8.

### I use webpack-hot-middleware:
Configure this plugin as `new FixStyleOnlyEntriesPlugin({ ignore: 'webpack-hot-middleware' })`. See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/12 and https://github.com/fqborges/webpack-fix-style-only-entries/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js.

---
_Source: https://npm.io/package/webpack-fix-style-only-entries · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._