mistereo / next-linaria Goto Github PK

Hi @Mistereo ,

Thank you for this package!

Do you plan on supporting version 3 of Linaria (currently in beta)?
It splits Linaria into different packages (@linaria/webpack-loader, etc.).

From the Linaria docs the installation process seems the same, except the different naming, so in next-linaria I tried replacing this:

            loader: require.resolve('linaria/loader'),

With this:

            loader: '@linaria/webpack-loader',

But got some weird errors.

Anyway, I still got it to work with the previous version. Thanks.

Hi @Mistereo,

when using the built-in css-modules from next.js together with next-linaria the css-modules classnames are stripped away from the final html. (e.g. import styles from "../styles/some.module.css and then use it like className={styles.someClassname}) This was working ok with version 0.10.

Affected Version: 0.11 and 1.0.1-beta

I tracked the problem down to the rules that were added in 0.11 specifically
rule.options.modules.exportOnlyLocals = false
seems to be the problem.

I'm using monorepo from nx js, linaria styles dont work.

Nothing special, just run example of Nextjs and get this warning babel.
[BABEL] Note: The code generator has deoptimised the styling of D:\Nodejs\next.js-canary\examples\with-tailwindcss\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.

If I remove next-linaria from next.config.js, everything will be ok.

👋 thanks for creating this valuable plugin, I wonder if you can tag commits for the recent releases and potentially make some release notes so that it is easy to navigate the changes? Thanks!

next.config.js

const withLinaria = require('next-linaria')

module.exports = withLinaria({})

Hi there! 🙂
I'm getting TS issues when using export default withLinaria(nextConfig)

It only occurs when I change from export default nextConfig to export default withLinaria(nextConfig)
The error doesn't occur using a different config wrapper like export default WithNextMDX(nextConfig)
So I believe this is an issue with next-linaria.

Repo - https://github.com/AshConnolly/linaria-bug
codesandbox of repo - https://codesandbox.io/p/github/AshConnolly/linaria-bug/master

Any ideas on how to solve this?

Error:
Warning: Prop className did not match. Server: "" Client: "Typography_Typography__ZuFWQ Typography_Typography_Style_TextM__4q3nY"

And elements that used Sass are not styled.

Typography is using Sass only, without linaria. But if i remove "withLinaria" from next.config, sass works good.

Env:

"next": "^12.1.1",
"next-transpile-modules": "^9.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"linaria": "^2.3.1",
"next-linaria": "0.11.0",

Next.config:

/** @type {import('next').NextConfig} */
const path = require('path');
const withTM = require('next-transpile-modules')(["cdc-ui"]); // pass the modules you would like to see transpiled
const withLinaria = require('next-linaria');

const IS_DEV = process.env.NODE_ENV === 'development';

const nextConfig = withLinaria(withTM({
	sassOptions: {
		includePaths: [path.join(__dirname, 'styles')],
	},
	linaria:{
		displayName: IS_DEV,
	},
	reactStrictMode: true,
	poweredByHeader: false,
	generateEtags: false,
	distDir: 'build',
	maxInactiveAge: 25 * 1000,
	trailingSlash: true,
	swcMinify: false,
	productionBrowserSourceMaps: true,
}));

module.exports = nextConfig;

Doing so produces this error:
An unexpected runtime error ocurred during dependencies evaluation: Error: Cannot find module '@babel/preset-env'

You can reproduce this error in the stackblitz implementation of the documentation on this repo like this:

Hi,

Thanks for this great package. 🎉 This has been working well with next.js 11 and 12. But when I migrate the project to next.js 13 with app folder, styles are missing. There aren't style tags inserted into head.

See this vercel/next.js#41745

Something like this within a component:

const globals = css`
  :global() {
    html {
      font-size: large;
    }
  }
`;
errors with:

Error: Syntax error: Selector "html" is not pure (pure selectors must contain at least one local class or id)

It works okay if it's in an `_app.tsx` file.

Known issue in https://github.com/callstack/linaria/issues/589#issuecomment-730219118

Documenting here for anyone coming to this project.

Are there any plan to suppor the latest [email protected] versions?

Any guidance for the migration path would be much appreciated, thank you

I've set an initial project for NextJS + Typescript + Linaria + Yarn Workspaces but when adding Linaria and next-linaria, my project doesn't work anymore and I get errors about the typescript types and stuff.

Does anyone know what can I do to solve this?

This is my minimal repo with the problem:
https://github.com/bruno2ms/nextjs-linaria-yarn-workspaces

This is the error I'm getting (same error on console):

During the 0.11.0 or even 1.0.0-beta upgrades, I have run into some issue as below:

$ next build
warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
info  - Creating an optimized production build...
info  - Using external babel configuration from /home/runner/work/build-meetup/build-meetup/packages/web-next/packages/web/.babelrc
Failed to compile.

./public/images/register/video-background.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I am using all things default in next.config.js as with 0.10.0

  withLinaria({
    linaria: {},