postcss

新しい Processor インスタンスを作成し、plugins を CSS プロセッサとして適用します。

let postcss = require('postcss')

postcss(plugins).process(css, { from, to }).then(result => {
  console.log(result.css)
})

Processor を返します。

postcss.AcceptedPlugin

型: Object | OldPlugin<any> | Plugin | PluginCreator<any> | Processor | TransformCallback。

postcss.Builder

postcss.Helpers

型: Object & Postcss。

postcss.JSONHydrator

Node を返します。

postcss.OldPlugin

Transformer を返します。

postcss.Parser

RootNode を返します。

postcss.PluginCreator

Processor | Plugin を返します。

postcss.Postcss

型: typeof postcss。

postcss.SourceMap

型: SourceMapGenerator & Object。

postcss.Stringifier

postcss.TransformCallback

void | Promise<void> を返します。

postcss.Transformer

void | Promise<void> を返します。

postcss.atRule

新しい AtRule ノードを作成します。

AtRule_ を返します。

postcss.comment

新しい Comment ノードを作成します。

Comment_ を返します。

postcss.decl

新しい Declaration ノードを作成します。

Declaration_ を返します。

postcss.document

新しい Document ノードを作成します。

Document_ を返します。

postcss.fromJSON

JSON AST (Node#toJSON から) を AST クラスに再ハイドレートします。

const json = root.toJSON()
// save to file, send by network, etc
const root2  = postcss.fromJSON(json)

Node を返します。

postcss.list

型: List。

postcss.parse

ソース CSS を解析し、ソース CSS ノードを含む新しい Root または Document ノードを返します。

// Simple CSS concatenation with source map support
const root1 = postcss.parse(css1, { from: file1 })
const root2 = postcss.parse(css2, { from: file2 })
root1.append(root2).toResult().css

Root を返します。

postcss.root

新しい Root ノードを作成します。

Root を返します。

postcss.rule

新しい Rule ノードを作成します。

Rule を返します。

postcss.stringify

ノードツリーを CSS 文字列に変換するためのデフォルト関数。

AtRule

at-rule を表します。

Once (root, { AtRule }) {
  let media = new AtRule({ name: 'media', params: 'print' })
  media.append(…)
  root.append(media)
}

CSS で {} ブロックが後に続く場合、このノードは子を表す nodes プロパティを持ちます。

const root = postcss.parse('@charset "UTF-8"; @media print {}')

const charset = root.first
charset.type  //=> 'atrule'
charset.nodes //=> undefined

const media = root.last
media.nodes   //=> []

AtRule#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

AtRule を返します。

AtRule#append()

コンテナの末尾に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.append(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

AtRule を返します。

AtRule#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

AtRule を返します。

AtRule#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

AtRule を返します。

AtRule#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

AtRule#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

AtRule を返します。

AtRule#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

AtRule を返します。

AtRule#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

AtRule を返します。

AtRule#each()

コンテナの直接の子を反復処理し、子ごとに callback を呼び出します。

コールバックで false を返すと、反復処理が中断されます。

このメソッドは、コンテナの直接の子のみを反復処理します。コンテナのすべての子孫ノードを再帰的に反復処理する必要がある場合は、Container#walk を使用します。

for {} サイクルまたは Array#forEach とは異なり、このイテレータは、反復処理中に子ノードの配列をミューテートする場合でも安全です。PostCSS は、ミューテーションに合わせて現在のインデックスを調整します。

const root = postcss.parse('a { color: black; z-index: 1 }')
const rule = root.first

for (const decl of rule.nodes) {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Cycle will be infinite, because cloneBefore moves the current node
  // to the next index
}

rule.each(decl => {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Will be executed only for color and z-index
})

void | false を返します。

AtRule#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

AtRule#every()

コールバックがコンテナのすべての子に対して true を返す場合は true を返します。

const noPrefixes = rule.every(i => i.prop[0] !== '-')

boolean を返します。

AtRule#index()

Container#nodes 配列内の child のインデックスを返します。

rule.index( rule.nodes[2] ) //=> 2

number を返します。

AtRule#insertAfter()

コンテナ内の古いノードの後に新しいノードを挿入します。

AtRule を返します。

AtRule#insertBefore()

コンテナ内の古いノードの前に新しいノードを挿入します。

rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }))

AtRule を返します。

AtRule#name

at-rule の名前は、@ の直後に続きます。

const root  = postcss.parse('@media print {}')
media.name //=> 'media'
const media = root.first

型: string。

AtRule#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

AtRule#nodes

コンテナの子を含む配列。

const root = postcss.parse('a { color: black }')
root.nodes.length           //=> 1
root.nodes[0].selector      //=> 'a'
root.nodes[0].nodes[0].prop //=> 'color'

型: ChildNode[]。

AtRule#params

at-rule のパラメータ。at-rule の名前の後に続き、{} ブロックの前にある値です。

const root  = postcss.parse('@media print, screen {}')
const media = root.first
media.params //=> 'print, screen'

型: string。

AtRule#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Container_<ChildNode>。

AtRule#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

AtRule#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

AtRule#prepend()

