Update with-linaria example in next.js repo #589
Comments
jayu
added
good first issue 😊
jayu
changed the title
|
@jayu any ideas when this might be updated? |
|
@lifeiscontent Not a maintainer, but here are the instructions for modern Next.js: #447 |
|
Done: vercel/next.js#13568 |
|
How to use linaria |
|
@chrisands can you spin up a repo with reproduction and open a new issue for that? |
|
@jayu I'll try to do this week |
|
Also seeing this issue -- set up linaria@2.0.0-alpha.1 and added: |
|
I recently discovered Linaria and trying to make it work with Next.js. Still testing it, but so far seems promising. Any possible issues with this approach? |
|
@Mistereo I tried your plugin. It unfortunately seems that the Linaria's 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 Is there any new insight on how to configure |
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 Tried adding the following to 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 {
"presets": ["next/babel", "linaria/babel"]
}Any guidance would be highly appreciated! Thanks for everyone's experience sharing thus far. |
|
I'm having the same issue as @nickrttn and @joyfulelement . I've attempted to modify the babel configuration used within the |
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.
I think that's a good solution for now. Importing a |
|
FWIW, Of course |
|
Here is the fix, that I believe will be in next release if |
|
@M1r1k I'm not convinced there's going to be a next release of |
|
Anyone have a working example with NextJS 12 with Typescript and linaria 3 beta? |
|
Linaria 4 no longer works with Nextjs 12. |
|
I got this working with NextJS 12 & Linaria 4. Just walking back through my changes; will publish something shortly |
|
@anulman can you push up an example for us? |
|
Oop, sorry — only got it stable end-of-day Friday and cycled off the project this week. // babel.config.js
module.exports = {
presets: ['next/babel', '@linaria'],
};
// next.config.js
const _ = require('lodash');
const BABEL_LOADER_STRING = 'babel/loader';
const makeLinariaLoaderConfig = (babelOptions) => ({
loader: require.resolve('@linaria/webpack-loader'),
options: {
sourceMap: true,
extension: '.linaria.module.css',
babelOptions: _.omit(
babelOptions,
'isServer',
'distDir',
'pagesDir',
'development',
'hasReactRefresh',
'hasJsxRuntime',
),
},
});
let injectedBabelLoader = false;
function crossRules(rules) {
for (const rule of rules) {
if (typeof rule.loader === 'string' && rule.loader.includes('css-loader')) {
if (
rule.options &&
rule.options.modules &&
typeof rule.options.modules.getLocalIdent === 'function'
) {
const nextGetLocalIdent = rule.options.modules.getLocalIdent;
rule.options.modules.mode = 'local';
rule.options.modules.auto = true;
rule.options.modules.exportGlobals = true;
rule.options.modules.exportOnlyLocals = true;
rule.options.modules.getLocalIdent = (context, _, exportName, options) => {
if (context.resourcePath.includes('.linaria.module.css')) {
return exportName;
}
return nextGetLocalIdent(context, _, exportName, options);
};
}
}
if (typeof rule.use === 'object') {
if (Array.isArray(rule.use)) {
const babelLoaderIndex = rule.use.findIndex(
({ loader }) => typeof loader === 'string' && loader.includes(BABEL_LOADER_STRING),
);
const babelLoaderItem = rule.use[babelLoaderIndex];
if (babelLoaderIndex !== -1) {
rule.use = [
...rule.use.slice(0, babelLoaderIndex),
babelLoaderItem,
makeLinariaLoaderConfig(babelLoaderItem.options),
...rule.use.slice(babelLoaderIndex + 2),
];
injectedBabelLoader = true;
}
} else if (
typeof rule.use.loader === 'string' &&
rule.use.loader.includes(BABEL_LOADER_STRING)
) {
rule.use = [rule.use, makeLinariaLoaderConfig(rule.use.options)];
injectedBabelLoader = true;
}
crossRules(Array.isArray(rule.use) ? rule.use : [rule.use]);
}
if (Array.isArray(rule.oneOf)) {
crossRules(rule.oneOf);
}
}
}
function withLinaria(nextConfig = {}) {
return {
...nextConfig,
webpack(config, options) {
crossRules(config.module.rules);
if (!injectedBabelLoader) {
config.module.rules.push({
test: /\.(tsx?|jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: linariaWebpackLoaderConfig.options.babelOptions,
},
linariaWebpackLoaderConfig,
],
});
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
},
};
}
module.exports = withLinaria({ /* ... */ });That whole Also I'm not sure if the |
|
I made a working example from @anulman 's comment. Thank you, really good work! Of course I credited you in that repo! https://github.com/LukasBombach/nextjs-linaria/tree/working-poc |
|
Awww thanks @LukasBombach! In a recent project I had to rm |
|
@LukasBombach Thanks for publishing a working example. But in case I use css module and linaria as well then some hydration issue is coming. it seems that the culprit is also, only having Here is my snippet |
|
Does the PR vercel/next.js#41085 by @ThePatriczek apply the same changes that are being proposed here? Changed files: https://github.com/vercel/next.js/pull/41085/files @jayu If the example has been updated, maybe this issue can be now closed? |
|
Thanks @LukasBombach for the example. I got some issues while using configurations from your repo on Next 13. For reproduction: I cloned your repo and upgraded the Next.js to version 13 EDITAdding a new option inside makeLinariaLoaderConfig solved the problem. The code would then look something like this. |
|
Putting this here if anyone finds this useful: https://github.com/aaazureee/nextjs-linaria-purgecss |
|
Hi @aaazureee, thanks for the example! However, it looks like the example is using the old Pages Router ( Would it be possible to switch this example to the App Router and show styling with React Server Components? I also asked in aaazureee/nextjs-linaria-purgecss#1 |
and others
Describe the enhancement
After release of
2.0with shaker as a default strategy, we should updatewith-linariaexample innext.jsrepo. https://github.com/zeit/next.js/tree/master/examples/with-linariaMotivation
There is a known bug with next.js babel config and
extractorevaluator, which can be fixed by theshakerevaluator. See #447Possible implementations
open a PR to
next.jswith an update of linaria versionThe text was updated successfully, but these errors were encountered: