Permalink
Browse files

Merge branch 'master' of https://github.com/nozzle/react-static

  • Loading branch information...
tannerlinsley committed Jan 3, 2019
2 parents d637066 + c82617a commit 0fc261e88deeaea72b505dcfc1d9a82377c720c4
@@ -9,7 +9,6 @@ To use Material-UI in React Static:
```javascript
// static.config.js
import {
createMuiTheme,
createGenerateClassName,
} from '@material-ui/core/styles'
@@ -12,6 +12,7 @@ You can install any react-static compatible plugin via `npm`. Once it is install
- [react-static-plugin-emotion](/packages/react-static-plugin-emotion) - Adds SSR support for Emotion components.
- [react-static-plugin-styled-components](/packages/react-static-plugin-styled-components) - Adds SSR support for Styled-Components
- [react-static-plugin-sass](/packages/react-static-plugin-sass) - Adds SSR and general support for SASS
- [react-static-plugin-less](/packages/react-static-plugin-less) - Adds SSR and general support for LESS
- [react-static-plugin-jss](/packages/react-static-plugin-jss) - Adds SSR support for JSS
- React Alternatives
- [react-static-plugin-preact](/packages/react-static-plugin-preact) - Adds preact support
@@ -22,7 +22,10 @@ export default (options = {}) => ({
{
...cssLoader,
loader: 'css-loader',
options: { exportOnlyLocals: true },
options: {
exportOnlyLocals: true,
...options
},
},
]
} else {
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}
@@ -0,0 +1,5 @@
.history
node_modules
lib.js
/node.api.js
/browser.api.js
@@ -0,0 +1,35 @@
# react-static-plugin-less

A [React-Static](https://react-static.js.org) plugin that adds loader and SSR support for [less](https://github.com/developit/less)

## Installation

In an existing react-static site run:

```bash
$ yarn add react-static-plugin-less
```

Then add the plugin to your `static.config.js`:

```javascript
export default {
plugins: ["react-static-plugin-less"]
};
```

## With Options

```javascript
export default {
plugins: [
[
"react-static-plugin-less",
{
includePaths: ["..."] // always includes `src/`
// other options for the less-loader
}
]
]
};
```
@@ -0,0 +1,27 @@
{
"name": "react-static-plugin-less",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir .",
"watch": "babel src --out-dir . -w",
"test": "yarn format",
"format": "prettier 'src/**/*.js' --write",
"preversion": "yarn build"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3"
},
"dependencies": {
"autoprefixer": "^9.4.3",
"css-loader": "^2.1.0",
"extract-css-chunks-webpack-plugin": "^3.3.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-flexbugs-fixes": "^4.1.0",
"semver": "^5.6.0"
}
}
@@ -0,0 +1,72 @@
import ExtractCssChunks from 'extract-css-chunks-webpack-plugin'
import autoprefixer from 'autoprefixer'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
import semver from 'semver'

export default ({ includePaths = [], ...rest }) => ({
webpack: (config, { stage }) => {
let loaders = []
const lessLoaderPath = require.resolve('less-loader')

const lessLoader = {
loader: lessLoaderPath,
options: { includePaths: ['src/', ...includePaths], ...rest },
}
const styleLoader = { loader: 'style-loader' }
const cssLoader = {
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: false,
},
}
const postCssLoader = {
loader: 'postcss-loader',
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
sourceMap: true,
ident: 'postcss',
plugins: () => [
postcssFlexbugsFixes,
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}

if (stage === 'dev') {
// Dev
loaders = [styleLoader, cssLoader, postCssLoader, lessLoader]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, lessLoader]
} else {
// Prod

// for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
// for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
const cssLoaderVersion = require('css-loader/package.json').version
if (semver.satisfies(cssLoaderVersion, '<2') === true) {
cssLoader.options.minimize = true
}

loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, lessLoader]
}

config.module.rules[0].oneOf.unshift({
test: /\.less$/,
use: loaders,
})

return config
},
})
Oops, something went wrong.

0 comments on commit 0fc261e

Please sign in to comment.