immutable-css, 用于不可变选择器的css linter

分享于 

7分钟阅读

GitHub

  繁體 雙語
[WIP] A linter for immutable CSS.
  • 源代码名称:immutable-css
  • 源代码网址:http://www.github.com/johnotander/immutable-css
  • immutable-css源代码文档
  • immutable-css源代码下载
  • Git URL:
    git://www.github.com/johnotander/immutable-css.git
    Git Clone代码到本地:
    git clone http://www.github.com/johnotander/immutable-css
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/johnotander/immutable-css
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    immutable-css

    Build Statusjs-standard-style

    最佳实践建议避免从供应商库重写样式以防止不必要的副作用。 基本库样式不应该改变- 或者作为哈利波特描述,基本样式应视为不可变的CSS。

    请参见交互式网络应用程序。

    安装

    npm install --save immutable-css

    用法

    immutableCss.processFiles(immutableSourceCss, customCss, options) 获取两个样式表路径,确保自定义CSS不会覆盖包含在不可变源中的任何选择器。 在比较供应商 CSS (。Bootstrap超光速粒子,Basscss x - z,等等 ) 和应用程序定制时,这通常是最好的。

    var immutableCss =require('immutable-css')immutableCss.processFiles('css/vendor.css', 'css/app.css')// => [...]

    immutableCss.processGlob(cssGlob, options) 获取匹配CSS文件并确保没有样式表重写包含在另一个文件中的选择器。 这有助于确保CSS部分不会混合在另一个文件中包含的选择器中。

    var immutableCss =require('immutable-css')immutableCss.processGlob('src/css/**/*.css', { verbose:true })

    使用 PostCSS

    可变CSS通过利用 PostCSS sourcemaps来检测文件间的突变。 它也最好作为PostCSS插件和 postcss-importpostcss-reporter 一起使用。

    var fs =require('fs')var postcss =require('postcss')varimport = require('postcss-import')var reporter =require('postcss-reporter')var immutableCss =require('immutable-css')var css =fs.readFileSync('styles.css', 'utf8')var mutations =postcss([import(), immutableCss(), reporter()])
    . process(css, { from:'styles.css' })

    ,使用 Gulp。

    var gulp =require('gulp')var postcss =require('gulp-postcss')varimport = require('postcss-import')var reporter =require('postcss-reporter')var immutableCss =require('immutable-css')gulp.task('immutable', function () {
     var processors = [
     import,
     immutableCss,
     // If you want Immutable CSS to halt the gulp pipline if there are any warnings// then set throwError to truereporter({clearMessages:true, throwError:false})
     ]
     gulp.src('assets/css/base.css')
    . pipe(postcss(processors))
    . pipe(gulp.dest('dist/css'))
    })
    输入
    @import'basscss';.button {}.left {}.something-else {}
    输出
    ⚠. button was mutated 2 times[line 93, col 1]:/css/basscss.css
    [line 3, col 1]:/css/custom.css
    [immutable-css]
    ⚠. left was mutated 2 times[line 291, col 1]:/css/basscss.css
    [line 4, col 1]:/css/custom.css
    [immutable-css]

    命令行选项

    • strict ( 布尔型): 是否允许在同一文件中使用类突变。 默认值:false
    • ignoredClasses ( array ): 针对变异冲突而忽略的类列表。
      示例:['.some-mutable-class']
    • immutableClasses ( array ): 要检查的类的列表。
      示例:['.button','.foobar']
    • immutablePrefixes ( array ): 不可变的前缀正则表达式列表。
      示例:[/.u-/,/.util-/]
    • callback ( 函数): 接收突变对象的回调。
      比如: function (mutations) { console.log(mutations) }
    • verbose ( 布尔型): 突变是否为日志记录。
    使用回调

    不变的CSS接受一个可选的回调,它返回突变哈希值。 关键是变异类名,值是变异文件名的array。

    postcss([
     import(),
     immutableCss({ ignoredClasses: ['.button'] }, function(mutations) {
     console.log(mutations)
     // => { '.foobar': [] } })
    ]).process(css, { from: cssFile })

    使用 immutable-css-cli

    npm i -g immutable-css-cli
    immutable-css css/main.css
    ⚠. button was mutated 2 times[line 93, col 1]:/css/_basscss.css
    [line 11, col 1]:/css/_custom.css
    [immutable-css]
    ⚠. left was mutated 2 times[line 291, col 1]:/css/_basscss.css
    [line 15, col 1]:/css/_custom.css
    [immutable-css]

    https://github.com/johnotander/immutable-css-cli

    依赖项

    相关阅读

    许可证

    MIT

    • fork
    • 创建你的特征分支( git checkout -b my-new-feature )
    • 提交你的更改( git commit -am 'Add some feature' )
    • 推送到分支( git push origin my-new-feature )
    • 创建新的拉请求

    采用 <3的工艺,由 @jxnblk & @4lpine。

    这个软件包最初是用 p 生成器生成的。