コンテナの先頭に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.prepend(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

AtRule を返します。

AtRule#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

AtRule#push()

ノードの末尾に子を追加します。

rule.push(new Declaration({ prop: 'color', value: 'black' }))

AtRule を返します。

AtRule#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

AtRule#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

AtRule#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: AtRuleRaws。

AtRule#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

AtRule を返します。

AtRule#removeAll()

コンテナからすべての子を削除し、それらの親プロパティをクリアします。

rule.removeAll()
rule.nodes.length //=> 0

AtRule を返します。

AtRule#removeChild()

ノードをコンテナから削除し、ノードとその子から親プロパティをクリアします。

rule.nodes.length  //=> 5
rule.removeChild(decl)
rule.nodes.length  //=> 4
decl.parent        //=> undefined

AtRule を返します。

AtRule#replaceValues()

AtRule を返します。

AtRule#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

AtRule を返します。

AtRule#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

AtRule#some()

コンテナの子の少なくとも1つに対してコールバックが true を返す場合は、true を返します。

const hasPrefix = rule.some(i => i.prop[0] === '-')

boolean を返します。

AtRule#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

AtRule#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

AtRule#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

AtRule#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: "atrule"。

AtRule#walk()

コンテナの子孫ノードをトラバースし、各ノードに対してコールバックを呼び出します。

container.each() と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

コンテナの直下の子のみを反復する必要がある場合は、Container#each を使用します。

root.walk(node => {
  // Traverses all descendant nodes.
})

void | false を返します。

AtRule#walkAtRules()

コンテナの子孫ノードをトラバースし、各 at-rule ノードに対してコールバックを呼び出します。

フィルタを渡すと、名前が一致する at-rule のみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

root.walkAtRules(rule => {
  if (isOld(rule.name)) rule.remove()
})

let first = false
root.walkAtRules('charset', rule => {
  if (!first) {
    first = true
  } else {
    rule.remove()
  }
})

void | false を返します。

AtRule#walkComments()

void | false を返します。

AtRule#walkDecls()

コンテナの子孫ノードをトラバースし、各宣言ノードに対してコールバックを呼び出します。

フィルタを渡すと、プロパティが一致する宣言のみに対して反復が行われます。

root.walkDecls(decl => {
  checkPropertySupport(decl.prop)
})

root.walkDecls('border-radius', decl => {
  decl.remove()
})

root.walkDecls(/^background/, decl => {
  decl.value = takeFirstColorFromGradient(decl.value)
})

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

void | false を返します。

AtRule#walkRules()

コンテナの子孫ノードをトラバースし、各ルールノードに対してコールバックを呼び出します。

フィルタを渡すと、セレクタが一致するルールのみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

const selectors = []
root.walkRules(rule => {
  selectors.push(rule.selector)
})
console.log(`Your CSS uses ${ selectors.length } selectors`)

void | false を返します。

AtRule#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

Comment

CSSコメント を処理するクラスを表します

Once (root, { Comment }) {
  const note = new Comment({ text: 'Note: …' })
  root.append(note)
}

セレクタ、at-rule パラメータ、または宣言値内の CSS コメントは、上記で説明した raws プロパティに保存されることに注意してください。

Comment#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Comment を返します。

Comment#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Comment を返します。

Comment#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Comment を返します。

Comment#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Comment#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Comment を返します。

Comment#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Comment を返します。

Comment#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Comment を返します。

Comment#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Comment#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Comment#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Container_<ChildNode>。

Comment#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Comment#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Comment#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Comment#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Comment#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Comment#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: CommentRaws。

Comment#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Comment を返します。

Comment#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Comment を返します。

Comment#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Comment#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

Comment#text

コメントのテキスト。

型: string。

Comment#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

Comment#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

Comment#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: "comment"。

Comment#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

Container

Root、AtRule、および Rule コンテナノードは、子を操作するのに役立ついくつかの共通メソッドを継承します。

すべてのコンテナは任意のコンテンツを格納できることに注意してください。ルール内にルールを記述すると、PostCSS がそれを解析します。

Container#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Container<Child> を返します。

Container#append()

コンテナの末尾に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.append(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Container<Child> を返します。

Container#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Container<Child> を返します。

Container#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Container<Child> を返します。

Container#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Container#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Container<Child> を返します。

Container#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Container<Child> を返します。

Container#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Container<Child> を返します。

Container#each()

コンテナの直接の子を反復処理し、子ごとに callback を呼び出します。

コールバックで false を返すと、反復処理が中断されます。

このメソッドは、コンテナの直接の子のみを反復処理します。コンテナのすべての子孫ノードを再帰的に反復処理する必要がある場合は、Container#walk を使用します。

for {} サイクルまたは Array#forEach とは異なり、このイテレータは、反復処理中に子ノードの配列をミューテートする場合でも安全です。PostCSS は、ミューテーションに合わせて現在のインデックスを調整します。

const root = postcss.parse('a { color: black; z-index: 1 }')
const rule = root.first

for (const decl of rule.nodes) {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Cycle will be infinite, because cloneBefore moves the current node
  // to the next index
}

rule.each(decl => {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Will be executed only for color and z-index
})

void | false を返します。

Container#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Container#every()

コールバックがコンテナのすべての子に対して true を返す場合は true を返します。

const noPrefixes = rule.every(i => i.prop[0] !== '-')

boolean を返します。

Container#index()

Container#nodes 配列内の child のインデックスを返します。

rule.index( rule.nodes[2] ) //=> 2

number を返します。

Container#insertAfter()

コンテナ内の古いノードの後に新しいノードを挿入します。

Container<Child> を返します。

Container#insertBefore()

コンテナ内の古いノードの前に新しいノードを挿入します。

rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }))

Container<Child> を返します。

Container#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Container#nodes

コンテナの子を含む配列。

const root = postcss.parse('a { color: black }')
root.nodes.length           //=> 1
root.nodes[0].selector      //=> 'a'
root.nodes[0].nodes[0].prop //=> 'color'

型: Child[]。

Container#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Container_<ChildNode> | Document_。

Container#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Container#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Container#prepend()

