@vanilla-extract/sprinkles - npm Package Compare versions

Comparing version 0.4.4 to 1.0.0

CHANGELOG.md

 # @vanilla-extract/sprinkles
 
+## 1.0.0
+
+### Major Changes
+
+- [#261](https://github.com/seek-oss/vanilla-extract/pull/261) [`3db8c11`](https://github.com/seek-oss/vanilla-extract/commit/3db8c115ebf17885113de9eae6f794710c217a9c) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release Sprinkles v1
+
+### Minor Changes
+
+- [#259](https://github.com/seek-oss/vanilla-extract/pull/259) [`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of calling `atoms` to be used in selectors
+
+  Sprinkles now uses vanilla-extract’s updated [`composeStyles`](https://github.com/seek-oss/vanilla-extract#composestyles) function internally, which means that atomic styles can be treated as if they were a single class within vanilla-extract selectors.
+
+  ```ts
+  // styles.css.ts
+  import { globalStyle } from '@vanilla-extract/css';
+  import { atoms } from './sprinkles.css.ts';
+
+  export const container = atoms({
+    padding: 'small',
+  });
+
+  globalStyle(`${container} *`, {
+    boxSizing: 'border-box',
+  });
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:
+  - @vanilla-extract/css@1.2.0
+
 ## 0.4.4
@@ -4,0 +35,0 @@

dist/declarations/src/createAtomsFn.d.ts

@@ -25,3 +25,3 @@ import { ResponsiveArrayByMaxLength, ConditionalPropertyValue, AtomicStyles, ConditionalWithResponsiveArrayProperty, ConditionalProperty, ShorthandProperty, UnconditionalProperty } from './types';
 };
-export declare function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(...args: Args): AtomsFn<Args>;
+export declare const createAtomsFn: <Args extends readonly AtomicStyles[]>(composeStyles: (classList: string) => string) => (...args: Args) => AtomsFn<Args>;
 export {};

dist/vanilla-extract-sprinkles.cjs.dev.js

@@ -7,3 +7,3 @@ 'use strict';
 var recipe = require('@vanilla-extract/css/recipe');
-var createAtomsFn_dist_vanillaExtractSprinklesCreateAtomsFn = require('../createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.cjs.dev.js');
+var createAtomsFn$1 = require('./createAtomsFn-80ff2752.cjs.dev.js');
 var createUtils_dist_vanillaExtractSprinklesCreateUtils = require('../createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.dev.js');
@@ -101,5 +101,5 @@
 function createAtomsFn(...config) {
-  const atoms = createAtomsFn_dist_vanillaExtractSprinklesCreateAtomsFn.createAtomsFn(...config);
+  const atoms = createAtomsFn$1.createAtomsFn(css.composeStyles)(...config);
   return recipe.addRecipe(atoms, {
-    importPath: '@vanilla-extract/sprinkles/createAtomsFn',
+    importPath: '@vanilla-extract/sprinkles/createRuntimeAtomsFn',
     importName: 'createAtomsFn',
@@ -106,0 +106,0 @@ args: config

dist/vanilla-extract-sprinkles.cjs.prod.js

@@ -7,3 +7,3 @@ 'use strict';
 var recipe = require('@vanilla-extract/css/recipe');
-var createAtomsFn_dist_vanillaExtractSprinklesCreateAtomsFn = require('../createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.cjs.prod.js');
+var createAtomsFn$1 = require('./createAtomsFn-746320e7.cjs.prod.js');
 var createUtils_dist_vanillaExtractSprinklesCreateUtils = require('../createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.prod.js');
@@ -101,5 +101,5 @@
 function createAtomsFn(...config) {
-  const atoms = createAtomsFn_dist_vanillaExtractSprinklesCreateAtomsFn.createAtomsFn(...config);
+  const atoms = createAtomsFn$1.createAtomsFn(css.composeStyles)(...config);
   return recipe.addRecipe(atoms, {
-    importPath: '@vanilla-extract/sprinkles/createAtomsFn',
+    importPath: '@vanilla-extract/sprinkles/createRuntimeAtomsFn',
     importName: 'createAtomsFn',
@@ -106,0 +106,0 @@ args: config

dist/vanilla-extract-sprinkles.esm.js

@@ -1,4 +0,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, composeStyles } from '@vanilla-extract/css';
 import { addRecipe } from '@vanilla-extract/css/recipe';
-import { createAtomsFn as createAtomsFn$1 } from '../createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.esm.js';
+import { c as createAtomsFn$1 } from './createAtomsFn-9c3ffe50.esm.js';
 export { createMapValueFn, createNormalizeValueFn } from '../createUtils/dist/vanilla-extract-sprinkles-createUtils.esm.js';
@@ -96,5 +96,5 @@
 function createAtomsFn(...config) {
-  const atoms = createAtomsFn$1(...config);
+  const atoms = createAtomsFn$1(composeStyles)(...config);
   return addRecipe(atoms, {
-    importPath: '@vanilla-extract/sprinkles/createAtomsFn',
+    importPath: '@vanilla-extract/sprinkles/createRuntimeAtomsFn',
     importName: 'createAtomsFn',
@@ -101,0 +101,0 @@ args: config

package.json

 {
   "name": "@vanilla-extract/sprinkles",
-  "version": "0.4.4",
+  "version": "1.0.0",
   "description": "Zero-runtime atomic CSS framework for vanilla-extract",
@@ -10,3 +10,3 @@ "sideEffects": false,
     "/dist",
-    "/createAtomsFn",
+    "/createRuntimeAtomsFn",
     "/createUtils"
@@ -17,3 +17,3 @@ ],
       "index.ts",
-      "createAtomsFn.ts",
+      "createRuntimeAtomsFn.ts",
       "createUtils.ts"
@@ -20,0 +20,0 @@ ]

README.md

@@ -181,4 +181,21 @@ # 🍨 Sprinkles
 
-Combine with any custom styles using vanilla-extract’s [`composeStyles`](https://github.com/seek-oss/vanilla-extract#composestyles) function.
+If you want, you can even use your `atoms` function at runtime! 🏃‍♂️
 
+```tsx
+// app.ts
+import { atoms } from './sprinkles.css.ts';
+
+const flexDirection = Math.random() > 0.5 ? 'column' : 'row';
+
+document.write(`
+  <section class="${atoms({ display: 'flex', flexDirection })}">
+    ...
+  </section>
+`);
+```
+
+> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!
+
+Within `.css.ts` files, combine with any custom styles using vanilla-extract’s [`composeStyles`](https://vanilla-extract.style/documentation/styling-api/#composestyles) function.
+
 ```ts
@@ -192,3 +209,3 @@ // styles.css.ts
     display: 'flex',
-    paddingX: 'small'
+    padding: 'small'
   }),
@@ -203,19 +220,18 @@ style({
 
-If you want, you can even use your `atoms` function at runtime! 🏃‍♂️
+Sprinkles uses vanilla-extract’s [`composeStyles`](https://vanilla-extract.style/documentation/styling-api/#composestyles) function internally, which means that atomic styles can be treated as if they were a single class within vanilla-extract selectors.
 
-```tsx
-// app.ts
+```ts
+// styles.css.ts
+import { globalStyle } from '@vanilla-extract/css';
 import { atoms } from './sprinkles.css.ts';
 
-const flexDirection = Math.random() > 0.5 ? 'column' : 'row';
+export const container = atoms({
+  padding: 'small',
+});
 
-document.write(`
-  <section class="${atoms({ display: 'flex', flexDirection })}">
-    ...
-  </section>
-`);
+globalStyle(`${container} *`, {
+  boxSizing: 'border-box'
+});
 ```
 
-> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!
-
 ---
@@ -222,0 +238,0 @@

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75205

increased by3.9%

Number of package files

28

increased by16.67%

Lines of code

1115

increased by1.55%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

681

increased by2.41%

No dependency changes