├── .eslintignore ├── .eslintrc ├── .github ├── dependabot.yml ├── stale.yml └── workflows │ └── tester.yml ├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── lib └── renderer.js ├── package.json └── test ├── .eslintrc ├── .mocharc.yml └── index.js /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | tmp/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "hexo", 3 | "root": true 4 | } -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: github-actions 4 | directory: "/" 5 | schedule: 6 | interval: daily -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 60 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Comment to post when marking an issue as stale. Set to `false` to disable 6 | markComment: > 7 | This issue has been automatically marked as stale because it has not had 8 | recent activity. It will be closed if no further activity occurs. Thank you 9 | for your contributions. 10 | # Comment to post when closing a stale issue. Set to `false` to disable 11 | closeComment: false 12 | # Comment to post when removing the stale label. Set to `false` to disable 13 | unmarkComment: false 14 | # Limit to only `issues` or `pulls` 15 | only: issues 16 | -------------------------------------------------------------------------------- /.github/workflows/tester.yml: -------------------------------------------------------------------------------- 1 | name: Tester 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | tester: 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | os: [ubuntu-latest, windows-latest, macos-latest] 11 | node-version: ['14.x', '16.x', '18.x'] 12 | fail-fast: false 13 | steps: 14 | - uses: actions/checkout@v4 15 | with: 16 | submodules: true 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | - name: Install Dependencies 22 | run: npm install 23 | - name: Test 24 | run: npm test 25 | env: 26 | CI: true 27 | coverage: 28 | runs-on: ${{ matrix.os }} 29 | strategy: 30 | matrix: 31 | os: [ubuntu-latest] 32 | node-version: ['14.x'] 33 | steps: 34 | - uses: actions/checkout@v4 35 | with: 36 | submodules: true 37 | - name: Use Node.js ${{ matrix.node-version }} 38 | uses: actions/setup-node@v4 39 | with: 40 | node-version: ${{ matrix.node-version }} 41 | - name: Install Dependencies 42 | run: npm install 43 | - name: Coverage 44 | run: npm run test-cov 45 | env: 46 | CI: true 47 | - name: Coveralls 48 | uses: coverallsapp/github-action@master 49 | with: 50 | github-token: ${{ secrets.github_token }} 51 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | tmp/ 4 | *.log 5 | .idea/ 6 | coverage/ 7 | yarn.lock 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Tommy Chen 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hexo-renderer-stylus 2 | 3 | [![Build Status](https://github.com/hexojs/hexo-renderer-stylus/workflows/Tester/badge.svg)](https://github.com/hexojs/hexo-renderer-stylus/actions/workflows/tester.yml) 4 | [![NPM version](https://badge.fury.io/js/hexo-renderer-stylus.svg)](https://www.npmjs.com/package/hexo-renderer-stylus) 5 | [![Coverage Status](https://img.shields.io/coveralls/hexojs/hexo-renderer-stylus.svg)](https://coveralls.io/r/hexojs/hexo-renderer-stylus?branch=master) 6 | 7 | Add support for [Stylus] with [nib] and other plugins. 8 | 9 | ## Install 10 | 11 | Prerequisites: 12 | - Hexo 3: >= 0.2 13 | - Hexo 2: 0.1.x 14 | 15 | ``` bash 16 | $ npm install hexo-renderer-stylus --save 17 | ``` 18 | 19 | ## Options 20 | 21 | You can configure this plugin in `_config.yml`. 22 | 23 | ``` yaml 24 | stylus: 25 | compress: false 26 | sourcemaps: 27 | comment: true 28 | inline: true 29 | sourceRoot: '' 30 | basePath: . 31 | plugins: 'nib' 32 | ``` 33 | 34 | - **compress** - Compress generated CSS (default: `false`) 35 | - **sourcemaps** 36 | - **comment** - Adds a comment with the `sourceMappingURL` to the generated CSS (default: `true`) 37 | - **inline** - Inlines the sourcemap with full source text in base64 format (default: `false`) 38 | - **sourceRoot** - `sourceRoot` property of the generated sourcemap 39 | - **basePath** - Base path from which sourcemap and all sources are relative (default: `.`) 40 | - **plugins** - Stylus plugin(s) (default: `nib`) 41 | 42 | ## Setting Stylus variables 43 | 44 | It is possible to set variables that can be used in Stylus. 45 | The purpose of setting variable is to avoid direct modification of the Stylus code, 46 | and thus to make themes more generic 47 | 48 | For example, instead of hardcoding: 49 | ```stylus 50 | div 51 | color #FFCC44 52 | ``` 53 | 54 | You can refer to a variable: 55 | ```stylus 56 | div 57 | color convert(hexo-config("moody_red")) 58 | ``` 59 | 60 | And in your **theme's** configuration, you can define this variable: 61 | ```yml 62 | moody_red: "#8B0001" 63 | ``` 64 | 65 | (The "convert" function above is here to convert the string into an actual stylus color) 66 | 67 | You can also use the theme_config variable in the main `_config.yml`: 68 | ```yml 69 | theme_config: 70 | moody_red: "#8B0001" 71 | ``` 72 | 73 | [Stylus]: https://stylus-lang.com/ 74 | [nib]: https://stylus.github.io/nib/ 75 | 76 | ## Extensibility 77 | 78 | This plugin provide a filter `stylus:renderer` to allows you extend it. When there's something you cannot do in Stylus, define it in JavaScript! 79 | 80 | For example, to define some global variable: 81 | 82 | ```js 83 | hexo.extend.filter.register('stylus:renderer', function(style) { 84 | style 85 | // we may define a global variable by passing a `Node` 86 | .define('has-canvas', require('stylus').nodes.false); 87 | // stylus also casts JavaScript values to their Stylus equivalents when possible 88 | .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif']) 89 | // also allows you to provide a JavaScript-defined function to Stylus 90 | .define('get-list', function(){ 91 | return ['foo', 'bar', 'baz']; 92 | }); 93 | }) 94 | ``` 95 | 96 | Save the file in "scripts/" folder and run Hexo as usual. 97 | 98 | Notice: for more JavaScript api, refer to stylus's [documentation](https://stylus-lang.com/docs/js.html). 99 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global hexo */ 2 | 'use strict'; 3 | 4 | const renderer = require('./lib/renderer'); 5 | 6 | hexo.extend.renderer.register('styl', 'css', renderer); 7 | hexo.extend.renderer.register('stylus', 'css', renderer); 8 | -------------------------------------------------------------------------------- /lib/renderer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const stylus = require('stylus'); 4 | 5 | function getProperty(obj, name) { 6 | name = name.replace(/\[(\w+)\]/g, '.$1').replace(/^\./, ''); 7 | 8 | const split = name.split('.'); 9 | let key = split.shift(); 10 | 11 | if (!Object.prototype.hasOwnProperty.call(obj, key)) return ''; 12 | 13 | let result = obj[key]; 14 | const len = split.length; 15 | 16 | if (!len) { 17 | if (result === 0) return result; 18 | return result || ''; 19 | } 20 | if (typeof result !== 'object') return ''; 21 | 22 | for (let i = 0; i < len; i++) { 23 | key = split[i]; 24 | if (!Object.prototype.hasOwnProperty.call(result, key)) return ''; 25 | 26 | result = result[split[i]]; 27 | if (typeof result !== 'object') return result; 28 | } 29 | 30 | return result; 31 | } 32 | 33 | function applyPlugins(stylusConfig, plugins) { 34 | plugins.forEach(plugin => { 35 | const factoryFn = require(plugin.trim()); 36 | stylusConfig.use(factoryFn()); 37 | }); 38 | } 39 | 40 | function stylusFn(data, options, callback) { 41 | const config = this.config.stylus || {}; 42 | const self = this; 43 | const plugins = ['nib'].concat(config.plugins || []); 44 | 45 | function defineConfig(style) { 46 | style.define('hexo-config', data => { 47 | return getProperty(self.theme.config, data.val); 48 | }); 49 | } 50 | 51 | const stylusConfig = stylus(data.text); 52 | 53 | applyPlugins(stylusConfig, plugins); 54 | 55 | stylusConfig 56 | .use(defineConfig) 57 | .use(style => this.execFilterSync('stylus:renderer', style, {context: this})) 58 | .set('filename', data.path) 59 | .set('sourcemap', config.sourcemaps) 60 | .set('compress', config.compress) 61 | .set('include css', true) 62 | .render(callback); 63 | } 64 | 65 | stylusFn.disableNunjucks = true; 66 | 67 | module.exports = stylusFn; 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-renderer-stylus", 3 | "version": "3.0.1", 4 | "description": "Stylus renderer plugin for Hexo", 5 | "main": "index", 6 | "scripts": { 7 | "eslint": "eslint .", 8 | "test": "mocha test/index.js", 9 | "test-cov": "c8 --reporter=lcovonly --reporter=text npm run test" 10 | }, 11 | "directories": { 12 | "lib": "./lib" 13 | }, 14 | "files": [ 15 | "lib", 16 | "index.js" 17 | ], 18 | "repository": "hexojs/hexo-renderer-stylus", 19 | "keywords": [ 20 | "hexo", 21 | "stylus", 22 | "css", 23 | "style", 24 | "stylesheet", 25 | "styl", 26 | "renderer" 27 | ], 28 | "author": "Tommy Chen (https://zespia.tw)", 29 | "license": "MIT", 30 | "dependencies": { 31 | "nib": "^1.2.0", 32 | "stylus": "^0.62.0" 33 | }, 34 | "devDependencies": { 35 | "c8": "^8.0.0", 36 | "chai": "^4.3.7", 37 | "eslint": "^8.40.0", 38 | "eslint-config-hexo": "^5.0.0", 39 | "hexo": "^7.0.0", 40 | "mocha": "^10.2.0" 41 | }, 42 | "engines": { 43 | "node": ">=14" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "hexo/test" 3 | } -------------------------------------------------------------------------------- /test/.mocharc.yml: -------------------------------------------------------------------------------- 1 | reporter: spec 2 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('chai').should(); 4 | const Hexo = require('hexo'); 5 | 6 | describe('Stylus renderer', () => { 7 | const hexo = new Hexo(__dirname, {silent: true}); 8 | const defaultCfg = JSON.parse(JSON.stringify(Object.assign(hexo.config, { 9 | stylus: { 10 | compress: false 11 | } 12 | }))); 13 | const themeCfg = JSON.parse(JSON.stringify(Object.assign(hexo.theme.config, { 14 | foo: 1, 15 | bar: { 16 | baz: 2 17 | }, 18 | nil: null, 19 | obj: { 20 | arr: [1, 2, 3] 21 | } 22 | }))); 23 | 24 | const r = require('../lib/renderer').bind(hexo); 25 | 26 | beforeEach(() => { 27 | hexo.config = JSON.parse(JSON.stringify(defaultCfg)); 28 | hexo.theme.config = JSON.parse(JSON.stringify(themeCfg)); 29 | }); 30 | 31 | it('no config', () => { 32 | const body = [ 33 | '.foo', 34 | ' color: red' 35 | ].join('\n'); 36 | 37 | hexo.config.stylus = {}; 38 | r({text: body}, {}, (err, result) => { 39 | if (err) throw err; 40 | 41 | result.should.eql([ 42 | '.foo {', 43 | ' color: #f00;', 44 | '}' 45 | ].join('\n') + '\n'); 46 | }); 47 | }); 48 | 49 | it('default', () => { 50 | const body = [ 51 | '.foo', 52 | ' color: red' 53 | ].join('\n'); 54 | 55 | r({text: body}, {}, (err, result) => { 56 | if (err) throw err; 57 | 58 | result.should.eql([ 59 | '.foo {', 60 | ' color: #f00;', 61 | '}' 62 | ].join('\n') + '\n'); 63 | }); 64 | }); 65 | 66 | it('compress', () => { 67 | hexo.config.stylus.compress = true; 68 | 69 | const body = [ 70 | '.foo', 71 | ' color: red' 72 | ].join('\n'); 73 | 74 | r({text: body}, {}, (err, result) => { 75 | if (err) throw err; 76 | 77 | result.should.eql('.foo{color:#f00}'); 78 | }); 79 | }); 80 | 81 | it('hexo-config', () => { 82 | const body = [ 83 | // first depth and exist 84 | '.foo', 85 | ' content: hexo-config("foo")', 86 | '', 87 | // second depth and exist 88 | '.bar', 89 | ' content: hexo-config("bar.baz")', 90 | '', 91 | // another style for nested attribute 92 | '.baz', 93 | ' content: hexo-config("bar[baz]")', 94 | '', 95 | // nested attribute does not exist 96 | '.boo', 97 | ' content: hexo-config("bar.boo")', 98 | '', 99 | // config does not exist 100 | '.test', 101 | ' content: hexo-config("boo")', 102 | '', 103 | // try to get nested attribute in non-object 104 | '.app', 105 | ' content: hexo-config("foo.test")', 106 | '', 107 | // nil attribute 108 | '.nil', 109 | ' content: hexo-config("nil")', 110 | '', 111 | // object attribute 112 | '.obj', 113 | ' for i in hexo-config("obj.arr")', 114 | ' content: i' 115 | ].join('\n'); 116 | 117 | r({text: body}, {}, (err, result) => { 118 | if (err) throw err; 119 | 120 | result.should.eql([ 121 | '.foo {', 122 | ' content: 1;', 123 | '}', 124 | '.bar {', 125 | ' content: 2;', 126 | '}', 127 | '.baz {', 128 | ' content: 2;', 129 | '}', 130 | '.boo {', 131 | ' content: \'\';', 132 | '}', 133 | '.test {', 134 | ' content: \'\';', 135 | '}', 136 | '.app {', 137 | ' content: \'\';', 138 | '}', 139 | '.nil {', 140 | ' content: \'\';', 141 | '}', 142 | '.obj {', 143 | ' content: 1;', 144 | ' content: 2;', 145 | ' content: 3;', 146 | '}' 147 | ].join('\n') + '\n'); 148 | }); 149 | }); 150 | 151 | describe('exec filter to extend', () => { 152 | it('should execute filter registered to stylus:renderer', () => { 153 | const hexo = new Hexo(__dirname, {silent: true}); 154 | Object.assign(hexo, { 155 | config: { 156 | stylus: { 157 | compress: false 158 | } 159 | } 160 | }); 161 | hexo.extend.filter.register('stylus:renderer', style => { 162 | style.define('examples', () => { 163 | return 'foo'; 164 | }); 165 | }); 166 | const filterRender = require('../lib/renderer').bind(hexo); 167 | const body = [ 168 | '.foo', 169 | ' content: examples()', 170 | '' 171 | ].join('\n'); 172 | filterRender({text: body}, {}, (err, result) => { 173 | if (err) throw err; 174 | result.should.eql([ 175 | '.foo {', 176 | ' content: \'foo\';', 177 | '}' 178 | ].join('\n') + '\n'); 179 | }); 180 | }); 181 | 182 | describe('nunjucks', () => { 183 | const hexo = new Hexo(__dirname, { silent: true }); 184 | const loremFn = () => { return 'ipsum'; }; 185 | const engine = 'styl'; 186 | 187 | before(async () => { 188 | await hexo.init(); 189 | hexo.extend.tag.register('lorem', loremFn); 190 | hexo.extend.renderer.register('styl', 'css', require('../lib/renderer')); 191 | }); 192 | 193 | it('default', async () => { 194 | const result = await hexo.post.render(null, { content: 'foo\n bar: "{% lorem %}"', engine }); 195 | result.content.should.eql('foo {\n bar: "{% lorem %}";\n}\n'); 196 | }); 197 | 198 | it('disable disabelNunjucks', async () => { 199 | const renderer = hexo.render.renderer.get('styl'); 200 | renderer.disableNunjucks = false; 201 | hexo.extend.renderer.register('styl', 'css', renderer); 202 | 203 | const result = await hexo.post.render(null, { content: 'foo\n bar: "{% lorem %}"', engine }); 204 | result.content.should.eql('foo {\n bar: "' + loremFn() + '";\n}\n'); 205 | }); 206 | }); 207 | }); 208 | }); 209 | --------------------------------------------------------------------------------