コンテナの先頭に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.prepend(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Container<Child> を返します。

Container#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Container#push()

ノードの末尾に子を追加します。

rule.push(new Declaration({ prop: 'color', value: 'black' }))

Container<Child> を返します。

Container#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Container#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Container#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: any。

Container#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Container<Child> を返します。

Container#removeAll()

コンテナからすべての子を削除し、それらの親プロパティをクリアします。

rule.removeAll()
rule.nodes.length //=> 0

Container<Child> を返します。

Container#removeChild()

ノードをコンテナから削除し、ノードとその子から親プロパティをクリアします。

rule.nodes.length  //=> 5
rule.removeChild(decl)
rule.nodes.length  //=> 4
decl.parent        //=> undefined

Container<Child> を返します。

Container#replaceValues()

Container<Child> を返します。

Container#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Container<Child> を返します。

Container#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Container#some()

コンテナの子の少なくとも1つに対してコールバックが true を返す場合は、true を返します。

const hasPrefix = rule.some(i => i.prop[0] === '-')

boolean を返します。

Container#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

Container#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

Container#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

Container#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: string。

Container#walk()

コンテナの子孫ノードをトラバースし、各ノードに対してコールバックを呼び出します。

container.each() と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

コンテナの直下の子のみを反復する必要がある場合は、Container#each を使用します。

root.walk(node => {
  // Traverses all descendant nodes.
})

void | false を返します。

Container#walkAtRules()

コンテナの子孫ノードをトラバースし、各 at-rule ノードに対してコールバックを呼び出します。

フィルタを渡すと、名前が一致する at-rule のみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

root.walkAtRules(rule => {
  if (isOld(rule.name)) rule.remove()
})

let first = false
root.walkAtRules('charset', rule => {
  if (!first) {
    first = true
  } else {
    rule.remove()
  }
})

void | false を返します。

Container#walkComments()

void | false を返します。

Container#walkDecls()

コンテナの子孫ノードをトラバースし、各宣言ノードに対してコールバックを呼び出します。

フィルタを渡すと、プロパティが一致する宣言のみに対して反復が行われます。

root.walkDecls(decl => {
  checkPropertySupport(decl.prop)
})

root.walkDecls('border-radius', decl => {
  decl.remove()
})

root.walkDecls(/^background/, decl => {
  decl.value = takeFirstColorFromGradient(decl.value)
})

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

void | false を返します。

Container#walkRules()

コンテナの子孫ノードをトラバースし、各ルールノードに対してコールバックを呼び出します。

フィルタを渡すと、セレクタが一致するルールのみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

const selectors = []
root.walkRules(rule => {
  selectors.push(rule.selector)
})
console.log(`Your CSS uses ${ selectors.length } selectors`)

void | false を返します。

Container#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

CssSyntaxError

CSSパーサーは、壊れたCSSに対してこのエラーをスローします。

カスタムパーサーは、Node#error メソッドを使用して、壊れたカスタム構文に対してこのエラーをスローできます。

PostCSS は、入力ソースマップを使用して、エラーの元の場所を検出します。Sass ファイルを作成し、それを CSS にコンパイルしてから PostCSS で解析した場合、PostCSS は Sass ファイル内の元の位置を表示します。

PostCSS 入力内の位置が必要な場合 (例: 前のコンパイラをデバッグする場合) は、error.input.file を使用します。

// Raising error from plugin
throw node.error('Unknown variable', { plugin: 'postcss-vars' })

// Catching and checking syntax error
try {
  postcss.parse('a{')
} catch (error) {
  if (error.name === 'CssSyntaxError') {
    error //=> CssSyntaxError
  }
}

CssSyntaxError#column

エラーのソース列。

error.column       //=> 1
error.input.column //=> 4

PostCSS は、入力ソースマップを使用して元の場所を検出します。PostCSS 入力内の位置が必要な場合は、error.input.column を使用します。

型: number。

CssSyntaxError#endColumn

エラーの終了位置のソース列 (排他的)。エラーが範囲に関連する場合に提供されます。

error.endColumn       //=> 1
error.input.endColumn //=> 4

PostCSS は、入力ソースマップを使用して元の場所を検出します。PostCSS 入力内の位置が必要な場合は、error.input.endColumn を使用します。

型: number。

CssSyntaxError#endLine

エラーの終了位置のソース行 (排他的)。エラーが範囲に関連する場合に提供されます。

error.endLine       //=> 3
error.input.endLine //=> 4

PostCSS は、入力ソースマップを使用して元の場所を検出します。PostCSS 入力内の位置が必要な場合は、error.input.endLine を使用します。

型: number。

CssSyntaxError#file

破損したファイルへの絶対パス。

error.file       //=> 'a.sass'
error.input.file //=> 'a.css'

PostCSS は、入力ソースマップを使用して元の場所を検出します。PostCSS 入力内の位置が必要な場合は、error.input.file を使用します。

型: string。

CssSyntaxError#input

入力ファイルに関する PostCSS 内部情報を含む入力オブジェクト。入力に前のツールからのソースマップがある場合、PostCSS は元の (たとえば、Sass) ソースを使用します。このオブジェクトを使用して、PostCSS 入力ソースを取得できます。

error.input.file //=> 'a.css'
error.file       //=> 'a.sass'

型: FilePosition。

CssSyntaxError#line

エラーのソース行。

error.line       //=> 2
error.input.line //=> 4

PostCSS は、入力ソースマップを使用して元の場所を検出します。PostCSS 入力内の位置が必要な場合は、error.input.line を使用します。

型: number。

CssSyntaxError#message

プラグイン、ファイル、行、および列を含む GNU エラー形式の完全なエラーテキスト。

error.message //=> 'a.css:1:1: Unclosed block'

型: string。

CssSyntaxError#name

常に 'CssSyntaxError' に等しくなります。npm に複数の PostCSS バージョンが存在する可能性があるため、常に error instanceof CssSyntaxError ではなく、error.name === 'CssSyntaxError' でエラー型を確認する必要があります。

if (error.name === 'CssSyntaxError') {
  error //=> CssSyntaxError
}

型: "CssSyntaxError"。

CssSyntaxError#plugin

エラーがプラグインから発生した場合のプラグイン名。

error.plugin //=> 'postcss-vars'

型: string。

CssSyntaxError#reason

エラーメッセージ。

error.message //=> 'Unclosed block'

型: string。

CssSyntaxError#showSourceCode()

エラーの原因となった CSS ソースの数行を返します。

CSS に sourceContent を含まない入力ソースマップがある場合、このメソッドは空の文字列を返します。

error.showSourceCode() //=> "  4 | }
                       //      5 | a {
                       //    > 6 |   bad
                       //        |   ^
                       //      7 | }
                       //      8 | b {"

string を返します。

CssSyntaxError#source

破損したファイルのソースコード。

error.source       //=> 'a { b {} }'
error.input.source //=> 'a b { }'

型: string。

CssSyntaxError#stack

型: string。

CssSyntaxError#toString()

エラー位置、メッセージ、および破損部分のソースコードを返します。

error.toString() //=> "CssSyntaxError: app.css:1:1: Unclosed block
                 //    > 1 | a {
                 //        | ^"

string を返します。

Declaration

CSS 宣言を処理するクラスを表します。

Once (root, { Declaration }) {
  const color = new Declaration({ prop: 'color', value: 'black' })
  root.append(color)
}

const root = postcss.parse('a { color: black }')
const decl = root.first?.first

decl.type       //=> 'decl'
decl.toString() //=> ' color: black'

Declaration#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Declarationを返します。

Declaration#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Declarationを返します。

Declaration#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Declarationを返します。

Declaration#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Declaration#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Declarationを返します。

Declaration#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Declarationを返します。

Declaration#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Declarationを返します。

Declaration#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Declaration#important

宣言の優先度を表します。

true の場合、CSS 宣言には important 指定子が付きます。

const root = postcss.parse('a { color: black !important; color: red }')

root.first.first.important //=> true
root.first.last.important  //=> undefined

型: boolean。

Declaration#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Declaration#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Container_<ChildNode>。

Declaration#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Declaration#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Declaration#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Declaration#prop

CSS 宣言のプロパティ名。

const root = postcss.parse('a { color: black }')
const decl = root.first.first

decl.prop //=> 'color'

型: string。

Declaration#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Declaration#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Declaration#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: DeclarationRaws。

Declaration#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Declarationを返します。

Declaration#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Declarationを返します。

Declaration#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Declaration#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

Declaration#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

Declaration#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

Declaration#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: "decl"。

Declaration#value

CSS 宣言のプロパティ値。

値文字列内の CSS コメントはすべてフィルタリングされます。ソース値に存在する CSS コメントは、raws プロパティで利用できます。

新しい value を割り当てると、ノードを文字列にコンパイルする際に raws プロパティのコメントは無視されます。

const root = postcss.parse('a { color: black }')
const decl = root.first.first

decl.value //=> 'black'

型: string。

Declaration#variable

CSS および SASS/SCSS で変数を宣言するために使用される、宣言が -- または $ で始まる場合に true を返すゲッターを表します。

const root = postcss.parse(':root { --one: 1 }')
const one = root.first.first

one.variable //=> true

const root = postcss.parse('$one: 1')
const one = root.first

one.variable //=> true

型: boolean。

Declaration#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

Document

ファイルを表現し、解析されたすべてのノードが含まれています。

実験的: このノードの一部の側面は、マイナーまたはパッチバージョンのリリースで変更される可能性があります。

const document = htmlParser(
  '<html><style>a{color:black}</style><style>b{z-index:2}</style>'
)
document.type         //=> 'document'
document.nodes.length //=> 2

Document#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Documentを返します。

Document#append()

コンテナの末尾に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.append(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Documentを返します。

Document#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Documentを返します。

Document#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Documentを返します。

Document#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Document#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Documentを返します。

Document#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Documentを返します。

Document#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Documentを返します。

Document#each()

コンテナの直接の子を反復処理し、子ごとに callback を呼び出します。

コールバックで false を返すと、反復処理が中断されます。

このメソッドは、コンテナの直接の子のみを反復処理します。コンテナのすべての子孫ノードを再帰的に反復処理する必要がある場合は、Container#walk を使用します。

for {} サイクルまたは Array#forEach とは異なり、このイテレータは、反復処理中に子ノードの配列をミューテートする場合でも安全です。PostCSS は、ミューテーションに合わせて現在のインデックスを調整します。

const root = postcss.parse('a { color: black; z-index: 1 }')
const rule = root.first

for (const decl of rule.nodes) {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Cycle will be infinite, because cloneBefore moves the current node
  // to the next index
}

rule.each(decl => {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Will be executed only for color and z-index
})

void | false を返します。

Document#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Document#every()

コールバックがコンテナのすべての子に対して true を返す場合は true を返します。

const noPrefixes = rule.every(i => i.prop[0] !== '-')

boolean を返します。

Document#index()

Container#nodes 配列内の child のインデックスを返します。

rule.index( rule.nodes[2] ) //=> 2

number を返します。

Document#insertAfter()

コンテナ内の古いノードの後に新しいノードを挿入します。

Documentを返します。

Document#insertBefore()

コンテナ内の古いノードの前に新しいノードを挿入します。

rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }))

