Happy Hacking

Rabbit superwonderfulexcellent

5

• JS
• CSS
• HTML
• Image
• Font

4

Happypack loader webpack2 rebuild

webpack

Happypack``Happypack

Happypack``webpack loader``happypack loader

{
  test: /\.jsx?$/,
  loader: 'happypack/loader?id=js'
}

new HappyPack({
  id: 'js',
  threads: 2,
  loaders: ['babel?cacheDirectory=true'],
  verbose: false
})

Happypackloaderthreads

const pool = HappyPack.ThreadPool({ size: 6 })

new HappyPack({
  id: 'js',
  threadPool: pool,
  loaders: ['babel?cacheDirectory=true'],
  verbose: false
})

Happypackbuildrebuild

HappypackHappypackbuildrebuild

dll

dll

dependencies dll

package.json``dependenciesdependenciesHappypackwatch

monaco-editor

1. -S``-D``npm i -D monaco-editor``devDependencies``dependencies
2. dll``.rabbit

builder

webpack elm app

• port Js Js es ts toJswebpack you need
• elm reactor webpack api mock server
• webpack

builderbuilder

CSS Live

Stylus / Postcss

• stylus and css naming
• stylus modules import and export
• stylus mixins and functions
• postcss propery and value alias
• css layout and views

stylus and css naming

stylus/css

stylus utils naming

[_]<Namespace>-<ClassName>[-<ChildClassName>][--<Modifier>]

_

Namespace

• c - Components. e.g .c-btn
• u - Utilities. e.g .u-fill

lib/u

stylus modules import and export

stylus

stylus @import``@require@require****@import

@import****css

@import "index.css"

css@importcss

@import "index.css"

stylstylus node stylus path path path

function stylusOption() {
  return {
    include: env.paths,
  }
}

@import "module"

stylus

• module.styl
• module/index.styl

stylus @media

@media mobile
  @import "mobile"

stylusglob* styl

@import "component/*"

Rabbit

mixinu-grid``u-grid-export

u-grid-export(
  $gutter = 1.5rem,
  $bRow   = "row",
  $bGrid  = "grid",
  $isFlex = true,
  $isMixinWidth = false,
  $isExportRow  = true,
  $isExportGrid = true,
  $isExportGridOffset = false,
  $isExportGridPull = false,
  $isExportGridPush = false,
  $isExportGridLast = true,
  $isLastMixinWidth = false,
  $mGridLast = "last"
)

  // Export Row basic.
  if $isExportRow
    .{$bRow}
      u-row $gutter $isFlex

      
  // Export Grid basic.
  if $isExportGrid
    .{$bGrid}
      u-grid $gutter $isExportGridLast $isFlex

      
  // Export Grid from right.
  if $isExportGridLast
    .{$bGrid}-{$mGridLast}
      u-grid $gutter $isExportGridLast
      

@require "u:grid"

@require "u:grid[]"

[]``u-<namespace>-export

@require "u:grid[$isFlex:true,$isExportGridLast:false]"

1:1

//@Todos

rabbit.json

postcss propery and value alias

stylus mixins and functions

css layout and views

css media and breakpoint

spacemacs and stylus mode plugins