simplestyle-js 3.4.2-alpha.2 → 3.4.2-alpha.3

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 (3) hide show
  1. package/dist/cjs/createStyles.cjs +10 -10
  2. package/dist/esm/createStyles.mjs +10 -10
  3. package/package.json +1 -1
package/dist/cjs/createStyles.cjs CHANGED
@@ -42,7 +42,7 @@ function formatCSSRuleName(rule) {
42
42
  function formatCSSRules(cssRules) {
43
43
  return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
44
44
  }
45
- function execCreateStyles(rules, options, parentSelector, noGenerateClassName = false) {
45
+ function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
46
46
  const out = {};
47
47
  let sheetBuffer = '';
48
48
  let mediaQueriesBuffer = '';
@@ -58,7 +58,7 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
58
58
  if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
59
59
  guardCloseRuleWrite();
60
60
  mediaQueriesBuffer += `${classNameOrCSSRule}{`;
61
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, parentSelector);
61
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector);
62
62
  mediaQueriesBuffer += regularOutput;
63
63
  mediaQueriesBuffer += '}';
64
64
  mediaQueriesBuffer += mediaQueriesOutput;
@@ -68,17 +68,17 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
68
68
  // format of { '& > span': { display: 'none' } } (or further nesting)
69
69
  const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
70
70
  for (const selector of replaced.split(/,\s*/)){
71
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, selector);
71
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector);
72
72
  sheetBuffer += regularOutput;
73
73
  mediaQueriesBuffer += mediaQueriesOutput;
74
74
  }
75
75
  } else if (!parentSelector && typeof classNameRules === 'object') {
76
76
  guardCloseRuleWrite();
77
- const generated = noGenerateClassName ? classNameOrCSSRule : (0, _generateClassName.generateClassName)(classNameOrCSSRule);
77
+ const generated = noGenerateClassName ? classNameOrCSSRule : (0, _generateClassName.generateClassName)(`${ruleId}_${classNameOrCSSRule}`);
78
78
  // @ts-expect-error - yes, we can index this object here, so be quiet
79
79
  out[classNameOrCSSRule] = generated;
80
80
  const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
81
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, generatedSelector);
81
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector);
82
82
  sheetBuffer += regularOutput;
83
83
  mediaQueriesBuffer += mediaQueriesOutput;
84
84
  } else {
@@ -146,15 +146,15 @@ function coerceCreateStylesOptions(options) {
146
146
  }
147
147
  function rawStyles(ruleId, rules, options) {
148
148
  const coerced = coerceCreateStylesOptions(options);
149
- const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null, true);
149
+ const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
150
150
  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
151
151
  if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
152
152
  return mergedContents;
153
153
  }
