postcss-enumerates-in-line 1.0.0 → 1.2.0

package/README.md

@@ -5,29 +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.0.0
+## 更新点: v1.2.0
 
-0. パッケージ全般
+- 以下の引用符に関する正規表現の不具合を修正
+  + `data(name="value")!`
+  + `aria(name="value")!`
+  + `attr(name="value")!`
 
-- サンプルプログラムの更新
-- メジャーアップデート
+> `data(name='value')!`のように`'`で囲んでいる場合も含みます。
 
-1. 色設定
-
-- CSSプロパティ値に色設定を行う`color[[...]]`関数を追加
-- プラグインのオプションに色テーマを追加する`appendUserColors(...)`を追加
-- プラグインオプション`prependDefaultColor`の初期設定を`false`に変更
-
-2. ショートハンド設定
-
-- プラグインのオプションにユーザー定義ショートハンドを拡張する`appendShorthand(...)`を追加
-
-3. CSSプロパティ
-
-- 条件付きCSSプロパティ`attr(<attributes>)!`を追加
-
-
-## 実装予定
+- `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`と同等 **（説明漏れ）**
 
 
 ---
@@ -88,8 +79,7 @@
 ## 目次
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [更新点: v1.0.0](#更新点-v100)
-  - [実装予定](#実装予定)
+  - [更新点: v1.2.0](#更新点-v120)
   - [目次](#目次)
   - [CSSでの記述方法](#cssでの記述方法)
     - [条件付き書式](#条件付き書式)
@@ -296,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
   ;
 }
 ```
@@ -323,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
   ;
 }
 ```
@@ -332,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`）
@@ -590,6 +583,8 @@ h1 {
 >
 > 未定義の色テーマや濃度レベルを指定した場合、エラーとして扱われ無視されます。
 
+> また引数が何も指定されず`color[[]]`とだけ指定された場合、エラー処理として`#0000`へと変換します。
+
 この関数を使うことで、透過率が設定できる他、色テーマをプラグインのオプションである`appendUserColors(...)`でユーザー独自の定義を追加できる上に、`prependDefaultColor`を初期値の`false`以外にするとCSS変数として色情報が`:root`ブロックに出力されることでCSSファイルサイズが大きくなるなど、様々なデメリットが解消されるでしょう。
 
 
@@ -1085,6 +1080,8 @@ h1 {
 
 ただし構文上の制約から、最低１種類は引数として指定してください。
 
+引数がなく`color[[]]`と記述してしまった場合、エラー処理として`#0000`へと変換されます。
+
 > 1. 色テーマ名
 >
 > デフォルトカラーまたは`appendUserColor(...)`で登録したもの。

package/README_EN.md

@@ -5,30 +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.0.0
+## Revision: in v1.2.0
 
-0. About package
+- fix regex problems of quote character (`'`, `"`) in below.
+  + `data(name="value")!`
+  + `aria(name="value")!`
+  + `attr(name="value")!`
 
-- Update sample programs.
-- Upgrade major version to v1.
+> `data(name='value')!` etc. too.
 
-1. Color settings
-
-- Added a function `color[[...]]` for value of CSS property which designate a color.
-- Added a plugin's option `appendUserColors(...)` for extending user color themes.
-- Changed a plugin's option `prependDefaultColor` that default value turn to `false`.
-
-2. Shorthand settings
-
-- Added a plugin's option `appendShorthand(...)` for extending user shorthands which is used about CSS property name.
-
-3. CSS property
-
-- Added conditional CSS property name about below.
-  + `attr(<attributes>)`
-
-
-## Maybe add functions
+- 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)**
 
 
 ---
@@ -88,8 +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.0.0](#revision-in-v100)
-  - [Maybe add functions](#maybe-add-functions)
+  - [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)
@@ -297,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
   ;
 }
 ```
@@ -324,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
   ;
 }
 ```
@@ -585,6 +577,8 @@ This function-like syntax takes 4 kind arguments in maximum.
 > 3. `100%`
 > 4. `hsl`
 
+> And also if `color[[...]]` leads no arguments like a `color[[]]`, this package transform it to `#0000` as error handling.
+
 You will eliminate some problems as below if use this function.
 - Can apply opacity.
 - And that also apply to user defined color theme which added by `appendUserColors(...)` in package option.
@@ -1086,6 +1080,8 @@ Every kinds are optional arguments, so there are omittable.
 
 But, by and for syntax restriction, you need to designate arguments at least 1 kind and up.
 
+And also if there are no arguments like a `color[[]]`, this package transform it to `#0000` as error handling.
+
 > 1. Color theme
 >
 > The name of default color theme, or that registered in `appendUserColor(...)` option.

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) {
@@ -482,6 +482,7 @@ const replaceCssPropertyValueWBracket = value => value.replace(/\^/g, ' ')
 .replace(/\[\[([^}]+)\]\]/g,(_,expr)=>`[[${expr.replace(/([+\*/]|(?<=[0-9a-zA-Z\)])[-%](?=[0-9a-zA-Z\(]))/g,' $1 ')}]]`)
 .replace('[[', '(')
 .replace(']]', ')')
+.replace('color()', '#0000')
 .replace(/ +/g, ' ')
 
 /**

package/package.json

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