postcss-enumerates-in-line 0.2.0 → 0.3.2

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 (8) hide show
  1. package/.github/workflows/publish.yml +6 -5
  2. package/README.img/default_color.png +0 -0
  3. package/README.md +50 -18
  4. package/README_EN.md +51 -18
  5. package/index.mjs +15 -2
  6. package/package.json +1 -1
  7. package/test/gulp/gulpfile.mjs +2 -2
  8. package/test/postcss/build-css.mjs +2 -2
package/.github/workflows/publish.yml CHANGED
@@ -1,9 +1,10 @@
1
1
  name: Publish Package to npmjs
2
- on: push
3
- #on:
4
- # push:
5
- # branches:
6
- # - master
2
+ #on: push
3
+ on:
4
+ push:
5
+ branches:
6
+ #- master
7
+ - main
7
8
 
8
9
  jobs:
9
10
  build:
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.2
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/`を更新
@@ -19,6 +20,7 @@
19
20
 
20
21
  ## 実装予定
21
22
 
23
+ - 新しい条件付きCSSプロパティ: `attr(<attributes>)!`
22
24
  - ユーザー定義ショートハンド機能
23
25
  - `[[...]]`構文の改良と、デフォルトカラーにアルファチャンネルを設定できる`color-alpha[[...]]`構文の追加
24
26
 
@@ -58,7 +60,7 @@
58
60
 
59
61
  ~~> [Tailwind CSS]における`hover:`・`md:`・`dark:`などに対応する機能は備えていないという意味です。~~
60
62
 
61
- ☑️version 0.2.0以上
63
+ ☑️version 0.3.0以上
62
64
 
63
65
  またCSSプロパティ名の先頭に以下の書式を加筆することで、条件付きCSSプロパティに対応することができます。
64
66
 
@@ -66,6 +68,7 @@
66
68
  - `dark!`: :root.dark
67
69
  - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
68
70
  - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
71
+ - `aria(<ariaAttributes>)!`: [aria-&lt;ariaAttributes&gt;]
69
72
 
70
73
  > 詳しい書式は目次の次へお進みください。
71
74
 
@@ -84,7 +87,7 @@
84
87
  ## 目次
85
88
 
86
89
  - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
87
- - [更新点: v0.2.0](#更新点-v020)
90
+ - [更新点: v0.3.2](#更新点-v032)
88
91
  - [実装予定](#実装予定)
89
92
  - [目次](#目次)
90
93
  - [CSSでの記述方法](#cssでの記述方法)
@@ -93,6 +96,7 @@
93
96
  - [マウスオーバー](#マウスオーバー)
94
97
  - [メディアクエリ](#メディアクエリ)
95
98
  - [カスタムデータ属性](#カスタムデータ属性)
99
+ - [ARIA属性](#aria属性)
96
100
  - [特殊な記号](#特殊な記号)
97
101
  - [コロン記号](#コロン記号)
98
102
  - [エクスクラメーション記号](#エクスクラメーション記号)
@@ -160,7 +164,7 @@ h1 {
160
164
 
161
165
  上記のように`条件付き書式!CSSプロパティ名:CSSプロパティ値`と記法を拡張することができます。
162
166
 
163
- `hover!`, `dark!`, `mq(...)!`, `data(...)!`はそれぞれ重ね掛けが可能です。
167
+ `hover!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`はそれぞれ重ね掛けが可能です。
164
168
 
165
169
  ```scss
