postcss-enumerates-in-line 0.4.0 → 1.1.0

package/README.md

@@ -5,27 +5,9 @@
 |[<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)|
 
 
-## 更新点: v0.4.0
+## 更新点: v1.1.0
 
-1. 色設定
-
-- CSSプロパティ値に色設定を行う`color[[...]]`関数を追加
-- プラグインのオプションに色テーマを追加する`appendUserColors(...)`を追加
-- プラグインオプション`prependDefaultColor`の初期設定を`false`に変更
-
-2. ショートハンド設定
-
-- プラグインのオプションにユーザー定義ショートハンドを拡張する`appendShorthand(...)`を追加
-
-3. CSSプロパティ
-
-- 条件付きCSSプロパティ`attr(<attributes>)!`を追加
-
-
-## 実装予定
-
-- サンプルプログラムの更新
-- メジャーアップデート
+- `color[[...]]`で引数がなかった場合、`#0000`へ変換するよう処理を変更
 
 
 ---
@@ -86,8 +68,7 @@
 ## 目次
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [更新点: v0.4.0](#更新点-v040)
-  - [実装予定](#実装予定)
+  - [更新点: v1.1.0](#更新点-v110)
   - [目次](#目次)
   - [CSSでの記述方法](#cssでの記述方法)
     - [条件付き書式](#条件付き書式)
@@ -588,6 +569,8 @@ h1 {
 >
 > 未定義の色テーマや濃度レベルを指定した場合、エラーとして扱われ無視されます。
 
+> また引数が何も指定されず`color[[]]`とだけ指定された場合、エラー処理として`#0000`へと変換します。
+
 この関数を使うことで、透過率が設定できる他、色テーマをプラグインのオプションである`appendUserColors(...)`でユーザー独自の定義を追加できる上に、`prependDefaultColor`を初期値の`false`以外にするとCSS変数として色情報が`:root`ブロックに出力されることでCSSファイルサイズが大きくなるなど、様々なデメリットが解消されるでしょう。
 
 
@@ -781,6 +764,8 @@ PostCSS処理の配列の中に、`enumSpreader({})`関数を差し込みます
 
 この関数は初期設定のまま利用する場合は空のオブジェクトを指定します。
 
+> サンプルプログラムではユーザー定義のショートハンドを追加する設定を行っています。
+
 動作を変更したい場合は引数にオプション設定を加えます。
 
 設定内容は[オプション引数](#オプション引数)を参照してください。
@@ -895,6 +880,8 @@ PostCSS処理の配列の中に、`enumSpreader({})`関数を差し込みます
 
 この関数は初期設定のまま利用する場合は空のオブジェクトを指定します。
 
+> サンプルプログラムではユーザー定義のショートハンドを追加する設定を行っています。
+
 動作を変更したい場合は引数にオプション設定を加えます。
 
 設定内容は[オプション引数](#オプション引数)を参照してください。
@@ -1079,6 +1066,8 @@ h1 {
 
 ただし構文上の制約から、最低１種類は引数として指定してください。
 
+引数がなく`color[[]]`と記述してしまった場合、エラー処理として`#0000`へと変換されます。
+
 > 1. 色テーマ名
 >
 > デフォルトカラーまたは`appendUserColor(...)`で登録したもの。

package/README_EN.md

@@ -5,28 +5,9 @@
 |[<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 v0.4.0
+## Revision: in v1.1.0
 
-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
-
-- Update sample programs.
-- Upgrade major version to v1.
+- When `color[[...]]` didn't lead any arguments, this package transform it to `#0000`.
 
 
 ---
@@ -86,8 +67,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 v0.4.0](#revision-in-v040)
-  - [Maybe add functions](#maybe-add-functions)
+  - [Revision: in v1.1.0](#revision-in-v110)
   - [Indexes](#indexes)
   - [Method of writing in CSS files.](#method-of-writing-in-css-files)
     - [Conditional CSS property](#conditional-css-property)
@@ -583,6 +563,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.
@@ -781,6 +763,8 @@ You will designate a blank object at a function of this package, if want to use
 
 Or not want, might add option settings in the object.
 
+> In sample program, there is a optional setting about appending user defined shorthands.
+
 The detail of settings to know, refer to [Arguments of option settings](#arguments-of-option-settings).
 
 
@@ -894,6 +878,8 @@ You will designate a blank object at a function of this package, if want to use
 
 Or not want, might add option settings in the object.
 
+> In sample program, there is a optional setting about appending user defined shorthands.
+
 The detail of settings to know, refer to [Arguments of option settings](#arguments-of-option-settings).
 
 
@@ -1080,6 +1066,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

@@ -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": "0.4.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hadukinei/postcss-enumerates-in-line"

package/test/gulp/gulpfile.mjs

@@ -49,6 +49,12 @@ const task_css = done => {
     enumSpreader({
       //prependDefaultColor: 'rgb',
       //prependDefaultStyle: false,
+      appendShorthand: [
+        ['gtc', ['grid-template-columns']],
+        ['fd', ['text-decoration']],
+        ['fdc', ['text-decoration-color']],
+        ['fdo', ['text-underline-offset']],
+      ],
     }),
     autoprefixer(),
     csso(),

package/test/gulp/package-lock.json

@@ -16,7 +16,7 @@
         "gulp-postcss": "^10.0.0",
         "gulp-sass": "^6.0.1",
         "postcss-csso": "^6.0.1",
-        "postcss-enumerates-in-line": "^0.0.9",
+        "postcss-enumerates-in-line": "^0.4.0",
         "sass": "^1.96.0"
       }
     },
@@ -2884,9 +2884,9 @@
       }
     },
     "node_modules/postcss-enumerates-in-line": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.0.9.tgz",
-      "integrity": "sha512-cADG6Zp9AWPbDuet6P5zOGyjM9VYIbOTqacy+fcoNjvBzjAtxMF0yYa/KHyXn8A3ErPUXmuSgxPCNlqXwtDHPA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.4.0.tgz",
+      "integrity": "sha512-wyR1ocUyRkBIfsRxu1e7OZ+bBCGlx5RSSFoz94Iq0KviGpG9+ACCSIFiGS9AfMBdSo0YQQAC2QZdv7QzcCUZmw==",
       "license": "ISC",
       "dependencies": {
         "postcss": "^8.5.6"

package/test/gulp/package.json

@@ -20,7 +20,7 @@
     "gulp-postcss": "^10.0.0",
     "gulp-sass": "^6.0.1",
     "postcss-csso": "^6.0.1",
-    "postcss-enumerates-in-line": "^0.0.9",
+    "postcss-enumerates-in-line": "^0.4.0",
     "sass": "^1.96.0"
   }
 }

package/test/gulp/src/css/app.scss

@@ -35,12 +35,13 @@
 
     &--item {
       &::before {
-        @enums display:inline content:"\0bb\020" ct:var(--color-base-600);
+        @enums display:inline content:"\0bb\020" ct:color[[base,600]];
       }
 
       &--anchor {
-        @enums text-decoration:var(--color-magenta-300)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease
-        hover!ct:var(--color-magenta-500) hover!text-decoration-color:#fff0;
+        @enums fd:color[[magenta,300]]^underline^dotted^2px fdo:4px
+        transition:text-decoration-color^0.25s^ease,color^0.25s^ease
+        hover!ct:color[[magenta,500]] hover!fdc:color[[white,999,0%]];
       }
     }
   }
@@ -60,19 +61,21 @@
 }
 
 .c-projects {
-  @enums display:grid grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) gap:1rem^1.5rem m8:0.375rem;
+  @enums display:grid gtc:repeat(auto-fit,minmax(260px,1fr)) gap:1rem^1.5rem m8:0.375rem;
 
   &--item {
-    @enums display:grid gap:0.5rem px:1rem py:0.5rem bw:1px bc:var(--color-base-400) br:0.75rem transition:transform^0.25s^ease,box-shadow^0.25s^ease,border-color^0.25s^ease,background-color^0.25s^ease
-    hover!transform:translateY(-0.25rem) hover!box-shadow:0^0.5rem^1rem^#0004 hover!bc:var(--color-magenta-300) hover!cb:var(--color-magenta-50);
+    @enums display:grid gap:0.5rem px:1rem py:0.5rem bw:1px bc:color[[base,400]] br:0.75rem
+    transition:transform^0.25s^ease,box-shadow^0.25s^ease,border-color^0.25s^ease,background-color^0.25s^ease
+    hover!transform:translateY(-0.25rem) hover!box-shadow:0^0.5rem^1rem^color[[black,999,25%]] hover!bc:color[[magenta,300]] hover!cb:color[[magenta,50]];
 
     &--description {
       @enums fs:0.95em;
     }
 
     &--anchor {
-      @enums text-decoration:var(--color-magenta-300)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease
-      hover!ct:var(--color-magenta-500) hover!text-decoration-color:#fff0;
+      @enums fd:color[[magenta,300]]^underline^dotted^2px fdo:4px
+      transition:text-decoration-color^0.25s^ease,color^0.25s^ease
+      hover!ct:color[[magenta,500]] hover!fdc:color[[white,999,0%]];
     }
   }
 }
@@ -84,12 +87,13 @@
     @enums display:grid gap:1rem;
 
     &--input {
-      @enums px:0.5rem py:0.375rem br:0.5rem cb:var(--color-base-50) ct:var(--color-base-950) fs:1rem;
+      @enums px:0.5rem py:0.375rem br:0.5rem cb:color[[base,50]] ct:color[[base,950]] fs:1rem;
     }
 
     &--button {
-      @enums py:0.5rem br:0.5rem cb:var(--color-magenta-300) ct:var(--color-base-950) fs:1rem cursor:pointer transition:background-color^0.25s^ease,color^0.25s^ease
-      hover!cb:#fff hover!ct:var(--color-magenta-500);
+      @enums py:0.5rem br:0.5rem cb:color[[magenta,300]] ct:color[[base,950]] fs:1rem cursor:pointer
+      transition:background-color^0.25s^ease,color^0.25s^ease
+      hover!cb:color[[white,999]] hover!ct:color[[magenta,500]];
     }
   }
 }

package/test/postcss/build-css.mjs

@@ -40,6 +40,12 @@ const task = async () => {
       enumSpreader({
         //prependDefaultColor: 'rgb',
         //prependDefaultStyle: false,
+        appendShorthand: [
+          ['gtc', ['grid-template-columns']],
+          ['fd', ['text-decoration']],
+          ['fdc', ['text-decoration-color']],
+          ['fdo', ['text-underline-offset']],
+        ],
       }),
       autoprefixer(),
       csso(),

package/test/postcss/package-lock.json

@@ -14,7 +14,7 @@
         "npm-run-all2": "^8.0.4",
         "postcss": "^8.5.6",
         "postcss-csso": "^6.0.1",
-        "postcss-enumerates-in-line": "^0.0.9",
+        "postcss-enumerates-in-line": "^0.4.0",
         "sass": "^1.96.0"
       }
     },
@@ -903,9 +903,9 @@
       }
     },
     "node_modules/postcss-enumerates-in-line": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.0.9.tgz",
-      "integrity": "sha512-cADG6Zp9AWPbDuet6P5zOGyjM9VYIbOTqacy+fcoNjvBzjAtxMF0yYa/KHyXn8A3ErPUXmuSgxPCNlqXwtDHPA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.4.0.tgz",
+      "integrity": "sha512-wyR1ocUyRkBIfsRxu1e7OZ+bBCGlx5RSSFoz94Iq0KviGpG9+ACCSIFiGS9AfMBdSo0YQQAC2QZdv7QzcCUZmw==",
       "license": "ISC",
       "dependencies": {
         "postcss": "^8.5.6"

package/test/postcss/package.json

@@ -21,7 +21,7 @@
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "postcss-csso": "^6.0.1",
-    "postcss-enumerates-in-line": "^0.0.9",
+    "postcss-enumerates-in-line": "^0.4.0",
     "sass": "^1.96.0"
   }
 }

package/test/postcss/src/css/app.scss

@@ -35,12 +35,13 @@
 
     &--item {
       &::before {
-        @enums display:inline content:"\0bb\020" ct:var(--color-base-600);
+        @enums display:inline content:"\0bb\020" ct:color[[base,600]];
       }
 
       &--anchor {
-        @enums text-decoration:var(--color-magenta-300)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease
-        hover!ct:var(--color-magenta-500) hover!text-decoration-color:#fff0;
+        @enums fd:color[[magenta,300]]^underline^dotted^2px fdo:4px
+        transition:text-decoration-color^0.25s^ease,color^0.25s^ease
+        hover!ct:color[[magenta,500]] hover!fdc:color[[white,999,0%]];
       }
     }
   }
@@ -60,19 +61,21 @@
 }
 
 .c-projects {
-  @enums display:grid grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) gap:1rem^1.5rem m8:0.375rem;
+  @enums display:grid gtc:repeat(auto-fit,minmax(260px,1fr)) gap:1rem^1.5rem m8:0.375rem;
 
   &--item {
-    @enums display:grid gap:0.5rem px:1rem py:0.5rem bw:1px bc:var(--color-base-400) br:0.75rem transition:transform^0.25s^ease,box-shadow^0.25s^ease,border-color^0.25s^ease,background-color^0.25s^ease
-    hover!transform:translateY(-0.25rem) hover!box-shadow:0^0.5rem^1rem^#0004 hover!bc:var(--color-magenta-300) hover!cb:var(--color-magenta-50);
+    @enums display:grid gap:0.5rem px:1rem py:0.5rem bw:1px bc:color[[base,400]] br:0.75rem
+    transition:transform^0.25s^ease,box-shadow^0.25s^ease,border-color^0.25s^ease,background-color^0.25s^ease
+    hover!transform:translateY(-0.25rem) hover!box-shadow:0^0.5rem^1rem^color[[black,999,25%]] hover!bc:color[[magenta,300]] hover!cb:color[[magenta,50]];
 
     &--description {
       @enums fs:0.95em;
     }
 
     &--anchor {
-      @enums text-decoration:var(--color-magenta-300)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease
-      hover!ct:var(--color-magenta-500) hover!text-decoration-color:#fff0;
+      @enums fd:color[[magenta,300]]^underline^dotted^2px fdo:4px
+      transition:text-decoration-color^0.25s^ease,color^0.25s^ease
+      hover!ct:color[[magenta,500]] hover!fdc:color[[white,999,0%]];
     }
   }
 }
@@ -84,12 +87,13 @@
     @enums display:grid gap:1rem;
 
     &--input {
-      @enums px:0.5rem py:0.375rem br:0.5rem cb:var(--color-base-50) ct:var(--color-base-950) fs:1rem;
+      @enums px:0.5rem py:0.375rem br:0.5rem cb:color[[base,50]] ct:color[[base,950]] fs:1rem;
     }
 
     &--button {
-      @enums py:0.5rem br:0.5rem cb:var(--color-magenta-300) ct:var(--color-base-950) fs:1rem cursor:pointer transition:background-color^0.25s^ease,color^0.25s^ease
-      hover!cb:#fff hover!ct:var(--color-magenta-500);
+      @enums py:0.5rem br:0.5rem cb:color[[magenta,300]] ct:color[[base,950]] fs:1rem cursor:pointer
+      transition:background-color^0.25s^ease,color^0.25s^ease
+      hover!cb:color[[white,999]] hover!ct:color[[magenta,500]];
     }
   }
 }