154
154
  function keyframes(ruleId, frames, options) {
155
155
  const coerced = coerceCreateStylesOptions(options);
156
- const keyframeName = (0, _generateClassName.generateClassName)('keyframes_');
157
- const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
156
+ const keyframeName = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes_`);
157
+ const { sheetBuffer: keyframesContents } = execCreateStyles(ruleId, frames, coerced, null, true);
158
158
  const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
159
159
  if (coerced.flush) flushSheetContents(ruleId, sheetContents);
160
160
  return [
@@ -171,7 +171,7 @@ function makeCreateStyle(registry) {
171
171
  }
172
172
  function createStyles(ruleId, rules, options) {
173
173
  const coerced = coerceCreateStylesOptions(options);
174
- const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
174
+ const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
175
175
  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
176
176
  const replacedSheetContents = replaceBackReferences(out, mergedContents);
177
177
  let sheet = null;
@@ -179,7 +179,7 @@ function createStyles(ruleId, rules, options) {
179
179
  const updateSheet = (updatedRules)=>{
180
180
  if ((options?.flush || options?.registry) && sheet || !options?.flush) {
181
181
  // We prefer the first set, and then we shallow merge
182
- const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles((0, _deepmerge.default)(rules, updatedRules), {
182
+ const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, (0, _deepmerge.default)(rules, updatedRules), {
183
183
  flush: false
184
184
  }, null);
185
185
  const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
package/dist/esm/createStyles.mjs CHANGED
@@ -13,7 +13,7 @@ function formatCSSRuleName(rule) {
13
13
  function formatCSSRules(cssRules) {
14
14
  return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
15
15
  }
16
- function execCreateStyles(rules, options, parentSelector, noGenerateClassName = false) {
16
+ function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
17
17
  const out = {};
18
18
  let sheetBuffer = '';
19
19
  let mediaQueriesBuffer = '';
@@ -29,7 +29,7 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
29
29
  if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
30
30
  guardCloseRuleWrite();
31
31
  mediaQueriesBuffer += `${classNameOrCSSRule}{`;
32
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, parentSelector);
32
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector);
33
33
  mediaQueriesBuffer += regularOutput;
34
34
  mediaQueriesBuffer += '}';
35
35
  mediaQueriesBuffer += mediaQueriesOutput;
@@ -39,17 +39,17 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
39
39
  // format of { '& > span': { display: 'none' } } (or further nesting)
40
40
  const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
41
41
  for (const selector of replaced.split(/,\s*/)){
42
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, selector);
42
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector);
43
43
  sheetBuffer += regularOutput;
44
44
  mediaQueriesBuffer += mediaQueriesOutput;
45
45
  }
46
46
  } else if (!parentSelector && typeof classNameRules === 'object') {
47
47
  guardCloseRuleWrite();
48
- const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);
48
+ const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(`${ruleId}_${classNameOrCSSRule}`);
49
49
  // @ts-expect-error - yes, we can index this object here, so be quiet
50
50
  out[classNameOrCSSRule] = generated;
51
51
  const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
52
- const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, generatedSelector);
52
+ const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector);
53
53
  sheetBuffer += regularOutput;
54
54
  mediaQueriesBuffer += mediaQueriesOutput;
55
55
  } else {
@@ -118,15 +118,15 @@ function coerceCreateStylesOptions(options) {
118
118
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
119
119
  export function rawStyles(ruleId, rules, options) {
120
120
  const coerced = coerceCreateStylesOptions(options);
121
- const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null, true);
121
+ const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
122
122
  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
123
123
  if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
124
124
  return mergedContents;
125
125
  }
126
126
  export function keyframes(ruleId, frames, options) {
127
127
  const coerced = coerceCreateStylesOptions(options);
128
- const keyframeName = generateClassName('keyframes_');
129
- const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
128
+ const keyframeName = generateClassName(`${ruleId}_keyframes_`);
129
+ const { sheetBuffer: keyframesContents } = execCreateStyles(ruleId, frames, coerced, null, true);
130
130
  const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
131
131
  if (coerced.flush) flushSheetContents(ruleId, sheetContents);
132
132
  return [
@@ -143,7 +143,7 @@ export function makeCreateStyle(registry) {
143
143
  }
144
144
  export default function createStyles(ruleId, rules, options) {
145
145
  const coerced = coerceCreateStylesOptions(options);
146
- const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
146
+ const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
147
147
  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
148
148
  const replacedSheetContents = replaceBackReferences(out, mergedContents);
149
149
  let sheet = null;
@@ -151,7 +151,7 @@ export default function createStyles(ruleId, rules, options) {
151
151
  const updateSheet = (updatedRules)=>{
152
152
  if ((options?.flush || options?.registry) && sheet || !options?.flush) {
153
153
  // We prefer the first set, and then we shallow merge
154
- const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(merge(rules, updatedRules), {
154
+ const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, merge(rules, updatedRules), {
155
155
  flush: false
156
156
  }, null);
157
157
  const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "simplestyle-js",
3
- "version": "3.4.2-alpha.2",
3
+ "version": "3.4.2-alpha.3",
4
4
  "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
5
5
  "type": "module",
6
6
  "repository": {