Skip to content
Permalink
Browse files

Add react-static-plugin-stylus (#1213)

* Add react-static-plugin-stylus

* Add react-static-plugin-stylus link to plugins/README.md

* Remove logging in react-static-plugin-stylus
  • Loading branch information...
JonDum authored and tannerlinsley committed Jun 7, 2019
1 parent 8e89bba commit 0e07a429acab9a17cb0907b3e5e669064d1255b1
@@ -11,6 +11,7 @@ React Static ships with a plugin API to extend React Static's functionality.
- [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-stylus](/packages/react-static-plugin-stylus) - Adds SSR and general support for Stylus
- [react-static-plugin-jss](/packages/react-static-plugin-jss) - Adds SSR support for JSS
- [react-static-plugin-evergreen](/packages/react-static-plugin-evergreen) - Adds SSR support for evergreen-ui
- [react-static-plugin-css-modules](/packages/react-static-plugin-css-modules) - Adds SSR support for CSS modules
@@ -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,29 @@
{
"name": "react-static-plugin-stylus",
"version": "7.0.10",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir .",
"watch": "yarn build --watch",
"test": "yarn format",
"format": "prettier src/**/*.js --write",
"preversion": "yarn build"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3"
},
"dependencies": {
"autoprefixer": "^9.5.1",
"css-loader": "^2.1.0",
"extract-css-chunks-webpack-plugin": "^4.3.2",
"nib": "^1.1.2",
"postcss-flexbugs-fixes": "^4.1.0",
"semver": "^6.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
},
"gitHead": "ca9f2162257fe67a8b4ffcbb1350695345940da4"
}
@@ -0,0 +1,86 @@
import ExtractCssChunks from 'extract-css-chunks-webpack-plugin'
import autoprefixer from 'autoprefixer'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
import semver from 'semver'

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

const stylusLoader = {
loader: stylusLoaderPath,
options: {
use: [require('nib')()],
...rest,
},
}

const cssLoader = {
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: false,
...cssLoaderOptions,
},
}
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 = [
ExtractCssChunks.loader,
cssLoader,
postCssLoader,
stylusLoader,
]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, stylusLoader]
} 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,
stylusLoader,
]
}

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

return config
},
})

0 comments on commit 0e07a42

Please sign in to comment.
You can’t perform that action at this time.