feat(solid): initial draft implementation

.gitignore

@@ -68,6 +68,9 @@ esm/
 types/
 dist/
 build/
-tsconfig.tsbuildinfo
+*.tsbuildinfo
 
 .linaria-cache
+
+# IntelliJ IDEA
+.idea

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)**
 

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'],
-    },
   ],
 };

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';

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'],
+    },
+  ],
+};

packages/solid/README.md

@@ -0,0 +1,46 @@
+<p align="center">
+  <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/[email protected]" 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"]
+}
+```

packages/solid/__tests__/jest-transformer.js

@@ -0,0 +1,42 @@
+const linaria = require('@linaria/babel-preset');
+const babel = require('@babel/core');
+const path = require('path');
+
+const SELF = path.resolve(__dirname);
+const ROOT_BABEL_CONFIG = path.resolve(SELF, '../../../babel.config.js');
+
+const transformer = {
+  process: (sourceText, sourcePath) => {
+    const babelResult = babel.transform(sourceText, {
+      filename: sourcePath,
+      // pick monorepo's babel.config.js with typescript and env presets
+      // jsx should not be transpiled at this step
+      // it will be transpiled later with babel-preset-solid
+      babelrc: false,
+      configFile: ROOT_BABEL_CONFIG,
+    });
+    if (!babelResult || !babelResult.code) {
+      throw new Error('Cannot transpile source with babel');
+    }
+    const linariaResult = linaria.transformSync(
+      babelResult.code,
+      { filename: sourcePath },
+      (what) => require.resolve(what)
+    );
+    const solidResult = babel.transform(linariaResult.code, {
+      filename: sourcePath,
+      presets: ['solid'],
+      // pick monorepo's babel.config.js with typescript and env presets
+      babelrc: false,
+      configFile: ROOT_BABEL_CONFIG,
+    });
+    return {
+      code: `
+        require('style-inject')(${JSON.stringify(linariaResult.cssText)});
+        ${solidResult.code}
+      `,
+    };
+  },
+};
+
+module.exports = transformer;

packages/solid/__tests__/processors/components.linaria.tsx

@@ -0,0 +1,9 @@
+import { styled } from '../../src';
+
+interface TagProps {
+  readonly bg?: string;
+}
+export const Tag = styled.div<TagProps>`
+  color: red;
+  background: ${(props) => props.bg};
+`;