j2c, 在JS库中,小型但 featureful,CSS

分享于 

20分钟阅读

GitHub

  繁體 雙語
A JavaScript to CSS compiler
  • 源代码名称:j2c
  • 源代码网址:http://www.github.com/j2css/j2c
  • j2c源代码文档
  • j2c源代码下载
  • Git URL:
    git://www.github.com/j2css/j2c.git
    Git Clone代码到本地:
    git clone http://www.github.com/j2css/j2c
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/j2css/j2c
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    j2c npm.min.gz

    Join the chat at https://gitter.im/j2css/j2cBuild StatusCoverage StatusDependency StatusbitHound Scoredownloads

    JS解决方案中的精简,无麻烦的CSS。

    从独立使用扩展到同构应用。 任何框架/视图库兼容。

    支持生成完整样式表的inline 样式。

    sheet 模式下,j2c 遵循一个英镑的'默认情况下为本地'方法,使编写组件更加容易,不用担心类和动画名称冲突。

    SASS,LESS 和手写笔一样,j2c 支持:

    • mixin
    • @extend
    • 嵌套选择器( 在 sheet 模式下)

    所有标准CSS规则都可以开箱即用,最重要的是:

    • @media@supports 可以嵌套在工作表的任意位置
    • @keyframes ( 自动生成 @-webkit-keyframes )
    • @font-face

    主页有几个交互式演示。

    table-内容

    安装

    $ npm install j2c

    然后

    var j2c =require('j2c')

    还有 AMDES6dist 目录中的全局 window.j2c的独立构建。

    用法

    j2c 可以用来组合 inline 声明或者完整的样式表,默认情况下是本地唯一类名。

    下面是locallized类名称( 以 JSS 为首的AFAIK )的一个示例:

    sheet =j2c.sheet({
     ".title": {
     font_size:"3rem",
     "&:before": {
     color:"#00b",
     content:"'#'" }
     },
     ".content": {
     line_height:"1.6em",
     padding:"2rem" }
    });

    titlecontent 自动生成唯一的类名:

    .content_j2c_fvp6zc2gdj35evhsl73ffzq_0 {
     line-height: 1.6em;
     padding: 2rem;
    }.title_j2c_fvp6zc2gdj35evhsl73ffzq_0 {
     font-size: 3rem;
    }.title_j2c_fvp6zc2gdj35evhsl73ffzq_0:before {
     content: '#';
     color: #888;
    }

    现在 sheet 是一个 String 对象,具有一个包含惟一类名的titlecontent 属性。 它可以在你的视图中使用,在服务器上,在同构应用程序( 我们假设这是React的一部分)的浏览器中:

    <div>
     <style>{sheet}</style>
     <h3 class="{sheet.title}">Hello</h3>
     <div class="{sheet.content}">Foo bar baz...</div>
    </div>

    <style>{sheet}</style> 构造在modernish浏览器的( IE9+ ) 中工作。 对于较老的IE,请参阅 below

    动画名称也默认为"本地化",字体名称未被更改。

    用于 inline 声明的: j2c.inline(declarations)

    j2c 函数接受JS对象,并从它构建一个 property:value; 列表。

    j2c.inline({
     backgroundColor:"red",
     border: {
     top$left: {
     width:"1px",
     color:"white" }
     }
    })

    输出,如你所期望的( 为可读性添加的空白):

    background-color: red;border-top-color: white;border-top-width: 1px;border-left-color: white;border-left-width: 1px;

    CamelCase_snake_case 名称被转换成 -dash-case,因这里属性名可以在源中不带引号。

    使用 $ 作为分隔符将共享相同值的( 子) 属性组合在一起。 指定供应商前缀是很有用的。

    属性排序

    如果不删除并向对象添加属性,则属性将在源顺序中的CSS工作表中结束。

    值重载和mixin的数组

    你可以在源树的任意位置偷偷地。 它支持许多高级技术,例如:

    重载属性

    如果要在值级别使用 array 重载属性,请执行下列操作:

    j2c.inline({
     border_color: ["#33e", "rgba(64,64,255,0.8)"],
    })

    变成

    border-color:#33e;border-color:rgba(64,64,255,0.8);

    或者:

    j2c.inline([
     { border_color:"#33e"},
     { border_color:"rgba(64,64,255,0.8)"}
    ])

    j2c.inline({
     border:[
     {color:"#33e"},
     {color:"rgba(64,64,255,0.8)"}
     ]
    })

    会给出同样的结果。

    mixin

    你可以使用 array 中的函数调用来混合属性:

    functionmixin(color) {
     return {
     border_color: color,
     color: color
     }
    }j2c.inline([
     mixin("red"),
     {
     font_size:"2em" }
    ])
    'color:red;border-color:red;font-size:2em;'

    如果mixin不需要定制,那么它也可以是一个普通的JS对象。

    用于构建样式表: j2c.sheet(rules)

    inline 部分中找到的所有内容也适用,我建议你先阅读。

    让你了解在j2c中可以做什么,这里是一个非常先进的示例。

    s =j2c.sheet({
     "ul.foo": {
     "@media condition": {
     color:"red" },
     // properties for the main ul.my_root_class elements font: {
     size:"2em",
     family:"sans-serif" },
     // underscores in property names are converted to dashes. background_color:"#44f",
     // CamelCase is also automatically handled. borderRadius:"2px",
     // sub-selector for children element, notice the mandatory initial space// signifying a child element." li": {
     padding:{
     left:"5px",
     top:"10px" },
     // convenient $ shortcut. border: {left$right: {width:"2px"}}
     }
     }
    })

    输出( 缩进后):

    ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0li{
     padding-left:5px;
     padding-top:10px;
     border-left-width:2px;
     border-right-width:2px;
    }ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0{
     font-size:2em;
     font-family:sans-serif;
     background-color:#44f;
    }@media condition{
     ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0{
     color:red;
     }
    }

    Were s.foo ==="foo_j2c_fgdl0s2a5fmle5g56rbuax71_0"

    全局类和动画名称。

    你可以使用 @global{} 伪规则定义或者引用全局名称,也可以使用 :global() 函数。 这样将保留 .foo.barbaz 名称:

    s =j2c.sheet({
     "@global": {
     "ul.foo": {
     font_size:"2em",
     }
     },
     "p:global(.bar)":{
     color:"#f00",
     animation_name:":global(baz)" },
     "@keyframes :global(baz)": {
     // define the global"baz" animation here. }
    })

    @global 块也会全球化动画名称( 未显示 上面 )。

    组合多个选择器

    TODO: 重构这个部分以提到像 & 占位符( 在任意位置) 这样的。

    下面是 PocketGridj2c 端口的一个摘录。

    j2c.sheet({"@global": {
     ".block,.blockgroup":{
     ",:before,:after":{ // Notice the initial comma. box_sizing:"border-box" }
     }
    }})

    嵌套 ",:before,:after" inside ".block,.blockgroup" block 将 [".block",".blockgroup"]["",":before",":after"] 结合,给出

    .block,.block:before,.block:after,.blockgroup,.blockgroup:before,.blockgroup:after{
     box-sizing:border-box;
    }

    Mathy人们把这个叫做笛卡尔积。

    规则

    j2c 从框中处理 @-rules,包括嵌套的。

    j2c.sheet({
     "@media screen": {
     " p": {
     foo:"bar",
     "@media (orientation: landscape)": {
     baz:"qux" }
     }
     }
    })

    变成

    @mediascreen {
     p {
     foo: bar;
     }
     @media (orientation: landscape) {
     p {
     baz: qux;
     }
     }
    }

    对于 @keyframes 规则,将自动创建 @-webkit-keyframes block,其中带有自动前缀属性名。

    mixin和 @extend

    mixin和 @extend 使 j2c 工作表可以组合。 两种技术都可以组合。

    mixin和源对象组合

    对于 mixin,数组与在选择器级别一样工作,因为它们在属性/值中执行。 因此,可以使用在部分中描述的方法创建 mixin,它可以返回规则。选择器。属性或者它的组合。

    @extend

    j2c 也支持类似 @extend的sass,在某些方面更强大,但在其他方面却。

    它的局限性是它只能处理类。 具体来说:

    namespace =j2c.sheet({
     '.red': {color:'#f00'}
    })
    sheet =j2c.sheet(namespace, {
     '.great': {
     fontSize:'3em' },
     '.greatRed': {
     '@extend': ['.great', '.red'] // you can also pass a single class }
    })

    sheet.greatRed 现在定义为 'great_j2c... red_j2c... greatRed_j2c...' ( 为了可读性而截断的类名)。

    额外的能力来自于你可以从任意类( 而非 j2c-defined ) 中进行 inherit的事实:

    sheet =j2c.sheet(namespace, {
     '.myButton': {
     '@extend':':global(.button)', // coming, say, form Bootstrap color:theme.highlight }
    })

    这里 sheet.myButton'button myButton_j2c...'

    虽然 @extend 可以从任意类导入,但它只导入到本地。

    @extend 在嵌套选择器中工作良好。 如果选择器中有多个类,则 @extend 应用于最后一个( 最右侧)。

    无效用法

    如果最后一个或者仅仅选择器是 :global(.klass),在 @global 上下文中或者在没有类的情况下,@extend 将转换为 at-extend 属性。

    CSS攻击

    由于 j2c.sheet 只接受 MATCH /^[-_0-9A-Za-z$]+$/的属性名,所以不可能使用对象来表达CSS攻击。 但是,你可以使用数组和字符串来解决这个问题。

    下面是来自PocketGrid端口的另一个修改后的摘录:

    j2c.sheet({
     ".blockgroup": [
     "*zoom: 1;/* hackety hackery */",
     {
     "list-style-type":"none",
     padding:0,
     margin:0 }
     ]
    })

    array 元素按顺序插入,字符串文本被视为属性列表,并插入为。

    结果:

    .blockgroup{
    *zoom: 1; /* hackety hackery */}.blockgroup{
     list-style-type:none;
     padding:0;
     margin:0;
    }

    你也可以传递 j2c.inline的结果,它是 LESS 对属性名的挑剔。

    电子邮件供应商前缀:

    注意:在中,前缀的故事是当前的子函数。 我希望在某一点上,将prefixfree作为插件。 它已经很小了,j2c ( 处理和更新DOM中样式元素的半部分) 不需要它的一半。

    前缀属性名称

    你可以使用"$"运算符在需要时手动指定前缀:

    j2c.inline({
     // Notice the trailing dollar, required for the unprefixed property. _o$_ms$_moz$_webkit$: {foo:"bar"},
     hello:"world"});

    编译到

    p {
     -o-foo:bar;
     -ms-foo:bar;
     -moz-foo:bar;
     -webkit-foo:bar;
     foo:bar;
     hello:world;
    }

    前缀值

    / 将在未来版本中替换为插件。!

    要对值进行前缀,可以使用 j2c.prefix:

    j2c.inline({
     background_image:j2c.prefix(
     "linear-gradient(90deg, #f00, #ff0)",
     ['moz','webkit']
     )
    })
    background-image: -moz-linear-gradient(90deg, #f00, #ff0);background-image: -webkit-linear-gradient(90deg, #f00, #ff0);background-image: linear-gradient(90deg, #f00, #ff0);

    不支持对列表中的多个值进行前缀( 比如。 "linear-gradient(90deg, #f00, #ff0),linear-gradient(90deg, #f00, #ff0)" )。

    @-webkit-keyframes

    / 将在未来版本中替换为插件。!

    即使没有供应商列表参数,@keyframes 块也会自动生成它们的@-webkit-keyframes 对应项。

    在文档中插入样式表

    前言:请注意,以下是基于Web的研究,但在 IE 中不能有效测试。

    ie9 +

    向新的style 元素添加文本 node。

    var style =document.createElement('style');style.type='text/css'; // my not even be neededstyle.appendChild(document.createTextNode(sheet));

    在框架中:

    <style>{sheet}</style>

    ,了?

    IE8+ ( 在ie8中高达 32k 个工作表)

    作为 上面,但使用 link 元素和数据 URI。

    <linkrel="stylesheet"itemprop="stylesheet"href="{'data:,' + encodeURIComponent(sheet)}"/>

    请注意,ie8对数据uri的长度有 32k 个限制。 它支持数据URI中的Base 64,但不提供 btoa,这在本上下文中不适用,因为 Base 64 编码的工作表比URI编码的表大。

    ie6+ ( 无限制图纸大小)

    functionstylize(element, sheet){
     element.type='text/css';
     if (element.styleSheet){
     element.styleSheet.cssText= sheet;
     } else {
     element.appendChild(document.createTextNode(sheet));
     }
     return element;
    }var el =document.createElement('style')var sheet =j2c.sheet(...)stylize(el, sheet);document.head.appendChild(el);

    为了在客户端框架中工作,你需要在实际的<style> DOM node 上获取句柄。 这意味着你必须创建一个自定义组件/指令。

    下面是几个示例:

    :
    var j2cComponent = {
     render:function(){
     return<style /> }
     componentDidMount:function(){
     stylize(React.findDOMNode(this), this.prop.sheet)
     }
    }
    Mithril:
    var j2cComponent = {
     view:function(ctrl, args) {
     returnm("style", {
     config:function(el, isinit) {
     if(!isinit) {
     stylize(el, args.sheet);
     }
     }
     })
     }
    }
    Angular v1.3-- ( 1.4是 IE9+,支持动态 <style> 标记)。
    module.directive('j2cSheet', function() {
     return {
     restrict:'A',
     link:functionlink(scope, element, attrs) {
     if (element.tagName.toUpperCase() !=="STYLE") throw'j2cSheet expects a <style> element';
     stylize(element[0], attrs.j2cSheet);
     }
     };
    });module.directive('j2cInline', function() {
     return {
     restrict:'A',
     link:functionlink(scope, element, attrs) {
     element[0].style+=j2c.inline(attrs.j2cInline);
     }
     };
    });

    同构应用支持

    由于 j2c 依赖于视图库/框架来插入 DOM,所以它支持同构场景,这与视图解决方案所使用的方式相同。 注意:本地类名将在水化上重新生成,这意味着需要由浏览器计算样式。

    错误句柄

    在这个时候,j2c 没有什么。 遇到错误时,无法确定错误发生在源代码中的位置。 为了更易于查找问题,将错误插入图纸中,例如 @-error-bad-at-rule"@medis"; 或者 :bad-sub-selector-foo。 这样,你就可以得到源代码中错误occureed的更广泛的上下文。

    限制

    选择器和属性顺序

    j2c 依赖于JS对象来定义选择器和属性。 对象属性迭代顺序是正式定义的,但是在实践中,它只是在不适用于 j2c的情况中。 只要我们使用非数字键,并且不删除对象属性,就会在输出中遵守源对象顺序。

    小输入验证

    j2c 知道在提供有效输入时输出有效样式表的最小最小值。 它将接受无效的选择器。属性和值,并且在这种情况下会产生中断样式表。

    在这一点上

    我可能会绕过并写一个验证器伴侣,但是我还没有:-。

    漂亮的印花

    j2c 将每个选择器列表和属性放在自己的行上,但不缩进或者添加其他空白。

    出于调试目的,我建议你通过选择的[ beautifier ] 输出 j2c 输出。

    供应商前缀 corner

    j2c 不提供任何工具来自动列出值列表。 它与多重梯度背景和 transition/transition-property 值的上下文相关。

    待办事项:

    • 改进网站移动文档。
    • 在旧 IE 中测试DOM插入方法。

    许可证:MIT


    feature  tiny  
    相关文章