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")); }