@maa/monkey-stylus
v0.1.1
Published
Import `.styl` files in your Next.js project
Downloads
14
Readme
Stylus
Import .styl
files in your Next.js project
Installation
npm install --save @maa/monkey-stylus stylus
or
yarn add @maa/monkey-stylus stylus
Usage
The stylesheet is compiled to .next/static/css
. Next.js will automatically add the css file to the HTML.
In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.
Without CSS modules
Create a next.config.js
in your project
// next.config.js
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
/* config options here */
});
Create a Stylus file styles.styl
$font-size = 50px
.example
font-size $font-size
Create a page file pages/index.js
import '../styles.styl';
export default () => <div className="example">Hello World!</div>;
With CSS modules
// next.config.js
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
cssModules: true
});
Create a Stylus file styles.styl
$font-size = 50px
.example
font-size $font-size
Create a page file pages/index.js
import css from '../styles.styl';
export default () => <div className={css.example}>Hello World!</div>;
With CSS modules and options
You can also pass a list of options to the css-loader
by passing an object called cssLoaderOptions
.
For instance, to enable locally scoped CSS modules, you can write:
// next.config.js
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
}
});
Create a CSS file styles.css
.example {
font-size: 50px;
}
Create a page file pages/index.js
that imports your stylesheet and uses the hashed class name from the stylesheet
import css from '../style.css';
const Component = props => {
return <div className={css.backdrop}>...</div>;
};
export default Component;
Your exported HTML will then reflect locally scoped CSS class names.
For a list of supported options, refer to the webpack css-loader
README.
With Stylus loader options
You can pass options from Stylus
// next.config.js
const nib = require('nib');
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
stylusLoaderOptions: {
use: [nib()]
}
});
PostCSS plugins
For PostCSS support install PostStylus
in your project.
Create a next.config.js
in your project.
Pass the plugin and the options to Stylus via stylusLoaderOptions
.
// next.config.js
const nib = require('nib')
const rupture = require('rupture')
const withStylus = require('@maa/monkey-stylus')
const poststylus = require('poststylus')
const autoprefixer = require('autoprefixer')
module.exports = withStylus({
stylusLoaderOptions: {
use: [
nib(),
rupture(),
poststylus([
autoprefixer({ flexbox: 'no-2009' }),
require('postcss-css-variables'),
]),
}
})
Create a Stylus file styles.styl
the Stylus here is using the css-variables postcss plugin.
:root--some-colorred.example
/* red */
color var(--some-color) ;
You can also pass a list of options to the postcss-loader
by passing an object called postcssLoaderOptions
.
For example, to pass theme env variables to postcss-loader, you can write:
// next.config.js
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
});
Configuring Next.js
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withStylus = require('@maa/monkey-stylus');
module.exports = withStylus({
webpack(config, options) {
return config;
}
});