@griffel/core - npm Package Compare versions

Comparing version 1.13.1 to 1.14.0

__resetStyles.cjs.js

@@ -6,2 +6,3 @@ 'use strict';
 var constants = require('./constants.cjs.js');
+var insertionFactory = require('./insertionFactory.cjs.js');
 
@@ -11,4 +12,4 @@ /**
  */
-function __resetStyles(ltrClassName, rtlClassName, cssRules) {
-  const insertionCache = {};
+function __resetStyles(ltrClassName, rtlClassName, cssRules, factory = insertionFactory.insertionFactory) {
+  const insertStyles = factory();
   function computeClassName(options) {
@@ -19,12 +20,6 @@ const {
     } = options;
-    const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules({
-        r: cssRules
-      });
-      insertionCache[rendererId] = true;
-    }
-    const className = isLTR ? ltrClassName : rtlClassName || ltrClassName;
+    const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
+    insertStyles(renderer, Array.isArray(cssRules) ? {
+      r: cssRules
+    } : cssRules);
     if (process.env.NODE_ENV !== 'production') {
@@ -31,0 +26,0 @@ constants.DEBUG_RESET_CLASSES[className] = 1;

__resetStyles.esm.js

 import { DEBUG_RESET_CLASSES } from './constants.esm.js';
+import { insertionFactory } from './insertionFactory.esm.js';
 
@@ -6,4 +7,4 @@ /**
  */
-function __resetStyles(ltrClassName, rtlClassName, cssRules) {
-  const insertionCache = {};
+function __resetStyles(ltrClassName, rtlClassName, cssRules, factory = insertionFactory) {
+  const insertStyles = factory();
   function computeClassName(options) {
@@ -14,12 +15,6 @@ const {
     } = options;
-    const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules({
-        r: cssRules
-      });
-      insertionCache[rendererId] = true;
-    }
-    const className = isLTR ? ltrClassName : rtlClassName || ltrClassName;
+    const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
+    insertStyles(renderer, Array.isArray(cssRules) ? {
+      r: cssRules
+    } : cssRules);
     if (process.env.NODE_ENV !== 'production') {
@@ -26,0 +21,0 @@ DEBUG_RESET_CLASSES[className] = 1;

__styles.cjs.js

@@ -9,2 +9,3 @@ 'use strict';
 var getSourceURLfromError = require('./devtools/getSourceURLfromError.cjs.js');
+var insertionFactory = require('./insertionFactory.cjs.js');
 var reduceToClassNameForSlots = require('./runtime/reduceToClassNameForSlots.cjs.js');
@@ -17,4 +18,4 @@
  */
-function __styles(classesMapBySlot, cssRules) {
-  const insertionCache = {};
+function __styles(classesMapBySlot, cssRules, factory = insertionFactory.insertionFactory) {
+  const insertStyles = factory();
   let ltrClassNamesForSlots = null;
@@ -32,4 +33,2 @@ let rtlClassNamesForSlots = null;
     const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
     if (isLTR) {
@@ -44,6 +43,3 @@ if (ltrClassNamesForSlots === null) {
     }
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[rendererId] = true;
-    }
+    insertStyles(renderer, cssRules);
     const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
@@ -50,0 +46,0 @@ if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled.isDevToolsEnabled) {

__styles.esm.js

@@ -5,2 +5,3 @@ import './constants.esm.js';
 import { getSourceURLfromError } from './devtools/getSourceURLfromError.esm.js';
+import { insertionFactory } from './insertionFactory.esm.js';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots.esm.js';
@@ -13,4 +14,4 @@
  */
-function __styles(classesMapBySlot, cssRules) {
-  const insertionCache = {};
+function __styles(classesMapBySlot, cssRules, factory = insertionFactory) {
+  const insertStyles = factory();
   let ltrClassNamesForSlots = null;
@@ -28,4 +29,2 @@ let rtlClassNamesForSlots = null;
     const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
     if (isLTR) {
@@ -40,6 +39,3 @@ if (ltrClassNamesForSlots === null) {
     }
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[rendererId] = true;
-    }
+    insertStyles(renderer, cssRules);
     const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
@@ -46,0 +42,0 @@ if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {

makeResetStyles.cjs.js

@@ -6,6 +6,7 @@ 'use strict';
 var constants = require('./constants.cjs.js');
+var insertionFactory = require('./insertionFactory.cjs.js');
 var resolveResetStyleRules = require('./runtime/resolveResetStyleRules.cjs.js');
 
-function makeResetStyles(styles) {
-  const insertionCache = {};
+function makeResetStyles(styles, factory = insertionFactory.insertionFactory) {
+  const insertStyles = factory();
   let ltrClassName = null;
@@ -22,12 +23,6 @@ let rtlClassName = null;
     }
-    const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules({
-        r: cssRules
-      });
-      insertionCache[rendererId] = true;
-    }
-    const className = isLTR ? ltrClassName : rtlClassName || ltrClassName;
+    insertStyles(renderer, Array.isArray(cssRules) ? {
+      r: cssRules
+    } : cssRules);
+    const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
     if (process.env.NODE_ENV !== 'production') {
@@ -34,0 +29,0 @@ constants.DEBUG_RESET_CLASSES[className] = 1;

makeResetStyles.esm.js

 import { DEBUG_RESET_CLASSES } from './constants.esm.js';
+import { insertionFactory } from './insertionFactory.esm.js';
 import { resolveResetStyleRules } from './runtime/resolveResetStyleRules.esm.js';
 
-function makeResetStyles(styles) {
-  const insertionCache = {};
+function makeResetStyles(styles, factory = insertionFactory) {
+  const insertStyles = factory();
   let ltrClassName = null;
@@ -17,12 +18,6 @@ let rtlClassName = null;
     }
-    const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules({
-        r: cssRules
-      });
-      insertionCache[rendererId] = true;
-    }
-    const className = isLTR ? ltrClassName : rtlClassName || ltrClassName;
+    insertStyles(renderer, Array.isArray(cssRules) ? {
+      r: cssRules
+    } : cssRules);
+    const className = dir === 'ltr' ? ltrClassName : rtlClassName || ltrClassName;
     if (process.env.NODE_ENV !== 'production') {
@@ -29,0 +24,0 @@ DEBUG_RESET_CLASSES[className] = 1;

makeStaticStyles.cjs.js

@@ -5,23 +5,14 @@ 'use strict';
 
+var insertionFactory = require('./insertionFactory.cjs.js');
 var resolveStaticStyleRules = require('./runtime/resolveStaticStyleRules.cjs.js');
 
-/**
- * Register static css.
- * @param styles - styles object or string.
- */
-function makeStaticStyles(styles) {
-  const styleCache = {};
+function makeStaticStyles(styles, factory = insertionFactory.insertionFactory) {
+  const insertStyles = factory();
   const stylesSet = Array.isArray(styles) ? styles : [styles];
   function useStaticStyles(options) {
-    const {
-      renderer
-    } = options;
-    const cacheKey = renderer.id;
-    if (!styleCache[cacheKey]) {
-      renderer.insertCSSRules({
-        // 👇 static rules should be inserted into default bucket
-        d: resolveStaticStyleRules.resolveStaticStyleRules(stylesSet)
-      });
-      styleCache[cacheKey] = true;
-    }
+    insertStyles(options.renderer,
+    // 👇 static rules should be inserted into default bucket
+    {
+      d: resolveStaticStyleRules.resolveStaticStyleRules(stylesSet)
+    });
   }
@@ -28,0 +19,0 @@ return useStaticStyles;

makeStaticStyles.esm.js

@@ -0,22 +1,13 @@
+import { insertionFactory } from './insertionFactory.esm.js';
 import { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules.esm.js';
 
-/**
- * Register static css.
- * @param styles - styles object or string.
- */
-function makeStaticStyles(styles) {
-  const styleCache = {};
+function makeStaticStyles(styles, factory = insertionFactory) {
+  const insertStyles = factory();
   const stylesSet = Array.isArray(styles) ? styles : [styles];
   function useStaticStyles(options) {
-    const {
-      renderer
-    } = options;
-    const cacheKey = renderer.id;
-    if (!styleCache[cacheKey]) {
-      renderer.insertCSSRules({
-        // 👇 static rules should be inserted into default bucket
-        d: resolveStaticStyleRules(stylesSet)
-      });
-      styleCache[cacheKey] = true;
-    }
+    insertStyles(options.renderer,
+    // 👇 static rules should be inserted into default bucket
+    {
+      d: resolveStaticStyleRules(stylesSet)
+    });
   }
@@ -23,0 +14,0 @@ return useStaticStyles;

makeStyles.cjs.js

@@ -9,7 +9,8 @@ 'use strict';
 var getSourceURLfromError = require('./devtools/getSourceURLfromError.cjs.js');
+var insertionFactory = require('./insertionFactory.cjs.js');
 var resolveStyleRulesForSlots = require('./resolveStyleRulesForSlots.cjs.js');
 var reduceToClassNameForSlots = require('./runtime/reduceToClassNameForSlots.cjs.js');
 
-function makeStyles(stylesBySlots) {
-  const insertionCache = {};
+function makeStyles(stylesBySlots, factory = insertionFactory.insertionFactory) {
+  const insertStyles = factory();
   let classesMapBySlot = null;
@@ -32,4 +33,2 @@ let cssRules = null;
     const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
     if (isLTR) {
@@ -44,6 +43,3 @@ if (ltrClassNamesForSlots === null) {
     }
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[rendererId] = true;
-    }
+    insertStyles(renderer, cssRules);
     const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
@@ -50,0 +46,0 @@ if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled.isDevToolsEnabled) {

makeStyles.esm.js

@@ -5,7 +5,8 @@ import './constants.esm.js';
 import { getSourceURLfromError } from './devtools/getSourceURLfromError.esm.js';
+import { insertionFactory } from './insertionFactory.esm.js';
 import { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots.esm.js';
 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots.esm.js';
 
-function makeStyles(stylesBySlots) {
-  const insertionCache = {};
+function makeStyles(stylesBySlots, factory = insertionFactory) {
+  const insertStyles = factory();
   let classesMapBySlot = null;
@@ -28,4 +29,2 @@ let cssRules = null;
     const isLTR = dir === 'ltr';
-    // As RTL classes are different they should have a different cache key for insertion
-    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
     if (isLTR) {
@@ -40,6 +39,3 @@ if (ltrClassNamesForSlots === null) {
     }
-    if (insertionCache[rendererId] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[rendererId] = true;
-    }
+    insertStyles(renderer, cssRules);
     const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
@@ -46,0 +42,0 @@ if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {

package.json

 {
   "name": "@griffel/core",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "DOM implementation of Atomic CSS-in-JS",
@@ -5,0 +5,0 @@ "license": "MIT",

renderer/getStyleSheetForBucket.cjs.js

@@ -32,2 +32,4 @@ 'use strict';
 'a',
+// at rules for reset styles
+'s',
 // keyframes
@@ -34,0 +36,0 @@ 'k',

renderer/getStyleSheetForBucket.esm.js

@@ -28,2 +28,4 @@ import { DATA_BUCKET_ATTR } from '../constants.esm.js';
 'a',
+// at rules for reset styles
+'s',
 // keyframes
@@ -30,0 +32,0 @@ 'k',

runtime/compileCSSRules.cjs.js

@@ -7,4 +7,4 @@ 'use strict';
 var globalPlugin = require('./stylis/globalPlugin.cjs.js');
+var prefixerPlugin = require('./stylis/prefixerPlugin.cjs.js');
 var sortClassesInAtRulesPlugin = require('./stylis/sortClassesInAtRulesPlugin.cjs.js');
-var prefixer = require('./prefixer.cjs.js');
 
@@ -15,5 +15,3 @@ // eslint-disable-next-line @typescript-eslint/no-empty-function
   const rules = [];
-  stylis.serialize(stylis.compile(cssRules), stylis.middleware([globalPlugin.globalPlugin, sortClassesInAtRules ? sortClassesInAtRulesPlugin.sortClassesInAtRulesPlugin : noop,
-  // prefixer,
-  prefixer.prefixer, stylis.stringify,
+  stylis.serialize(stylis.compile(cssRules), stylis.middleware([globalPlugin.globalPlugin, sortClassesInAtRules ? sortClassesInAtRulesPlugin.sortClassesInAtRulesPlugin : noop, prefixerPlugin.prefixerPlugin, stylis.stringify,
   // 💡 we are using `.insertRule()` API for DOM operations, which does not support
@@ -20,0 +18,0 @@ // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts

runtime/compileCSSRules.esm.js

 import { serialize, compile, middleware, stringify, rulesheet } from 'stylis';
 import { globalPlugin } from './stylis/globalPlugin.esm.js';
+import { prefixerPlugin } from './stylis/prefixerPlugin.esm.js';
 import { sortClassesInAtRulesPlugin } from './stylis/sortClassesInAtRulesPlugin.esm.js';
-import { prefixer } from './prefixer.esm.js';
 
@@ -10,5 +10,3 @@ // eslint-disable-next-line @typescript-eslint/no-empty-function
   const rules = [];
-  serialize(compile(cssRules), middleware([globalPlugin, sortClassesInAtRules ? sortClassesInAtRulesPlugin : noop,
-  // prefixer,
-  prefixer, stringify,
+  serialize(compile(cssRules), middleware([globalPlugin, sortClassesInAtRules ? sortClassesInAtRulesPlugin : noop, prefixerPlugin, stringify,
   // 💡 we are using `.insertRule()` API for DOM operations, which does not support
@@ -15,0 +13,0 @@ // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts

runtime/compileKeyframeCSS.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 var stylis = require('stylis');
-var prefixer = require('./prefixer.cjs.js');
+var prefixerPlugin = require('./stylis/prefixerPlugin.cjs.js');
 var cssifyObject = require('./utils/cssifyObject.cjs.js');
@@ -24,3 +24,3 @@
   const rules = [];
-  stylis.serialize(stylis.compile(cssRule), stylis.middleware([stylis.stringify, prefixer.prefixer,
+  stylis.serialize(stylis.compile(cssRule), stylis.middleware([stylis.stringify, prefixerPlugin.prefixerPlugin,
   // 💡 we are using `.insertRule()` API for DOM operations, which does not support
@@ -27,0 +27,0 @@ // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts

runtime/compileKeyframeCSS.esm.js

 import { serialize, compile, middleware, stringify, rulesheet } from 'stylis';
-import { prefixer } from './prefixer.esm.js';
+import { prefixerPlugin } from './stylis/prefixerPlugin.esm.js';
 import { cssifyObject } from './utils/cssifyObject.esm.js';
@@ -19,3 +19,3 @@
   const rules = [];
-  serialize(compile(cssRule), middleware([stringify, prefixer,
+  serialize(compile(cssRule), middleware([stringify, prefixerPlugin,
   // 💡 we are using `.insertRule()` API for DOM operations, which does not support
@@ -22,0 +22,0 @@ // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts

runtime/resolveResetStyleRules.cjs.js

@@ -15,3 +15,3 @@ 'use strict';
 var compileAtomicCSSRule = require('./compileAtomicCSSRule.cjs.js');
-var compileCSSRules = require('./compileCSSRules.cjs.js');
+var compileResetCSSRules = require('./compileResetCSSRules.cjs.js');
 var compileKeyframeCSS = require('./compileKeyframeCSS.cjs.js');
@@ -113,9 +113,16 @@ var isContainerQuerySelector = require('./utils/isContainerQuerySelector.cjs.js');
   const ltrClassName = constants.RESET_HASH_PREFIX + hashString__default["default"](ltrRule);
-  const ltrCSS = compileCSSRules.compileCSSRules(`.${ltrClassName}{${ltrRule}}`, false);
+  const [ltrCSS, ltrCSSAtRules] = compileResetCSSRules.compileResetCSSRules(`.${ltrClassName}{${ltrRule}}`);
+  const hasAtRules = ltrCSSAtRules.length > 0;
   if (ltrRule === rtlRule) {
-    return [ltrClassName, null, ltrCSS];
+    return [ltrClassName, null, hasAtRules ? {
+      r: ltrCSS,
+      s: ltrCSSAtRules
+    } : ltrCSS];
   }
   const rtlClassName = constants.RESET_HASH_PREFIX + hashString__default["default"](rtlRule);
-  const rtlCSS = compileCSSRules.compileCSSRules(`.${rtlClassName}{${rtlRule}}`, false);
-  return [ltrClassName, rtlClassName, ltrCSS.concat(rtlCSS)];
+  const [rtlCSS, rtlCSSAtRules] = compileResetCSSRules.compileResetCSSRules(`.${rtlClassName}{${rtlRule}}`);
+  return [ltrClassName, rtlClassName, hasAtRules ? {
+    r: ltrCSS.concat(rtlCSS),
+    s: ltrCSSAtRules.concat(rtlCSSAtRules)
+  } : ltrCSS.concat(rtlCSS)];
 }
@@ -122,0 +129,0 @@

runtime/resolveResetStyleRules.esm.js

@@ -11,3 +11,3 @@ import hashString from '@emotion/hash';
 import { normalizePseudoSelector } from './compileAtomicCSSRule.esm.js';
-import { compileCSSRules } from './compileCSSRules.esm.js';
+import { compileResetCSSRules } from './compileResetCSSRules.esm.js';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS.esm.js';
@@ -105,9 +105,16 @@ import { isContainerQuerySelector } from './utils/isContainerQuerySelector.esm.js';
   const ltrClassName = RESET_HASH_PREFIX + hashString(ltrRule);
-  const ltrCSS = compileCSSRules(`.${ltrClassName}{${ltrRule}}`, false);
+  const [ltrCSS, ltrCSSAtRules] = compileResetCSSRules(`.${ltrClassName}{${ltrRule}}`);
+  const hasAtRules = ltrCSSAtRules.length > 0;
   if (ltrRule === rtlRule) {
-    return [ltrClassName, null, ltrCSS];
+    return [ltrClassName, null, hasAtRules ? {
+      r: ltrCSS,
+      s: ltrCSSAtRules
+    } : ltrCSS];
   }
   const rtlClassName = RESET_HASH_PREFIX + hashString(rtlRule);
-  const rtlCSS = compileCSSRules(`.${rtlClassName}{${rtlRule}}`, false);
-  return [ltrClassName, rtlClassName, ltrCSS.concat(rtlCSS)];
+  const [rtlCSS, rtlCSSAtRules] = compileResetCSSRules(`.${rtlClassName}{${rtlRule}}`);
+  return [ltrClassName, rtlClassName, hasAtRules ? {
+    r: ltrCSS.concat(rtlCSS),
+    s: ltrCSSAtRules.concat(rtlCSSAtRules)
+  } : ltrCSS.concat(rtlCSS)];
 }
@@ -114,0 +121,0 @@

runtime/stylis/sortClassesInAtRulesPlugin.cjs.js

@@ -5,12 +5,7 @@ 'use strict';
 
-var stylis = require('stylis');
+var isAtRuleElement = require('./isAtRuleElement.cjs.js');
 
 const sortClassesInAtRulesPlugin = element => {
-  switch (element.type) {
-    case stylis.MEDIA:
-    case stylis.SUPPORTS:
-    case stylis.LAYER:
-      if (Array.isArray(element.children)) {
-        element.children.sort((a, b) => a.props[0] > b.props[0] ? 1 : -1);
-      }
+  if (isAtRuleElement.isAtRuleElement(element) && Array.isArray(element.children)) {
+    element.children.sort((a, b) => a.props[0] > b.props[0] ? 1 : -1);
   }
@@ -17,0 +12,0 @@ };

runtime/stylis/sortClassesInAtRulesPlugin.esm.js

@@ -1,11 +0,6 @@
-import { LAYER, SUPPORTS, MEDIA } from 'stylis';
+import { isAtRuleElement } from './isAtRuleElement.esm.js';
 
 const sortClassesInAtRulesPlugin = element => {
-  switch (element.type) {
-    case MEDIA:
-    case SUPPORTS:
-    case LAYER:
-      if (Array.isArray(element.children)) {
-        element.children.sort((a, b) => a.props[0] > b.props[0] ? 1 : -1);
-      }
+  if (isAtRuleElement(element) && Array.isArray(element.children)) {
+    element.children.sort((a, b) => a.props[0] > b.props[0] ? 1 : -1);
   }
@@ -12,0 +7,0 @@ };

shorthands/border.cjs.js

@@ -8,2 +8,3 @@ 'use strict';
 var borderColor = require('./borderColor.cjs.js');
+var utils = require('./utils.cjs.js');
 
@@ -15,4 +16,7 @@ /**
  *  border('2px')
+ *  border('solid')
  *  border('2px', 'solid')
+ *  border('solid', '2px')
  *  border('2px', 'solid', 'red')
+ *  border('solid', '2px', 'red')
  *
@@ -22,2 +26,9 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border
 function border(...values) {
+  if (utils.isBorderStyle(values[0])) {
+    return {
+      ...borderStyle.borderStyle(values[0]),
+      ...(values[1] && borderWidth.borderWidth(values[1])),
+      ...(values[2] && borderColor.borderColor(values[2]))
+    };
+  }
   return {
@@ -24,0 +35,0 @@ ...borderWidth.borderWidth(values[0]),

shorthands/border.esm.js

 import { borderWidth } from './borderWidth.esm.js';
 import { borderStyle } from './borderStyle.esm.js';
 import { borderColor } from './borderColor.esm.js';
+import { isBorderStyle } from './utils.esm.js';
 
@@ -10,4 +11,7 @@ /**
  *  border('2px')
+ *  border('solid')
  *  border('2px', 'solid')
+ *  border('solid', '2px')
  *  border('2px', 'solid', 'red')
+ *  border('solid', '2px', 'red')
  *
@@ -17,2 +21,9 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border
 function border(...values) {
+  if (isBorderStyle(values[0])) {
+    return {
+      ...borderStyle(values[0]),
+      ...(values[1] && borderWidth(values[1])),
+      ...(values[2] && borderColor(values[2]))
+    };
+  }
   return {
@@ -19,0 +30,0 @@ ...borderWidth(values[0]),

shorthands/borderBottom.cjs.js

@@ -5,13 +5,29 @@ 'use strict';
 
+var utils = require('./utils.cjs.js');
+
 /**
- * A function that implements expansion for "border-bottom", it's simplified - check usage examples.
+ * A function that implements expansion for "border-Bottom", it's simplified - check usage examples.
  *
  * @example
  *  borderBottom('2px')
+ *  borderBottom('solid')
  *  borderBottom('2px', 'solid')
+ *  borderBottom('solid', '2px')
  *  borderBottom('2px', 'solid', 'red')
+ *  borderBottom('solid', '2px', 'red')
  *
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Bottom
  */
 function borderBottom(...values) {
+  if (utils.isBorderStyle(values[0])) {
+    return {
+      borderBottomStyle: values[0],
+      ...(values[1] && {
+        borderBottomWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderBottomColor: values[2]
+      })
+    };
+  }
   return {
@@ -18,0 +34,0 @@ borderBottomWidth: values[0],

shorthands/borderBottom.esm.js

@@ -0,12 +1,28 @@
+import { isBorderStyle } from './utils.esm.js';
+
 /**
- * A function that implements expansion for "border-bottom", it's simplified - check usage examples.
+ * A function that implements expansion for "border-Bottom", it's simplified - check usage examples.
  *
  * @example
  *  borderBottom('2px')
+ *  borderBottom('solid')
  *  borderBottom('2px', 'solid')
+ *  borderBottom('solid', '2px')
  *  borderBottom('2px', 'solid', 'red')
+ *  borderBottom('solid', '2px', 'red')
  *
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Bottom
  */
 function borderBottom(...values) {
+  if (isBorderStyle(values[0])) {
+    return {
+      borderBottomStyle: values[0],
+      ...(values[1] && {
+        borderBottomWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderBottomColor: values[2]
+      })
+    };
+  }
   return {
@@ -13,0 +29,0 @@ borderBottomWidth: values[0],

shorthands/borderLeft.cjs.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var utils = require('./utils.cjs.js');
+
 /**
@@ -11,4 +13,7 @@ * A function that implements expansion for "border-left", it's simplified - check usage examples.
  *  borderLeft('2px')
+ *  borderLeft('solid')
  *  borderLeft('2px', 'solid')
+ *  borderLeft('solid', '2px')
  *  borderLeft('2px', 'solid', 'red')
+ *  borderLeft('solid', '2px', 'red')
  *
@@ -18,2 +23,13 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left
 function borderLeft(...values) {
+  if (utils.isBorderStyle(values[0])) {
+    return {
+      borderLeftStyle: values[0],
+      ...(values[1] && {
+        borderLeftWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderLeftColor: values[2]
+      })
+    };
+  }
   return {
@@ -20,0 +36,0 @@ borderLeftWidth: values[0],

shorthands/borderLeft.esm.js

@@ -0,1 +1,3 @@
+import { isBorderStyle } from './utils.esm.js';
+
 /**
@@ -6,4 +8,7 @@ * A function that implements expansion for "border-left", it's simplified - check usage examples.
  *  borderLeft('2px')
+ *  borderLeft('solid')
  *  borderLeft('2px', 'solid')
+ *  borderLeft('solid', '2px')
  *  borderLeft('2px', 'solid', 'red')
+ *  borderLeft('solid', '2px', 'red')
  *
@@ -13,2 +18,13 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left
 function borderLeft(...values) {
+  if (isBorderStyle(values[0])) {
+    return {
+      borderLeftStyle: values[0],
+      ...(values[1] && {
+        borderLeftWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderLeftColor: values[2]
+      })
+    };
+  }
   return {
@@ -15,0 +31,0 @@ borderLeftWidth: values[0],

shorthands/borderRight.cjs.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var utils = require('./utils.cjs.js');
+
 /**
@@ -11,4 +13,7 @@ * A function that implements expansion for "border-right", it's simplified - check usage examples.
  *  borderRight('2px')
+ *  borderRight('solid')
  *  borderRight('2px', 'solid')
+ *  borderRight('solid', '2px')
  *  borderRight('2px', 'solid', 'red')
+ *  borderRight('solid', '2px', 'red')
  *
@@ -18,2 +23,13 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right
 function borderRight(...values) {
+  if (utils.isBorderStyle(values[0])) {
+    return {
+      borderRightStyle: values[0],
+      ...(values[1] && {
+        borderRightWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderRightColor: values[2]
+      })
+    };
+  }
   return {
@@ -20,0 +36,0 @@ borderRightWidth: values[0],

shorthands/borderRight.esm.js

@@ -0,1 +1,3 @@
+import { isBorderStyle } from './utils.esm.js';
+
 /**
@@ -6,4 +8,7 @@ * A function that implements expansion for "border-right", it's simplified - check usage examples.
  *  borderRight('2px')
+ *  borderRight('solid')
  *  borderRight('2px', 'solid')
+ *  borderRight('solid', '2px')
  *  borderRight('2px', 'solid', 'red')
+ *  borderRight('solid', '2px', 'red')
  *
@@ -13,2 +18,13 @@ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right
 function borderRight(...values) {
+  if (isBorderStyle(values[0])) {
+    return {
+      borderRightStyle: values[0],
+      ...(values[1] && {
+        borderRightWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderRightColor: values[2]
+      })
+    };
+  }
   return {
@@ -15,0 +31,0 @@ borderRightWidth: values[0],

shorthands/borderTop.cjs.js

@@ -5,13 +5,29 @@ 'use strict';
 
+var utils = require('./utils.cjs.js');
+
 /**
- * A function that implements expansion for "border-top", it's simplified - check usage examples.
+ * A function that implements expansion for "border-Top", it's simplified - check usage examples.
  *
  * @example
  *  borderTop('2px')
+ *  borderTop('solid')
  *  borderTop('2px', 'solid')
+ *  borderTop('solid', '2px')
  *  borderTop('2px', 'solid', 'red')
+ *  borderTop('solid', '2px', 'red')
  *
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Top
  */
 function borderTop(...values) {
+  if (utils.isBorderStyle(values[0])) {
+    return {
+      borderTopStyle: values[0],
+      ...(values[1] && {
+        borderTopWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderTopColor: values[2]
+      })
+    };
+  }
   return {
@@ -18,0 +34,0 @@ borderTopWidth: values[0],

shorthands/borderTop.esm.js

@@ -0,12 +1,28 @@
+import { isBorderStyle } from './utils.esm.js';
+
 /**
- * A function that implements expansion for "border-top", it's simplified - check usage examples.
+ * A function that implements expansion for "border-Top", it's simplified - check usage examples.
  *
  * @example
  *  borderTop('2px')
+ *  borderTop('solid')
  *  borderTop('2px', 'solid')
+ *  borderTop('solid', '2px')
  *  borderTop('2px', 'solid', 'red')
+ *  borderTop('solid', '2px', 'red')
  *
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-Top
  */
 function borderTop(...values) {
+  if (isBorderStyle(values[0])) {
+    return {
+      borderTopStyle: values[0],
+      ...(values[1] && {
+        borderTopWidth: values[1]
+      }),
+      ...(values[2] && {
+        borderTopColor: values[2]
+      })
+    };
+  }
   return {
@@ -13,0 +29,0 @@ borderTopWidth: values[0],

src/__resetStyles.d.ts

 import type { MakeResetStylesOptions } from './makeResetStyles';
+import type { CSSRulesByBucket, GriffelInsertionFactory } from './types';
 /**
  * @internal
  */
-export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]): (options: MakeResetStylesOptions) => string;
+export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: CSSRulesByBucket | string[], factory?: GriffelInsertionFactory): (options: MakeResetStylesOptions) => string;

src/__styles.d.ts

@@ -1,2 +0,2 @@
-import type { CSSClassesMapBySlot, CSSRulesByBucket } from './types';
+import type { CSSClassesMapBySlot, CSSRulesByBucket, GriffelInsertionFactory } from './types';
 import type { MakeStylesOptions } from './makeStyles';
@@ -8,2 +8,2 @@ /**
  */
-export declare function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): (options: Pick<MakeStylesOptions, 'dir' | 'renderer'>) => Record<Slots, string>;
+export declare function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket, factory?: GriffelInsertionFactory): (options: Pick<MakeStylesOptions, 'dir' | 'renderer'>) => Record<Slots, string>;

src/index.d.ts

@@ -51,3 +51,3 @@ import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, flex, gap, gridArea, margin, marginBlock, marginInline, padding, paddingBlock, paddingInline, overflow, inset, outline, transition, textDecoration } from './shorthands';
 export type { GriffelStaticStyle, GriffelStaticStyles, GriffelAnimation, GriffelStyle, GriffelResetStyle, } from '@griffel/style-types';
-export { CSSClasses, CSSClassesMapBySlot, CSSBucketEntry, CSSRulesByBucket, StyleBucketName, GriffelRenderer, } from './types';
+export { CSSClasses, CSSClassesMapBySlot, CSSBucketEntry, CSSRulesByBucket, StyleBucketName, GriffelRenderer, GriffelInsertionFactory, } from './types';
 export type { DebugCSSRules, DebugSequence, DebugResult } from './devtools';

src/makeResetStyles.d.ts

 import type { GriffelResetStyle } from '@griffel/style-types';
-import type { GriffelRenderer } from './types';
+import type { GriffelRenderer, GriffelInsertionFactory } from './types';
 export interface MakeResetStylesOptions {
@@ -7,2 +7,2 @@ dir: 'ltr' | 'rtl';
 }
-export declare function makeResetStyles(styles: GriffelResetStyle): (options: MakeResetStylesOptions) => string;
+export declare function makeResetStyles(styles: GriffelResetStyle, factory?: GriffelInsertionFactory): (options: MakeResetStylesOptions) => string;

src/makeStaticStyles.d.ts

 import type { GriffelStaticStyles } from '@griffel/style-types';
 import type { GriffelRenderer } from './types';
+import type { GriffelInsertionFactory } from './types';
 export interface MakeStaticStylesOptions {
     renderer: GriffelRenderer;
 }
-/**
- * Register static css.
- * @param styles - styles object or string.
- */
-export declare function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]): (options: MakeStaticStylesOptions) => void;
+export declare function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[], factory?: GriffelInsertionFactory): (options: MakeStaticStylesOptions) => void;

src/makeStyles.d.ts

 import type { GriffelRenderer, StylesBySlots } from './types';
+import type { GriffelInsertionFactory } from './types';
 export interface MakeStylesOptions {
@@ -6,2 +7,2 @@ dir: 'ltr' | 'rtl';
 }
-export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): (options: MakeStylesOptions) => Record<Slots, string>;
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>, factory?: GriffelInsertionFactory): (options: MakeStylesOptions) => Record<Slots, string>;

src/runtime/resolveResetStyleRules.d.ts

 import type { GriffelResetStyle } from '@griffel/style-types';
+import type { CSSRulesByBucket } from '../types';
 /**
  * @internal
  */
-export declare function resolveResetStyleRules(styles: GriffelResetStyle): [string, string | null, string[]];
+export declare function resolveResetStyleRules(styles: GriffelResetStyle): [string, string | null, CSSRulesByBucket | string[]];

src/shorthands/borderBottom.d.ts

 import type { GriffelStyle } from '@griffel/style-types';
 import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
-declare type BorderBottomStyle = Pick<GriffelStyle, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
+declare type BorderBottomStyle = Pick<GriffelStyle, 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth'>;
 export declare function borderBottom(width: BorderWidthInput): BorderBottomStyle;
+export declare function borderBottom(style: BorderStyleInput): BorderBottomStyle;
 export declare function borderBottom(width: BorderWidthInput, style: BorderStyleInput): BorderBottomStyle;
+export declare function borderBottom(style: BorderStyleInput, width: BorderWidthInput): BorderBottomStyle;
 export declare function borderBottom(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderBottomStyle;
+export declare function borderBottom(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderBottomStyle;
 export {};

src/shorthands/borderLeft.d.ts

@@ -5,4 +5,7 @@ import type { GriffelStyle } from '@griffel/style-types';
 export declare function borderLeft(width: BorderWidthInput): BorderLeftStyle;
+export declare function borderLeft(style: BorderStyleInput): BorderLeftStyle;
 export declare function borderLeft(width: BorderWidthInput, style: BorderStyleInput): BorderLeftStyle;
+export declare function borderLeft(style: BorderStyleInput, width: BorderWidthInput): BorderLeftStyle;
 export declare function borderLeft(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderLeftStyle;
+export declare function borderLeft(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderLeftStyle;
 export {};

src/shorthands/borderRight.d.ts

@@ -5,4 +5,7 @@ import type { GriffelStyle } from '@griffel/style-types';
 export declare function borderRight(width: BorderWidthInput): BorderRightStyle;
+export declare function borderRight(style: BorderStyleInput): BorderRightStyle;
 export declare function borderRight(width: BorderWidthInput, style: BorderStyleInput): BorderRightStyle;
+export declare function borderRight(style: BorderStyleInput, width: BorderWidthInput): BorderRightStyle;
 export declare function borderRight(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderRightStyle;
+export declare function borderRight(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderRightStyle;
 export {};

src/shorthands/borderTop.d.ts

 import type { GriffelStyle } from '@griffel/style-types';
-import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
-declare type BorderTopStyle = Pick<GriffelStyle, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
+import type { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
+declare type BorderTopStyle = Pick<GriffelStyle, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth'>;
 export declare function borderTop(width: BorderWidthInput): BorderTopStyle;
+export declare function borderTop(style: BorderStyleInput): BorderTopStyle;
 export declare function borderTop(width: BorderWidthInput, style: BorderStyleInput): BorderTopStyle;
+export declare function borderTop(style: BorderStyleInput, width: BorderWidthInput): BorderTopStyle;
 export declare function borderTop(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderTopStyle;
+export declare function borderTop(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderTopStyle;
 export {};

src/types.d.ts

@@ -62,2 +62,3 @@ import type { GriffelStyle } from '@griffel/style-types';
     a?: CSSBucketEntry[];
+    s?: CSSBucketEntry[];
     k?: CSSBucketEntry[];
@@ -68,2 +69,3 @@ t?: CSSBucketEntry[];
 };
+export declare type GriffelInsertionFactory = () => (renderer: GriffelRenderer, cssRules: CSSRulesByBucket) => void;
 /** @internal */
@@ -70,0 +72,0 @@ export declare type CSSBucketEntry = string | [string, Record<string, unknown>];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

698940

increased by4.52%

Number of package files

414

increased by6.43%

Lines of code

6558

increased by4.49%

No dependency changes