postcss-enumerates-in-line 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.img/default_color.png +0 -0
  2. package/README.md +49 -18
  3. package/README_EN.md +50 -18
  4. package/index.mjs +15 -2
  5. package/package.json +1 -1
  6. package/test/gulp/gulpfile.mjs +2 -2
  7. package/test/postcss/build-css.mjs +2 -2
package/README.img/default_color.png ADDED
Binary file
package/README.md CHANGED
@@ -5,13 +5,14 @@
5
5
  |[<img width="24" height="24" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> 日本語](README.md)|[<img width="24" height="24" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> English](README_EN.md)|
6
6
 
7
7
 
8
- ## 更新点: v0.2.0
8
+ ## 更新点: v0.3.0
9
9
 
10
10
  - 以下の条件付きCSSプロパティを追加
11
11
  + `hover!`
12
12
  + `dark!`
13
13
  + `mq(<mediaQueries>)!`
14
14
  + `data(<customDataElements>)`
15
+ + `aria(<ariaAttributes>)`
15
16
  - デフォルトカラーを[Flexoki]に変更
16
17
  - `_color.scss`を同梱
17
18
  - 作成例の`test/gulp/`と`test/postcss/`を更新
@@ -58,7 +59,7 @@
58
59
 
59
60
  ~~> [Tailwind CSS]における`hover:`・`md:`・`dark:`などに対応する機能は備えていないという意味です。~~
60
61
 
61
- ☑️version 0.2.0以上
62
+ ☑️version 0.3.0以上
62
63
 
63
64
  またCSSプロパティ名の先頭に以下の書式を加筆することで、条件付きCSSプロパティに対応することができます。
64
65
 
@@ -66,6 +67,7 @@
66
67
  - `dark!`: :root.dark
67
68
  - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
68
69
  - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
70
+ - `aria(<ariaAttributes>)!`: [aria-&lt;ariaAttributes&gt;]
69
71
 
70
72
  > 詳しい書式は目次の次へお進みください。
71
73
 
@@ -84,7 +86,7 @@
84
86
  ## 目次
85
87
 
86
88
  - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
