css-in-props 3.6.8 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/transform/executors.js +1 -1
  2. package/dist/cjs/transform/transformers.js +3 -3
  3. package/dist/esm/transform/executors.js +1 -1
  4. package/dist/esm/transform/transformers.js +3 -3
  5. package/dist/iife/index.js +4 -4
  6. package/package.json +4 -4
  7. package/src/transform/executors.js +1 -1
  8. package/src/transform/transformers.js +3 -3
package/dist/cjs/transform/executors.js CHANGED
@@ -44,7 +44,7 @@ const usePropsAsCSS = (sourceObj, element, opts) => {
44
44
  if (key === "class" && element.call("isString", sourceObj.class)) {
45
45
  const val = value.split(" ");
46
46
  if (val.length) {
47
- const CLASS = element.context.designSystem.CLASS;
47
+ const CLASS = element.context.designSystem.class;
48
48
  const result = val.reduce((acc, curr) => (0, import_utils.merge)(acc, CLASS[curr]), {});
49
49
  obj.designSystemClass = result;
50
50
  }
package/dist/cjs/transform/transformers.js CHANGED
@@ -25,8 +25,8 @@ module.exports = __toCommonJS(transformers_exports);
25
25
  var import_executors = require("./executors");
26
26
  const applyMediaProps = (key, selectorProps, element) => {
27
27
  const { context } = element;
28
- if (!context.designSystem?.MEDIA) return;
29
- const mediaValue = context.designSystem.MEDIA[key.slice(1)];
28
+ if (!context.designSystem?.media) return;
29
+ const mediaValue = context.designSystem.media[key.slice(1)];
30
30
  const generatedClass = (0, import_executors.useCssInProps)(selectorProps, element);
31
31
  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
32
32
  return { [mediaKey]: generatedClass };
@@ -39,7 +39,7 @@ const applySelectorProps = (key, selectorProps, element) => {
39
39
  return { [selectorKey]: (0, import_executors.useCssInProps)(selectorProps, element) };
40
40
  };
41
41
  const applyCaseProps = (key, selectorProps, element) => {
42
- const { CASES } = element.context?.designSystem || {};
42
+ const { cases: CASES } = element.context?.designSystem || {};
43
43
  const caseKey = key.slice(1);
44
44
  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
45
45
  if (!isCaseTrue) return;
package/dist/esm/transform/executors.js CHANGED
@@ -18,7 +18,7 @@ const usePropsAsCSS = (sourceObj, element, opts) => {
18
18
  if (key === "class" && element.call("isString", sourceObj.class)) {
19
19
  const val = value.split(" ");
20
20
  if (val.length) {
21
- const CLASS = element.context.designSystem.CLASS;
21
+ const CLASS = element.context.designSystem.class;
22
22
  const result = val.reduce((acc, curr) => merge(acc, CLASS[curr]), {});
23
23
  obj.designSystemClass = result;
24
24
  }
package/dist/esm/transform/transformers.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { useCssInProps } from "./executors";
2
2
  const applyMediaProps = (key, selectorProps, element) => {
3
3
  const { context } = element;
4
- if (!context.designSystem?.MEDIA) return;
5
- const mediaValue = context.designSystem.MEDIA[key.slice(1)];
4
+ if (!context.designSystem?.media) return;
5
+ const mediaValue = context.designSystem.media[key.slice(1)];
6
6
  const generatedClass = useCssInProps(selectorProps, element);
7
7
  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
8
8
  return { [mediaKey]: generatedClass };
@@ -15,7 +15,7 @@ const applySelectorProps = (key, selectorProps, element) => {
15
15
  return { [selectorKey]: useCssInProps(selectorProps, element) };
16
16
  };
17
17
  const applyCaseProps = (key, selectorProps, element) => {
18
- const { CASES } = element.context?.designSystem || {};
18
+ const { cases: CASES } = element.context?.designSystem || {};
19
19
  const caseKey = key.slice(1);
20
20
  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
21
21
  if (!isCaseTrue) return;
package/dist/iife/index.js CHANGED
@@ -890,8 +890,8 @@ var CssInProps = (() => {
890
890
  // src/transform/transformers.js
891
891
  var applyMediaProps = (key, selectorProps, element) => {
892
892
  const { context } = element;
893
- if (!context.designSystem?.MEDIA) return;
894
- const mediaValue = context.designSystem.MEDIA[key.slice(1)];
893
+ if (!context.designSystem?.media) return;
894
+ const mediaValue = context.designSystem.media[key.slice(1)];
895
895
  const generatedClass = useCssInProps(selectorProps, element);
896
896
  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
897
897
  return { [mediaKey]: generatedClass };
@@ -904,7 +904,7 @@ var CssInProps = (() => {
904
904
  return { [selectorKey]: useCssInProps(selectorProps, element) };
905
905
  };
906
906
  var applyCaseProps = (key, selectorProps, element) => {
907
- const { CASES } = element.context?.designSystem || {};
907
+ const { cases: CASES } = element.context?.designSystem || {};
908
908
  const caseKey = key.slice(1);
909
909
  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
910
910
  if (!isCaseTrue) return;
@@ -962,7 +962,7 @@ var CssInProps = (() => {
962
962
  if (key === "class" && element.call("isString", sourceObj.class)) {
963
963
  const val = value.split(" ");
964
964
  if (val.length) {
965
- const CLASS = element.context.designSystem.CLASS;
965
+ const CLASS = element.context.designSystem.class;
966
966
  const result = val.reduce((acc, curr) => (0, import_utils5.merge)(acc, CLASS[curr]), {});
967
967
  obj.designSystemClass = result;
968
968
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "css-in-props",
3
3
  "description": "Utilize props as CSS methods",
4
4
  "author": "symbo.ls",
5
- "version": "3.6.8",
5
+ "version": "3.7.0",
6
6
  "repository": "https://github.com/symbo-ls/smbls",
7
7
  "type": "module",
8
8
  "module": "./dist/esm/index.js",
@@ -35,9 +35,9 @@
35
35
  "src"
36
36
  ],
37
37
  "dependencies": {
38
- "@domql/utils": "^3.6.8",
39
- "@symbo.ls/emotion": "^3.6.8",
40
- "@symbo.ls/scratch": "^3.6.8"
38
+ "@domql/utils": "^3.7.0",
39
+ "@symbo.ls/emotion": "^3.7.0",
40
+ "@symbo.ls/scratch": "^3.7.0"
41
41
  },
42
42
  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
43
43
  "browser": "./dist/esm/index.js",
package/src/transform/executors.js CHANGED
@@ -30,7 +30,7 @@ export const usePropsAsCSS = (sourceObj, element, opts) => {
30
30
  if (key === 'class' && element.call('isString', sourceObj.class)) {
31
31
  const val = value.split(' ')
32
32
  if (val.length) {
33
- const CLASS = element.context.designSystem.CLASS
33
+ const CLASS = element.context.designSystem.class
34
34
  const result = val
35
35
  .reduce((acc, curr) => merge(acc, CLASS[curr]), {})
36
36
  obj.designSystemClass = result
package/src/transform/transformers.js CHANGED
@@ -10,9 +10,9 @@ import { useCssInProps } from './executors'
10
10
  // Media query handler
11
11
  const applyMediaProps = (key, selectorProps, element) => {
12
12
  const { context } = element
13
- if (!context.designSystem?.MEDIA) return
13
+ if (!context.designSystem?.media) return
14
14
 
15
- const mediaValue = context.designSystem.MEDIA[key.slice(1)]
15
+ const mediaValue = context.designSystem.media[key.slice(1)]
16
16
  const generatedClass = useCssInProps(selectorProps, element)
17
17
 
18
18
  const mediaKey = mediaValue
@@ -34,7 +34,7 @@ const applySelectorProps = (key, selectorProps, element) => {
34
34
 
35
35
  // Conditional applicators
36
36
  const applyCaseProps = (key, selectorProps, element) => {
37
- const { CASES } = element.context?.designSystem || {}
37
+ const { cases: CASES } = element.context?.designSystem || {}
38
38
  const caseKey = key.slice(1)
39
39
  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey]
40
40
  if (!isCaseTrue) return