Documentを返します。

Document#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Document#nodes

コンテナの子を含む配列。

const root = postcss.parse('a { color: black }')
root.nodes.length           //=> 1
root.nodes[0].selector      //=> 'a'
root.nodes[0].nodes[0].prop //=> 'color'

型: Root[]。

Document#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: undefined。

Document#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Document#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Document#prepend()

コンテナの先頭に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.prepend(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Documentを返します。

Document#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Document#push()

ノードの末尾に子を追加します。

rule.push(new Declaration({ prop: 'color', value: 'black' }))

Documentを返します。

Document#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Document#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Document#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: any。

Document#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Documentを返します。

Document#removeAll()

コンテナからすべての子を削除し、それらの親プロパティをクリアします。

rule.removeAll()
rule.nodes.length //=> 0

Documentを返します。

Document#removeChild()

ノードをコンテナから削除し、ノードとその子から親プロパティをクリアします。

rule.nodes.length  //=> 5
rule.removeChild(decl)
rule.nodes.length  //=> 4
decl.parent        //=> undefined

Documentを返します。

Document#replaceValues()

Documentを返します。

Document#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Documentを返します。

Document#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Document#some()

コンテナの子の少なくとも1つに対してコールバックが true を返す場合は、true を返します。

const hasPrefix = rule.some(i => i.prop[0] === '-')

boolean を返します。

Document#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

Document#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

Document#toResult()

ドキュメントの CSS ルートを表す Result インスタンスを返します。

const root1 = postcss.parse(css1, { from: 'a.css' })
const root2 = postcss.parse(css2, { from: 'b.css' })
const document = postcss.document()
document.append(root1)
document.append(root2)
const result = document.toResult({ to: 'all.css', map: true })

Result<Document_ | Root>を返します。

Document#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

Document#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: "document"。

Document#walk()

コンテナの子孫ノードをトラバースし、各ノードに対してコールバックを呼び出します。

container.each() と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

コンテナの直下の子のみを反復する必要がある場合は、Container#each を使用します。

root.walk(node => {
  // Traverses all descendant nodes.
})

void | false を返します。

Document#walkAtRules()

コンテナの子孫ノードをトラバースし、各 at-rule ノードに対してコールバックを呼び出します。

フィルタを渡すと、名前が一致する at-rule のみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

root.walkAtRules(rule => {
  if (isOld(rule.name)) rule.remove()
})

let first = false
root.walkAtRules('charset', rule => {
  if (!first) {
    first = true
  } else {
    rule.remove()
  }
})

void | false を返します。

Document#walkComments()

void | false を返します。

Document#walkDecls()

コンテナの子孫ノードをトラバースし、各宣言ノードに対してコールバックを呼び出します。

フィルタを渡すと、プロパティが一致する宣言のみに対して反復が行われます。

root.walkDecls(decl => {
  checkPropertySupport(decl.prop)
})

root.walkDecls('border-radius', decl => {
  decl.remove()
})

root.walkDecls(/^background/, decl => {
  decl.value = takeFirstColorFromGradient(decl.value)
})

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

void | false を返します。

Document#walkRules()

コンテナの子孫ノードをトラバースし、各ルールノードに対してコールバックを呼び出します。

フィルタを渡すと、セレクタが一致するルールのみに対して反復が行われます。

Container#each と同様に、このメソッドは反復中に配列を変更する場合でも安全に使用できます。

const selectors = []
root.walkRules(rule => {
  selectors.push(rule.selector)
})
console.log(`Your CSS uses ${ selectors.length } selectors`)

void | false を返します。

Document#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

Input

ソース CSS を表します。

const root  = postcss.parse(css, { from: file })
const input = root.source.input

Input#css

入力 CSS ソース。

const input = postcss.parse('a{}', { from: file }).input
input.css //=> "a{}"

型: string。

Input#error()

CssSyntaxError_ を返します。

Input#file

from オプションで定義された CSS ソースファイルへの絶対パス。

const root = postcss.parse(css, { from: 'a.css' })
root.source.input.file //=> '/home/ai/a.css'

型: string。

Input#fromOffset()

ソースオフセットを行と列に変換します。

Objectを返します。

Input#hasBOM

ソースコードに Unicode BOM があるかどうかを示すフラグ。

型: boolean。

Input#id

CSS ソースの一意の ID。from オプションが指定されていない場合に作成されます (PostCSS はファイルパスを知らないため)。

const root = postcss.parse(css)
root.source.input.file //=> undefined
root.source.input.id   //=> "<input css 8LZeVF>"

型: string。

Input#map

PostCSS の前のコンパイルステップ (たとえば、Sass コンパイラから) から渡された入力ソースマップ。

root.source.input.map.consumer().sources //=> ['a.sass']

型: PreviousMap_。

Input#origin()

入力ソースマップを読み取り、入力ソース (たとえば、PostCSS に渡される前に CSS にコンパイルされた Sass ファイル) 内のシンボル位置を返します。オプションで、排他的な終了位置を指定できます。

root.source.input.origin(1, 1) //=> { file: 'a.css', line: 3, column: 1 }
root.source.input.origin(1, 1, 1, 4)
//=> { file: 'a.css', line: 3, column: 1, endLine: 3, endColumn: 4 }

false | FilePositionを返します。

LazyResult

PostCSS 変換の結果に対するプロミスプロキシ。

LazyResult インスタンスは、Processor#process によって返されます。

const lazy = postcss([autoprefixer]).process(css)

LazyResult#async()

プラグインを非同期的に実行し、Result を返します。

Promise<Result<RootNode>>を返します。

LazyResult#catch

型: Function。

LazyResult#finally

型: Function。

LazyResult#sync()

プラグインを同期的に実行し、Result を返します。

Result<RootNode>を返します。

LazyResult#then

型: Function。

LazyResult#toString()

LazyResult#css プロパティのエイリアス。

lazy + '' === lazy.css

string を返します。

LazyResult#warnings()

同期プラグインを通じて入力 CSS を処理し、Result#warnings を呼び出します。

Warning[]を返します。

NoWorkResult

PostCSS 変換の結果に対するプロミスプロキシ。このレイジーリザルトインスタンスは、NoWorkResult#root または Result#root にアクセスしない限り、css を解析しません。詳細については、以下の例を参照してください。プラグインが定義されていない場合 *のみ* 、Processor#process によって NoWork インスタンスが返されます。

const noWorkResult = postcss().process(css) // No plugins are defined.
                                            // CSS is not parsed
let root = noWorkResult.root // now css is parsed because we accessed the root

NoWorkResult#async()

プラグインを非同期的に実行し、Result を返します。

Promise<Result<Root>>を返します。

NoWorkResult#catch

型: Function。

NoWorkResult#finally

型: Function。

NoWorkResult#sync()

プラグインを同期的に実行し、Result を返します。

Result<Root>を返します。

NoWorkResult#then

型: Function。

NoWorkResult#toString()

LazyResult#css プロパティのエイリアス。

lazy + '' === lazy.css

string を返します。

NoWorkResult#warnings()

同期プラグインを通じて入力 CSS を処理し、Result#warnings を呼び出します。

Warning[]を返します。

Node

Node#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Node を返します。

Node#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Node を返します。

Node#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Node を返します。

Node#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Node#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Node を返します。

Node#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Node を返します。

Node#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Node を返します。

Node#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Node#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Node#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Container_<ChildNode> | Document_。

Node#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Node#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Node#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Node#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Node#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Node#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: any。

Node#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Node を返します。

Node#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Node を返します。

Node#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Node#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。

Node#toJSON()

JSON.stringify() の循環リンクを修正します。

object を返します。

Node#toString()

ノードの型に応じて、ノードをブラウザで読み取り可能なカスケーディングスタイルシート文字列にコンパイルします。

new Rule({ selector: 'a' }).toString() //=> "a {}"

string を返します。

Node#type

抽象構文木におけるノードの型を表します。

ノードの型は、ノードの識別と型に基づいた操作の実行に役立ちます。

const declaration = new Declaration({
  prop: 'color',
  value: 'black'
})

declaration.type //=> 'decl'

型: string。

Node#warn()

Result#warn のラッパーであり、警告を生成する便利な方法を提供します。

  Declaration: {
    bad: (decl, { result }) => {
      decl.warn(result, 'Deprecated property: bad')
    }
  }

Warning を返します。

PreviousMap

入力 CSS からのソースマップ情報。たとえば、Sass コンパイラー後のソースマップ。

このクラスは、入力 CSS 内、または入力ファイルに近いファイルシステム (from オプションに従って) にソースマップを自動的に検索します。

const root = parse(css, { from: 'a.sass.css' })
root.input.map //=> PreviousMap

PreviousMap#annotation

sourceMappingURL の内容。

型: string。

PreviousMap#consumer()

source-mapライブラリからSourceMapGeneratorクラスのインスタンスを作成し、ソースマップ情報を処理します。

これは遅延メソッドであるため、最初に呼び出されたときにのみオブジェクトを作成し、その後はキャッシュを使用します。

SourceMapConsumerを返します。

PreviousMap#file

CSSソースの識別子です。ユーザーがfromオプションを設定した場合はInput#fileが含まれ、設定しなかった場合はInput#idが含まれます。

型: string。

PreviousMap#inline

ソースマップがdata-uriによって入力CSSにインライン化されたかどうかを示します。

型: boolean。

PreviousMap#mapFile

ソースマップファイルへのパスです。

型: string。

PreviousMap#root

ソースマップが別のファイルにある場合の、ソースマップファイルのディレクトリです。

型: string。

PreviousMap#text

ソースマップファイルの内容です。

型: string。

PreviousMap#withContent()

ソースマップに、入力ソーステキストを含むsourcesContentが含まれているかどうかを示します。

boolean を返します。

Processor

CSSを処理するためのプラグインが含まれます。Processorインスタンスを1つ作成し、そのプラグインを初期化してから、多数のCSSファイルに対してそのインスタンスを使用します。

const processor = postcss([autoprefixer, postcssNested])
processor.process(css1).then(result => console.log(result.css))
processor.process(css2).then(result => console.log(result.css))

Processor#plugins

このプロセッサーに追加されたプラグインです。

const processor = postcss([autoprefixer, postcssNested])
processor.plugins.length //=> 2

型: (Plugin | TransformCallback | Transformer)[]。

Processor#process()

ソースCSSを解析し、LazyResult Promiseプロキシを返します。一部のプラグインは非同期である可能性があるため、変換は実行されません。変換はLazyResultメソッドで適用されます。

processor.process(css, { from: 'a.css', to: 'a.out.css' })
  .then(result => {
     console.log(result.css)
  })

NoWorkResult_ | LazyResult_<Document_ | Root>を返します。

Processor#use()

CSSプロセッサーとして使用するプラグインを追加します。

PostCSSプラグインは4つの形式で指定できます。

• Plugin形式のプラグイン。
• pluginCreator.postcss = trueを持つプラグインクリエーター関数。PostCSSはこの関数を引数なしで呼び出し、プラグインを取得します。
• 関数。PostCSSは、最初の引数としてRoot、2番目の引数として現在のResultインスタンスを関数に渡します。
• 別のProcessorインスタンス。PostCSSはそのインスタンスからこのインスタンスにプラグインをコピーします。

プラグインは、postcssインスタンスを作成するときに引数として渡すことでも追加できます（[postcss(plugins)]を参照）。

非同期プラグインは、Promiseインスタンスを返す必要があります。

const processor = postcss()
  .use(autoprefixer)
  .use(postcssNested)

Processor を返します。

Processor#version

現在のPostCSSバージョン。

if (result.processor.version.split('.')[0] !== '6') {
  throw new Error('This plugin works only with PostCSS 6')
}

型: string。

Result

PostCSS変換の結果を提供します。

Resultインスタンスは、LazyResult#thenまたはRoot#toResultメソッドによって返されます。

postcss([autoprefixer]).process(css).then(result => {
 console.log(result.css)
})

const result2 = postcss.parse(css).toResult()

Result#css

Result#rootを表すCSS文字列。

postcss.parse('a{}').toResult().css //=> "a{}"

型: string。

Result#lastPlugin

最後に実行されたPostCSSプラグイン。

型: Plugin | TransformCallback。

Result#map

source-mapライブラリからのSourceMapGeneratorクラスのインスタンスで、Result#rootインスタンスへの変更を表します。

result.map.toJSON() //=> { version: 3, file: 'a.css', … }

if (result.map) {
  fs.writeFileSync(result.opts.to + '.map', result.map.toString())
}

型: SourceMap。

Result#messages

プラグインからのメッセージ（警告やカスタムメッセージなど）が含まれます。各メッセージには、typeとpluginプロパティが必要です。

AtRule: {
  import: (atRule, { result }) {
    const importedFile = parseImport(atRule)
    result.messages.push({
      type: 'dependency',
      plugin: 'postcss-import',
      file: importedFile,
      parent: result.opts.from
    })
  }
}

型: Message[]。

Result#opts

このResultインスタンスを生成したProcessor#processまたはRoot#toResult呼び出しからのオプションです。]

root.toResult(opts).opts === opts

型: ResultOptions。

Result#processor

この変換に使用されたProcessorインスタンス。

for (const plugin of result.processor.plugins) {
  if (plugin.postcssPlugin === 'postcss-bad') {
    throw 'postcss-good is incompatible with postcss-bad'
  }
})

