sheetify-sibling
v1.0.1
Published
A sheetify plugin add sibling class selector to any first level class selector.
Downloads
7
Keywords
Readme
sheetify-sibling
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"
}
]
]
}
]
]
}
}