css-in-props 3.8.6 → 3.8.8

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 (5) hide show
  1. package/dist/cjs/transform/transformers.js +10 -1
  2. package/dist/esm/transform/transformers.js +10 -1
  3. package/dist/iife/index.js +10 -1
  4. package/package.json +4 -4
  5. package/src/transform/transformers.js +11 -3
package/dist/cjs/transform/transformers.js CHANGED
@@ -29,7 +29,16 @@ const applyMediaProps = (key, selectorProps, element) => {
29
29
  if (!context.designSystem?.media) return;
30
30
  const mediaValue = context.designSystem.media[key.slice(1)];
31
31
  const generatedClass = (0, import_executors.useCssInProps)(selectorProps, element);
32
- const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
32
+ let mediaKey;
33
+ if (!mediaValue) {
34
+ mediaKey = key;
35
+ } else if (mediaValue === "print") {
36
+ mediaKey = "@media print";
37
+ } else if (mediaValue[0] === "(") {
38
+ mediaKey = `@media screen and ${mediaValue}`;
39
+ } else {
40
+ mediaKey = `${mediaValue} &`;
41
+ }
33
42
  return { [mediaKey]: generatedClass };
34
43
  };
35
44
  const applyAndProps = (key, selectorProps, element) => {
package/dist/esm/transform/transformers.js CHANGED
@@ -5,7 +5,16 @@ const applyMediaProps = (key, selectorProps, element) => {
5
5
  if (!context.designSystem?.media) return;
6
6
  const mediaValue = context.designSystem.media[key.slice(1)];
7
7
  const generatedClass = useCssInProps(selectorProps, element);
8
- const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
8
+ let mediaKey;
9
+ if (!mediaValue) {
10
+ mediaKey = key;
11
+ } else if (mediaValue === "print") {
12
+ mediaKey = "@media print";
13
+ } else if (mediaValue[0] === "(") {
14
+ mediaKey = `@media screen and ${mediaValue}`;
15
+ } else {
16
+ mediaKey = `${mediaValue} &`;
17
+ }
9
18
  return { [mediaKey]: generatedClass };
10
19
  };
11
20
  const applyAndProps = (key, selectorProps, element) => {
package/dist/iife/index.js CHANGED
@@ -900,7 +900,16 @@ var CssInProps = (() => {
900
900
  if (!context.designSystem?.media) return;
901
901
  const mediaValue = context.designSystem.media[key.slice(1)];
902
902
  const generatedClass = useCssInProps(selectorProps, element);
903
- const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
903
+ let mediaKey;
904
+ if (!mediaValue) {
905
+ mediaKey = key;
906
+ } else if (mediaValue === "print") {
907
+ mediaKey = "@media print";
908
+ } else if (mediaValue[0] === "(") {
909
+ mediaKey = `@media screen and ${mediaValue}`;
910
+ } else {
911
+ mediaKey = `${mediaValue} &`;
912
+ }
904
913
  return { [mediaKey]: generatedClass };
905
914
  };
906
915
  var applyAndProps = (key, selectorProps, element) => {
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.8.6",
5
+ "version": "3.8.8",
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.8.6",
39
- "@symbo.ls/emotion": "^3.8.6",
40
- "@symbo.ls/scratch": "^3.8.6"
38
+ "@domql/utils": "^3.8.8",
39
+ "@symbo.ls/emotion": "^3.8.8",
40
+ "@symbo.ls/scratch": "^3.8.8"
41
41
  },
42
42
  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
43
43
  "browser": "./dist/esm/index.js",
package/src/transform/transformers.js CHANGED
@@ -16,9 +16,17 @@ const applyMediaProps = (key, selectorProps, element) => {
16
16
  const mediaValue = context.designSystem.media[key.slice(1)]
17
17
  const generatedClass = useCssInProps(selectorProps, element)
18
18
 
19
- const mediaKey = mediaValue
20
- ? '@media ' + (mediaValue === 'print' ? mediaValue : `screen and ${mediaValue}`)
21
- : key
19
+ let mediaKey
20
+ if (!mediaValue) {
21
+ mediaKey = key
22
+ } else if (mediaValue === 'print') {
23
+ mediaKey = '@media print'
24
+ } else if (mediaValue[0] === '(') {
25
+ mediaKey = `@media screen and ${mediaValue}`
26
+ } else {
27
+ // CSS selector (e.g. [data-theme="dark"]) — use as parent selector
28
+ mediaKey = `${mediaValue} &`
29
+ }
22
30
 
23
31
  return { [mediaKey]: generatedClass }
24
32
  }