callstack · raveclassic · Sep 3, 2022 · Sep 3, 2022 · Sep 5, 2022 · Sep 5, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 // Workaround for https://github.com/import-js/eslint-plugin-import/issues/1810
 const noUnresolved = ['error', { ignore: ['@linaria/*'] }];
 
@@ -147,7 +149,7 @@ module.exports = {
         'plugin:import/typescript',
       ],
       parserOptions: {
-        project: './tsconfig.eslint.json',
+        project: path.resolve(__dirname, './tsconfig.eslint.json'),
       },
       rules: {
         'import/extensions': 0,

diff --git a/.gitignore b/.gitignore
@@ -68,6 +68,9 @@ esm/
 types/
 dist/
 build/
-tsconfig.tsbuildinfo
+*.tsbuildinfo
 
 .linaria-cache
+
+# IntelliJ IDEA
+.idea
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ Zero-runtime CSS in JS library.
 - Use **JavaScript for logic**, no CSS preprocessor needed
 - Optionally use any **CSS preprocessor** such as Sass or PostCSS
 - Supports **atomic styles** with `@linaria/atomic`
+- Supports [solidjs](https://solidjs.com/) with `@linaria/sollid`
 
 **[Why use Linaria](/docs/BENEFITS.md)**
 

diff --git a/babel.config.js b/babel.config.js
@@ -76,12 +76,5 @@ module.exports = {
         },
       },
     },
-    {
-      /**
-       * we have to transpile JSX in tests
-       */
-      test: /\/(__tests__|__fixtures__|packages\/teskit\/src)\//,
-      presets: ['@babel/preset-react'],
-    },
   ],
 };
diff --git a/examples/solid/.gitignore b/examples/solid/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/solid/.linariarc.mjs b/examples/solid/.linariarc.mjs
@@ -0,0 +1,21 @@
+module.exports = {
+    rules: [
+        {
+            action: require.resolve('@linaria/shaker'),
+        },
+        {
+            test: /\/node_modules\//,
+            action: 'ignore',
+        },
+        {
+            test: (filename, code) => {
+                if (!/\/node_modules\//.test(filename)) {
+                    return false;
+                }
+
+                return /(?:^|\n|;)\s*(?:export|import)\s+/.test(code);
+            },
+            action: require.resolve('@linaria/shaker'),
+        },
+    ],
+};
diff --git a/examples/solid/README.md b/examples/solid/README.md
@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
diff --git a/examples/solid/index.html b/examples/solid/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/package.json b/examples/solid/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@linaria/shaker": "workspace:^",
+    "@linaria/vite": "workspace:^",
+    "babel-preset-solid": "^1.6.2",
+    "babel-preset-typescript": "7.0.0-alpha.19",
+    "vite": "3.1.8",
+    "vite-plugin-solid": "^2.4.0"
+  },
+  "dependencies": {
+    "@linaria/core": "workspace:^",
+    "@linaria/solid": "workspace:^",
+    "solid-js": "^1.6.2"
+  }
+}
diff --git a/examples/solid/src/App.tsx b/examples/solid/src/App.tsx
@@ -0,0 +1,76 @@
+import type { Component } from 'solid-js';
+
+import logo from './logo.svg';
+import { styled } from '@linaria/solid';
+import {css} from '@linaria/core'
+
+const globals = css`
+  :global() {
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    }
+  }
+`;
+
+const AppStyled = styled.div`
+  text-align: center;
+`
+
+const HeaderStyled = styled.header`
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+`
+
+const LogoStyled = styled.img`
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+
+  @keyframes logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`
+
+const LinkStyled = styled.a`
+  color: #b318f0;
+`
+
+const App: Component = () => {
+  return (
+    <AppStyled class={globals}>
+      <HeaderStyled>
+        <LogoStyled src={logo} alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <LinkStyled
+          href="https://github.com/solidjs/solid"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn Solid
+        </LinkStyled>
+      </HeaderStyled>
+    </AppStyled>
+  );
+};
+
+export default App;
diff --git a/examples/solid/src/assets/favicon.ico b/examples/solid/src/assets/favicon.ico
diff --git a/examples/solid/src/index.tsx b/examples/solid/src/index.tsx
@@ -0,0 +1,6 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+
+import App from './App';
+
+render(() => <App />, document.getElementById('root') as HTMLElement);
diff --git a/examples/solid/src/logo.svg b/examples/solid/src/logo.svg
diff --git a/examples/solid/tsconfig.json b/examples/solid/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true
+  }
+}
diff --git a/examples/solid/vite.config.ts b/examples/solid/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+import linaria from '@linaria/vite';
+
+export default defineConfig({
+  plugins: [
+    {
+      ...linaria({
+        include: ['./src/**/*.tsx'],
+        babelOptions: {
+          overrides: [
+            {
+              test: ['./src/**/*.tsx'],
+              presets: ['typescript', 'solid'],
+            },
+          ],
+        },
+      }),
+      enforce: 'pre'
+    },
+    solidPlugin(),
+  ],
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+  },
+});
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-expect-type": "^0.2.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",

diff --git a/packages/babel/src/index.ts b/packages/babel/src/index.ts
@@ -18,7 +18,7 @@ export * from './utils/collectTemplateDependencies';
 export { default as collectTemplateDependencies } from './utils/collectTemplateDependencies';
 export { default as withLinariaMetadata } from './utils/withLinariaMetadata';
 export { default as Module } from './module';
-export { default as transform } from './transform';
+export { default as transform, transformSync } from './transform';
 export * from './types';
 export { default as loadLinariaOptions } from './transform-stages/helpers/loadLinariaOptions';
 export type { PluginOptions } from './transform-stages/helpers/loadLinariaOptions';

diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js
@@ -1,3 +1,9 @@
-const config = require('../../babel.config');
-
-module.exports = config;
+module.exports = {
+  extends: '../../babel.config',
+  overrides: [
+    {
+      test: ['__tests__/**/*.tsx'],
+      presets: ['@babel/preset-react'],
+    },
+  ],
+};
diff --git a/packages/solid/.eslintrc.json b/packages/solid/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "overrides": [
+    {
+      "files": ["__dtslint__/**/*.tsx", "__dtslint__/**/*.ts"],
+      "plugins": ["expect-type"],
+      "extends": [
+        "plugin:eslint-plugin-expect-type/recommended"
+      ]
+    }
+  ]
+}
diff --git a/packages/solid/README.md b/packages/solid/README.md
@@ -0,0 +1,46 @@
+<p align="center">
+  <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/linaria-logo@2x.png" width="496">
+</p>
+
+<p align="center">
+Zero-runtime CSS in JS library.
+</p>
+
+---
+
+# @linaria/solid
+
+### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.
+
+**[Why use Linaria](../../docs/BENEFITS.md)**
+
+## Features
+
+- supports a subset of `styled-components` syntax (`styled.div`, `styled(Component)`, property interpolations)
+
+## Limitations
+
+- does not support theming through arguments to property interpolations (yet)
+
+## Installation
+
+```sh
+npm install @linaria/babel-preset @linaria/solid babel-preset-solid
+```
+
+or
+
+```sh
+yarn install @linaria/babel-preset @linaria/solid babel-preset-solid
+```
+
+## Configuration
+
+For the time of this writing, `@linaria/solid` supports configuration only via babel configuration.
+Just add `solid` to the `"presets"` section in your `babel.config.js` _after_ `"@linaria"`:
+
+```json
+{
+  "presets": ["@linaria", "solid"]
+}
+```