stephenlacy
commented
7 years ago This only passes the input files to stylus. The only way I have seen is to process the html, such as: https://stackoverflow.com/questions/12272936/is-it-possible-to-use-stylus-plugins-with-inline-stylus-code-embedded-in-a-jade The official response: https://github.com/pugjs/pug/issues/760
Now.... this is what I would do:
Create a simple parser for getting all the <style>
const rgx = /<style*>([^<>]+)<\/style>/
const input = '<style> body background: white </style>'
input.match(rgx)[1]
// => ' body background: white 'Then I'd run stylus over it and inject the css back into the style tags.
More complete example:
const stylus = require('stylus')
const rgx = /(<style*>)([^<>]+)(<\/style>)/
const input = '<head> <style> body { background: white } </style> </head>'
const matches = rgx.exec(input)
const before = input.substr(0, matches.index)
const after = input.substr(matches.index + matches[0].length)
const prefix = matches[1]
const source = matches[2]
const suffix = matches[3]
stylus.render(source, (err, css) => {
console.log(before + prefix + '\n' + css + suffix + after)
})
output:
<head> <style>
body {
background: #fff;
}
</style> </head>
gavinmcfarland
Hi there.
Is there a way I can use gulp-stylus to process a html file with style tags?