@@ -73,43 +73,27 @@ export const CSSArrValue = (arr, unit) => {
7373}
7474
7575
76- /**
77- * Creates the transform property text
78- */
79- export const createTransformProperty = ( arr ) => {
80- let result = "" ;
81- let len = TransformFunctionNames . length ;
82- for ( let i = 0 ; i < len ; i ++ ) {
83- let name = TransformFunctionNames [ i ] ;
84- let value = arr [ i ] ;
85- if ( isValid ( value ) )
86- result += `${ name } ${ Array . isArray ( value ) ? value . join ( ", " ) : value } ;
87- }
88-
89- return result . trim ( ) ;
90- }
91-
92- export const TransformFunctionNames = [
93- "translate" ,
94- "translate3d" ,
95- "translateX" ,
96- "translateY" ,
97- "translateZ" ,
98- "rotate" ,
99- "rotate3d" ,
100- "rotateX" ,
101- "rotateY" ,
102- "rotateZ" ,
103- "scale" ,
104- "scale3d" ,
105- "scaleX" ,
106- "scaleY" ,
107- "scaleZ" ,
108- "skew" ,
109- "skewX" ,
110- "skewY" ,
111- "perspective"
112- ] ;
76+ // export const TransformFunctionNames = [
77+ // "translate",
78+ // "translate3d",
79+ // "translateX",
80+ // "translateY",
81+ // "translateZ",
82+ // "rotate",
83+ // "rotate3d",
84+ // "rotateX",
85+ // "rotateY",
86+ // "rotateZ",
87+ // "scale",
88+ // "scale3d",
89+ // "scaleX",
90+ // "scaleY",
91+ // "scaleZ",
92+ // "skew",
93+ // "skewX",
94+ // "skewY",
95+ // "perspective"
96+ // ];
11397
11498export const UnitLessCSSValue = CSSValue ( UnitLess ) ;
11599export const UnitPXCSSValue = CSSValue ( UnitPX ) ;
@@ -122,6 +106,14 @@ export const camelCase = (str) => {
122106 let result = `${ str } . replace ( / - ( [ a - z ] ) / g, ( _ , letter ) => letter . toUpperCase ( ) ) ;
123107 return result ;
124108}
109+
110+ /** Convert a camelCase string to a dash-separated string {@link camelCase} */
111+ export const convertToDash = ( str ) => {
112+ str = str . replace ( / ( [ A - Z ] ) / g, letter => `-${ letter . toLowerCase ( ) } ) ;
113+
114+ // Remove first dash
115+ return ( str . charAt ( 0 ) == '-' ) ? str . substr ( 1 ) : str ;
116+ }
125117/**
126118 * Acts like array.map(...) but for functions
127119 */
@@ -153,79 +145,96 @@ export const ParseCSSProperties = (obj) => {
153145}
154146
155147/** Common CSS Property names with the units "px" as an acceptable value */
156- export const CSSPXDataType = [ "margin" , "padding" , "size" , "width" , "height" , "left" , "right" , "top" , "bottom" , "radius" , "gap" , "basis" , "inset" , "outline-offset" , "perspective" , "thickness" , "position" , "distance" , "spacing" ] . join ( "|" ) ;
148+ export const CSSPXDataType = [ "margin" , "padding" , "size" , "width" , "height" , "left" , "right" , "top" , "bottom" , "radius" , "gap" , "basis" , "inset" , "outline-offset" , "perspective" , "thickness" , "position" , "distance" , "spacing" ] . map ( camelCase ) . join ( "|" ) ;
157149
158150/** Convert the {@link CSSPXDataType} array, to a Regular Expression */
159151export const RegExpCSSPXDataType = new RegExp ( CSSPXDataType , "gi" ) ;
160152
153+ /**
154+ * Return a copy of the object without the keys specified in the keys argument
155+ *
156+ * @param keys - arrays of keys to remove from the object
157+ * @param obj - the object in question
158+ * @returns
159+ * a copy of the object without certain key
160+ */
161+ export const omit = ( keys , obj ) => {
162+ let arr = [ ...keys ] ;
163+ let rest = { ...obj } ;
164+ while ( arr . length ) {
165+ let { [ arr . pop ( ) ] : omitted , ...remaining } = rest ;
166+ rest = remaining ;
167+ }
168+ return rest ;
169+ }
170+ export const TransformFunctions = {
171+ "translate" : value => CSSArrValue ( value , UnitPX ) ,
172+ "translate3d" : value => CSSArrValue ( value , UnitPX ) ,
173+ "translateX" : value => UnitPXCSSValue ( value ) ,
174+ "translateY" : value => UnitPXCSSValue ( value ) ,
175+ "translateZ" : value => UnitPXCSSValue ( value ) ,
176+
177+ "rotate" : value => CSSArrValue ( value , UnitDEG ) ,
178+ "rotate3d" : value => CSSArrValue ( value , UnitLess ) ,
179+ "rotateX" : value => UnitDEGCSSValue ( value ) ,
180+ "rotateY" : value => UnitDEGCSSValue ( value ) ,
181+ "rotateZ" : value => UnitDEGCSSValue ( value ) ,
182+
183+ "scale" : value => CSSArrValue ( value , UnitLess ) ,
184+ "scale3d" : value => CSSArrValue ( value , UnitLess ) ,
185+ "scaleX" : value => UnitLessCSSValue ( value ) ,
186+ "scaleY" : value => UnitLessCSSValue ( value ) ,
187+ "scaleZ" : value => UnitLessCSSValue ( value ) ,
188+
189+ "skew" : value => CSSArrValue ( value , UnitDEG ) ,
190+ "skewX" : value => UnitDEGCSSValue ( value ) ,
191+ "skewY" : value => UnitDEGCSSValue ( value ) ,
192+
193+ "perspective" : value => UnitPXCSSValue ( value ) ,
194+ } ;
195+
196+ /**
197+ * Creates the transform property text
198+ */
199+ export const createTransformProperty = ( transformFnNames , arr ) => {
200+ let result = "" ;
201+ let len = transformFnNames . length ;
202+ for ( let i = 0 ; i < len ; i ++ ) {
203+ let name = transformFnNames [ i ] ;
204+ let value = arr [ i ] ;
205+ if ( isValid ( value ) )
206+ result += `${ name } ${ Array . isArray ( value ) ? value . join ( ", " ) : value } ;
207+ }
208+
209+ return result . trim ( ) ;
210+ }
211+ export const TransformFunctionNames = Object . keys ( TransformFunctions ) ;
212+
161213/** Converts values to strings */
162214export const toStr = ( input ) => `` + input ;
163215export const ParseTransformableCSSProperties = ( properties ) => {
164- let {
165- perspective,
166- rotate,
167- rotate3d,
168- rotateX,
169- rotateY,
170- rotateZ,
171- translate,
172- translate3d,
173- translateX,
174- translateY,
175- translateZ,
176- scale,
177- scale3d,
178- scaleX,
179- scaleY,
180- scaleZ,
181- skew,
182- skewX,
183- skewY,
184- ...rest
185-
186- // Convert dash seperated strings to camelCase strings
187- } = ParseCSSProperties ( properties ) ;
188-
189- translate = CSSArrValue ( translate , UnitPX ) ;
190- translate3d = CSSArrValue ( translate3d , UnitPX ) ;
191- translateX = UnitPXCSSValue ( translateX ) ;
192- translateY = UnitPXCSSValue ( translateY ) ;
193- translateZ = UnitPXCSSValue ( translateZ ) ;
194-
195- rotate = CSSArrValue ( rotate , UnitDEG ) ;
196- rotate3d = CSSArrValue ( rotate3d , UnitLess ) ;
197- rotateX = UnitDEGCSSValue ( rotateX ) ;
198- rotateY = UnitDEGCSSValue ( rotateY ) ;
199- rotateZ = UnitDEGCSSValue ( rotateZ ) ;
200-
201- scale = CSSArrValue ( scale , UnitLess ) ;
202- scale3d = CSSArrValue ( scale3d , UnitLess ) ;
203- scaleX = UnitLessCSSValue ( scaleX ) ;
204- scaleY = UnitLessCSSValue ( scaleY ) ;
205- scaleZ = UnitLessCSSValue ( scaleZ ) ;
206-
207- skew = CSSArrValue ( skew , UnitDEG ) ;
208- skewX = UnitDEGCSSValue ( skewX ) ;
209- skewY = UnitDEGCSSValue ( skewY ) ;
210-
211- perspective = UnitPXCSSValue ( perspective ) ;
212-
213- let transform = transpose (
214- translate , translate3d , translateX , translateY , translateZ ,
215- rotate , rotate3d , rotateX , rotateY , rotateZ ,
216- scale , scale3d , scaleX , scaleY , scaleZ ,
217- skew , skewX , skewY ,
218- perspective
219- ) . filter ( isValid ) . map ( createTransformProperty ) ;
216+ // Convert dash seperated strings to camelCase strings
217+ let AllCSSProperties = ParseCSSProperties ( properties ) ;
218+
219+ let rest = omit ( TransformFunctionNames , AllCSSProperties ) ;
220+
221+ // Adds support for ordered transforms
222+ let transformFunctionNames = Object . keys ( AllCSSProperties )
223+ . filter ( key => TransformFunctionNames . includes ( key ) ) ;
224+ let transformFunctionValues = transformFunctionNames . map ( ( key ) => TransformFunctions [ key ] ( AllCSSProperties [ key ] ) ) ;
225+
226+ let transform = transpose ( ...transformFunctionValues )
227+ . filter ( isValid )
228+ . map ( arr => createTransformProperty ( transformFunctionNames , arr ) ) ;
220229
221230 // Wrap non array CSS property values in an array
222231 rest = mapObject ( rest , ( value , key ) => {
223232 let unit ;
224233
225234 // If key doesn't have the word color in it, try to add the default "px" or "deg" to it
226- if ( ! / c o l o r / gi . test ( key ) ) {
227- let isAngle = / r o t a t e / gi . test ( key ) ;
228- let isLength = new RegExp ( CSSPXDataType , "gi " ) . test ( key ) ;
235+ if ( ! / c o l o r / i . test ( key ) ) {
236+ let isAngle = / r o t a t e / i . test ( key ) ;
237+ let isLength = new RegExp ( CSSPXDataType , "i " ) . test ( key ) ;
229238
230239 // There is an intresting bug that occurs if you test a string againt the same instance of a Regular Expression
231240 // where the answer will be different every test
@@ -252,10 +261,10 @@ export const ParseTransformableCSSProperties = (properties) => {
252261
253262let x = ParseTransformableCSSProperties ( {
254263 // It will automatically add the "px" units for you, or you can write a string with the units you want
255- translate3d : [ "0, 5 " , 0 ] ,
264+ translateY : [ "20, 90 " , "100" , 5 ] , // Note: this will actually result in an error, make sure to pay attention to where you are putting strings and commas
256265 translate : "25, 35, 60%" ,
266+ translate3d : [ "0, 5" , 0 ] ,
257267 // translateX: -1,
258- translateY : [ "20, 90" , "100" , 5 ] , // Note: this will actually result in an error, make sure to pay attention to where you are putting strings and commas
259268 // translateZ: 0,
260269 // perspective: 0,
261270 // opacity: 0,
@@ -267,6 +276,7 @@ let x = ParseTransformableCSSProperties({
267276 rotateC : "5,6" ,
268277 // "offset-size": 5,
269278 inset : "5px" ,
279+ "outline-offset" :90 ,
270280 "offset-rotate" : "10, 20" ,
271281 margin : "5 5"
272282 // rotate3d: [
@@ -368,15 +378,15 @@ export const ParseTransformableCSSKeyframes = (keyframes) => {
368378 perspective
369379 ] ;
370380 } ) . map ( ( [ rest , ...transformFunctions ] ) => {
371- let transform = createTransformProperty ( transformFunctions ) ;
381+ let transform = createTransformProperty ( TransformFunctionNames , transformFunctions ) ;
372382 let unit ;
373383
374384 // Wrap non array CSS property values in an array
375385 rest = mapObject ( rest , ( value , key ) => {
376386 // If key doesn't have the word color in it, try to add the default "px" or "deg" to it
377- if ( ! / c o l o r / gi . test ( key ) ) {
378- let isAngle = / r o t a t e / gi . test ( key ) ;
379- let isLength = new RegExp ( CSSPXDataType , "gi " ) . test ( key ) ;
387+ if ( ! / c o l o r / i . test ( key ) ) {
388+ let isAngle = / r o t a t e / i . test ( key ) ;
389+ let isLength = new RegExp ( CSSPXDataType , "i " ) . test ( key ) ;
380390
381391 // There is an intresting bug that occurs if you test a string againt the same instance of a Regular Expression
382392 // where the answer will be different every test
@@ -451,9 +461,3 @@ console.log(ParseTransformableCSSKeyframes([
451461// const mySet = new Set([1,2,3,4]);
452462// [...mySet].reduce()
453463// console.timeEnd("Test");
454-
455-
456-
457-
458-
459- // console.log(camelCase("-a-stroke"))
0 commit comments