# babel-plugin-client-only-require

## What does it do
Converts import statements for less/css/scss into conditional requires in compiled file:

src/index.js:

```js
import ('./myStyles.less')
```
is converted into lib/index.js:

```js
!!(typeof window !== 'undefined' && window.document && window.document.createElement) ? require("./styles/myStyles.less") : void 0;
```

## Why is it needed?

If we run without this plugin:
```
babel-node src/index.js
```
or
```
babel src --out-dir lib
node lib/index.js
```

we will get an error:
```
...myStyles.css:2
.main {
^
SyntaxError: Unexpected token .
```
As node is trying to process less-css-scss file.
So we do not want node on the server to process those files at all.

## Why can't i use babel-plugin-transform-require-ignore

babel-plugin-transform-require-ignore will remove require statements for styles from transpiled output
so your `lib/index.js` will have no mentioning of
```
require('myStyles.less')
```

But now, if you run your webpack to create client bundle from your `lib/*`, your webpack style loader and ExtractTextPlugin
will not find any less-css-scss files to grab and bundle.
With the appoach of wrapping require to client only condition - require is still there for webpack to act on.


## How to configure
Install as dev dependency:
```
npm install --save-dev babel-plugin-client-only-require
```

To configure add plugin to .babelrc plugins section:
```
{
	....
    "plugins": [
		....
		["client-only-require", {
                "extensions": ["less", "scss", "css"]
        }]
    ]
}
```