型: Processor。

Result#root

すべての変換後のRootノード。

root.toResult().root === root

型: RootNode。

Result#toString()

Result#cssの内容を返します。

result + '' === result.css

string を返します。

Result#warn()

Warningのインスタンスを作成し、Result#messagesに追加します。

if (decl.important) {
  result.warn('Avoid !important', { node: decl, word: '!important' })
}

Warning を返します。

Result#warnings()

プラグインからの警告を返します。Result#messagesからWarningインスタンスをフィルタリングします。

result.warnings().forEach(warn => {
  console.warn(warn.toString())
})

Warning[]を返します。

Root

CSSファイルを表し、解析されたすべてのノードが含まれます。

const root = postcss.parse('a{color:black} b{z-index:2}')
root.type         //=> 'root'
root.nodes.length //=> 2

Root#after()

現在のノードの親に、現在のノードの後に新しいノードを挿入します。

node.parent.insertAfter(node, add) のエイリアス。

decl.after('color: black')

Root を返します。

Root#append()

コンテナの末尾に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.append(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Root を返します。

Root#assign()

既存のノードインスタンスにプロパティを割り当てます。

decl.assign({ prop: 'word-wrap', value: 'break-word' })

Root を返します。

Root#before()

現在のノードの親に、現在のノードの前に新しいノードを挿入します。

node.parent.insertBefore(node, add) のエイリアス。

decl.before('content: ""')

Root を返します。

Root#cleanRaws()

ノードとその子に対するコードスタイルのプロパティをクリアします。

node.raws.before  //=> ' '
node.cleanRaws()
node.raws.before  //=> undefined

Root#clone()

既存のノードのクローンを作成します。これには、すべてのプロパティとその値が含まれます。これには raws が含まれますが、type は含まれません。

decl.raws.before    //=> "\n  "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before  //=> "\n  "
cloned.toString()   //=> -moz-transform: scale(0)

Root を返します。

Root#cloneAfter()

ノードをクローンし、結果のクローンされたノードを現在のノードの後に挿入するためのショートカット。

Root を返します。

Root#cloneBefore()

ノードをクローンし、結果のクローンされたノードを現在のノードの前に挿入するためのショートカット。

decl.cloneBefore({ prop: '-moz-' + decl.prop })

Root を返します。

Root#each()

コンテナの直接の子を反復処理し、子ごとに callback を呼び出します。

コールバックで false を返すと、反復処理が中断されます。

このメソッドは、コンテナの直接の子のみを反復処理します。コンテナのすべての子孫ノードを再帰的に反復処理する必要がある場合は、Container#walk を使用します。

for {} サイクルまたは Array#forEach とは異なり、このイテレータは、反復処理中に子ノードの配列をミューテートする場合でも安全です。PostCSS は、ミューテーションに合わせて現在のインデックスを調整します。

const root = postcss.parse('a { color: black; z-index: 1 }')
const rule = root.first

for (const decl of rule.nodes) {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Cycle will be infinite, because cloneBefore moves the current node
  // to the next index
}

rule.each(decl => {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  // Will be executed only for color and z-index
})

void | false を返します。

Root#error()

クラス CssSyntaxError のインスタンスを作成し、このメソッドに渡されたパラメータがエラーインスタンスに割り当てられます。

エラーインスタンスには、エラーの説明、ソース内のノードの元の位置、行番号と列番号を示す説明が含まれます。

前のマップが存在する場合は、ソースの元の位置を取得するために使用されます。

ここでの前のマップは、以前のコンパイルで生成されたソースマップを指します。例: Less、Stylus、Sass。

このメソッドは、エラーインスタンスをスローするのではなく返します。

if (!variables[name]) {
  throw decl.error(`Unknown variable ${name}`, { word: name })
  // CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
  //   color: $black
  // a
  //          ^
  //   background: white
}

CssSyntaxError_ を返します。

Root#every()

コールバックがコンテナのすべての子に対して true を返す場合は true を返します。

const noPrefixes = rule.every(i => i.prop[0] !== '-')

boolean を返します。

Root#index()

Container#nodes 配列内の child のインデックスを返します。

rule.index( rule.nodes[2] ) //=> 2

number を返します。

Root#insertAfter()

コンテナ内の古いノードの後に新しいノードを挿入します。

Root を返します。

Root#insertBefore()

コンテナ内の古いノードの前に新しいノードを挿入します。

rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }))

Root を返します。

Root#next()

ノードの親の次の子を返します。現在のノードが最後の子の場合は undefined を返します。

if (comment.text === 'delete next') {
  const next = comment.next()
  if (next) {
    next.remove()
  }
}

ChildNode を返します。

Root#nodes

コンテナの子を含む配列。

const root = postcss.parse('a { color: black }')
root.nodes.length           //=> 1
root.nodes[0].selector      //=> 'a'
root.nodes[0].nodes[0].prop //=> 'color'

型: ChildNode[]。

Root#parent

現在のノードの親を表します。

root.nodes[0].parent === root //=> true

型: Document_。

Root#positionBy()

ノード内の単語またはインデックスの位置を取得します。

Position を返します。

Root#positionInside()

文字列のインデックスを行/列に変換します。

Position を返します。

Root#prepend()

コンテナの先頭に新しいノードを挿入します。

const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.prepend(decl1, decl2)

root.append({ name: 'charset', params: '"UTF-8"' })  // at-rule
root.append({ selector: 'a' })                       // rule
rule.append({ prop: 'color', value: 'black' })       // declaration
rule.append({ text: 'Comment' })                     // comment

root.append('a {}')
root.first.append('color: black; z-index: 1')

Root を返します。

Root#prev()

ノードの親の前の子を返します。現在のノードが最初の子である場合は、undefined を返します。

