@gem-sdk/styles 2.0.0-dev.895 → 2.0.0-staging.1059

package/src/preset.js

@@ -8,7 +8,7 @@ const preset = {
   },
   theme: {
     screens: {
-      tablet: { max: '1023px' },
+      tablet: { max: '1024px' },
       mobile: { max: '767px' },
     },
     extend: {
@@ -131,7 +131,7 @@ const preset = {
         },
       },
       maxWidth: {
-        tablet: '1023px',
+        tablet: '1024px',
         mobile: '767px',
       },
       textColor: {

package/src/properties.js

@@ -12,6 +12,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items',
   },
+  {
+    property: 'align-self',
+    shortHand: 'as',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self',
+  },
   // {
   //   property: 'align-self',
   //   shortHand: 'as',
@@ -84,12 +90,48 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width',
   },
+  {
+    property: 'border-left-width',
+    shortHand: 'blw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width',
+  },
+  {
+    property: 'border-right-width',
+    shortHand: 'brw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width',
+  },
+  {
+    property: 'border-top-width',
+    shortHand: 'btw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width',
+  },
   {
     property: 'border-bottom-color',
     shortHand: 'bbc',
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color',
   },
+  {
+    property: 'border-top-color',
+    shortHand: 'btc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color',
+  },
+  {
+    property: 'border-left-color',
+    shortHand: 'blc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color',
+  },
+  {
+    property: 'border-right-color',
+    shortHand: 'brc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color',
+  },
   {
     property: 'border-color',
     shortHand: 'bc',
@@ -336,12 +378,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap',
   },
-  // {
-  //   property: 'grid-row',
-  //   shortHand: 'gr',
-  //   mediaQuery: true,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row',
-  // },
+  {
+    property: 'grid-row',
+    shortHand: 'gr',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row',
+  },
   {
     property: 'grid-template-columns',
     shortHand: 'gtc',
@@ -366,6 +408,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content',
   },
