no styles applied to Preact app

[orzechowskid]

Environment

node.js v16.10.0 npm 7.24.0 @linaria/core 3.0.0-beta.15 @linaria/react 3.0.0-beta.15 preact-cli 3.3.5

Description

following the documentation at https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#preact , I ran into a couple of problems.

• problem no.1 was a unresolved dependency @linaria/shaker .

this appeared when attempting to start a dev server with npm run dev. it was easily solved via npm install.

• problem no.2 was that styles created by linaria do not appear on my components, though the styles created by CSS Module files do appear.

styled elements have classnames like .c1qu2euk but stylesheets contain selectors like .c1qu2euk__Oj3Ly (i.e. something which seems related but is definitely different). this happens in both the dev server launched via npm run dev and in static assets created via npm run build.

I have been unable to solve the second problem. I tried setting classNameSlug in linaria.config.js , which did indeed change the slug but did not change the mismatch between class names and CSS selectors.

Reproducible Demo

1. clone the repo at https://github.com/orzechowskid/linaria-preact.git
2. npm install
3. npm run dev
4. browse to http://localhost:8080

the homepage (src/routes/home/index.js) should render a <div> styled with css and a <p> styled with styled. inspecting these elements in your browser's dev tools should make the problem visible.

[orzechowskid]

FWIW I also see the missing-styles issue with linaria 2.x latest using linaria/react, linaria/babel, and linaria/loader.