styleq - npm Package Compare versions

Comparing version 0.0.0-9b91201 to 0.0.0-afc6b2c59

package.json

 {
-  "version": "0.0.0-9b91201",
+  "version": "0.0.0-afc6b2c59",
   "name": "styleq",
   "main": "styleq.js",
   "module": "dist/styleq.js",
+  "sideEffects": false,
   "license": "MIT",
@@ -10,2 +11,7 @@ "description": "A quick JavaScript runtime for Atomic CSS compilers.",
   "author": "Nicolas Gallagher",
+  "files": [
+    "dist",
+    "*.js",
+    "*.ts"
+  ],
   "scripts": {
@@ -38,2 +44,5 @@ "benchmark": "node test/benchmark.node.js",
   "jest": {
+    "snapshotFormat": {
+      "printBasicPrototype": false
+    },
     "transform": {
@@ -40,0 +49,0 @@ "\\.js$": [

README.md

 # styleQ · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/necolas/styleq/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/styleq.svg?style=flat)](https://www.npmjs.com/package/styleq) [![Build Status](https://github.com/necolas/styleq/workflows/tests/badge.svg)](https://github.com/necolas/styleq/actions) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/necolas/styleq/blob/master/.github/CONTRIBUTING.md)
 
-**styleQ** is a quick, small JavaScript runtime for merging the HTML class names produced by Atomic CSS compilers.
+**styleQ** is a quick, small JavaScript runtime for merging the HTML class names produced by CSS compilers.
 
@@ -92,5 +92,5 @@ * High performance merging for initial render.
 
-**Inline styles are merged together with static styles by default**, but can be merged independently if preferred. Both static and inline styles can be passed to `styleq` for merging. By default, the properties defined by static and inline styles are merged together. The performance of this option is still excellent, but merging with inline styles often means memoization cannot be used as effectively. In certain circumstances, this merging strategy can actually result in better performance, as the deduplication of styles can reduce the number of CSS rules applied to the element (which improves browser layout times).
+**Inline styles are merged together with static styles by default**, but can be merged independently if preferred. Both static and inline styles can be passed to `styleq` for merging. By default, the properties defined by static and inline styles are merged together. The performance of this option is still excellent, but merging with inline styles often means memoization cannot be used as effectively. In certain circumstances, this merging strategy can result in better performance, as the deduplication of styles can reduce the number of CSS rules applied to the element (which improves browser layout times).
 
-If mixing is diabled, the static and inline styles will be treated as values for different attributes: either `className` OR `style` respectively. If an inline style sets a property that is later set by a static style, *both* the static class name and dynamic style property will be set. In practice this means that inline style declarations override those of static styles, whatever their position in the styles array passed to `styleq`. This means that memoization of class name merges is not precluded by inline styles, and thus provide the best general performance.
+If mixing is diabled, the static and inline styles will be treated as values for different attributes: either `className` OR `style` respectively. If an inline style sets a property that is later set by a static style, *both* the static class name and dynamic style property will be set. In practice this means that inline style declarations override those of static styles, whatever their position in the styles array passed to `styleq`. Therefore, memoization of class name merges is not changed by inline styles, and so provides the best general performance.
 
@@ -134,7 +134,7 @@ ```js
 
-WARNING: Transforming compiled styles to support runtime dynamism while retaining excellent performance is possible, however, transforms must be done carefully to avoid creating merge operations that cannot be efficiently memoized. `WeakMap` is recommneded for memoizing the result of transforms, so that static objects are passed to styleq.
+WARNING: Transforming compiled styles to support runtime dynamism is possible without negatively effecting performance, however, transforms must be done carefully to avoid creating merge operations that cannot be efficiently memoized. `WeakMap` is recommended for memoizing the result of transforms, so that static objects are passed to styleq.
 
 ## Notes for compiler authors
 
-Atomic CSS compilers implementing different styling models can all target styleQ to deliver excellent runtime performance. styleQ can be used at build time and runtime (for server and client) to generate `className` and `style` values.
+CSS compilers implementing different styling models can all target styleQ to deliver excellent runtime performance. styleQ can be used at build time and runtime (for server and client) to generate `className` and `style` values.
 
@@ -153,3 +153,3 @@ Examples of how various compiler features and designs can supported with styleQ are discussed below.
 
-Zero-conflict styles provide developers with guarantees that component style is encapsulated and not impacted by styles defined by other components. A compiler designed around zero-conflict styles will produce smaller CSS style sheets that avoid all specificity and source order conflicts.
+Zero-conflict styles provide developers with guarantees that component style is encapsulated and not implicitly altered by styles defined by other components. A compiler designed around zero-conflict styles will generally output "atomic CSS" and produce smaller CSS style sheets that avoid all specificity and source order conflicts.
 
@@ -236,3 +236,3 @@ Typically, a zero-conflict design involves excluding support for descendant selectors (i.e., any selector that targets an element other than the element receiving the class name). And shortform properties are either disallowed, restricted, or automatically expanded to longform properties. If pseudo-classes (e.g., `:focus`) are supported, the compiler must guarantee the order of precedence between pseudo-classes in the CSS style sheet (e.g., `:focus` rules appear before `:active` rules). If Media Queries are supported, they too must be carefully ordered.
 
-Atomic CSS has tradeoffs. Once an element has many HTML class names each pointing to different CSS rules, browser layout times slow down. In some cases, compilers may choose to flatten multiple declarations into "traditional" CSS. For example, a component library may optimize the "reset" styles for its core components by flattening those styles, and then inserting those rules in the CSS style sheet before all the atomic CSS. In this case, the Atomic CSS will always override the reset rule but the layout performance of the core components will be significant improved.
+Atomic CSS has tradeoffs. Once an element has many HTML class names each pointing to different CSS rules, browser layout times slow down. In some cases, compilers may choose to flatten multiple declarations into "traditional" CSS. For example, a component library may optimize the "reset" styles for its core components by flattening those styles, and then inserting those rules into the CSS style sheet before all the atomic CSS. That way atomic CSS will always override the reset rules, and the layout performance of the core components will be significantly improved.
 
@@ -250,3 +250,3 @@ Input:
 
-const reset = creacreateResetStyleteStyles({
+const reset = createResetStyle({
   display: 'flex',
@@ -268,3 +268,3 @@ alignItems: 'stretch',
 function View(props) {
-  const [ className, inlineStyle ] = styleq(styles.$reset, props.css);
+  const [ className, inlineStyle ] = styleq(reset, props.css);
   return (
@@ -285,3 +285,3 @@ <div {...props} className={className} style={inlineStyle} />
 
-A compiler may provide a single API for defining static and dynamic values, and  maximize the number of compiled styles by replacing dyanmic values with unique CSS custom properties that are then set by inline styles. This compiler design decouples static and inline property merges, and makes the best use of runtime memoization.
+A compiler may provide a single API for defining static and dynamic values, and  maximize the number of compiled styles by replacing dynamic values with unique CSS custom properties that are then set by inline styles. This compiler design decouples static and inline property merges, and makes the best use of runtime memoization.
 
@@ -329,5 +329,8 @@ Input:
   const [ className, style ] = customStyleq(
+    // The dynamic value is set to the custom property.
+    // With static/dynamic mixing disabled, the position of the inline style
+    // is irrelevant. However, with mixing enabled, the best performance is
+    // achieved by placing inline styles earlier in the queue.
+    { '--opacity-xyz': props.opacity },
     compiledStyle,
-    // The dynamic value is set to the custom property
-    { '--opacity-xyz': props.opacity },
     props.css
@@ -349,3 +352,3 @@ );
 
-Compilers implementing themes using CSS custom properties should avoid creating Atomic CSS rules for each theme property. As mentioned above, this can slow down browser layout and flattening theme styles into a single rule is preferred. Theme classes can be deduplicated by using the same key for all themes in the generated style object.
+Compilers implementing themes via CSS custom properties should avoid creating atomic CSS rules for each theme property. As mentioned above, this can slow down browser layout and flattening theme styles into a single rule is preferred. Theme classes can be deduplicated by using the same key for all themes in the generated style object.
 
@@ -389,3 +392,3 @@ Input:
   $$css: true,
-  '@@theme': 'theme-default'
+  $$theme: 'theme-default'
 };
@@ -398,3 +401,3 @@
 
-A compiler might provide a polyfill for [CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) that don't have wide enough native browser support. Using the `transform` option is one way to implement this functionality.
+A compiler might provide a polyfill for [CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). Using the `transform` option is one way to implement this functionality.
 
@@ -401,0 +404,0 @@ Input:

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

493

increased by0.61%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

27656

decreased by-46.38%

Number of package files

9

decreased by-50%

Lines of code

230

decreased by-69.74%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes