docpad/docpad-plugin-stylus

Adds support for the Stylus CSS pre-processor to DocPad

Stylus Plugin for DocPad

Adds support for the Stylus CSS pre-processor to DocPad

Convention: .css.styl|stylus

Install

docpad install stylus

Configure

Defaults

The default configuration for this plugin is the equivalant of adding the following to your DocPad configuration file.

plugins:
	stylus:
		stylusRequire: null
		stylusLibraries:
			nib: true
		stylusOptions:
			compress: true
			'include css': true

# Disable compression on the development environment
environments:
	development:
		stylusOptions:
			compress: false

Using external Stylus

If you'd like to use not the Stylus version that goes with the plugin, but your custom one (patched or of a previous version), you could use the stylusRequire setting by passing your version to it:

plugins:
	stylus:
		stylusRequire: require('stylus')

Stylus Options

You can customise the options sent to stylus using the stylusOptions object. See the available options here.

Stylus Libraries

By default we include the Nib Stylus Library.

Using Nib

Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier. By default nib support is enabled, but it can be disabled by setting the useNib option to false.

To use Nib, add the following to your main stylus file:

@import 'nib'

Alternatively, if you would prefer to use individual parts like gradient support, you can do this by using:

@import 'nib/gradients'

Turning off Nib

You can also turn off the inclusion of the Nib by setting the following:

plugins:
	stylus:
		stylusLibraries:
			nib: false

Using a custom Library (like Axis)

You can include your own custom libraries, providing you npm install them yourself.

To use the Axis Stylus Library instead of Nib, you first first install axis by doing:

npm install --save axis

Then update our DocPad configuration file with:

plugins:
	stylus:
		stylusLibraries:
			nib: false
			'axis': true

You can also customise the configuration sent to the library by doing the following, in this case, we set the axis implicit property to false:

plugins:
	stylus:
		stylusLibraries:
			nib: false
			'axis':
				implicit: false

History

Discover the release history by heading on over to the HISTORY.md file.

Contribute

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

Backers

Maintainers

These amazing people are maintaining this project:

• Anton W — view contributions
• Benjamin Lupton — view contributions
• Rob Loach — view contributions

Sponsors

No sponsors yet! Will you be the first?

Contributors

These amazing people have contributed code to this project:

• Alexander Raskin — view contributions
• Anton W — view contributions
• Benjamin Lupton — view contributions
• Chase Colman — view contributions
• Lars Bilharz — view contributions
• Lars Bilharz
• Mikhail Menshikov — view contributions
• Rob Loach — view contributions
• Roman Komarov — view contributions
• Shinnosuke Watanabe
• ainop — view contributions
• mjrev — view contributions
• shinnn — view contributions

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

License

Unless stated otherwise all works are:

• Copyright © 2012+ Bevry Pty Ltd

and licensed under:

• MIT License

docpad-plugin-stylus's Issues

`@import`ed files are not being watched

Not sure how to fix this or if this pertains to this plugin or to docpad in general, but there it is.

When using an @import directive, those files are not watched and so the stylus file @importing them is not being recompiled.

Furthermore, those files are constantly being reset to a cached version (as far as I can tell) whenever the file @importing them is saved.

Changes to imported stylus sheet does not cause parent to re-generate.

Hello. It appears that something has changed in the way that Docpad regenerates the project when a file is saved.

Docpad version 6.63.2

My project has a main stylus style sheet and several imported styl documents in a sub directory. When the main style sheet is saved, the project regenerates and all changes are applied. When I save a change in one of the imported stylus documents the project regenerates but no changes are applied to the project.

When I check the out directory, I see that Docpad has changed the styl document, but the main stylesheet has not imported those changes. In order for me to apply any changes to an imported document, I have to save that document, and then save the main style sheet.

I assume that this has something to do with the changes in Docpad's latest update, as I have an older project running Docpad 6.59.6 and this project has no issues.

How can I set strict-math to on in the docpad configuration?

Hi

My problem is with the styles with calc. Without set strictMath to true it calculates and changes the style definition when it is compiled.

Example:

top: calc(100% - 2em)

Changes to:

top: calc(98%);

I think If I set strictMath to true or on, my problem will be fixed.

I know that I have to add the configuration in plugins, but what property and inside what option object?

Please update Stylus

There's no way to resolve relative `url`s

Hi! I keep my assets along with styl files and have similar structure in my styles directory:

src/documents/styles
├── styles.css.styl
├── page
│   └── page.styl
├── header
│   └── header.styl
├── logo
│   ├── logo.png
│   └── logo.styl
└── footer
    └── footer.styl

$ cat src/documents/styles/styles.css.styl
@import "*/*.styl"

When I build static, urls don't resolve. 'resolve url' in stylusOptions doesn't work as it's actually is a cli option and is handled in cli script: https://github.com/stylus/stylus/blob/961759bfcdcdcd437e62cbd6d3ab8bb6e5b4446e/bin/stylus#L797-L799.

I patched plugin to support 'resolve url', but not sure if it's legit way do such thing: https://github.com/ainop/docpad-plugin-stylus/commit/170a3cfe4cb51eb376a8c341b8079dee9f26b452