sheetify-sibling

1.0.1 • Public • Published

sheetify-sibling stability

npm version downloads travis build

A sheetify plugin add sibling class to any firstLevel class selector.

Apply on global css module in node_modules/ only.

why

Recently I dev a website without tachyons, after I used it on a new component. Tachyons conflicted with my old code. I can solve this if I can use tachyons with an additional identify class 'tachyons' like semantic-ui's 'ui', then sheetify-sibling born.

<!-- semantic-ui -->
<div class="ui four column doubling stackable grid container">
  <div class="column">
    <p></p>
    <p></p>
  </div>
</div>
 
<!--
  tachyons: I'd like to have a identify class too
  sheetify-sibling: you will..
-->
<p class="tachyons pa1 fs-normal center cf"></p>

example

/* a global css module */
.a{
  color: red
}
.b.c{
  color: black
}
.c > .e .f{
  color: green
}
.d.v{
  font-size: 10px
}
 
/* run */
const browserify = require('browserify')
 
browserify()
 .transform('sheetify', { use: [
   [ 'sheetify-sibling', {'somecsslib': 'sibling'} ]
 ] })
 .bundle()
/* result */
.a.sibling{
  color: red
}
.b.sibling.c.sibling{
  color: black
}
.c.sibling > .e .f{
  color: green
}
.d.v.sibling{
  font-size: 10px
}

usage

javascript

const browserify = require('browserify')
 
browserify()
 .transform('sheetify', { use: [ 'sheetify-sibling', {
   // globalCssModuleName: siblingName
   'tachyons-flexbox': 'tachyons',
   'tachyons-skins': 'tachyons'
 } ] })
 .bundle()

package.json

{
  "browserify": {
    "transform": [
      [ "sheetify",
        {
          "u": [
            [
              "sheetify-sibling", {
                "tachyons-flexbox": "tachyons",
                "tachyons-skins": "tachyons"      
              }
            ]
          ]
        }        
      ]
    ]
  }
}

License

MIT

/sheetify-sibling/

    Package Sidebar

    Install

    npm i sheetify-sibling

    Weekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • bret
    • goto-bus-stop
    • yoshuawuyts
    • ahdinosaur
    • hughsk
    • jongacnik
    • zhouhancheng