postcss-enumerates-in-line 1.1.0 → 1.2.0

package/README.md

@@ -5,9 +5,20 @@
 |[<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)|
 
 
-## 更新点: v1.1.0
+## 更新点: v1.2.0
 
-- `color[[...]]`で引数がなかった場合、`#0000`へ変換するよう処理を変更
+- 以下の引用符に関する正規表現の不具合を修正
+  + `data(name="value")!`
+  + `aria(name="value")!`
+  + `attr(name="value")!`
+
+> `data(name='value')!`のように`'`で囲んでいる場合も含みます。
+
+- `mq(...)!`の`width`と`height`において、説明の抜けていた設定方法を加筆
+  + `mq(width=-1000px)`: `max-width: 1000px`と同等 ~~（記述済み）~~
+  + `mq(width=1000px-2000px)`: `min-width: 1000px and max-width: 2000px`と同等 ~~（記述済み）~~
+  + `mq(width=1000px-)`: `min-width: 1000px`と同等 ~~（記述済み）~~
+  + `mq(width=1000px)`: `width: 1000px`と同等 **（説明漏れ）**
 
 
 ---
@@ -68,7 +79,7 @@
 ## 目次
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [更新点: v1.1.0](#更新点-v110)
+  - [更新点: v1.2.0](#更新点-v120)
   - [目次](#目次)
   - [CSSでの記述方法](#cssでの記述方法)
     - [条件付き書式](#条件付き書式)
@@ -275,20 +286,22 @@ body {
 }
 ```
 
-> `width`に指定可能な条件値は、`-<length>`・`<length>-<length>`・`<length>-`の３種類です。
+> `width`に指定可能な条件値は、`-<length>`・`<length>-<length>`・`<length>-`・`<length>`の４種類です。
 >
 > `<length>`に指定可能なのは`px`・`rem`・`vw`など長さに関わる値です。
 >
 > + １つのみある`<length>`の前に`-`を付けた場合、`<length>`以下のメディアクエリを意味します（適用されるメディア特性は`max-width`）
 > + ２つの`<length>`を`-`で接続した場合、その区間以内であるメディアクエリを意味します（適用されるメディア特性は`min-width`と`max-width`）
 > + １つのみある`<length>`の後ろに`-`を付けた場合、`<length>`以上のメディアクエリを意味します（適用されるメディア特性は`min-width`）
+> + `<length>`が１つのみあって`-`がない場合、ビューポートサイズが`<length>`とまったく等しい状態を意味します（適用されるメディア特性は`width`）
 
 ```scss
 body {
   @enums
   mq(width:-480px)!m2:1rem
   mq(width:640px-1024px)!mx:1rem
-  mq(width:1280px)!m8:1rem
+  mq(width:1280px-)!m8:1rem
+  mq(width:540px)!m4:1rem
   ;
 }
 ```
@@ -302,7 +315,8 @@ body {
   @enums
   mq(height:-480px)!m2:1rem
   mq(height:640px-1024px)!mx:1rem
-  mq(height:1280px)!m8:1rem
+  mq(height:1280px-)!m8:1rem
+  mq(height:540px)!m4:1rem
   ;
 }
 ```
@@ -311,7 +325,7 @@ body {
 >
 > `@media (aspect-ratio: 16/9)`のような除算記号（`/`）を使った表記はできません。
 >
-> `width`・`height`に似た表記が可能で、`-<number>`・`<number>-<number>`・`<number>-`の３種類と`<number>`が実際に指定可能な条件値です。
+> `width`・`height`に似た表記が可能で、`-<number>`・`<number>-<number>`・`<number>-`・`<number>`の４種類が実際に指定可能な条件値です。
 >
 > + １つのみある`<number>`の前に`-`を付けた場合、`<number>`以下のメディアクエリを意味します（適用されるメディア特性は`max-aspect-ratio`）
 > + ２つの`<number>`を`-`で接続した場合、その区間以内であるメディアクエリを意味します（適用されるメディア特性は`min-aspect-ratio`と`max-aspect-ratio`）

package/README_EN.md

@@ -5,9 +5,20 @@
 |[<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)|
 
 
-## Revision: in v1.1.0
+## Revision: in v1.2.0
 
-- When `color[[...]]` didn't lead any arguments, this package transform it to `#0000`.
+- fix regex problems of quote character (`'`, `"`) in below.
+  + `data(name="value")!`
+  + `aria(name="value")!`
+  + `attr(name="value")!`
+
+> `data(name='value')!` etc. too.
+
+- Touch up a documents adding about `width` and `height` in `mq(...)!`.
+  + `mq(width=-1000px)`: As equal as `max-width: 1000px` ~~(Already wrote)~~
+  + `mq(width=1000px-2000px)`: As equal as `min-width: 1000px and max-width: 2000px` ~~(Already wrote)~~
+  + `mq(width=1000px-)`: As equal as `min-width: 1000px` ~~(Already wrote)~~
+  + `mq(width=1000px)`: As equal as `width: 1000px` **(Missing explanation)**
 
 
 ---
@@ -67,7 +78,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
 ## Indexes
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [Revision: in v1.1.0](#revision-in-v110)
+  - [Revision: in v1.2.0](#revision-in-v120)
   - [Indexes](#indexes)
   - [Method of writing in CSS files.](#method-of-writing-in-css-files)
     - [Conditional CSS property](#conditional-css-property)
@@ -275,20 +286,22 @@ body {
 }
 ```
 
-> In `width` case; there are 3 type of designatable value. `-<length>`, `<length>-<length>`, and `<length>-`.
+> In `width` case; there are 4 type of designatable value. `-<length>`, `<length>-<length>`, `<length>-`, and `<length>`.
 >
 > You will be able to designate to `<length>` as these numeric values, that is related to length which tied with CSS sizing units; `px`, `rem`, `vw`, etc.
 >
 > + In `-<length>` case (the syntax is `<length>` with `-` prefix) -- this plugin recognize it as "This media query is smaller than `<length>`". (Applied media feature is `max-width`.)
 > + In `<length>-<length>` case (the syntax is `-` sandwiching by 2 `<length>`) -- this plugin recognize it as "This media query still is range of between first `<length>` and second `<length>`". (Applied media feature are `min-width` and `max-width`.)
 > + In `<length>-` case (the syntax is `<length>` with `-` postfix) -- this plugin recognize it as "This media query is larger than `<length>`". (Applied media feature is `min-width`.)
+> + In `<length>` case (the syntax only is `<length>` and without any `-`) -- this plugin recognize it as "This viewport size is as just equal as `<length>`". (Applied media feature is `width`.)
 
 ```scss
 body {
   @enums
   mq(width:-480px)!m2:1rem
   mq(width:640px-1024px)!mx:1rem
-  mq(width:1280px)!m8:1rem
+  mq(width:1280px-)!m8:1rem
+  mq(width:540px)!m4:1rem
   ;
 }
 ```
@@ -302,7 +315,8 @@ body {
   @enums
   mq(height:-480px)!m2:1rem
   mq(height:640px-1024px)!mx:1rem
-  mq(height:1280px)!m8:1rem
+  mq(height:1280px-)!m8:1rem
+  mq(height:540px)!m4:1rem
   ;
 }
 ```

package/index.mjs

@@ -271,9 +271,9 @@ export const enumSpreader = (options = {}) => {
               if(/data\(.+?\)!/.test(param[i])) {
                 setting.isData = []
                 ;(!!param[i].match(/data\((.+?)\)!/)[1] ? param[i].match(/data\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)['"](.*)['"]$/)
+                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v1) {
-                    setting.isData.push(`[data-${v1[1]}${v1[2]}"${v1[3].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isData.push(`[data-${v1[1]}${v1[2]}"${(v1[3]||v1[4]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   } else {
                     let v2 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)$/)
                     if(!!v2) {
@@ -288,9 +288,9 @@ export const enumSpreader = (options = {}) => {
               if(/aria\(.+?\)!/.test(param[i])) {
                 setting.isAria = []
                 ;(!!param[i].match(/aria\((.+?)\)!/)[1] ? param[i].match(/aria\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v = q.match(/^([a-z]+)=['"](.*)['"]$/)
+                  let v = q.match(/^([a-z]+)=(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v) {
-                    setting.isAria.push(`[aria-${v[1]}="${v[2].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isAria.push(`[aria-${v[1]}="${(v[2]||v[3]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   }
                 })
                 setting.isAria = setting.isAria.join('')
@@ -300,9 +300,9 @@ export const enumSpreader = (options = {}) => {
               if(/attr\(.+?\)!/.test(param[i])) {
                 setting.isAttr = []
                 ;(!!param[i].match(/attr\((.+?)\)!/)[1] ? param[i].match(/attr\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)['"](.*)['"]$/)
+                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v1) {
-                    setting.isAttr.push(`[${v1[1]}${v1[2]}"${v1[3].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isAttr.push(`[${v1[1]}${v1[2]}"${(v1[3]||v1[4]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   } else {
                     let v2 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)$/)
                     if(!!v2) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "postcss-enumerates-in-line",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hadukinei/postcss-enumerates-in-line"