87
- - [更新点: v0.2.0](#更新点-v020)
89
+ - [更新点: v0.3.0](#更新点-v030)
88
90
  - [実装予定](#実装予定)
89
91
  - [目次](#目次)
90
92
  - [CSSでの記述方法](#cssでの記述方法)
@@ -93,6 +95,7 @@
93
95
  - [マウスオーバー](#マウスオーバー)
94
96
  - [メディアクエリ](#メディアクエリ)
95
97
  - [カスタムデータ属性](#カスタムデータ属性)
98
+ - [ARIA属性](#aria属性)
96
99
  - [特殊な記号](#特殊な記号)
97
100
  - [コロン記号](#コロン記号)
98
101
  - [エクスクラメーション記号](#エクスクラメーション記号)
@@ -160,7 +163,7 @@ h1 {
160
163
 
161
164
  上記のように`条件付き書式!CSSプロパティ名:CSSプロパティ値`と記法を拡張することができます。
162
165
 
163
- `hover!`, `dark!`, `mq(...)!`, `data(...)!`はそれぞれ重ね掛けが可能です。
166
+ `hover!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`はそれぞれ重ね掛けが可能です。
164
167
 
165
168
  ```scss
166
169
  h1 {
@@ -168,7 +171,7 @@ h1 {
168
171
  }
169
172
  ```
170
173
 
171
- ただしこれら条件付き書式は１つのCSSプロパティにつき１種しか設定できないため、`mq(...)!`と`data(...)!`を連続して記述できません。
174
+ ただしこれら条件付き書式は１つのCSSプロパティにつき１種しか設定できないため、`mq(...)!`・`data(...)!`・`aria(...)!`を連続して記述できません。
172
175
 
173
176
  列挙する場合は`(`・`)`の中で、`,`を使ってください。
174
177
 
@@ -404,6 +407,46 @@ h1[data-is-empty="false"] {
404
407
  > + `\`: %5D
405
408
 
406
409
 
410
+ #### ARIA属性
411
+
412
+ 条件付き書式`aria(<ariaAttributes>)!`を使うと、`[aria-label="heading"]`のようなARIA属性によるセレクターを追加できます。
413
+
414
+ 複数の属性セレクターを組み合わせる場合は、`,`で区切ります。
415
+
416
+ ```scss
417
+ /* 🚧Before */
418
+ h1 {
419
+ @emums aria(label="heading")!fs:1.5rem;
420
+ }
421
+
422
+ /* 🚀After */
423
+ h1[aria-label="heading"] {
424
+ font-size: 1.5rem;
425
+ }
426
+ ```
427
+
428
+ 属性セレクターは`属性名`・`=`・`属性データ`の組み合わせになっています。
429
+
430
+ > 属性名には`aria-`に続く文字列を指定します。
431
+ >
432
+ > `/[a-z]/`の文字しか使うことはできません。
433
+
434
+ > 条件演算子は現在`=`のみを有効にしています。
435
+ >
436
+ > 必要になれば`data(...)!`と同等の条件にまで拡張するかもしれません。
437
+
438
+ > 属性データは、`"`または`'`で囲まれている必要があります。
439
+ >
440
+ > このため引用符を使う場合は注意してください。
441
+ >
442
+ > またパッケージの内部処理により、以下の文字が属性データに含まれる場合はパーセントエンコーディングを行います。
443
+ > + `%`: %25
444
+ > + `"`: %22
445
+ > + `'`: %27
446
+ > + `｀`: %60
447
+ > + `\`: %5D
448
+
449
+
407
450
  ### 特殊な記号
408
451
 
409
452
  特殊な振る舞いを起こす文字は、`:`・`^`・`!`・`[[`・`]]`の５種類です。
@@ -484,19 +527,7 @@ body {
484
527
  }
485
528
  ```
486
529
 
487
- ||0|50|100|150|200|300|400|500|600|700|800|850|900|950|999|
488
- |--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
489
- |<b>black</b>|<div style="background-color:#100F0F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#100F0F</small>||||||||||||||<div style="background-color:#000000">⠶</div><small style="font-size:0.66rem;font-family:monospace">#000000</small>|
490
- |<b>white</b>|<div style="background-color:#FFFCF0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFFCF0</small>||||||||||||||<div style="background-color:#FFFFFF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFFFFF</small>|
491
- |<b>base</b>||<div style="background-color:#F2F0E5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F2F0E5</small>|<div style="background-color:#E6E4D9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E6E4D9</small>|<div style="background-color:#DAD8CE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DAD8CE</small>|<div style="background-color:#CECDC3">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CECDC3</small>|<div style="background-color:#B7B5AC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#B7B5AC</small>|<div style="background-color:#9F9D96">⠶</div><small style="font-size:0.66rem;font-family:monospace">#9F9D96</small>|<div style="background-color:#878580">⠶</div><small style="font-size:0.66rem;font-family:monospace">#878580</small>|<div style="background-color:#6F6E69">⠶</div><small style="font-size:0.66rem;font-family:monospace">#6F6E69</small>|<div style="background-color:#575653">⠶</div><small style="font-size:0.66rem;font-family:monospace">#575653</small>|<div style="background-color:#403E3C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#403E3C</small>|<div style="background-color:#343331">⠶</div><small style="font-size:0.66rem;font-family:monospace">#343331</small>|<div style="background-color:#282726">⠶</div><small style="font-size:0.66rem;font-family:monospace">#282726</small>|<div style="background-color:#1C1B1A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1C1B1A</small>||
492
- |<b>red</b>||<div style="background-color:#FFE1D5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFE1D5</small>|<div style="background-color:#FFCABB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFCABB</small>|<div style="background-color:#FDB2A2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FDB2A2</small>|<div style="background-color:#F89A8A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F89A8A</small>|<div style="background-color:#E8705F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E8705F</small>|<div style="background-color:#D14D41">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D14D41</small>|<div style="background-color:#C03E35">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C03E35</small>|<div style="background-color:#AF3029">⠶</div><small style="font-size:0.66rem;font-family:monospace">#AF3029</small>|<div style="background-color:#942822">⠶</div><small style="font-size:0.66rem;font-family:monospace">#942822</small>|<div style="background-color:#6C201C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#6C201C</small>|<div style="background-color:#551B18">⠶</div><small style="font-size:0.66rem;font-family:monospace">#551B18</small>|<div style="background-color:#3E1715">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3E1715</small>|<div style="background-color:#261312">⠶</div><small style="font-size:0.66rem;font-family:monospace">#261312</small>||
493
- |<b>orange</b>||<div style="background-color:#FFE7CE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFE7CE</small>|<div style="background-color:#FED3AF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FED3AF</small>|<div style="background-color:#FCC192">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FCC192</small>|<div style="background-color:#F9AE77">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F9AE77</small>|<div style="background-color:#EC8B49">⠶</div><small style="font-size:0.66rem;font-family:monospace">#EC8B49</small>|<div style="background-color:#DA702C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DA702C</small>|<div style="background-color:#CB6120">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CB6120</small>|<div style="background-color:#BC5215">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BC5215</small>|<div style="background-color:#9D4310">⠶</div><small style="font-size:0.66rem;font-family:monospace">#9D4310</small>|<div style="background-color:#71320D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#71320D</small>|<div style="background-color:#59290D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#59290D</small>|<div style="background-color:#40200D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#40200D</small>|<div style="background-color:#27180E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#27180E</small>||
494
- |<b>yellow</b>||<div style="background-color:#FAEEC6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FAEEC6</small>|<div style="background-color:#F6E2A0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F6E2A0</small>|<div style="background-color:#F1D67E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F1D67E</small>|<div style="background-color:#ECCB60">⠶</div><small style="font-size:0.66rem;font-family:monospace">#ECCB60</small>|<div style="background-color:#DFB431">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DFB431</small>|<div style="background-color:#D0A215">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D0A215</small>|<div style="background-color:#BE9207">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BE9207</small>|<div style="background-color:#AD8301">⠶</div><small style="font-size:0.66rem;font-family:monospace">#AD8301</small>|<div style="background-color:#8E6B01">⠶</div><small style="font-size:0.66rem;font-family:monospace">#8E6B01</small>|<div style="background-color:#664D01">⠶</div><small style="font-size:0.66rem;font-family:monospace">#664D01</small>|<div style="background-color:#503D02">⠶</div><small style="font-size:0.66rem;font-family:monospace">#503D02</small>|<div style="background-color:#3A2D04">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3A2D04</small>|<div style="background-color:#241E08">⠶</div><small style="font-size:0.66rem;font-family:monospace">#241E08</small>||
495
- |<b>green</b>||<div style="background-color:#EDEECF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#EDEECF</small>|<div style="background-color:#DDE2B2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DDE2B2</small>|<div style="background-color:#CDD597">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CDD597</small>|<div style="background-color:#BEC97E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BEC97E</small>|<div style="background-color:#A0AF54">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A0AF54</small>|<div style="background-color:#879A39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#879A39</small>|<div style="background-color:#768D21">⠶</div><small style="font-size:0.66rem;font-family:monospace">#768D21</small>|<div style="background-color:#66800B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#66800B</small>|<div style="background-color:#536907">⠶</div><small style="font-size:0.66rem;font-family:monospace">#536907</small>|<div style="background-color:#3D4C07">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3D4C07</small>|<div style="background-color:#313D07">⠶</div><small style="font-size:0.66rem;font-family:monospace">#313D07</small>|<div style="background-color:#252D09">⠶</div><small style="font-size:0.66rem;font-family:monospace">#252D09</small>|<div style="background-color:#1A1E0C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A1E0C</small>||
496
- |<b>cyan</b>||<div style="background-color:#DDF1E4">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DDF1E4</small>|<div style="background-color:#BFE8D9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BFE8D9</small>|<div style="background-color:#A2DECE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A2DECE</small>|<div style="background-color:#87D3C3">⠶</div><small style="font-size:0.66rem;font-family:monospace">#87D3C3</small>|<div style="background-color:#5ABDAC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#5ABDAC</small>|<div style="background-color:#3AA99F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3AA99F</small>|<div style="background-color:#2F968D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#2F968D</small>|<div style="background-color:#24837B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#24837B</small>|<div style="background-color:#1C6C66">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1C6C66</small>|<div style="background-color:#164F4A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#164F4A</small>|<div style="background-color:#143F3C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#143F3C</small>|<div style="background-color:#122F2C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#122F2C</small>|<div style="background-color:#101F1D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#101F1D</small>||
497
- |<b>blue</b>||<div style="background-color:#E1ECEB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E1ECEB</small>|<div style="background-color:#C6DDE8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C6DDE8</small>|<div style="background-color:#ABCFE2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#ABCFE2</small>|<div style="background-color:#92BFDB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#92BFDB</small>|<div style="background-color:#66A0C8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#66A0C8</small>|<div style="background-color:#4385BE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4385BE</small>|<div style="background-color:#3171B2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3171B2</small>|<div style="background-color:#205EA6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#205EA6</small>|<div style="background-color:#1A4F8C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A4F8C</small>|<div style="background-color:#163B66">⠶</div><small style="font-size:0.66rem;font-family:monospace">#163B66</small>|<div style="background-color:#133051">⠶</div><small style="font-size:0.66rem;font-family:monospace">#133051</small>|<div style="background-color:#12253B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#12253B</small>|<div style="background-color:#101A24">⠶</div><small style="font-size:0.66rem;font-family:monospace">#101A24</small>||
498
- |<b>purple</b>||<div style="background-color:#F0EAEC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F0EAEC</small>|<div style="background-color:#E2D9E9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E2D9E9</small>|<div style="background-color:#D3CAE6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D3CAE6</small>|<div style="background-color:#C4B9E0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C4B9E0</small>|<div style="background-color:#A699D0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A699D0</small>|<div style="background-color:#8B7EC8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#8B7EC8</small>|<div style="background-color:#735EB5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#735EB5</small>|<div style="background-color:#5E409D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#5E409D</small>|<div style="background-color:#4F3685">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4F3685</small>|<div style="background-color:#3C2A62">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3C2A62</small>|<div style="background-color:#31234E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#31234E</small>|<div style="background-color:#261C39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#261C39</small>|<div style="background-color:#1A1623">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A1623</small>||
499
- |<b>magenta</b>||<div style="background-color:#FEE4E5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FEE4E5</small>|<div style="background-color:#FCCFDA">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FCCFDA</small>|<div style="background-color:#F9B9CF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F9B9CF</small>|<div style="background-color:#F4A4C2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F4A4C2</small>|<div style="background-color:#E47DA8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E47DA8</small>|<div style="background-color:#CE5D97">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CE5D97</small>|<div style="background-color:#B74583">⠶</div><small style="font-size:0.66rem;font-family:monospace">#B74583</small>|<div style="background-color:#A02F6F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A02F6F</small>|<div style="background-color:#87285E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#87285E</small>|<div style="background-color:#641F46">⠶</div><small style="font-size:0.66rem;font-family:monospace">#641F46</small>|<div style="background-color:#4F1B39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4F1B39</small>|<div style="background-color:#39172B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#39172B</small>|<div style="background-color:#24131D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#24131D</small>||
530
+ [<img src="README.img/default_color.png" alt="Default color">](README.img/default_color.png)
500
531
 
501
532
  しかし現状では`#RRGGBBAA`書式のアルファチャンネル付き色設定ができないため、`_color.scss`を同梱しています。
502
533
 
package/README_EN.md CHANGED
@@ -5,13 +5,14 @@
5
5
  |[<img width="24" height="24" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> 日本語](README.md)|[<img width="24" height="24" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> English](README_EN.md)|
6
6
 
7
7
 
8
- ## Revision: in v0.2.0
8
+ ## Revision: in v0.3.0
9
9
 
10
10
  - Added conditional CSS property names about below.
11
11
  + `hover!`
12
12
  + `dark!`
13
13
  + `mq(<mediaQueries>)!`
14
14
  + `data(<customDataElements>)`
15
+ + `aria(<ariaAttributes>)`
15
16
  - Changed default colors to [Flexoki].
16
17
  - Appended `_color.scss` file into this package.
17
18
  - Updated files as development samples, `test/gulp/` and `test/postcss/`.
@@ -57,7 +58,7 @@ Specific speaking, it takes the syntax like above -- language in [SCSS].
57
58
 
58
59
  ~~> What do I want to say; this plugin do not have any `hover:`, `md:`, and `dark:` etc. at [Tailwind CSS].~~
59
60
 
60
- ☑️In version 0.2.0 and upper.
61
+ ☑️In version 0.3.0 and upper.
61
62
 
62
63
  And also if you prepend below syntaxes into CSS property, would be available about conditional CSS properties.
63
64
 
@@ -65,6 +66,7 @@ And also if you prepend below syntaxes into CSS property, would be available abo
65
66
  - `dark!`: :root.dark
66
67
  - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
67
68
  - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
69
+ - `aria(<ariaAttributes>)!`: [aria-&lt;ariaAttributes&gt;]
68
70
 
69
71
  > There are syntax descriptions after indexes.
70
72
 
@@ -83,7 +85,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
83
85
  ## Indexes
84
86
 
85
87
  - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
86
- - [Revision: in v0.2.0](#revision-in-v020)
88
+ - [Revision: in v0.3.0](#revision-in-v030)
87
89
  - [Maybe add functions](#maybe-add-functions)
88
90
  - [Indexes](#indexes)
89
91
  - [Method of writing in CSS files.](#method-of-writing-in-css-files)
@@ -92,6 +94,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
92
94
  - [Mouse over state](#mouse-over-state)
93
95
  - [Media Queries](#media-queries)
94
96
  - [Custom data attribute](#custom-data-attribute)
97
+ - [ARIA attributes](#aria-attributes)
95
98
  - [Special characters](#special-characters)
96
99
  - [COLON Character](#colon-character)
97
100
  - [EXCLAMATION character](#exclamation-character)
@@ -159,7 +162,7 @@ h1 {
159
162
 
160
163
  You can extend a syntax to `<condition>!<CssPropertyName>:<CssPropertyValue>` like above.
161
164
 
162
- Each condition (`hover!`, `dark!`, `mq(...)!`, and `data(...)!`) are able to mate with others.
165
+ Each condition (`hover!`, `dark!`, `mq(...)!`, `data(...)!`, and `aria(...)!`) are able to mate with others.
163
166
 
164
167
  ```scss
165
168
  h1 {
@@ -167,7 +170,8 @@ h1 {
167
170
  }
168
171
  ```
169
172
 
170
- But can you not prepend consecutively same conditional type about `mq(...)!` and `data(...)!`, because these are only able to add the 1 type by 1 CSS property.
173
+ But can you not prepend consecutively same conditional type about `mq(...)!`, `data(...)!`, and `aria(...)!`.
174
+ Because these are only able to add the 1 type by 1 CSS property.
171
175
 
172
176
  If you want to enumerate conditions, please use by `,` splitting that located between `(` and`)`.
173
177
 
@@ -402,6 +406,46 @@ h1[data-is-empty="false"] {
402
406
  > + `\`: %5D
403
407
 
404
408
 
409
+ #### ARIA attributes
410
+
411
+ Using `aria(...)!` case that conditional syntax, this plugin behave to combine CSS selector and ARIA attributes.
412
+
413
+ If you wish to combine multiple ARIA attributes consecutively, can describe by `,` splitting syntax.
414
+
415
+ ```scss
416
+ /* 🚧Before */
417
+ h1 {
418
+ @emums aria(label="heading")!fs:1.5rem;
419
+ }
420
+
421
+ /* 🚀After */
422
+ h1[aria-label="heading"] {
423
+ font-size: 1.5rem;
424
+ }
425
+ ```
426
+
427
+ The ARIA attributes (which are as arguments of `aria(...)` function) can be described in these combination; `attribute name`, `=`, `attribute value`.
428
+
429
+ > At attribute name; designated value is only string which is following onto `aria-`.
430
+ >
431
+ > Strictly speaking, there are available only `/[a-z]/` characters.
432
+
433
+ > At conditional operator; there is only available character `=`.
434
+ >
435
+ > If there are desirable more operators, I would be extending to a level of same kinds as `data(...)!` maybe.
436
+
437
+ > At attribute value; you need to sandwich a designated value by quote symbols (`"` or `'`).
438
+ >
439
+ > Please notice if you want to handle quote symbol characters in ARIA attributes.
440
+ >
441
+ > And saying, this plugin transform at percent encoding (%xx) against below characters in attribute value by internal processing.
442
+ > + `%`: %25
443
+ > + `"`: %22
444
+ > + `'`: %27
445
+ > + `｀`: %60
446
+ > + `\`: %5D
447
+
448
+
405
449
  ### Special characters
406
450
 
407
451
  There are 5 characters which behave especially; `:`, `^`, `!`, `[[`, and `]]`.
@@ -482,19 +526,7 @@ body {
482
526
  }
483
527
  ```
484
528
 
485
- ||0|50|100|150|200|300|400|500|600|700|800|850|900|950|999|
486
- |--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
487
- |<b>black</b>|<div style="background-color:#100F0F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#100F0F</small>||||||||||||||<div style="background-color:#000000">⠶</div><small style="font-size:0.66rem;font-family:monospace">#000000</small>|
488
- |<b>white</b>|<div style="background-color:#FFFCF0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFFCF0</small>||||||||||||||<div style="background-color:#FFFFFF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFFFFF</small>|
489
- |<b>base</b>||<div style="background-color:#F2F0E5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F2F0E5</small>|<div style="background-color:#E6E4D9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E6E4D9</small>|<div style="background-color:#DAD8CE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DAD8CE</small>|<div style="background-color:#CECDC3">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CECDC3</small>|<div style="background-color:#B7B5AC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#B7B5AC</small>|<div style="background-color:#9F9D96">⠶</div><small style="font-size:0.66rem;font-family:monospace">#9F9D96</small>|<div style="background-color:#878580">⠶</div><small style="font-size:0.66rem;font-family:monospace">#878580</small>|<div style="background-color:#6F6E69">⠶</div><small style="font-size:0.66rem;font-family:monospace">#6F6E69</small>|<div style="background-color:#575653">⠶</div><small style="font-size:0.66rem;font-family:monospace">#575653</small>|<div style="background-color:#403E3C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#403E3C</small>|<div style="background-color:#343331">⠶</div><small style="font-size:0.66rem;font-family:monospace">#343331</small>|<div style="background-color:#282726">⠶</div><small style="font-size:0.66rem;font-family:monospace">#282726</small>|<div style="background-color:#1C1B1A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1C1B1A</small>||
490
- |<b>red</b>||<div style="background-color:#FFE1D5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFE1D5</small>|<div style="background-color:#FFCABB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFCABB</small>|<div style="background-color:#FDB2A2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FDB2A2</small>|<div style="background-color:#F89A8A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F89A8A</small>|<div style="background-color:#E8705F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E8705F</small>|<div style="background-color:#D14D41">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D14D41</small>|<div style="background-color:#C03E35">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C03E35</small>|<div style="background-color:#AF3029">⠶</div><small style="font-size:0.66rem;font-family:monospace">#AF3029</small>|<div style="background-color:#942822">⠶</div><small style="font-size:0.66rem;font-family:monospace">#942822</small>|<div style="background-color:#6C201C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#6C201C</small>|<div style="background-color:#551B18">⠶</div><small style="font-size:0.66rem;font-family:monospace">#551B18</small>|<div style="background-color:#3E1715">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3E1715</small>|<div style="background-color:#261312">⠶</div><small style="font-size:0.66rem;font-family:monospace">#261312</small>||
491
- |<b>orange</b>||<div style="background-color:#FFE7CE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FFE7CE</small>|<div style="background-color:#FED3AF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FED3AF</small>|<div style="background-color:#FCC192">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FCC192</small>|<div style="background-color:#F9AE77">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F9AE77</small>|<div style="background-color:#EC8B49">⠶</div><small style="font-size:0.66rem;font-family:monospace">#EC8B49</small>|<div style="background-color:#DA702C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DA702C</small>|<div style="background-color:#CB6120">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CB6120</small>|<div style="background-color:#BC5215">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BC5215</small>|<div style="background-color:#9D4310">⠶</div><small style="font-size:0.66rem;font-family:monospace">#9D4310</small>|<div style="background-color:#71320D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#71320D</small>|<div style="background-color:#59290D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#59290D</small>|<div style="background-color:#40200D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#40200D</small>|<div style="background-color:#27180E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#27180E</small>||
492
- |<b>yellow</b>||<div style="background-color:#FAEEC6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FAEEC6</small>|<div style="background-color:#F6E2A0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F6E2A0</small>|<div style="background-color:#F1D67E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F1D67E</small>|<div style="background-color:#ECCB60">⠶</div><small style="font-size:0.66rem;font-family:monospace">#ECCB60</small>|<div style="background-color:#DFB431">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DFB431</small>|<div style="background-color:#D0A215">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D0A215</small>|<div style="background-color:#BE9207">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BE9207</small>|<div style="background-color:#AD8301">⠶</div><small style="font-size:0.66rem;font-family:monospace">#AD8301</small>|<div style="background-color:#8E6B01">⠶</div><small style="font-size:0.66rem;font-family:monospace">#8E6B01</small>|<div style="background-color:#664D01">⠶</div><small style="font-size:0.66rem;font-family:monospace">#664D01</small>|<div style="background-color:#503D02">⠶</div><small style="font-size:0.66rem;font-family:monospace">#503D02</small>|<div style="background-color:#3A2D04">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3A2D04</small>|<div style="background-color:#241E08">⠶</div><small style="font-size:0.66rem;font-family:monospace">#241E08</small>||
493
- |<b>green</b>||<div style="background-color:#EDEECF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#EDEECF</small>|<div style="background-color:#DDE2B2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DDE2B2</small>|<div style="background-color:#CDD597">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CDD597</small>|<div style="background-color:#BEC97E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BEC97E</small>|<div style="background-color:#A0AF54">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A0AF54</small>|<div style="background-color:#879A39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#879A39</small>|<div style="background-color:#768D21">⠶</div><small style="font-size:0.66rem;font-family:monospace">#768D21</small>|<div style="background-color:#66800B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#66800B</small>|<div style="background-color:#536907">⠶</div><small style="font-size:0.66rem;font-family:monospace">#536907</small>|<div style="background-color:#3D4C07">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3D4C07</small>|<div style="background-color:#313D07">⠶</div><small style="font-size:0.66rem;font-family:monospace">#313D07</small>|<div style="background-color:#252D09">⠶</div><small style="font-size:0.66rem;font-family:monospace">#252D09</small>|<div style="background-color:#1A1E0C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A1E0C</small>||
494
- |<b>cyan</b>||<div style="background-color:#DDF1E4">⠶</div><small style="font-size:0.66rem;font-family:monospace">#DDF1E4</small>|<div style="background-color:#BFE8D9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#BFE8D9</small>|<div style="background-color:#A2DECE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A2DECE</small>|<div style="background-color:#87D3C3">⠶</div><small style="font-size:0.66rem;font-family:monospace">#87D3C3</small>|<div style="background-color:#5ABDAC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#5ABDAC</small>|<div style="background-color:#3AA99F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3AA99F</small>|<div style="background-color:#2F968D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#2F968D</small>|<div style="background-color:#24837B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#24837B</small>|<div style="background-color:#1C6C66">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1C6C66</small>|<div style="background-color:#164F4A">⠶</div><small style="font-size:0.66rem;font-family:monospace">#164F4A</small>|<div style="background-color:#143F3C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#143F3C</small>|<div style="background-color:#122F2C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#122F2C</small>|<div style="background-color:#101F1D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#101F1D</small>||
495
- |<b>blue</b>||<div style="background-color:#E1ECEB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E1ECEB</small>|<div style="background-color:#C6DDE8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C6DDE8</small>|<div style="background-color:#ABCFE2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#ABCFE2</small>|<div style="background-color:#92BFDB">⠶</div><small style="font-size:0.66rem;font-family:monospace">#92BFDB</small>|<div style="background-color:#66A0C8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#66A0C8</small>|<div style="background-color:#4385BE">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4385BE</small>|<div style="background-color:#3171B2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3171B2</small>|<div style="background-color:#205EA6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#205EA6</small>|<div style="background-color:#1A4F8C">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A4F8C</small>|<div style="background-color:#163B66">⠶</div><small style="font-size:0.66rem;font-family:monospace">#163B66</small>|<div style="background-color:#133051">⠶</div><small style="font-size:0.66rem;font-family:monospace">#133051</small>|<div style="background-color:#12253B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#12253B</small>|<div style="background-color:#101A24">⠶</div><small style="font-size:0.66rem;font-family:monospace">#101A24</small>||
496
- |<b>purple</b>||<div style="background-color:#F0EAEC">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F0EAEC</small>|<div style="background-color:#E2D9E9">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E2D9E9</small>|<div style="background-color:#D3CAE6">⠶</div><small style="font-size:0.66rem;font-family:monospace">#D3CAE6</small>|<div style="background-color:#C4B9E0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#C4B9E0</small>|<div style="background-color:#A699D0">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A699D0</small>|<div style="background-color:#8B7EC8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#8B7EC8</small>|<div style="background-color:#735EB5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#735EB5</small>|<div style="background-color:#5E409D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#5E409D</small>|<div style="background-color:#4F3685">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4F3685</small>|<div style="background-color:#3C2A62">⠶</div><small style="font-size:0.66rem;font-family:monospace">#3C2A62</small>|<div style="background-color:#31234E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#31234E</small>|<div style="background-color:#261C39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#261C39</small>|<div style="background-color:#1A1623">⠶</div><small style="font-size:0.66rem;font-family:monospace">#1A1623</small>||
497
- |<b>magenta</b>||<div style="background-color:#FEE4E5">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FEE4E5</small>|<div style="background-color:#FCCFDA">⠶</div><small style="font-size:0.66rem;font-family:monospace">#FCCFDA</small>|<div style="background-color:#F9B9CF">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F9B9CF</small>|<div style="background-color:#F4A4C2">⠶</div><small style="font-size:0.66rem;font-family:monospace">#F4A4C2</small>|<div style="background-color:#E47DA8">⠶</div><small style="font-size:0.66rem;font-family:monospace">#E47DA8</small>|<div style="background-color:#CE5D97">⠶</div><small style="font-size:0.66rem;font-family:monospace">#CE5D97</small>|<div style="background-color:#B74583">⠶</div><small style="font-size:0.66rem;font-family:monospace">#B74583</small>|<div style="background-color:#A02F6F">⠶</div><small style="font-size:0.66rem;font-family:monospace">#A02F6F</small>|<div style="background-color:#87285E">⠶</div><small style="font-size:0.66rem;font-family:monospace">#87285E</small>|<div style="background-color:#641F46">⠶</div><small style="font-size:0.66rem;font-family:monospace">#641F46</small>|<div style="background-color:#4F1B39">⠶</div><small style="font-size:0.66rem;font-family:monospace">#4F1B39</small>|<div style="background-color:#39172B">⠶</div><small style="font-size:0.66rem;font-family:monospace">#39172B</small>|<div style="background-color:#24131D">⠶</div><small style="font-size:0.66rem;font-family:monospace">#24131D</small>||
529
+ [<img src="README.img/default_color.png" alt="Default color">](README.img/default_color.png)
498
530
 
499
531
  But currently you cannot use a CSS color settings with alpha channel which styles as `#RRGGBBAA`.
500
532
 
package/index.mjs CHANGED
@@ -135,6 +135,7 @@ export const enumSpreader = (options = {}) => {
135
135
  isDark: false,
136
136
  isMq: '',
137
137
  isData: '',
138
+ isAria: '',
138
139
  important: '',
139
140
  prop: '',
140
141
  value: '',
@@ -258,14 +259,26 @@ export const enumSpreader = (options = {}) => {
258
259
  param[i] = param[i].replace(/data\(.+?\)!/g, '')
259
260
  }
260
261
 
261
- if(setting.isHover || setting.isDark || (setting.isMq !== '') || (setting.isData !== '')) {
262
+ if(/aria\(.+?\)!/.test(param[i])) {
263
+ setting.isAria = []
264
+ ;(!!param[i].match(/aria\((.+?)\)!/)[1] ? param[i].match(/aria\((.+?)\)!/)[1] : '').split(',').forEach(q => {
265
+ let v = q.match(/^([a-z]+)=['"](.*)['"]$/)
266
+ if(!!v) {
267
+ setting.isAria.push(`[aria-${v[1]}="${v[2].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
268
+ }
269
+ })
270
+ setting.isAria = setting.isAria.join('')
271
+ param[i] = param[i].replace(/aria\(.+?\)!/g, '')
272
+ }
273
+
274
+ if(setting.isHover || setting.isDark || (setting.isMq !== '') || (setting.isData !== '') || (setting.isAria !== '')) {
262
275
  let regex = param[i].match(/^([\d\-a-z]+):([^!\s]+)(!)?$/)
263
276
  setting.important = (!!regex[3]) ? ' !important' : ''
264
277
  setting.prop = expandShortcut(regex[1])
265
278
  setting.value = replaceCssPropertyValueWBracket(regex[2])
266
279
 
267
280
  for(let j = 0, m = setting.prop.length; j < m; j ++) {
268
- const css = `${setting.isMq !== '' ? '@media screen and ' + setting.isMq + ' { ' : ''}${setting.isDark ? ':root.dark ' : ''}${rule.selector}${setting.isData}${setting.isHover ? ':hover' : ''}{${setting.prop[j]}: ${setting.value}}${setting.isMq !== '' ? ' }' : ''}`
281
+ const css = `${setting.isMq !== '' ? '@media screen and ' + setting.isMq + ' { ' : ''}${setting.isDark ? ':root.dark ' : ''}${rule.selector}${setting.isData}${setting.isAria}${setting.isHover ? ':hover' : ''}{${setting.prop[j]}: ${setting.value}}${setting.isMq !== '' ? ' }' : ''}`
269
282
  rule.after(css)
270
283
  }
271
284
  } else if(/^([\d\-a-z]+):([^!\s]+)(!)?$/.test(param[i])) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "postcss-enumerates-in-line",
3
3
  "type": "module",
4
- "version": "0.2.0",
4
+ "version": "0.3.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/hadukinei/postcss-enumerates-in-line"
package/test/gulp/gulpfile.mjs CHANGED
@@ -16,8 +16,8 @@ const sass = gulpSass(dartSass)
16
16
  import postcss from 'gulp-postcss'
17
17
  import autoprefixer from 'autoprefixer'
18
18
  import csso from 'postcss-csso'
19
- //import { enumSpreader } from 'postcss-enumerates-in-line'
20
- import { enumSpreader } from '../../index.mjs'
19
+ import { enumSpreader } from 'postcss-enumerates-in-line'
20
+ //import { enumSpreader } from '../../index.mjs'
21
21
 
22
22
  // Live Server
23
23
  import browserSync from 'browser-sync'
package/test/postcss/build-css.mjs CHANGED
@@ -14,8 +14,8 @@ import * as dartSass from 'sass'
14
14
  import postcss from 'postcss'
15
15
  import autoprefixer from 'autoprefixer'
16
16
  import csso from 'postcss-csso'
17
- //import { enumSpreader } from 'postcss-enumerates-in-line'
18
- import { enumSpreader } from '../../index.mjs'
17
+ import { enumSpreader } from 'postcss-enumerates-in-line'
18
+ //import { enumSpreader } from '../../index.mjs'
19
19
 
20
20
 
21
21
  /**