v0.5.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asmcss/assembler",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "main": "dist/assembler.cjs.js",
   "module": "dist/assembler.es.js",
   "browser": "dist/assembler.js",

src/helpers.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {PROPERTY_LIST, PROPERTY_VARIANTS} from "./list";
+
 export type UserSettings = {
     enabled: boolean,
     generate: boolean,
@@ -26,7 +28,8 @@ export type UserSettings = {
     states: string[],
     scopes: string[],
     xStyleAttribute: string,
-    selectorAttribute: string
+    selectorAttribute: string,
+    registeredProperties: {name: string, aliases: string[]}[],
 };
 type StyleType = string|{[key: string]: string};
 const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
@@ -44,6 +47,7 @@ export function getUserSettings(dataset: {[key: string]: string}): UserSettings
     const cache = dataset.cache === undefined ? null : dataset.cache;
     const cacheKey = dataset.cacheKey === undefined ? "assembler-css-cache" : dataset.cacheKey;
     const dataScopes = dataset.scopes === undefined ? [] : getStringItemList(dataset.scopes);
+    const registeredProperties = dataset.registerProperties === undefined ? [] : getRegisteredProperties(dataset.registerProperties);
     const scopes = ["", "text-clip", "selection", "placeholder", "before", "after", "first-letter", "first-line",
         "l1", "l2", "marker-l1", "marker", "sibling", "child", "even", "odd", "first", "last", "dark", "light",
         "landscape", "portrait", "motion-reduce", "motion-safe"];
@@ -55,6 +59,16 @@ export function getUserSettings(dataset: {[key: string]: string}): UserSettings
         }
     }
 
+    for (let i = 0, l = registeredProperties.length; i < l; i++) {
+        const prop = registeredProperties[i];
+        if (PROPERTY_LIST.indexOf(prop.name) === -1) {
+            PROPERTY_LIST.push(prop.name);
+            if (prop.aliases.length > 0) {
+                PROPERTY_VARIANTS[prop.name] = prop.aliases;
+            }
+        }
+    }
+
     // Consider all bp
     let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
 
@@ -99,6 +113,7 @@ export function getUserSettings(dataset: {[key: string]: string}): UserSettings
         media: {xs, sm, md, lg, xl},
         xStyleAttribute,
         selectorAttribute,
+        registeredProperties
     };
 }
 
@@ -135,6 +150,23 @@ function getStringItemList(value: string, unique: boolean = true): string[] {
     return unique ? items.filter(uniqueItems) : items;
 }
 
+function getRegisteredProperties(value: string): {name: string, aliases:string[]}[] {
+    return  value
+        .split(';')
+        .map(v => v.trim())
+        .filter(v => v !== '')
+        .map(v => {
+            const index = v.indexOf(':');
+            if (index < 0) {
+                return {name: v, aliases: []};
+            }
+            return {
+                name: v.substr(0, index),
+                aliases: v.substr(index + 1).split(',').map(v => v.trim()).filter(v => v !== '')
+            }
+        });
+}
+
 export function trim(value: string): string {
     return value.trim();
 }

src/list.ts

@@ -68,6 +68,7 @@ export const PROPERTY_LIST = [
     "border-top-right-radius",
     "border-width",
     "bottom",
+    "box-orient",
     "box-shadow",
     "box-sizing",
     "clear",
@@ -115,6 +116,7 @@ export const PROPERTY_LIST = [
     "justify-self",
     "left",
     "letter-spacing",
+    "line-clamp",
     "line-height",
     "list-style-position",
     "list-style-type",
@@ -182,7 +184,9 @@ export const PROPERTY_VARIANTS = {
     "appearance": ["-webkit-appearance", "-moz-appearance"],
     "background-clip": ["-webkit-background-clip", "-moz-background-clip"],
     "backdrop-filter": ["-webkit-backdrop-filter"],
+    "box-orient": ["-webkit-box-orient"],
     "column-gap": ["-moz-column-gap"],
+    "line-clamp": ["-webkit-line-clamp"],
     "user-select": ["-webkit-user-select", "-moz-user-select"],
     "text-fill-color": ["-webkit-text-fill-color", "-moz-text-fill-color"]
 };

types/helpers.d.ts

@@ -17,6 +17,10 @@ export declare type UserSettings = {
     scopes: string[];
     xStyleAttribute: string;
     selectorAttribute: string;
+    registeredProperties: {
+        name: string;
+        aliases: string[];
+    }[];
 };
 declare type StyleType = string | {
     [key: string]: string;

types/list.d.ts

@@ -4,7 +4,9 @@ export declare const PROPERTY_VARIANTS: {
     appearance: string[];
     "background-clip": string[];
     "backdrop-filter": string[];
+    "box-orient": string[];
     "column-gap": string[];
+    "line-clamp": string[];
     "user-select": string[];
     "text-fill-color": string[];
 };