v3 => v4 migration guide

[danieldelcore]

Nice work shipping v4 🎉

Just wondering if there's a changelog or migration guide i can follow?
Looking at the README.md, i'm not entirely sure how to achieve the same functionality as i was using for v3 🤔

Is it as simple as going from:

 stylis(selector, styles);

to

import {compile, serialize, stringify} from 'stylis'

serialize(compile(`${selector}{${styles}}`), stringify)

[thysultan]

Yes, and if you where using plugins it would be:

serialize(compile(`${selector}{${styles}}`), middleware([...plugins, stringify]))

[tleunen]

What happened to the typings in v4?
in v3: https://unpkg.com/stylis@3.5.4/stylis.d.ts

[danieldelcore]

@tleunen Looks like there’s a PR for TS definitions already :) https://github.com/thysultan/stylis.js/pull/208/files

[danielweck]

note that there are breaking changes, such as :global() not being supported anymore.

[Andarist]

support for :global can be brought back by using namespace plugin

[danielweck]

thank you. is usage documented somewhere?

i am investigating the stylis feature set, with intent to use it via a tagged template string wrapper like csz: https://github.com/lukejacksonn/csz
(ideally, the runtime would be activated at development time only, with production builds benefiting from erasure via a babel transform alike)

i am currently using the csstag library (well, i maintain a fork with a few additional features) which does just that, and relies on postcss plugins for css modules support (composes-with, @value, etc.). adding postcss-nested brings support for sass-like & unwrapping.
https://github.com/sgtpep/csstag

the downside is that the postcss browser runtime is heavy. even though this is at development time only, it is clear that stylis performs much better in that department. however, the stylis feature set is minimalist compared with a full postcss pipeline, so both solutions have their respective merits.

[Andarist]

thank you. is usage documented somewhere?

Nope, I don't believe it is. We'd love some contributions for the improved docs 😉 You can use it like this:

serialize(compile(`${selector}{${styles}}`), middleware([namespace, stringify]))

[eps1lon]

What happened with the plugins especially stylis-rule-sheet. Trying to bump stylis in styled-jsx which also depends on stylis-rule-sheet.

[Andarist]

Its here:
https://github.com/thysultan/stylis.js/blob/9852d33d43057c372c7f375f860b07e9a88dac49/src/Middleware.js#L28

U can check how it can be used in our tests.

[eps1lon]

How far I got:

3.x

const Stylis = require("stylis");
const stylisRuleSheet = require("stylis-rule-sheet");

const stylis = new Stylis();

let splitRules = [];

const splitRulesPlugin = stylisRuleSheet((rule) => {
  splitRules.push(rule);
});

stylis.use(disableNestingPlugin);
stylis.use(sourceMapsPlugin);
stylis.use(splitRulesPlugin);
stylis.set({
  cascade: false,
  compress: true,
});

...

  stylis.set({
    prefix:
      typeof settings.vendorPrefixes === "boolean"
        ? settings.vendorPrefixes
        : true,
  });

  stylis(hash, styles);

4.x

const Stylis = require("stylis");

const splitRulesPlugin = Stylis.rulesheet((rule) => {
  splitRules.push(rule);
});

...

const plugins = [disableNestingPlugin, sourceMapsPlugin];
if (typeof settings.vendorPrefixes !== "boolean" || settings.vendorPrefixes) {
  plugins.push(Stylis.prefixer);
}
plugins.push(Stylis.namespace, Stylis.stringify, splitRulesPlugin);

Stylis.serialize(
  Stylis.compile(`${hash}{${styles}}`),
  Stylis.middleware(plugins)
);

But this still produces different output (namely duplicate classnames e.g. div.jsx-2052294191.jsx-2052294191{color:red;}). I guess it has to do with stylis.set({ compress: true });. I don't know how this would look with 4.x.

Maybe someone finds this helpful. I'll be using 3.x until documentation, changelog and migration guide are added.

[thysultan]

But this still produces different output (namely duplicate classnames e.g...

This is a feature, not a bug, it has to do with maintaining neutral selector specificity. We discussed this some time back on a styled-jsx issue and added this in v4 to solve the issue they where experiencing.

[DanielFrank]

Forgive me. I'm trying to upgrade and am unsure what is the equivalent middleware for the following:

stylis.set({
  global: false,
  cascade: true,
  keyframe: true,
  prefix: true,
  compress: true,
  semicolon: false,
  preserve: false,
});

(I assume prefixer for prefix but can't figure out the rest.)

[thysultan]

use the namespace middleware.

import {namespace} from 'stylis'

serialize(compile('h1{all:unset}'), middleware([namespace, stringify])) 

[DanielFrank]

For anyone who cares, what I ended up doing was:

const {
  compile,
  serialize,
  stringify,
  middleware,
  prefixer,
} = require('stylis');
[...]
const css = serialize(compile(sass), middleware([prefixer, stringify]));

It wasn't a 100% match in my unit-tests (removed spaces in some places; still don't know how to enable no-semicolons support). But it was close enough to the compressed CSS I wanted.