{"id":18678248,"url":"https://github.com/stackr23/stylus23","last_synced_at":"2025-10-13T19:14:28.757Z","repository":{"id":96625276,"uuid":"155918944","full_name":"stackr23/stylus23","owner":"stackr23","description":"stylus plugin inclusive mixins and boilerplate code like normalize and other stuff","archived":false,"fork":false,"pushed_at":"2018-11-06T11:49:43.000Z","size":18,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-01T13:53:15.165Z","etag":null,"topics":["boilerplate","js-api","mediaqueries","mixins","stylus"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackr23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-02T20:36:31.000Z","updated_at":"2018-11-06T10:09:45.000Z","dependencies_parsed_at":"2023-03-13T16:27:10.650Z","dependency_job_id":null,"html_url":"https://github.com/stackr23/stylus23","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stackr23/stylus23","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fstylus23","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fstylus23/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fstylus23/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fstylus23/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackr23","download_url":"https://codeload.github.com/stackr23/stylus23/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fstylus23/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016888,"owners_count":26085884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","js-api","mediaqueries","mixins","stylus"],"created_at":"2024-11-07T09:36:39.959Z","updated_at":"2025-10-13T19:14:28.728Z","avatar_url":"https://github.com/stackr23.png","language":"CSS","readme":"# Stylus23\n\u003e Stylus mixins, utilities, helpers, ...\nThe main feature is the [MQ mixin](#mq-mixin)\n\n## Usage\n```Stylus\n@import 'stylus23'\n\nbody\n  font-size mFontSize\n  +MQ('tablet')\n    font-size tFontSize\n  +MQ('desktop')\n    font-size dFontSize\n\n+MQ('tablet')\n  .wrapper\n    width 100%\n    @extend .clearfix\n\n+MQ('desktop')\n  #page\n    @extend .wrapper\n```\n\n## Installation\n\n```bash\n$ npm install stylus23\n```\n\n## JavaScript API\n\n__with connect/express:__\n```javascript\nvar connect             = require('connect')\n,   server              = connect()\n,   stylus              = require('stylus')\n,   stylus23            = require('stylus23')\n\nfunction compile(str, path) {\n    return stylus(str)\n        .set('filename', path)\n        .set('compress', true)\n        .use(stylus23(options))\n}\n\nserver.use(stylus.middleware({\n    src:      __dirname\n,   compile:  compile\n}))\n```\n\n__with webpack:__\n```javascript\nvar stylus23     = require('stylus23')\n,   stylusLoaderDef     = {\n        loader: 'stylus-loader',\n        options: {\n            sourceMap:  true,\n            compress:   isDevelopment,\n            use:        [stylus23(options)]\n        }\n    }\n,   config              = {\n        module: {\n            rules: [\n                {\n                    test: /\\.styl$/,\n                    use: isDevelopment ? [\n                        { loader: 'style-loader',   options: { sourceMap: true } },\n                        { loader: 'css-loader',     options: { sourceMap: true } },\n                        { loader: 'postcss-loader', options: { sourceMap: true } },\n                        stylusLoaderDef\n                    ]\n                    // for production (https://github.com/webpack-contrib/extract-text-webpack-plugin)\n                    : ExtractTextPlugin.extract({\n                        fallback: 'style-loader',\n                        use: ['css-loader', 'postcss-loader', stylusLoaderDef]\n                    })\n                }\n            ]\n        }\n    }\n\n```\n\n### default options\n\n```javascript\n{\n      envVars:        process.env\n  ,   envPrefix:      '$ENV__'\n  ,   imgUrlPrefix:   process.env.ROOT_PATH + '/assets' // TBD\n}\n```\n\n## Stylus Imports  \n\nTo gain access to everything the lib has to offer, simply add:  \n  ```stylus\n  @import 'stylus23'\n  ```\n  Or you may also pick only the MQ Vars and Mixins\n\n  ```stylus\n  @import 'stylus23/mqs'\n  ```\n\n## MQs\n\n```stylus\n// default mediaquery vars\n$stylus_mq_xs   ?= 'only screen and (max-width: 333px)'\n$stylus_mq_s    ?= 'only screen and (min-width: 640px)'\n$stylus_mq_m    ?= 'only screen and (min-width: 768px)'\n$stylus_mq_l    ?= 'only screen and (min-width: 1024px)'\n$stylus_mq_xl   ?= 'only screen and (min-width: 1200px)'\n```\n\nWe do a simple `lookup('$stylus_mq_' + name)`,  \nso you can easily add or overwrite mqs before you load stylus23.\n\nyou can also modify them via JS per passing them in options:\n```\n{mediaQueries: {\n    name:   'only screen and (min-width: 999px)'\n}}\n```\n\n\u003e **to avoid duplicate mediaqueries i use '[node-css-mqpacker](https://github.com/hail2u/node-css-mqpacker)' in my webpack setup**\n\n## Changelog:\n\n**1.1.0** - renamed to __STYLUS23__\n  \n**1.0.0** - **breaking changes:**   \n* renamed mq variables ($stylus_mq_{name})  \n* allows to pass mediaQueries per options ([#JavaScript API](#javascript-api))  \n* shows error-div on top of page if an undefined MQ name is used\n* ALWAYS (!) injects NODE_ENV (both ways: $ENV__NODE_ENV and {envPrefix + 'NODE_ENV'})\n\n**0.3.0** - stylus23 now accepts options (envVars, envPrefix, imgUrlPrefix)  \n**0.2.3** - added assetPath() to use 'process.env.ROOT_PATH' as url-prefix  \n**0.2.1** - injects process.env.NODE_ENV into stylus (global var $ENV__NODE_ENV)  \n**0.1.1** - ready for Stylus.use() API  \n\n### Roadmap\n* rethink/refactor \"seperated MQ files\" (see oldREADME)\n  * MQ \"base\" \n* remove /inc path\n* [ ] refactor \"imgUrlPrefix\"  \n* [ ] refactor assetPath - ROOT_PATH =\u003e APP_ROOT\n* [ ] testing  \n* [x] extend MQs per options  \n\n## Contributors\n  - [DoubleU23](https://github.com/DoubleU23) (Original Creator)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackr23%2Fstylus23","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackr23%2Fstylus23","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackr23%2Fstylus23/lists"}