+  {
+    property: 'justify-self',
+    shortHand: 'js',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self',
+  },
   {
     property: 'left',
     shortHand: 'left',
@@ -489,7 +537,7 @@ module.exports = [
   },
   // {
   //   property: 'rotate',
-  //   shortHand: 'rt',
+  //   shortHand: 'rotate',
   //   mediaQuery: true,
   //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/rotate',
   // },
@@ -523,24 +571,24 @@ module.exports = [
   //   mediaQuery: false,
   //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline',
   // },
-  // {
-  //   property: 'overflow',
-  //   shortHand: 'of',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow',
-  // },
-  // {
-  //   property: 'overflow-x',
-  //   shortHand: 'ofx',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x',
-  // },
-  // {
-  //   property: 'overflow-y',
-  //   shortHand: 'ofy',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y',
-  // },
+  {
+    property: 'overflow',
+    shortHand: 'of',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow',
+  },
+  {
+    property: 'overflow-x',
+    shortHand: 'ofx',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x',
+  },
+  {
+    property: 'overflow-y',
+    shortHand: 'ofy',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y',
+  },
   {
     property: 'place-content',
     shortHand: 'pc',
@@ -709,12 +757,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility',
   },
-  // {
-  //   property: 'white-space',
-  //   shortHand: 'ws',
-  //   mediaQuery: true,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space',
-  // },
+  {
+    property: 'white-space',
+    shortHand: 'ws',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space',
+  },
   {
     property: 'width',
     shortHand: 'w',
@@ -739,4 +787,10 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/z-index',
   },
+  {
+    property: 'writing-mode',
+    shortHand: 'wm',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode',
+  },
 ];

package/types/globals.d.ts

@@ -37,6 +37,33 @@ declare namespace React {
     '--hvr-ai-mobile'?: CSSProperties['alignItems'];
     '--focus-ai-mobile'?: CSSProperties['alignItems'];
 
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+
+    '--as'?: CSSProperties['alignSelf'];
+    '--hvr-as'?: CSSProperties['alignSelf'];
+    '--focus-as'?: CSSProperties['alignSelf'];
+
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    '--as-tablet'?: CSSProperties['alignSelf'];
+    '--hvr-as-tablet'?: CSSProperties['alignSelf'];
+    '--focus-as-tablet'?: CSSProperties['alignSelf'];
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    '--as-mobile'?: CSSProperties['alignSelf'];
+    '--hvr-as-mobile'?: CSSProperties['alignSelf'];
+    '--focus-as-mobile'?: CSSProperties['alignSelf'];
+
     /**
      * **CSS Property**: `aspect-ratio`
      *
@@ -334,6 +361,87 @@ declare namespace React {
     '--hvr-bbw-mobile'?: CSSProperties['borderBottomWidth'];
     '--focus-bbw-mobile'?: CSSProperties['borderBottomWidth'];
 
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+
+    '--blw'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw'?: CSSProperties['borderLeftWidth'];
+
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+    '--blw-tablet'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw-tablet'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw-tablet'?: CSSProperties['borderLeftWidth'];
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+    '--blw-mobile'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw-mobile'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw-mobile'?: CSSProperties['borderLeftWidth'];
+
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+
+    '--brw'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw'?: CSSProperties['borderRightWidth'];
+    '--focus-brw'?: CSSProperties['borderRightWidth'];
+
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+    '--brw-tablet'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw-tablet'?: CSSProperties['borderRightWidth'];
+    '--focus-brw-tablet'?: CSSProperties['borderRightWidth'];
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+    '--brw-mobile'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw-mobile'?: CSSProperties['borderRightWidth'];
+    '--focus-brw-mobile'?: CSSProperties['borderRightWidth'];
+
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+
+    '--btw'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw'?: CSSProperties['borderTopWidth'];
+    '--focus-btw'?: CSSProperties['borderTopWidth'];
+
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+    '--btw-tablet'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw-tablet'?: CSSProperties['borderTopWidth'];
+    '--focus-btw-tablet'?: CSSProperties['borderTopWidth'];
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+    '--btw-mobile'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw-mobile'?: CSSProperties['borderTopWidth'];
+    '--focus-btw-mobile'?: CSSProperties['borderTopWidth'];
+
     /**
      * **CSS Property**: `border-bottom-color`
      *
@@ -361,6 +469,87 @@ declare namespace React {
     '--hvr-bbc-mobile'?: CSSProperties['borderBottomColor'];
     '--focus-bbc-mobile'?: CSSProperties['borderBottomColor'];
 
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+
+    '--btc'?: CSSProperties['borderTopColor'];
+    '--hvr-btc'?: CSSProperties['borderTopColor'];
+    '--focus-btc'?: CSSProperties['borderTopColor'];
+
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+    '--btc-tablet'?: CSSProperties['borderTopColor'];
+    '--hvr-btc-tablet'?: CSSProperties['borderTopColor'];
+    '--focus-btc-tablet'?: CSSProperties['borderTopColor'];
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+    '--btc-mobile'?: CSSProperties['borderTopColor'];
+    '--hvr-btc-mobile'?: CSSProperties['borderTopColor'];
+    '--focus-btc-mobile'?: CSSProperties['borderTopColor'];
+
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+
+    '--blc'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc'?: CSSProperties['borderLeftColor'];
+    '--focus-blc'?: CSSProperties['borderLeftColor'];
+
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+    '--blc-tablet'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc-tablet'?: CSSProperties['borderLeftColor'];
+    '--focus-blc-tablet'?: CSSProperties['borderLeftColor'];
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+    '--blc-mobile'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc-mobile'?: CSSProperties['borderLeftColor'];
+    '--focus-blc-mobile'?: CSSProperties['borderLeftColor'];
+
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+
+    '--brc'?: CSSProperties['borderRightColor'];
+    '--hvr-brc'?: CSSProperties['borderRightColor'];
+    '--focus-brc'?: CSSProperties['borderRightColor'];
+
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+    '--brc-tablet'?: CSSProperties['borderRightColor'];
+    '--hvr-brc-tablet'?: CSSProperties['borderRightColor'];
+    '--focus-brc-tablet'?: CSSProperties['borderRightColor'];
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+    '--brc-mobile'?: CSSProperties['borderRightColor'];
+    '--hvr-brc-mobile'?: CSSProperties['borderRightColor'];
+    '--focus-brc-mobile'?: CSSProperties['borderRightColor'];
+
     /**
      * **CSS Property**: `border-color`
      *
@@ -955,6 +1144,33 @@ declare namespace React {
     '--hvr-gg-mobile'?: CSSProperties['gridGap'];
     '--focus-gg-mobile'?: CSSProperties['gridGap'];
 
+    /**
+     * **CSS Property**: `grid-row`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+
+    '--gr'?: CSSProperties['gridRow'];
+    '--hvr-gr'?: CSSProperties['gridRow'];
+    '--focus-gr'?: CSSProperties['gridRow'];
+
+    /**
+     * **CSS Property**: `grid-row`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    '--gr-tablet'?: CSSProperties['gridRow'];
+    '--hvr-gr-tablet'?: CSSProperties['gridRow'];
+    '--focus-gr-tablet'?: CSSProperties['gridRow'];
+    /**
+     * **CSS Property**: `grid-row`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    '--gr-mobile'?: CSSProperties['gridRow'];
+    '--hvr-gr-mobile'?: CSSProperties['gridRow'];
+    '--focus-gr-mobile'?: CSSProperties['gridRow'];
+
     /**
      * **CSS Property**: `grid-template-columns`
      *
@@ -1063,6 +1279,33 @@ declare namespace React {
     '--hvr-jc-mobile'?: CSSProperties['justifyContent'];
     '--focus-jc-mobile'?: CSSProperties['justifyContent'];
 
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+
+    '--js'?: CSSProperties['justifySelf'];
+    '--hvr-js'?: CSSProperties['justifySelf'];
+    '--focus-js'?: CSSProperties['justifySelf'];
+
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+    '--js-tablet'?: CSSProperties['justifySelf'];
+    '--hvr-js-tablet'?: CSSProperties['justifySelf'];
+    '--focus-js-tablet'?: CSSProperties['justifySelf'];
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+    '--js-mobile'?: CSSProperties['justifySelf'];
+    '--hvr-js-mobile'?: CSSProperties['justifySelf'];
+    '--focus-js-mobile'?: CSSProperties['justifySelf'];
+
     /**
      * **CSS Property**: `left`
      *
@@ -1576,6 +1819,87 @@ declare namespace React {
     '--hvr-o-mobile'?: CSSProperties['order'];
     '--focus-o-mobile'?: CSSProperties['order'];
 
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+
+    '--of'?: CSSProperties['overflow'];
+    '--hvr-of'?: CSSProperties['overflow'];
+    '--focus-of'?: CSSProperties['overflow'];
+
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+    '--of-tablet'?: CSSProperties['overflow'];
+    '--hvr-of-tablet'?: CSSProperties['overflow'];
+    '--focus-of-tablet'?: CSSProperties['overflow'];
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+    '--of-mobile'?: CSSProperties['overflow'];
+    '--hvr-of-mobile'?: CSSProperties['overflow'];
+    '--focus-of-mobile'?: CSSProperties['overflow'];
+
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+
+    '--ofx'?: CSSProperties['overflowX'];
+    '--hvr-ofx'?: CSSProperties['overflowX'];
+    '--focus-ofx'?: CSSProperties['overflowX'];
+
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+    '--ofx-tablet'?: CSSProperties['overflowX'];
+    '--hvr-ofx-tablet'?: CSSProperties['overflowX'];
+    '--focus-ofx-tablet'?: CSSProperties['overflowX'];
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+    '--ofx-mobile'?: CSSProperties['overflowX'];
+    '--hvr-ofx-mobile'?: CSSProperties['overflowX'];
+    '--focus-ofx-mobile'?: CSSProperties['overflowX'];
+
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+
+    '--ofy'?: CSSProperties['overflowY'];
+    '--hvr-ofy'?: CSSProperties['overflowY'];
+    '--focus-ofy'?: CSSProperties['overflowY'];
+
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+    '--ofy-tablet'?: CSSProperties['overflowY'];
+    '--hvr-ofy-tablet'?: CSSProperties['overflowY'];
+    '--focus-ofy-tablet'?: CSSProperties['overflowY'];
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+    '--ofy-mobile'?: CSSProperties['overflowY'];
+    '--hvr-ofy-mobile'?: CSSProperties['overflowY'];
+    '--focus-ofy-mobile'?: CSSProperties['overflowY'];
+
     /**
      * **CSS Property**: `place-content`
      *
@@ -2008,6 +2332,33 @@ declare namespace React {
     '--hvr-v-mobile'?: CSSProperties['visibility'];
     '--focus-v-mobile'?: CSSProperties['visibility'];
 
+    /**
+     * **CSS Property**: `white-space`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+     */
+
+    '--ws'?: CSSProperties['whiteSpace'];
+    '--hvr-ws'?: CSSProperties['whiteSpace'];
+    '--focus-ws'?: CSSProperties['whiteSpace'];
+
+    /**
+     * **CSS Property**: `white-space`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+     */
+    '--ws-tablet'?: CSSProperties['whiteSpace'];
+    '--hvr-ws-tablet'?: CSSProperties['whiteSpace'];
+    '--focus-ws-tablet'?: CSSProperties['whiteSpace'];
+    /**
+     * **CSS Property**: `white-space`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+     */
+    '--ws-mobile'?: CSSProperties['whiteSpace'];
+    '--hvr-ws-mobile'?: CSSProperties['whiteSpace'];
+    '--focus-ws-mobile'?: CSSProperties['whiteSpace'];
+
     /**
      * **CSS Property**: `width`
      *
@@ -2062,6 +2413,33 @@ declare namespace React {
     '--hvr-z-mobile'?: CSSProperties['zIndex'];
     '--focus-z-mobile'?: CSSProperties['zIndex'];
 
+    /**
+     * **CSS Property**: `writing-mode`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
+     */
+
+    '--wm'?: CSSProperties['writingMode'];
+    '--hvr-wm'?: CSSProperties['writingMode'];
+    '--focus-wm'?: CSSProperties['writingMode'];
+
+    /**
+     * **CSS Property**: `writing-mode`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
+     */
+    '--wm-tablet'?: CSSProperties['writingMode'];
+    '--hvr-wm-tablet'?: CSSProperties['writingMode'];
+    '--focus-wm-tablet'?: CSSProperties['writingMode'];
+    /**
+     * **CSS Property**: `writing-mode`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
+     */
+    '--wm-mobile'?: CSSProperties['writingMode'];
+    '--hvr-wm-mobile'?: CSSProperties['writingMode'];
+    '--focus-wm-mobile'?: CSSProperties['writingMode'];
+
     [key: string]: any;
   }
 }

