https://github.com/stackcss/sheetify-sibling

A sheetify plugin add sibling class selector to any first level class selector.
https://github.com/stackcss/sheetify-sibling

Last synced: about 1 month ago
JSON representation

A sheetify plugin add sibling class selector to any first level class selector.

• Host: GitHub
• URL: https://github.com/stackcss/sheetify-sibling
• Owner: stackcss
• License: mit
• Created: 2017-12-22T10:50:23.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-16T08:23:40.000Z (almost 7 years ago)
• Last Synced: 2024-11-14T01:03:44.799Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sheetify-sibling [![stability][0]][1]

 [![npm version][2]][3] [![downloads][4]][5]

 ![travis build][6]

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.

```html



  


    


    


  





```


## example

```css

/* a global css module */

.a{

  color: red

}

.b, .c{

  color: black

}

.c > .e .f{

  color: green

}

.d.v{

  font-size: 10px

}

```

```js

/* run */

const browserify = require('browserify')

browserify()

 .transform('sheetify', { use: [

   [ 'sheetify-sibling', {'somecsslib': 'sibling'} ]

 ] })

 .bundle()

```

```css

/* 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

```js

const browserify = require('browserify')

browserify()

 .transform('sheetify', { use: [ 'sheetify-sibling', {

   // globalCssModuleName: siblingName

   'tachyons-flexbox': 'tachyons',

   'tachyons-skins': 'tachyons'

 } ] })

 .bundle()

```

### package.json

```json

{

  "browserify": {

    "transform": [

      [ "sheetify",

        {

          "u": [

            [

              "sheetify-sibling", {

                "tachyons-flexbox": "tachyons",

                "tachyons-skins": "tachyons"      

              }

            ]

          ]

        }        

      ]

    ]

  }

}

```

## License

[MIT](https://tldrlegal.com/license/mit-license)

[0]: https://img.shields.io/badge/stability-stable-green.svg

[1]: https://nodejs.org/api/documentation.html#documentation_stability_index

[2]: https://img.shields.io/npm/v/sheetify-sibling.svg?style=flat-square

[3]: https://npmjs.org/package/sheetify-sibling

[4]: http://img.shields.io/npm/dm/sheetify-sibling.svg?style=flat-square

[5]: https://npmjs.org/package/sheetify-sibling

[6]: https://travis-ci.org/stackcss/sheetify-sibling.svg?branch=master