diff --git a/examples/linaria/.babelrc b/examples/linaria/.babelrc
deleted file mode 100644
index 31f9e1f..0000000
--- a/examples/linaria/.babelrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "presets": [
- "next/babel"
- ],
- "plugins": [
- "css-variable/babel"
- ]
-}
\ No newline at end of file
diff --git a/examples/linaria/.linariarc b/examples/linaria/.linariarc
deleted file mode 100644
index 81a06bf..0000000
--- a/examples/linaria/.linariarc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- babelOptions: {
- "presets": [
- "next/babel",
- "linaria/babel"
- ],
- "plugins": [
- "css-variable/babel"
- ]
- }
-}
\ No newline at end of file
diff --git a/examples/linaria/build.mjs b/examples/linaria/build.mjs
deleted file mode 100644
index 68d718c..0000000
--- a/examples/linaria/build.mjs
+++ /dev/null
@@ -1,9 +0,0 @@
-// Linaria fails on the very first build 🤷♂️
-// Therefore this script does it twice on error
-import {$} from 'execa';
-
-$({stdout: ['pipe', 'inherit']})
- `npm run build:next`
-.catch(() => $({stdout: ['pipe', 'inherit']})
- `npm run build:next`
-);
diff --git a/examples/linaria/next-env.d.ts b/examples/linaria/next-env.d.ts
deleted file mode 100644
index 4f11a03..0000000
--- a/examples/linaria/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-///
-///
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/linaria/next.config.js b/examples/linaria/next.config.js
deleted file mode 100644
index f69368c..0000000
--- a/examples/linaria/next.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const withLinaria = require('next-with-linaria');
-
-module.exports = withLinaria({
- linaria: {
- babelOptions: {
- "presets": [
- "next/babel",
- '@wyw-in-js'
- ],
- "plugins": [
- "css-variable/babel"
- ]
- }
- },
- pageExtensions: ['page.tsx'],
- webpack(config, options) {
- return config;
- },
-})
\ No newline at end of file
diff --git a/examples/linaria/package.json b/examples/linaria/package.json
deleted file mode 100644
index c7f86df..0000000
--- a/examples/linaria/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
- "name": "@example/linaria",
- "version": "1.0.0",
- "private": true,
- "scripts": {
- "dev": "next dev",
- "build": "node ./build.mjs",
- "build:next": "next build",
- "start": "next start"
- },
- "dependencies": {
- "@babel/core": "7.24.5",
- "@babel/preset-env": "^7.24.5",
- "@linaria/babel-preset": "^5.0.4",
- "@linaria/core": "^6.2.0",
- "@linaria/react": "^6.2.1",
- "@types/react": "17.0.20",
- "@types/react-dom": "17.0.9",
- "@types/styled-components": "5.1.14",
- "@wyw-in-js/webpack-loader": "^0.5.3",
- "classnames": "2.5.1",
- "css-variable": "file:../../",
- "execa": "^9.1.0",
- "linaria": "6.2.0",
- "next": "^14.2.3",
- "next-linaria": "0.11.0",
- "next-with-linaria": "^0.7.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "typescript": "5.4.5"
- },
- "devDependencies": {
- "@types/node": "20.12.12"
- }
-}
diff --git a/examples/linaria/pages/gradient/index.page.tsx b/examples/linaria/pages/gradient/index.page.tsx
deleted file mode 100644
index 06e72cd..0000000
--- a/examples/linaria/pages/gradient/index.page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import classnames from "classnames";
-import { css } from "linaria";
-import { gradientEndColor, gradientHover, gradientStartColor } from './text-gradient';
-
-const baseLink = css`
- font-family: Arial, Helvetica, sans-serif;
- font-size: 20px;
- ${gradientStartColor.toStyle("orange")};
- ${gradientEndColor.toStyle("purple")};
-`
-
-const Link = (props) =>
-
-const Page = () => (
- Click me
-)
-
-export default Page;
diff --git a/examples/linaria/pages/gradient/text-gradient.ts b/examples/linaria/pages/gradient/text-gradient.ts
deleted file mode 100644
index bc6648c..0000000
--- a/examples/linaria/pages/gradient/text-gradient.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createVar } from "css-variable";
-import { css } from "linaria";
-
-export const fontColor = createVar({value: "currentColor"});
-/** The linear gradient start color during hover */
-export const gradientStartColor = createVar();
-/** The linear gradient end color during hover */
-export const gradientEndColor = createVar();
-
-export const gradientHover = css`
- color: ${fontColor.val};
- background: linear-gradient(to right, ${gradientStartColor.val}, ${gradientEndColor.val});
- background-size: 200% 200%;
- animation: rainbow 2s ease-in-out infinite;
- background-clip: text;
- -webkit-background-clip:text;
- transition: color .2s ease-in-out;
- &:focus,
- &:hover {
- color:rgba(0,0,0,0);
- }
- @keyframes rainbow {
- 0%{background-position:left}
- 50%{background-position:right}
- 100%{background-position:left}
- }
-`;
-
diff --git a/examples/linaria/pages/index.page.tsx b/examples/linaria/pages/index.page.tsx
deleted file mode 100644
index bfebe92..0000000
--- a/examples/linaria/pages/index.page.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/// @ts-check
-import { type CSSPixelValue, createVar, createGlobalTheme } from "css-variable";
-import { styled } from "linaria/react";
-
-const theme = {
- fontSize: createVar(),
- spacings: {
- s: createVar(),
- m: createVar(),
- l: createVar(),
- },
- colors: {
- primary: createVar(),
- secondary: createVar(),
- },
-};
-
-
-const ThemeA = styled.div`
- ${createGlobalTheme("", theme, {
- fontSize: "12px",
- spacings: {
- s: "10px",
- m: "20px",
- l: "30px",
- },
- colors: {
- primary: "#6290C3",
- secondary: "#C2E7DA",
- },
- })}
-`;
-
-const ThemeB = styled.div`
- ${createGlobalTheme("",theme, {
- fontSize: "24px",
- spacings: {
- s: "20px",
- m: "40px",
- l: "60px",
- },
- colors: {
- primary: "#7C9EB2",
- secondary: "#52528C",
- },
- })}
-`;
-
-const colorVar = createVar({ value: theme.colors.primary.toString() });
-const xVar = createVar({ value: "0" });
-
-const StyledHeadline = styled.h1`
- font-family: Arial, Helvetica, sans-serif;
- font-size: ${theme.fontSize.val};
- color: ${colorVar.val};
- transform: translateX(${xVar.val});
- width: calc(100% - 1 * ${xVar.val});
-`;
-
-const FancyComponent: React.FunctionComponent<{color?:string}> = ({ color, children }) => {
- return (
-
- {children}
-
- );
-};
-
-const BigBox = styled.div`
- background: ${theme.colors.secondary.val};
- padding: ${theme.spacings.m.val};
-
- ${colorVar.toStyle("grey")}
- ${xVar.toStyle('20px')}
-
- @media (min-width: 500px) {
- ${xVar.toStyle('250px')};
- }
-`;
-
-const Demo = () => (
- <>
- Demo
-
- xOffset
-
-
- Inside Box
-
- >
-);
-
-const Index = () => (
- <>
-
-
-
-
-
-
-
-
- >
-);
-
-export default Index;
diff --git a/examples/linaria/tsconfig.json b/examples/linaria/tsconfig.json
deleted file mode 100644
index 5bee8c4..0000000
--- a/examples/linaria/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": false,
- "forceConsistentCasingInFileNames": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true
- },
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ]
-}
diff --git a/test/examples.js b/test/examples.js
index 3412345..9c03432 100644
--- a/test/examples.js
+++ b/test/examples.js
@@ -19,8 +19,6 @@ runTest().then(
async function runTest() {
console.log("📦 install puppeteer");
await spawnAsync("npm", ["install"], { cwd: __dirname, stdio: "inherit" }).promise;
- console.log("🚀 test next <-> linaria integration");
- await launchExample(path.resolve(__dirname, "../examples/linaria"));
console.log("🚀 test next <-> styled-component integration");
await launchExample(path.resolve(__dirname, "../examples/styled-components"));
}