doubleu23-stylus

DoubleU23 - Stylus lib

Stylus mixins, utilities, helpers, ... The main feature is the MQ mixin

Usage

@import 'doubleu23-stylus'
 
html,
body
  font-size mFontSize
  +MQ('tablet')
    font-size tFontSize
  +MQ('desktop')
    font-size dFontSize
 
+MQ('tablet')
  .wrapper
    width 100%
 
+MQ('desktop')
  #page
    @extend .wrapper

Installation

$ npm install doubleu23-stylus

JavaScript API

with connect/express:

var connect             = require('connect')
,   server              = connect()
,   stylus              = require('stylus')
,   doubleu23Stylus     = require('doubleu23-stylus')
,   options             = {
    // these are the defaults
        envVars:        process.env
    ,   envPrefix:      '$ENV__'
    ,   imgUrlPrefix:   process.env.ROOT_PATH + '/assets' // TBD
    ,   mediaQueries:       {
            'xs':       'only screen and (min-width: 666px)', // overwrite 'xs'
            'custom':   'only screen and (max-width: 555px)'  // or define your own
        }
    }
 
function compile(str, path) {
    return stylus(str)
        .set('filename', path)
        .set('compress', true)
        .use(doubleu23Stylus(options))
}
 
// don't ask! (copied from "nib")
// may be out of date
server.use(stylus.middleware({
    src:      __dirname
,   compile:  compile
}))

with webpack:

var options             = {
    // these are the defaults
        envVars:        process.env
    ,   envPrefix:      '$ENV__'
    ,   imgUrlPrefix:   process.env.ROOT_PATH + '/assets' // TBD
    }
,   doubleu23Stylus     = require('doubleu23-stylus')
,   stylusLoaderDef     = {
        loader: 'stylus-loader',
        options: {
            sourceMap:  true,
            compress:   isDevelopment,
            use:        [doubleu23Stylus(options)]
        }
    }
,   config              = {
        module: {
            rules: [
                {
                    test: /\.styl$/,
                    use: isDevelopment ? [
                        { loader: 'style-loader',   options: { sourceMap: true } },
                        { loader: 'css-loader',     options: { sourceMap: true } },
                        { loader: 'postcss-loader', options: { sourceMap: true } },
                        stylusLoaderDef
                    ]
                    // for production (https://github.com/webpack-contrib/extract-text-webpack-plugin)
                    : ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'postcss-loader', stylusLoaderDef]
                    })
                }
            ]
        }
    }
 

Stylus Imports

To gain access to everything the lib has to offer, simply add:

@import 'doubleu23-stylus'

Or you may also pick only the MQ Vars and Mixins

@import 'doubleu23-stylus/mqs'

MQ-Mixin

// use it on top of selectors
body
    font-size 12px
+MQ('tablet')
    body
      font-size 14px
+MQ('deskop')
    body
        font-size 16px
 
// or use the mixin beetween the properties
body
    font-size 12px
    +MQ('tablet')
        font-size 14px
    +MQ('deskop')
        font-size 16px 50px 10px
    margin-right 1px

to avoid duplicate mediaqueries i use 'node-css-mqpacker' in my webpack setup

Changelog:

0.1.1 - ready for Stylus.use() API
0.1.8 - prefixed the vars - $p23_varname
0.2.0 - stable MQ's only import
0.2.1 - injects process.env.NODE_ENV into stylus (global var $ENV__NODE_ENV)
0.2.3 - added assetPath() to use 'process.env.ROOT_PATH' as url-prefix
0.3.0 - doubleu23-stylus now accepts options (envVars, envPrefix, imgUrlPrefix)
removed leftovers + some refactoring
0.3.1 - removed auto-import and pushed doubleu23-stylus into import paths

1.0.0 - BROKEN VERSION! - breaking changes:

• renamed mq variables ($stylus_mq_{name})
• allows to pass mediaQueries per options (#JavaScript API)
• shows error-div on top of page if an undefined MQ name is used
• ALWAYS (!) injects NODE_ENV (both ways: $ENV__NODE_ENV and {envPrefix + 'NODE_ENV'})

1.0.1 - fixxed: indentation errors (removed tabs)
1.0.2 - fixxed: also show error-div for non-root elements
1.0.3 - always inject $ENV__NODE_ENV !
1.0.4 - BROKEN VERSION! - added ./normalize.styl for better import path
1.0.5 - BROKEN VERSION! fixxed identation errors (again 💩 )
1.0.6 - fixxed - removed base mq in ./inc/normalize (will be added back in next versions)
1.0.7 - do NOT push __dirname into paths (double located filenames break build) 1.0.8 - fix error "if no options given" (preset options to {}) 1.0.9 - fixxed presetting options +++ push __dirname into paths! 1.0.10 - removed "set filename" 1.0.11 - fixxed undefined options 1.0.12 - fixxed undefined options! (🙈 maybe im drunk 🍺)
1.0.13 - 🐒 fixxed undefined options! ( 💤 should get some sleep! 💤)

1.x.y - TBD: release with new (final) name

Roadmap

• remove broken versions from README?
• rethink/refactor "seperated MQ files" (see oldREADME)
  • MQ "base"
  • • documentation in README (wrap all in MQ, output files, mediaqueried style links, ...)
• remove /inc path
  • remove imports in index.styl (just import what you need!)
• ?rename "_reset.styl" to "_preset.styl"?
• extended README
  • migration to 1.0.0
  • more infos for MQ mixin
  • describe file contents of /inc/*
• refactor "imgUrlPrefix"
• change package title
• testing (per ?mocha) if all imports and mixins are working
• testing?
• user should be able to overwrite MQ breakpoints (extend options)
• imports? paths?
• let user define which process.env vars should be injected + varPrefix

Contributors

• DoubleU23 (Original Creator)