package/types/index.d.ts

@@ -6,4 +6,4 @@ declare const preset: Config;
 declare const properties: Options;
 export { preset, properties };
 
-export default preset;
+export default preset;

package/types/types.d.ts

@@ -1,5 +1,6 @@
 export type ShortHandProperty =
   | 'ai'
+  | 'as'
   | 'aspect'
   | 'bg'
   | 'bga'
@@ -11,7 +12,13 @@ export type ShortHandProperty =
   | 'b'
   | 'bb'
   | 'bbw'
+  | 'blw'
+  | 'brw'
+  | 'btw'
   | 'bbc'
+  | 'btc'
+  | 'blc'
+  | 'brc'
   | 'bc'
   | 'bblr'
   | 'bbrr'
@@ -34,10 +41,12 @@ export type ShortHandProperty =
   | 'weight'
   | 'fs'
   | 'gg'
+  | 'gr'
   | 'gtc'
   | 'gtr'
   | 'h'
   | 'jc'
+  | 'js'
   | 'left'
   | 'ls'
   | 'line-clamp'
@@ -57,6 +66,9 @@ export type ShortHandProperty =
   | 'objf'
   | 'op'
   | 'o'
+  | 'of'
+  | 'ofx'
+  | 'ofy'
   | 'pc'
   | 'p'
   | 'pb'
@@ -73,5 +85,7 @@ export type ShortHandProperty =
   | 'top'
   | 't'
   | 'v'
+  | 'ws'
   | 'w'
-  | 'z';
+  | 'z'
+  | 'wm';