Releases: mayank99/ecsstatic
v0.8.0
v0.7.0
- Added support for global (unscoped) styles though the new
createGlobalStylefunction. This should only be used when it's not possible to use a .css/.scss file, such as when interpolating JS expressions.import { createGlobalStyle } from '@acab/ecsstatic'; createGlobalStyle` :root { --foo: ${1 + 1}; } `;
- Moved the
scssfunction from root into a subpath/scssand renamed it tocss. This will result in out-of-the-box support for syntax highlighting without resorting to any renaming hacks,- import { scss as css } from '@acab/ecsstatic'; + import { css } from '@acab/ecsstatic/scss';
- Fixed an issue where styles were left behind in
<head>after HMR - Bumped deps
Full Changelog: v0.6.1...v0.7.0
v0.6.1
v0.6.0
postcss-nesting is now more strictly following the CSS nesting spec, which means certain syntaxes would break. To work around this, ecsstatic will run postcss-nested after postcss-nesting, thus allowing these nonconformant syntaxes to continue to work like they would in Sass.
const foo = css`
animation: blinky 2s;
/* nesting elements like this is not allowed in the spec, but will work in ecsstatic */
span {
color: hotpink;
}
/* same with @keyframes and @font-face */
@keyframes blinky {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
`;This behavior should be more predictable during the transition period, as official nesting starts making its way into all browsers and developers start getting used to it.
For more details, see #12
v0.5.1
v0.5.0
Replaced postcss-nested with postcss-nesting which follows the recently reworked specification. This should fix issues with nesting newer rules like @container.
This only affects the css function, as scss has its own version of nesting.
v0.4.0
Added the ability to automatically optimize the prod build into atomic/utility classes, where one class maps to one declaration. This can potentially result in a smaller CSS file, at the cost increasing the HTML size. Dev build is unaffected, for a better debugging experience.
To enable this optimization, use the experimental marqueeMode flag.
export default defineConfig({
plugins: [ecsstatic({ marqueeMode: true })],
});This mode is only recommended for very large sites where the size of the CSS would be legitimately be a concern, and even then, it is highly recommended to do your own measurements with and without this flag to see if it actually makes a meaningful impact.
For more details, see #6
v0.3.1
v0.3.0
This release includes two new experimental features 🎈
- New
classNamePrefixoption to allow customizing the prefix for hashed class names. - Support for using css in .astro files (frontmatter only).
That means you can now do this in your config:
plugins: [ecsstatic({ classNamePrefix: 'poop' })]and use it in an astro file:
---
import { css } from '@acab/ecsstatic';
const heading = css`
color: hotpink;
`;
---
<h1 class={heading}>Hello</h1>which will output:
<h1 class='poop-1bh9win'>Hello</h1>.poop-1bh9win {
color: hotpink;
}While this in itself is not very useful (because astro already has scoped styles), a more interesting use case is when you need to import styles already defined in a different .ts/.js file.
---
import { heading } from '../shared/styles.js';
---
<h1 class={heading}>Hello</h1>Also, there is one breaking change: the evaluateExpressions option has been removed. This hopefully shouldn't affect anyone because its default value was true, and it had no effect when the template strings didn't contain interpolated expressions.
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.