const annotation = decl.prev()
if (annotation.type === 'comment') {
  readAnnotation(annotation.text)
}

ChildNode を返します。

Root#push()

ノードの末尾に子を追加します。

rule.push(new Declaration({ prop: 'color', value: 'black' }))

Root を返します。

Root#rangeBy()

ノード内の単語または開始インデックスと終了インデックスの範囲を取得します。開始インデックスは包括的で、終了インデックスは排他的です。

Range を返します。

Root#raw()

raws 値を返します。ノードにコードスタイルプロパティがない場合（ノードが手動で作成または複製されたため）、PostCSSはツリー内の他のノードを調べてコードスタイルプロパティを自動検出しようとします。

const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before   //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '

string を返します。

Root#raws

CSSソースコードに存在する不要な空白と文字を表します。

元の入力と同じように、バイト単位で等しいノード文字列を生成するための情報。

raws オブジェクトのプロパティはパーサーによって決定されます。デフォルトのパーサーは次のプロパティを使用します

• before: ノードの前の空白記号。宣言の前の * および _ 記号も保存します（IEハック）。
• after: ノードの最後の子からノードの末尾までの空白記号。
• between: 宣言の場合はプロパティと値の間、ルールの場合はセレクタと { の間、または at-rule の場合は最後のパラメータと { の間の記号。
• semicolon: 最後の子が（オプションの）セミコロンを持っている場合は true が含まれます。
• afterName: at-rule 名とそのパラメータの間の空白。
• left: /* とコメントのテキストの間の空白記号。
• right: コメントのテキストと */ の間の空白記号。

• important: important ステートメントの内容。単に !important ではない場合。

PostCSSはセレクタ、宣言値、および at-rule パラメータ内のコメントをフィルタリングしますが、raws に元のコンテンツを保存します。

const root = postcss.parse('a {\n  color:black\n}')
root.first.first.raws //=> { before: '\n  ', between: ':' }

型: RootRaws。

Root#remove()

ノードをその親から削除し、親プロパティを削除します。

if (decl.prop.match(/^-webkit-/)) {
  decl.remove()
}

Root を返します。

Root#removeAll()

コンテナからすべての子を削除し、それらの親プロパティをクリアします。

rule.removeAll()
rule.nodes.length //=> 0

Root を返します。

Root#removeChild()

ノードをコンテナから削除し、ノードとその子から親プロパティをクリアします。

rule.nodes.length  //=> 5
rule.removeChild(decl)
rule.nodes.length  //=> 4
decl.parent        //=> undefined

Root を返します。

Root#replaceValues()

Root を返します。

Root#replaceWith()

現在のノードの前にノードを挿入し、現在のノードを削除します。

AtRule: {
  mixin: atrule => {
    atrule.replaceWith(mixinRules[atrule.params])
  }
}

Root を返します。

Root#root()

ノードのツリーの Root インスタンスを検索します。

root.nodes[0].nodes[0].root() === root

Root を返します。

Root#some()

コンテナの子の少なくとも1つに対してコールバックが true を返す場合は、true を返します。

const hasPrefix = rule.some(i => i.prop[0] === '-')

boolean を返します。

Root#source

ノードの起源に関する情報を表し、ソースマップの生成に必要です。

PostCSSが提供するパブリックAPIを使用して手動で作成されたノードは、source が未定義になり、ソースマップに表示されません。

このため、プラグイン開発者は、複製されたノードはデフォルトで元のノードと同じソースを持つか、手動で作成されたノードにソースを割り当てるため、ノードを複製することを検討する必要があります。

decl.source.input.from //=> '/home/ai/source.css'
decl.source.start      //=> { line: 10, column: 2 }
decl.source.end        //=> { line: 10, column: 12 }

// Incorrect method, source not specified!
const prefixed = postcss.decl({
  prop: '-moz-' + decl.prop,
  value: decl.value
})

// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
  prop: '-moz-' + decl.prop
})

if (atrule.name === 'add-link') {
  const rule = postcss.rule({
    selector: 'a',
    source: atrule.source
  })

 atrule.parent.insertBefore(atrule, rule)
}

型: Source。