+
-
+
-
{children}
+
{children}
);
};
diff --git a/packages/next/CHANGELOG.md b/packages/next/CHANGELOG.md
index dc2795e0d..43961496d 100644
--- a/packages/next/CHANGELOG.md
+++ b/packages/next/CHANGELOG.md
@@ -1,5 +1,12 @@
# @10up/headless-next
+## 0.2.1-next.0
+
+### Patch Changes
+
+- Updated dependencies [e9c7ef0]
+ - @10up/headless-core@0.2.1-next.0
+
## 0.2.0
### Minor Changes
diff --git a/packages/next/package.json b/packages/next/package.json
index 7cc3b6888..9be3474bd 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
{
"name": "@10up/headless-next",
- "version": "0.2.0",
+ "version": "0.2.1-next.0",
"description": "",
"main": "dist/cjs/index.js",
"source": "src/index.ts",
@@ -44,7 +44,7 @@
"author": "",
"license": "ISC",
"dependencies": {
- "@10up/headless-core": "^0.2.0",
+ "@10up/headless-core": "^0.2.1-next.0",
"html-react-parser": "^1.4.3",
"loader-utils": "^3.2.0",
"next-transpile-modules": "^9.0.0",
diff --git a/packages/next/src/config/withHeadlessConfig.ts b/packages/next/src/config/withHeadlessConfig.ts
index d881522d6..f56ef37a9 100644
--- a/packages/next/src/config/withHeadlessConfig.ts
+++ b/packages/next/src/config/withHeadlessConfig.ts
@@ -1,6 +1,49 @@
import { ConfigError, HeadlessConfig } from '@10up/headless-core';
import { NextConfig } from 'next';
+const LINARIA_EXTENSION = '.linaria.module.css';
+
+const isPackageInstalled = (packageName: string): boolean => {
+ try {
+ if (require.resolve(packageName)) {
+ return true;
+ }
+ } catch (error) {
+ // do nothing
+ }
+
+ return false;
+};
+function traverse(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 = false;
+ rule.options.modules.getLocalIdent = (context, _, exportName, options) => {
+ if (context.resourcePath.includes(LINARIA_EXTENSION)) {
+ return exportName;
+ }
+ return nextGetLocalIdent(context, _, exportName, options);
+ };
+ }
+ }
+ if (typeof rule.use === 'object') {
+ traverse(Array.isArray(rule.use) ? rule.use : [rule.use]);
+ }
+ if (Array.isArray(rule.oneOf)) {
+ traverse(rule.oneOf);
+ }
+ }
+}
+
/**
* HOC used to wrap the nextjs config object with the headless config object.
*
@@ -98,6 +141,24 @@ export function withHeadlessConfig(
],
});
+ if (isPackageInstalled('@linaria/webpack-loader')) {
+ traverse(config.module.rules);
+ config.module.rules.push({
+ test: /\.(tsx|ts|js|mjs|jsx)$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: '@linaria/webpack-loader',
+ options: {
+ sourceMap: process.env.NODE_ENV !== 'production',
+ ...(nextConfig.linaria || {}),
+ extension: LINARIA_EXTENSION,
+ },
+ },
+ ],
+ });
+ }
+
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
diff --git a/projects/wp-nextjs/.babelrc b/projects/wp-nextjs/.babelrc
deleted file mode 100644
index b382d790e..000000000
--- a/projects/wp-nextjs/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "presets": [
- [
- "next/babel",
- {
- "preset-react": {
- "runtime": "automatic",
- "importSource": "@emotion/react"
- }
- }
- ]
- ],
- "plugins": ["@emotion/babel-plugin"]
-}
\ No newline at end of file
diff --git a/projects/wp-nextjs/.eslintrc.js b/projects/wp-nextjs/.eslintrc.js
index 43f2f02f3..69117bdaf 100644
--- a/projects/wp-nextjs/.eslintrc.js
+++ b/projects/wp-nextjs/.eslintrc.js
@@ -1,6 +1,5 @@
module.exports = {
extends: ['@10up/eslint-config/react'],
- plugins: ['@emotion'],
settings: {
jsdoc: {
mode: 'typescript',
diff --git a/projects/wp-nextjs/babel.config.js b/projects/wp-nextjs/babel.config.js
new file mode 100644
index 000000000..5c9e75739
--- /dev/null
+++ b/projects/wp-nextjs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ['next/babel', require.resolve('@linaria/babel-preset')],
+};
diff --git a/projects/wp-nextjs/package.json b/projects/wp-nextjs/package.json
index 2925e3d1f..6b08960ec 100644
--- a/projects/wp-nextjs/package.json
+++ b/projects/wp-nextjs/package.json
@@ -10,9 +10,13 @@
"lint": "eslint ."
},
"dependencies": {
- "@10up/headless-core": "^0.2.0",
- "@10up/headless-next": "^0.2.0",
- "@emotion/react": "^11.9.0",
+ "@10up/headless-core": "^0.2.1-next.0",
+ "@10up/headless-next": "^0.2.1-next.0",
+ "@linaria/babel-preset": "3.0.0-beta.20",
+ "@linaria/core": "3.0.0-beta.20",
+ "@linaria/react": "3.0.0-beta.20",
+ "@linaria/shaker": "3.0.0-beta.20",
+ "@linaria/webpack-loader": "3.0.0-beta.20",
"clsx": "^1.1.1",
"next": "^12.1.0",
"nprogress": "^0.2.0",
@@ -22,8 +26,6 @@
},
"devDependencies": {
"@10up/eslint-config": "^2.4.3",
- "@emotion/babel-plugin": "^11.9.2",
- "@emotion/eslint-plugin": "^11.7.0",
"@next/bundle-analyzer": "^12.1.0",
"eslint-plugin-import": "^2.26.0"
},
diff --git a/projects/wp-nextjs/src/components/Blocks.js b/projects/wp-nextjs/src/components/Blocks.js
index 99215533e..e46c78643 100644
--- a/projects/wp-nextjs/src/components/Blocks.js
+++ b/projects/wp-nextjs/src/components/Blocks.js
@@ -1,13 +1,13 @@
import { BlocksRenderer, YoutubeLiteBlock, ImageBlock } from '@10up/headless-core/react';
import { TwitterBlock, ImageComponent, LinkBlock } from '@10up/headless-next';
-import { css } from '@emotion/react';
+import { css } from '@linaria/core';
import PropTypes from 'prop-types';
export const Blocks = ({ html }) => {
return (
diff --git a/projects/wp-nextjs/src/components/Footer/FooterLinks.js b/projects/wp-nextjs/src/components/Footer/FooterLinks.js
index 54cd8decf..2ed00150d 100644
--- a/projects/wp-nextjs/src/components/Footer/FooterLinks.js
+++ b/projects/wp-nextjs/src/components/Footer/FooterLinks.js
@@ -1,5 +1,5 @@
import { useAppSettings } from '@10up/headless-next';
-import { css } from '@emotion/react';
+import { css } from '@linaria/core';
import { Link } from '../Link';
const footerLinksStyles = css`
@@ -23,7 +23,7 @@ export const FooterLinks = () => {
const { data } = useAppSettings();
return (
-
+
-
Privacy Policy
diff --git a/projects/wp-nextjs/src/components/Footer/index.js b/projects/wp-nextjs/src/components/Footer/index.js
index 79249e8ed..53ce7bf48 100644
--- a/projects/wp-nextjs/src/components/Footer/index.js
+++ b/projects/wp-nextjs/src/components/Footer/index.js
@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import { styled } from '@linaria/react';
import { FooterLinks } from './FooterLinks';
-const footerStyles = css`
+const StyledFooter = styled.footer`
display: flex;
justify-content: space-between;
align-items: center;
@@ -24,13 +24,13 @@ const footerStyles = css`
const Footer = () => {
return (
-
+
);
};
diff --git a/projects/wp-nextjs/src/components/Header/Logo.js b/projects/wp-nextjs/src/components/Header/Logo.js
index 05548ddc3..d09d9c65f 100644
--- a/projects/wp-nextjs/src/components/Header/Logo.js
+++ b/projects/wp-nextjs/src/components/Header/Logo.js
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css } from '@linaria/core';
const logoStyles = css`
text-align: center;
@@ -17,7 +17,7 @@ const logoStyles = css`
export const Logo = () => {
return (
-
+
Brand Logo
);
diff --git a/projects/wp-nextjs/src/components/Header/Nav.js b/projects/wp-nextjs/src/components/Header/Nav.js
index 3dc130885..b24120514 100644
--- a/projects/wp-nextjs/src/components/Header/Nav.js
+++ b/projects/wp-nextjs/src/components/Header/Nav.js
@@ -1,6 +1,6 @@
import { Menu } from '@10up/headless-core/react';
import { useMenu } from '@10up/headless-next';
-import { css } from '@emotion/react';
+import { css } from '@linaria/core';
const navStyles = css`
height: 100%;
@@ -44,5 +44,5 @@ export const Nav = () => {
return null;
}
- return
;
+ return
;
};
diff --git a/projects/wp-nextjs/src/components/Header/Search.js b/projects/wp-nextjs/src/components/Header/Search.js
index 3bb36c887..25619c53c 100644
--- a/projects/wp-nextjs/src/components/Header/Search.js
+++ b/projects/wp-nextjs/src/components/Header/Search.js
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css } from '@linaria/core';
import { useRouter } from 'next/router';
import { useState } from 'react';
@@ -37,11 +37,11 @@ export const Search = () => {
placeholder="Search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
- css={searchInputStyles}
+ className={searchInputStyles}
onKeyDown={onKeyDown}
/>
-