GrooCSS未支持breakInside规则，如何编写未实现的CSS规则？

当GrooCSS没有提供对应CSS属性的方法时（比如你遇到的breakInside），可以通过以下两种方式添加自定义规则：

方法1：使用通用property方法 #

GrooCSS内置了property方法，支持手动传入任意CSS属性名和值，属性名既可以用驼峰式也可以用短横线式：

GrooCSS.process(new Config(prettyPrint: true)) {
  body {
    // 驼峰式属性名
    property 'breakInside', 'avoid'
    // 同时保留pageBreakInside
    pageBreakInside 'avoid'
  }
}.tap {
  println it
}

方法2：下划线转短横线的动态调用 #

利用Groovy的动态特性，把CSS属性的短横线替换为下划线作为方法名调用，GrooCSS会自动转换回短横线格式的CSS属性：

GrooCSS.process(new Config(prettyPrint: true)) {
  body {
    break_inside 'avoid'
    pageBreakInside 'avoid'
  }
}.tap {
  println it
}

两种方式最终都会生成符合预期的CSS：

body {
    break-inside: avoid;
    page-break-inside: avoid;
}

内容的提问来源于stack exchange，提问作者kind.of_trash