v0.2.0

• In dev mode, the classes in the markup will now contain the name of the original variable if available. These classes are unused in the CSS but will make it easier to find the right element in browser dev tools.

   // input
   const Button = () => <button class={button}>hi</button>
   const button = css`
     display: grid;
     place-items: center;
   `;

   // output
   <button class="🎈-button 🎈-rvaw9y">hi</button>

   /* output */
   .🎈-rvaw9y {
     display: grid;
     place-items: center;
   }

• Improved compatibility with npm packages when evaluating expressions. ESM packages should now work out of the box instead of requiring to be passed to resolvePackages.

v0.1.8

Added automatic vendor-prefixing of properties for the last 2 major versions of Chrome/Firefox/Safari. This ensures that instead of bloating up your CSS file with unnecessary prefixes that you may not want, only the most needed vendor prefixes (e.g. -webkit-mask/-webkit-backdrop-filter/-webkit-background-clip) are added. This should also be future-proof, provided you periodically update caniuse-lite (used by autoprefixer).

You should probably still do your own vendor-prefixing through your vite config, but this will serve as a nice safeguard in case you don't.

v0.1.6

Evaluation of expressions inside tagged template literals has been improved and made more resilient.

Previously, if a file imported non-JS extensions (e.g. import imgUrl from './photo.png'), then evaluating any expressions inside tagged template literals in the same file would cause ecsstatic to error. Whereas now, these non-JS imports will be ignored.

This does mean they cannot be used inside template strings. There are cases where passing asset urls into CSS can be handy. Fortunately, vite will automatically resolve urls used inside CSS url() functions. If this doesn't work for some reason, you can also move those assets to the public/ folder so that they get a static url and can be referenced without the need for transformation.

const foo = css`
  background-image: url(/photo.png);
`

v0.1.1

Fixed an issue with nesting where class names in the generated css didn't have . front of them.

The correct syntax for nesting is:

const wrapper = css`
  display: grid;
`;
const button = css`
  /* notice how there is no need to add . manually */
  ${wrapper} & {
    place-self: center;
  }
`;

The above code will generate the following css:

.🎈-1d7rma {
  display: grid;
}
:where(.🎈-1d7rma) .🎈-runuvf {
  place-self: center
}

(the :where pseudo-class is used to keep specificity flat)

v0.1.0

Initial release: ecsstatic is now considered stable enough for general use 🎈