Webpackローダーを使用してReactアプリケーションでCSSクラス名の競合の問題を解決する

友人、ご挨拶！

それはすべて、いわば魂のために何かを開発することを計画したという事実から始まりました。 Reactアプリケーションは他の何か、例えばウェブサイトの上にレンダリングされるはずでしたが、私のアプリケーションのCSSクラスが既存のインフラストラクチャと競合する可能性があるという疑問が生じました、もちろん、最も怪しいものでもプレフィックスを実装する必要があるという結論に達しましたクラス、まあ、またはメインコンテナのクラス内のすべての定義をラップしても、プレフィックスを選択しました。 しかし、すぐにそれらにうんざりし、それらの多くが空のコピーペーストのように思えたため、独自のwebpackローダーを作成することを考えました。 その結果、彼の仕事はハエから象に成長し、アイデアは私を圧倒し、その結果、私の心と手はほとんど私の制御から外れたモンスターを作成しました。

私はこれらの1週間半の執筆を認めています。最初に英語で考え、コーディングし、文書化し、それから私の不器用な英語から少し不器用な母国語に翻訳することに疲れていました。おそらくすでに終わっているでしょう。 しかし今、私は高貴なマークダウンプログラマーであり、通常のユーザーです。

そのため、クラス名をmy-app-classnameに置き換えるメカニズムが必要でしたが、最終的に詳細に説明することになりました。 私の仕事の結果をnpmに公開しました。

手始めに、あなた自身のwebpackローダーを作成する方法に誰かが興味を持つかもしれません。 簡単です：フォルダーを作成し、my-divine-loaderと呼びます。これには、インデックスJSファイルと次のコードが含まれています。

const {getOptions} = require('loader-utils'); module.exports = function(source) { //      //      this //  getOptions    ,    webpack.config.js return source; } 

設置

NPM

 npm install --save classy-loader 

プレイ例

Githubリポジトリへのリンク

Webpack構成への追加

まず、必要な設定を設定しましょう。

 const classy = require('classy-loader'); classy.init({ attributeName: 'class', extraAttributeName: 'classes', globalPrefix: 'awesome-example-app', delimiter: '-', obfuscation: false, obfuscatedLength: 4, autoPrefixMode: false, prefixAutoResolving: false }); //... module: { rules: [ { test: /\.js$/, loaders: [ { loader: 'babel-loader', options: { //.... } }, { loader: 'classy-loader?parser=js' } ] }, { test: /\.s?css$/, loader: ExtractTextPlugin.extract( { fallback: 'style-loader', use: [ 'css-loader?root=...', 'sass-loader', 'classy-loader?parser=css' ] } ) } ] } //... 

例からわかるように、ローダーはbabelローダーと標準スタイルのローダーの後に追加する必要があります。

attributeName

ローダーによって解析される属性DOM要素の名前。
それは何でもよく、標準属性「className」に変換されます。
デフォルトでは、このパラメーターは「クラス」です。

 render() { return ( <div class=".self"> ... </div> ) } 

かそこら

 render() { return ( <div whateverName=".self"> ... </div> ) } 

したがって、「class」と「whateverName」は、attributeName名です。
ローダーによる処理後、コードは次のようになります。

 render() { return ( <div className="awesome-example-app"> ... </div> ) } 

ローダーにとって、 「自己」は、グローバルまたはローカルのクラス名プレフィックスを意味するキーワードです。

具体的には、この場合、ローカルプレフィックスがないため、 「self」はグローバル値と等しくなります。

extraAttributeName

React要素の属性名。同じ方法で解析されますが、名前は変更されません。
また、解析する変数名とオブジェクトキーにも使用できます。
デフォルトでは、「クラス」と同等です。

 render() { return ( <Button classes=".action-button awesome-button">  ! </Button> ) } let classes = ".some-class"; let object = { classes: ".some-other-class" }; 

出力では、同じ属性「クラス」を取得します。

 render() { return ( <Button classes="awesome-example-app-action-button awesome-button"> Do it! </Button> ) } let classes = "awesome-example-app-some-class"; let object = { classes: "awesome-example-app-some-other-class" }; 

globalPrefix

DOM要素のクラス名に追加されるプレフィックス。
特別な構文により、ローダーにプレフィックスを追加するかどうかが指示されます。
デフォルトでは空であるため、ローカルプレフィックスが指定されない限り、プレフィックスは追加されません。

 render() { return ( <div class=".thing"> ... </div> ) } 

になります

 render() { return ( <div className="awesome-example-app-thing"> ... </div> ) } 

ドットは、クラス名にプレフィックスが必要であることを意味します。
パーサー構文の詳細については、以下に示します。

区切り文字

プレフィックスとクラス名を結合する文字または単語。
デフォルトは「-」です。

 render() { return ( <div class=".some-item"> ... </div> ) } 

したがって、 「区切り文字」が「_」に等しい場合、コードは次のようになります。

 render() { return ( <div className="awesome-example-app_some-item"> ... </div> ) } 

prefixAutoResolving

このパラメーターが設定されている場合、ローダーはローカルプレフィックスを独自に決定しようとします。
デフォルトでは設定されていません。
次の3つの値があります。

prefixAutoResolving: "content"

まず、ローダーは以下を含む行を見つけようとします：
エクスポートのデフォルト（クラス|関数）MySuperClassName

次に検索します：
デフォルト接続のエクスポート（...）（MySuperClassName）

見つからない場合：
クラスMySuperClassName

最後に、このコードを作成する最初の行が必要です。
関数MySuperClassName

したがって、「MySuperClassName」は、ローカルプレフィックス「my」+デリミタ+「スーパー」+デリミタ+「クラス」+デリミタ+「名前」に変換されます。

CSSファイルの場合、ローダーはキャッシュ内のデータを検索し、JSファイルの処理時にデータが読み込まれます。
キャッシュに同じディレクトリ内のインデックスファイルのプレフィックス情報が含まれている場合、
それらが使用されるため、JSとCSSは同期されます。
パーサーが適切なキャッシュを持つように、CSSローダーの前にJSローダーを配置する必要があります。

 export default class MySuperButton extends React.Component { render() { return ( <div class=".self"> <span class=".inner"> .... </span> </div> ) } } 

になります

 export default class MySuperButton extends React.Component { render() { return ( <div className="awesome-example-app-my-super-button"> <span className="awesome-example-app-my-super-button-inner"> .... </span> </div> ) } } 

特別なディレクティブを使用して、JS / CSSローカルプレフィックスを設定することもできます。
それらについては以下で詳しく説明します。

prefixAutoResolving: "file"

ローダーは、JS / CSSファイルの名前からローカルプレフィックスを形成します。
「SuperItem.js」または「super-item.js」または「super_item.js」
接頭辞「スーパー」+区切り文字+「アイテム」に変わります。
この方法の場合、ファイルは同期されるように同じ名前を付ける必要があります。

prefixAutoResolving: "folder"

ローダーは、ディレクトリ名からローカルプレフィックスを形成します。
「SuperItem / index.js」または「super-item / some.js」または「super_item / any.js」
接頭辞「スーパー」+区切り文字+「アイテム」になります。
JS / CSSを同期する最も簡単な方法であり、構造もより明確になります。

難読化

trueに設定すると、ローダーはJSおよびCSSファイルのクラス名を難読化します。
すべてのCSSクラスはどの場合でも変更され、JSは属性「attributeName」およびextraAttributeName内でのみ変更されることに注意してください。
デフォルトでは、このオプションはアクティブではありません。

 render() { return ( <div class=".button small"> ... </div> ) } 

になります

 render() { return ( <div className="w4fq5wq dhet7s5"> ... </div> ) } 

難読化された長さ

クラス名が難読化される文字の長さ。
デフォルト値は「7」です。

したがって、 「obfuscatedLength」が4の場合

 render() { return ( <div className="ald8 jd6g"> ... </div> ) } 

autoPrefixMode

ローダーは自動的にクラス名にプレフィックスを追加します。
クラス名には、わずかに異なる文字列形式を使用する必要があります。
デフォルトでは、このオプションは無効になっています。

たとえば、非自動プレフィックスモードのCSSクラスエントリは次のとおりです。
（ 「prefixAutoResolving」は「コンテンツ」を意味します）

 export default class Container extends React.Component { render() { return ( <div class=".self wide ..area"> <div class=".content content"> ... </div> </div> ) } } 

に変換されます

 export default class Container extends React.Component { render() { return ( <div className="awesome-example-app-container wide awesome-example-app-area"> <div class="awesome-example-app-container-content content"> ... </div> </div> ) } } 

ここでは、ローカルプレフィックスは「awesome-example-app-container」です（クラス「Container」に代わって自動的に追加されるグローバルプレフィックス）。
したがって、このモードでは、プレフィックス用のポイントを追加する必要があります。ローカル用とグローバル用の2つです。

最後に、自動プレフィックスモードのCSSクラスを記述する例
（ 「prefixAutoResolving」は「コンテンツ」を意味します）
その結果、最初の場合と同じ結果が得られます。

 export default class Container extends React.Component { render() { return ( <div class="self ..wide .area"> <div class="content ..content"> ... </div> </div> ) } } 

また

 export default class Container extends React.Component { render() { return ( <div className="awesome-example-app-container wide awesome-example-app-area"> <div class="awesome-example-app-container-content content"> ... </div> </div> ) } } 

このモードでは、ローカルプレフィックスにポイントを追加する必要はありません。グローバルプレフィックスに1つ追加する必要があり、プレフィックスなしのクラス名に2つ追加する必要があります。

CSSファイルでは、すべてが同じ原則に従って機能します（同じ数のポイントを追加する必要があるため、最大3つのポイントを取得できます）。

非自動プレフィックスモード：

 /* ,      (    ) */ .with.addedPrefix.container; ..self { position: relative; &...area { background-color: #eee; border: 1px solid #aaa; } &.wide { width: 80%; } ..content { padding: 10px; &.content { padding-top: 0; } } } 

なります

 .awesome-example-app-container { position: relative; &.awesome-example-app-area { background-color: #eee; border: 1px solid #aaa; } &.wide { width: 80%; } .awesome-example-app-container-content { padding: 10px; &.content { padding-top: 0; } } } 

自動プレフィックスモードでも同じです。

 /* ,      (    ) */ .with.addedPrefix.container; .self { position: relative; &..area { background-color: #eee; border: 1px solid #aaa; } &...wide { width: 80%; } .content { padding: 10px; &...content { padding-top: 0; } } } 

同じ結果が得られます

 .awesome-example-app-container { position: relative; &.awesome-example-app-area { background-color: #eee; border: 1px solid #aaa; } &.wide { width: 80%; } .awesome-example-app-container-content { padding: 10px; &.content { padding-top: 0; } } } 

指令

Jsディレクティブ

• プレフィックス 'some-prefix';

  
  単一ファイル内でそれをオーバーライドするグローバルバージョンのローカルバージョンを作成します。
  2つのポイントは、構成で定義された標準のグローバルプレフィックスを追加します。
  

 //   // prefixAutoResolving: "content" // ...imports with prefix 'crazy-app'; export default class Container extends React.Component { render() { return ( <div class=".self"> <div class=".title ..bigger"> ... </div> <div class=".content"> ... </div> </div> ) } } 

になります

 // ...imports export default class Container extends React.Component { render() { return ( <div class="crazy-app-container"> <div class="crazy-app-container-title awesome-example-app-bigger"> ... </div> <div class="crazy-app-container-title"> ... </div> </div> ) } } 

そして今、 「prefixAutoResolving」が falseに設定されている場合の結果、
したがって、ローカルプレフィックスは追加されていません
オーバーライドされたグローバルのみ

 // ...imports export default class Container extends React.Component { render() { return ( <div class="crazy-app"> <div class="crazy-app-title awesome-example-app-bigger"> ... </div> <div class="crazy-app-title"> ... </div> </div> ) } } 

• 自動プレフィックス「some-prefix」付き;

  
  すべては上記のディレクティブと同じですが、指定されたファイル内で自動プレフィックスモードを設定します。
  

• addedPrefix 'some-additional-prefix';

  
  ローカルで使用する追加のプレフィックスを指定します。
  このディレクティブは「prefixAutoResolving」パラメーターのようなことを行うため、ローダーを見つけてもプレフィックスは自動的に検出されません。
  

 //   // ...imports with addedPrefix 'dialog'; export default class Dialog extends React.Component { render() { return ( <div class=".self"> <div class=".title ..bigger"> ... </div> <div class=".content"> ... </div> </div> ) } } 

なります

 // ...imports export default class Dialog extends React.Component { render() { return ( <div class="awesome-example-app-dialog"> <div class="awesome-example-app-dialog-title awesome-example-app-bigger"> ... </div> <div class="awesome-example-app-dialog-content"> ... </div> </div> ) } } 

• auto addedPrefix 'some-additional-prefix';

  
  すべてが上記のディレクティブの場合と同じであり、さらに、指定されたファイル内で自動プレフィックスモードを設定します。
  

• 自動プレフィックス付き。

  
  指定されたファイル内の自動プレフィックスモードを設定します。
  

CSSディレクティブ

CSSディレクティブはまったく同じことを行い、JSバージョンと非常によく似ていますが、
違いは、JSファイル用ではない最後のディレクティブのみです

• .with.prefix.some-prefix;

  
  

• .with.auto.prefix.some-prefix;

  
  

• .with.addedPrefix.additional-prefix;

  
  

• .with.auto.addedPrefix.additional-prefix;

  
  

• .with.auto.prefix;

  
  

• .with.no.prefix;

  
  「..」/「...」があっても、接頭辞を追加しないようローダーに指示します。
  2つまたは3つのポイントは1つとして認識されます。
  

CSSクラス文字列表記構文

 render() { return ( <div class="name .name ..name $name $$name prefix::name .$name ..$name"> ... </div> ) } 

お名前

非自動プレフィックスモードでプレフィックスなしのクラス名を示します。
自動プレフィックスモードでローカルプレフィックスを持つクラス名を示します。

 render() { return ( <div className="name"> ... </div> //and <div className="local-prefix-name"> ... </div> ) } 

.name

非自動プレフィックスモードのローカルプレフィックスを持つクラス名を示します。
自動プレフィックスモードでグローバルプレフィックスを持つクラス名を示します。

 render() { return ( <div className="local-prefix-name"> ... </div> //and <div className="global-prefix-name"> ... </div> ) } 

..name

非自動プレフィックスモードでグローバルプレフィックスを持つクラス名を示します。
自動プレフィックスモードでプレフィックスなしのクラス名を示します。

 render() { return ( <div className="global-prefix-name"> ... </div> //and <div className="name"> ... </div> ) } 

$名前

Mergitは、クラスの名前または変数からの名前の配列です。
ローダーは、「マージ」に必要なモジュールの「インポート」を自動的に追加します。
変数には、プレフィックス付きのクラスの名前が既に含まれているか、難読化されている必要があります。

 render() { return ( <div className={classy(name)}> ... </div> ) } 

これが基本的にどのように機能するかの例：

親コンポーネントでは、 extraAttributeName： "classes"を使用します

 render() { return ( <Icon classes="..large green"> resize </Icon> ) } 

子（アイコン）

 with addedPrefix 'icon'; export default function Icon({classes, children}) { return ( <i class=".self $classes material-icons"> {children} </i> ) } 

だから最後には

親で：

 render() { return ( <Icon classes="awesome-example-app-large green"> resize </Icon> ) } 

コンポーネントに「インポート」アイコンが自動的に追加されます

 import classy from 'classy-loader/classy'; export default function Icon({classes, children}) { return ( <i className={classy("awesome-example-app-icon", classes, "material-icons")}> {children} </i> ) } 

そして、コードはアセンブルされた「バンドル」を調べます。

 return _react2.default.createElement( 'i', _extends({ className: (0, _classy2.default)("awesome-example-app-icon", classes, "material-icons") }), children ); 

$$名

上記の変数と同じですが、変数が配列または「未定義」ではなく文字列であることをローダーに伝えます。
ローダーがマージ機能を使用しないように、ただし、$ name形式の他の変数がある場合、機能は引き続き使用されます

 render() { return ( <div class="$classes"> <div class="$$className"> ... </div> </div> ) } 

になります

 render() { return ( <div className={classy(classes)}> <div className={className}> ... </div> </div> ) } 

プレフィックス::名前

ローカル（子コンポーネントに相対的）プレフィックスをクラス名に追加します。
上記のアイコンの例を使用して、少し変更します。

 render() { return ( <Icon classes="..large green"> <span class="icon::thing"> resize </span> </Icon> ) } 

原則として、「。icon-thing」などのレコードを使用できますが、
ただし、最初のオプションでは、目的の区切り文字でそれらを接続します。

 render() { return ( <Icon classes="..large green"> <span class="..icon-thing"> resize </span> </Icon> ) } 

だから私たちはそのようなHTMLを持っています

 <i className="awesome-example-app-icon awesome-example-app-large green material-icons"> <span class="awesome-example-app-icon-thing"> resize </span> </i> 

。$名前

動的クラス名、ローカルプレフィックスと変数値。
モードに関係なく、常にローカルプレフィックスです。

 with addedPrefix 'tab'; export default function Tab({classes, children, isActive}) { render() { let className = isActive ? 'active' : 'inactive'; return ( <div class=".self .$className $classes"> {children} </div> ) } } 

なります

 import classy from 'classy-loader/classy'; export default function Tab({classes, children, isActive}) { render() { let className = isActive ? 'active' : 'inactive'; return ( <div className={classy("awesome-example-app-tab", "awesome-example-app-tab-" + className, classes)}> {children} </div> ) } } 

.. $名前

動的クラス名、グローバルプレフィックスと変数値。
モードに関係なく、常にグローバルプレフィックスです。

 with addedPrefix 'button'; export default class Button extends React.Component { render() { let className = 'active'; return ( <div classes=".self ..$className"> ... </div> ) } } 

なります

 export default class Button extends React.Component { render() { let className = 'active'; return ( <div className={"awesome-example-app-button awesome-example-app-" + className}> ... </div> ) } } 

このような動的なクラスを難読化することは不可能です（または単にその方法です）。
しかし、そのような目的のために、特別な「偽」関数$ classyが導入されました。
難読化ツールのクラス名の「マップ」を作成します。

以下に例を示します。

 let className = $classy(color, '..color-', ['red', 'green']); className = $classy(color, '.color-', ['blue', 'yellow']); className = $classy(number, '..', ['one', 'two']); className = $classy(quality, '.', ['good', 'bad']); className = $classy(name, '', ['John', 'Rick']); 

非自動プレフィックスモードでは、次のように変換されます。

 let className = { red: 'awesome-example-app-color-red', green: 'awesome-example-app-color-green' }[color]; className = { blue: 'awesome-example-app-button-color-blue', yellow: 'awesome-example-app-button-color-yellow' }[color]; className = { one: 'awesome-example-app-one', two: 'awesome-example-app-two' }[number]; className = { good: 'awesome-example-app-button-good', bad: 'awesome-example-app-button-bad' }[quality]; className = { John: 'John', Rick: 'Rick' }[name]; 

自動プレフィックスモードでは次のようになります。

 let className = { red: 'color-red', green: 'color-green' }[color]; className = { blue: 'awesome-example-app-color-blue', yellow: 'awesome-example-app-color-yellow' }[color]; className = { one: 'one', two: 'two' }[number]; className = { good: 'awesome-example-app-good', bad: 'awesome-example-app-bad' }[quality]; className = { John: 'awesome-example-app-button-John', Rick: 'awesome-example-app-button-Rick' }[name]; 

そのため、変数「className」はクラスの実際の名前になります。これは難読化され、次のようになります。

 let className = { red: 'hby457r', green: 'fhelf76', blue: 'dh409gl', yellow: 'sl58sgf', orange: 'dl50gak', ... }[color]; 

これらのニーズに対する別の方法ですが、「パターン」が異なります。

 let className = $classy(colorValue, { red: "..red item::reddish", green: "..green ..greenish", ... }); 

コードを提供します：

 let className = { red: 'awesome-example-app-red awesome-example-app-item-reddish', green: 'awesome-example-app-green awesome-example-app-greenish', ... }[colorValue]; 

さて、最後に$ classyを使用する方法：

 with addedPrefix 'catalog'; // .... let className = $classy(".item item ..some-item $classes"); 

になります

 import classy from 'classy-loader/classy'; // .... let className = classy("awesome-example-app-catalog-item", "item", "awesome-example-app-some-item", classes); 

条件付き（三元）CSSクラスレコード

手始めに、シンプル

 //    globalPrefix = 'app' //    autoPrefixMode = false //    addedPrefix = 'item' render() { let active = true; return ( <div class="name $active?active"> ... </div> <div class=".name $active?.active"> ... </div> <div class="$active?..active:..inactive"> ... </div> <div class="$active?$className:disabled"> ... </div> <div class="$!active?inactive"> ... </div> ) } 

になります

 render() { let active = true; return ( <div className={classy("name", active ? "active" : "")}> ... </div> <div className={classy("app-item-name", active ? "app-item-active" : "")}> ... </div> <div className={classy(active ? "app-active" : "app-inactive")}> ... </div> <div className={classy(active ? className : "disabled")}> ... </div> <div className={classy(!active ? "inactive" : "")} > ... </div> ) } 

文字「？」の間にスペースを追加できます。 および「：」

 render() { return ( <div class="$active ? active : inactive"> ... </div> ) } 

ただし、条件では、スペースは許可されません。

 render() { return ( <div class="$active === true ? active : inactive"> ... </div> ) } 

このようなエントリは、フォームの無効なクラス名に変換されます

 render() { return ( <div className="1 === true active inactive"> ... </div> ) } 

スペースを追加したい場合は、条件を括弧で囲みます

 render() { return ( <div class="$(active == 'something') ? active : inactive"> ... </div> ) } 

条件の先頭に「$」を1つだけ示すことができますが、
他の条件変数の場合、符号は省略できます。

 render() { return ( <div class="$index==count-1 ? active : inactive"> ... </div> // or <div class="$( index == count - 1 ) ? active : inactive"> ... </div> ) } 

そして最後にケーキの桜

 render() { return ( <div class="$?active $?.active $?..active"> ... </div> ) } 

なります

 render() { return ( <div className={classy(active ? "active" : "", active ? "local-prefix-active" : "", active ? "global-prefix-active" : "")}> ... </div> ) } 

そして拒否

 render() { return ( <div class="!$?active !$?.active !$?..active"> ... </div> ) } 

なります

 render() { return ( <div className={classy(!active ? "active" : "", !active ? "local-prefix-active" : "", !active ? "global-prefix-active" : "")}> ... </div> ) } 

モードに応じて、ポイントは常に同じ原理で機能します。

CSS構文

非自動プレフィックスモードの場合

プレフィックスなしの実際のクラス名の1つのポイント。
ローカルプレフィックスを持つ名前の2つのドット。
グローバルプレフィックスを持つ名前の3つのドット。
「自己」は、定義されている場合、ローカルまたはグローバルプレフィックスを示すキーワードです。それ以外の場合、クラス名は単にself

 ..self { ..title { } ..content { } ...active { } .item { } } 

自動プレフィックスモードの場合

ローカルプレフィックスを持つクラス名の1つのドット。
グローバルプレフィックスを持つ名前の2つのポイント。
プレフィックスなしの実際のクラス名の3つのドット。

 .self { .title { } .content { } ..active { } ...item { } } 

ローカルプレフィックスが定義されていない場合、グローバルプレフィックスが使用されます。

そして今、いくつかのCSS砂糖

シュガー構文の例：

 .container { var .abs.w100.h200.bc-000.c-fff.fs15; } 

以下に変換されます：

 .container { position: absolute; width: 100px; height: 200px; background-color: #000; color: #fff; font-size: 15px; } 

スペースを使用することもできます。

 .container { var .fix .l .r .t .b .z999 .o3; } 

になります

 .container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; opacity: 0.3; } 

式はキーワード「var」で始まり、セミコロンまたは改行で終わる必要があります。

利用可能な略語の完全なリスト

, () .
, , .
:

 .with.image.source '../../assets/images/'; .with.image.source './bg-images'; .with.image.source './images/gifs'; .with.image.source '../svgs'; 

:

 .item { var .png-arrow.jpg-bg.jpeg-line.png2-some-image; var .gif3-preloader.svg4-icon; } 

:

2. ( , )

:

 .item { background-image: url(../../assets/images/arrow.png); background-image: url(../../assets/images/bg.jpg); background-image: url(../../assets/images/line.jpeg); background-image: url(./bg-images/some-image.png); background-image: url(./images/gifs/preloader.gif); background-image: url(../svgs/icon.svg); } 

, .

:

結論として

, , , , - , . , , , . , , , . , !