166
170
  h1 {
@@ -168,7 +172,7 @@ h1 {
168
172
  }
169
173
  ```
170
174
 
171
- ただしこれら条件付き書式は１つのCSSプロパティにつき１種しか設定できないため、`mq(...)!`と`data(...)!`を連続して記述できません。
175
+ ただしこれら条件付き書式は１つのCSSプロパティにつき１種しか設定できないため、`mq(...)!`・`data(...)!`・`aria(...)!`を連続して記述できません。
172
176
 
173
177
  列挙する場合は`(`・`)`の中で、`,`を使ってください。
174
178
 
@@ -404,6 +408,46 @@ h1[data-is-empty="false"] {
404
408
  > + `\`: %5D
405
409
 
406
410
 
411
+ #### ARIA属性
412
+
413
+ 条件付き書式`aria(<ariaAttributes>)!`を使うと、`[aria-label="heading"]`のようなARIA属性によるセレクターを追加できます。
414
+
415
+ 複数の属性セレクターを組み合わせる場合は、`,`で区切ります。
416
+
417
+ ```scss
418
+ /* 🚧Before */
419
+ h1 {
420
+ @emums aria(label="heading")!fs:1.5rem;
421
+ }
422
+
423
+ /* 🚀After */
424
+ h1[aria-label="heading"] {
425
+ font-size: 1.5rem;
426
+ }
427
+ ```
428
+
429
+ 属性セレクターは`属性名`・`=`・`属性データ`の組み合わせになっています。
430
+
431
+ > 属性名には`aria-`に続く文字列を指定します。
432
+ >
433
+ > `/[a-z]/`の文字しか使うことはできません。
434
+
435
+ > 条件演算子は現在`=`のみを有効にしています。
436
+ >
437
+ > 必要になれば`data(...)!`と同等の条件にまで拡張するかもしれません。
438
+
439
+ > 属性データは、`"`または`'`で囲まれている必要があります。
440
+ >
441
+ > このため引用符を使う場合は注意してください。
442
+ >
443
+ > またパッケージの内部処理により、以下の文字が属性データに含まれる場合はパーセントエンコーディングを行います。
444
+ > + `%`: %25
445
+ > + `"`: %22
446
+ > + `'`: %27
447
+ > + `｀`: %60
448
+ > + `\`: %5D
449
+
450
+
407
451
  ### 特殊な記号
408
452
 
409
453
  特殊な振る舞いを起こす文字は、`:`・`^`・`!`・`[[`・`]]`の５種類です。
@@ -484,19 +528,7 @@ body {
484
528
  }
485
529
  ```
486
530
 
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>||
531
+ [<img src="README.img/default_color.png" alt="Default color">](README.img/default_color.png)
500
532
 
501
533
  しかし現状では`#RRGGBBAA`書式のアルファチャンネル付き色設定ができないため、`_color.scss`を同梱しています。
502
534
 
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.2
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/`.
@@ -19,6 +20,7 @@
19
20
 
20
21
  ## Maybe add functions
21
22
 
23
+ - Add new conditional CSS property: `attr(<attributes>)!`.
22
24
  - Be able to define user generated shorthands.
23
25
  - Refine `[[...]]` syntax, and add to use `color-alpha[[...]]` syntax which is enable to add alpha channel to default colors (using in CSS property value).
24
26
 
@@ -57,7 +59,7 @@ Specific speaking, it takes the syntax like above -- language in [SCSS].
57
59
 
58
60
  ~~> What do I want to say; this plugin do not have any `hover:`, `md:`, and `dark:` etc. at [Tailwind CSS].~~
59
61
 
60
- ☑️In version 0.2.0 and upper.
62
+ ☑️In version 0.3.0 and upper.
61
63
 
62
64
  And also if you prepend below syntaxes into CSS property, would be available about conditional CSS properties.
63
65
 
@@ -65,6 +67,7 @@ And also if you prepend below syntaxes into CSS property, would be available abo
65
67
  - `dark!`: :root.dark
66
68
  - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
67
69
  - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
70
+ - `aria(<ariaAttributes>)!`: [aria-&lt;ariaAttributes&gt;]
68
71
 
69
72
  > There are syntax descriptions after indexes.
70
73
 
@@ -83,7 +86,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
83
86
  ## Indexes
84
87
 
85
88
  - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
86
- - [Revision: in v0.2.0](#revision-in-v020)
89
+ - [Revision: in v0.3.2](#revision-in-v032)
87
90
  - [Maybe add functions](#maybe-add-functions)
88
91
  - [Indexes](#indexes)
89
92
  - [Method of writing in CSS files.](#method-of-writing-in-css-files)
@@ -92,6 +95,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
92
95
  - [Mouse over state](#mouse-over-state)
93
96
  - [Media Queries](#media-queries)
94
97
  - [Custom data attribute](#custom-data-attribute)
98
+ - [ARIA attributes](#aria-attributes)
95
99
  - [Special characters](#special-characters)
96
100
  - [COLON Character](#colon-character)
97
101
  - [EXCLAMATION character](#exclamation-character)
@@ -159,7 +163,7 @@ h1 {
159
163
 
160
164
  You can extend a syntax to `<condition>!<CssPropertyName>:<CssPropertyValue>` like above.
161
165
 
162
- Each condition (`hover!`, `dark!`, `mq(...)!`, and `data(...)!`) are able to mate with others.
166
+ Each condition (`hover!`, `dark!`, `mq(...)!`, `data(...)!`, and `aria(...)!`) are able to mate with others.
163
167
 
164
168
  ```scss
165
169
  h1 {
@@ -167,7 +171,8 @@ h1 {
167
171
  }
168
172
  ```
169
173
 
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.
174
+ But can you not prepend consecutively same conditional type about `mq(...)!`, `data(...)!`, and `aria(...)!`.
175
+ Because these are only able to add the 1 type by 1 CSS property.
171
176
 
172
177
  If you want to enumerate conditions, please use by `,` splitting that located between `(` and`)`.
173
178
 
@@ -402,6 +407,46 @@ h1[data-is-empty="false"] {
402
407
  > + `\`: %5D
403
408
 
404
409
 
410
+ #### ARIA attributes
411
+
412
+ Using `aria(...)!` case that conditional syntax, this plugin behave to combine CSS selector and ARIA attributes.
413
+
414
+ If you wish to combine multiple ARIA attributes consecutively, can describe by `,` splitting syntax.
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
+ The ARIA attributes (which are as arguments of `aria(...)` function) can be described in these combination; `attribute name`, `=`, `attribute value`.
429
+
430
+ > At attribute name; designated value is only string which is following onto `aria-`.
431
+ >
432
+ > Strictly speaking, there are available only `/[a-z]/` characters.
433
+
434
+ > At conditional operator; there is only available character `=`.
435
+ >
436
+ > If there are desirable more operators, I would be extending to a level of same kinds as `data(...)!` maybe.
437
+
438
+ > At attribute value; you need to sandwich a designated value by quote symbols (`"` or `'`).
439
+ >
440
+ > Please notice if you want to handle quote symbol characters in ARIA attributes.
441
+ >
442
+ > And saying, this plugin transform at percent encoding (%xx) against below characters in attribute value by internal processing.
443
+ > + `%`: %25
444
+ > + `"`: %22
445
+ > + `'`: %27
446
+ > + `｀`: %60
447
+ > + `\`: %5D
448
+
449
+
405
450
  ### Special characters
406
451
 
407
452
  There are 5 characters which behave especially; `:`, `^`, `!`, `[[`, and `]]`.
@@ -482,19 +527,7 @@ body {
482
527
  }
483
528
  ```
484
529
 
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>||
530
+ [<img src="README.img/default_color.png" alt="Default color">](README.img/default_color.png)
498
531
 
499
532
  But currently you cannot use a CSS color settings with alpha channel which styles as `#RRGGBBAA`.
500
533
 
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.2",
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
  /**