Linaria: Update with-linaria example in next.js repo

[jayu]

Describe the enhancement

After release of 2.0 with shaker as a default strategy, we should update with-linaria example in next.js repo. https://github.com/zeit/next.js/tree/master/examples/with-linaria

Motivation

There is a known bug with next.js babel config and extractor evaluator, which can be fixed by the shaker evaluator. See #447

Possible implementations

open a PR to next.js with an update of linaria version

[lifeiscontent]

@jayu any ideas when this might be updated?

[anulman]

@lifeiscontent Not a maintainer, but here are the instructions for modern Next.js: https://github.com/callstack/linaria/issues/447

[marbiano]

Done: https://github.com/vercel/next.js/pull/13568

[chrisands]

How to use linaria css api (not styled) with nextjs?
It tries to inject files but got nextjs error

[jayu]

@chrisands can you spin up a repo with reproduction and open a new issue for that?

[chrisands]

@jayu I'll try to do this week

[switz]

Also seeing this issue -- set up [email protected] and added:

const shaker = require('linaria/lib/babel/evaluators/shaker').default;

module.exports = {
    displayName: process.env.NODE_ENV !== 'production',
    rules: [
        {
            action: shaker,
        },
        {
            test: /\/node_modules\//,
            action: 'ignore',
        },
    ],
};

[Mistereo]

I recently discovered Linaria and trying to make it work with Next.js.
One of the problems of current official example is that it uses @zeit/next-css, which doesn't support CSS splitting, this is a huge disadvantage for me, so I tried to make built-in CSS support (available since 9.2) to play nice with linaria/loader and ended up with this simple plugin: https://github.com/Mistereo/next-linaria.
Plugin changes extension to .linaria.module.css so that Next.js loader picks Linaria files without complains and also overrides getLocalIdent to return unmodified localName for Linaria classes.

Still testing it, but so far seems promising. Any possible issues with this approach?

[nickrttn]

@Mistereo I tried your plugin. It unfortunately seems that the Linaria's :global() selector doesn't work with it, receiving errors like:

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

Without your plugin, I need to use @zeit/next-css, which means that I'm getting errors from mini-css-extract-plugin eg.

chunk styles [mini-css-extract-plugin]
Conflicting order between:

Is there any new insight on how to configure [email protected] with [email protected] in a way that doesn't have us jump through hoops? I don't mind some complexity in my configuration if that means we can have a somewhat simpler developer experience.

[joyfulelement]

@Mistereo I tried your plugin. It unfortunately seems that the Linaria's :global() selector doesn't work with it, receiving errors like:

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

Thanks for sharing @nickrttn, I am too baffled by the same issue, was curious how your setup Next web app to use Linaria global CSS?

My current fallback workaround was simply using the build-in css support by Next.js with a standalone globals.css file and import the it to _app.js with import '../styles/globals.css';. Does anyone know the implication of such setup? i.e. does that mean a CSS runtime also gets bundled at the end of the day (defeating the purpose of using Linaria in the first place) since this is using the built in CSS support by Next.js?

Tried adding the following to _app.js didn't work either:

export const globals = css`
  :global() {
    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
  }
`;

and got an error like:

error - .linaria-cache/pages/_app.linaria.module.css:4:13
Syntax error: Selector "html" is not pure (pure selectors must contain at least one local class or id)

  2 | import { css } from '@linaria/core';
  3 | 
> 4 | export const globals = css`
    |             ^
  5 |   :global() {
  6 |     html {

Not 100% sure if it's just the way I had linaria configured, currently using next-linaria by @Mistereo with .babelrc as:

{
  "presets": ["next/babel", "linaria/babel"]
}

Any guidance would be highly appreciated! Thanks for everyone's experience sharing thus far.

[steveadams]

I'm having the same issue as @nickrttn and @joyfulelement . I've attempted to modify the babel configuration used within the next-linaria plugin, but haven't made any progress yet... Our application is fairly complex, and we're migrating to Next.js from Gatsby, meaning there are a lot of moving pieces in the way of this working. I might be best to sandbox it and fix it in isolation. I'll check in again when I find something - this is critical for my team so we've got 2 people trying to work it out.

[nickrttn]

Thanks for sharing @nickrttn, I am too baffled by the same issue, was curious how your setup Next web app to use Linaria global CSS?

I've (sadly!) since moved to use Emotion in our application. We were trying out Linaria in a smaller project with a short timeline and there wasn't a lot of time to set up tooling unfortunately. I'll make sure to revisit Linaria as version 3 comes out of beta and sees some more adoption because the ideas make a lot of sense to me.

My current fallback workaround was simply using the build-in css support by Next.js with a standalone globals.css file and import the it to _app.js with import '../styles/globals.css';. Does anyone know the implication of such setup? i.e. does that mean a CSS runtime also gets bundled at the end of the day (defeating the purpose of using Linaria in the first place) since this is using the built in CSS support by Next.js?

I think that's a good solution for now. Importing a .css file should also output a CSS file on the webpack end and afaik wouldn't use any runtime like the styled-jsx one that Next.js includes.