feat(vite): introduce @linaria/vite (#1118)

* refactor(rollup): make rollup standalone

* feat(vite): add vite plugin

* feat(vite): add astro-solid example

* fix(vite): remove commented 'enforce' parameter

* chore(typings): switch to ESNext

* fix(vite): remove watch flag from build

* chore: change esnext to array of exact features

* feat(vite): fix virtual vss import path

* feat(vite): fix vite example and lockfile

* fix(rollup): deprecate Vite support

* chore: fix changelog for rollup

* chore: linter & pnpm-lock

Co-authored-by: Anton Evzhakov <anton@evz.name>

.changeset/great-wolves-divide.md

@@ -0,0 +1,5 @@
+---
+'@linaria/rollup': minor
+---
+
+Make rollup standalone. The support for Vite in @linaria/rollup is deprecated and will be removed in the next major version.

.changeset/soft-windows-arrive.md

@@ -0,0 +1,5 @@
+---
+'@linaria/vite': major
+---
+
+Add Vite plugin with HMR support.

examples/astro-solid/astro.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'astro/config';
+import astro_solid from '@astrojs/solid-js';
+import vite_linaria from '@linaria/vite';
+import vite_inspect from 'vite-plugin-inspect';
+
+export default defineConfig({
+  output: 'static',
+  srcDir: '.',
+  root: '.',
+  integrations: [astro_solid()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+  },
+  build: {
+    format: 'file',
+  },
+  vite: {
+    plugins: [
+      vite_linaria({
+        displayName: true,
+        classNameSlug: (hash, title, args) => `${args.dir}_${title}_${hash}`,
+        babelOptions: {
+          presets: ['solid'],
+        },
+      }),
+      vite_inspect(),
+    ],
+    css: {
+      modules: false,
+    },
+  },
+});

examples/astro-solid/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "astro-solid-example",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "@astrojs/solid-js": "^1.2.3",
+    "@babel/core": "^7.18.6",
+    "@linaria/core": "workspace:^",
+    "@linaria/shaker": "workspace:^",
+    "@linaria/vite": "workspace:^",
+    "astro": "^1.6.10",
+    "solid-js": "^1.6.2",
+    "vite": "^3.2.4",
+    "vite-plugin-inspect": "^0.7.8"
+  },
+  "scripts": {
+    "dev": "astro dev --force",
+    "build": "astro build"
+  },
+  "author": "Dmitriy Nikiforov"
+}

examples/astro-solid/pages/csr.tsx

@@ -0,0 +1,54 @@
+import { css } from '@linaria/core';
+import { CSRChild, cssVariableFromModule } from './csr_child';
+import { astroTextColor } from './external';
+
+// Try to change some variables white in dev mode
+const GLOBAL_VARS = {
+  color_header: 'red',
+} as const;
+
+export default function CSRComponent() {
+  const LOCAL_VARS = {
+    description_font_style: 'bold',
+  } as const;
+  return (
+    <div>
+      <h1>
+        Hello! This is{' '}
+        <strong
+          class={css`
+            color: ${GLOBAL_VARS.color_header};
+          `}
+        >
+          Solid
+        </strong>{' '}
+        app built with{' '}
+        <strong
+          class={css`
+            color: palevioletred;
+          `}
+        >
+          Linaria
+        </strong>{' '}
+        powered by
+        <br />
+        <strong
+          class={css`
+            color: ${astroTextColor};
+            font-size: ${cssVariableFromModule};
+          `}
+        >
+          Astro
+        </strong>
+      </h1>
+      <div
+        class={css`
+          font-style: ${LOCAL_VARS.description_font_style};
+        `}
+      >
+        This component was rendered on client.
+      </div>
+      <CSRChild />
+    </div>
+  );
+}

examples/astro-solid/pages/csr_child.tsx

@@ -0,0 +1,17 @@
+import { css } from '@linaria/core';
+import { astroTextColor } from './external';
+
+export function CSRChild() {
+  return (
+    <div
+      class={css`
+        float: right;
+        color: ${astroTextColor};
+      `}
+    >
+      I am child module!
+    </div>
+  );
+}
+// Try to change some variables white in dev mode
+export const cssVariableFromModule = '64px';

examples/astro-solid/pages/external.ts

@@ -0,0 +1 @@
+export const astroTextColor = 'orange';

examples/astro-solid/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import CSRComponent from './csr';
+---
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Linaria – zero-runtime CSS in JS library</title>
+</head>
+
+<CSRComponent client:only="solid-js" />

examples/astro-solid/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "moduleResolution": "Node"
+  },
+  "exclude": ["node_modules"]
+}

examples/vite/package.json

@@ -9,16 +9,14 @@
     "linaria-website": "workspace:^"
   },
   "devDependencies": {
-    "@linaria/rollup": "workspace:^",
     "@linaria/shaker": "workspace:^",
+    "@linaria/vite": "workspace:^",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "rollup": "^3.2.2",
     "vite": "^3.1.8"
   },
   "scripts": {
     "build": "vite build"
   },
   "author": "Anton Evzhakov"
 }
-

examples/vite/vite.config.js

@@ -1,4 +1,4 @@
-import linaria from '@linaria/rollup';
+import linaria from '@linaria/vite';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
@@ -9,21 +9,17 @@ export default defineConfig(({ command }) => ({
     nodeResolve({
       extensions: ['.jsx', '.js'],
     }),
-    {
-      ...linaria({
-        include: ['**/*.{js,jsx}'],
-        babelOptions: {
-          presets: ['@babel/preset-react'],
-        },
-      }),
-      enforce: 'pre',
-    },
+    linaria({
+      include: ['**/*.{js,jsx}'],
+      babelOptions: {
+        presets: ['@babel/preset-react'],
+      },
+    }),
     react({
       jsxRuntime: 'classic',
     }),
   ],
   build: {
-    outDir: 'build',
     target: command === 'serve' ? 'modules' : 'es2015',
   },
 }));

packages/rollup/package.json

@@ -7,11 +7,10 @@
     "@linaria/babel-preset": "workspace:^",
     "@linaria/logger": "workspace:^",
     "@linaria/utils": "workspace:^",
+    "@linaria/vite": "workspace:^",
     "@rollup/pluginutils": "^4.1.0"
   },
   "devDependencies": {
-    "@types/estree": "^0.0.45",
-    "@types/node": "^17.0.39",
     "rollup": "1.20.0||^2.0.0"
   },
   "engines": {
@@ -35,6 +34,7 @@
     "linaria",
     "react",
     "rollup",
+    "rollup-plugin",
     "styled-components"
   ],
   "license": "MIT",

packages/rollup/src/index.ts

@@ -4,8 +4,6 @@
  * returns transformed code without template literals and attaches generated source maps
  */
 
-import path from 'path';
-
 import { createFilter } from '@rollup/pluginutils';
 import type { Plugin } from 'rollup';
 
@@ -19,6 +17,8 @@ import type {
 } from '@linaria/babel-preset';
 import { createCustomDebug } from '@linaria/logger';
 import { getFileIdx } from '@linaria/utils';
+import type { Plugin as VitePlugin } from '@linaria/vite';
+import vitePlugin from '@linaria/vite';
 
 type RollupPluginOptions = {
   include?: string | string[];
@@ -27,33 +27,21 @@ type RollupPluginOptions = {
   preprocessor?: Preprocessor;
 } & Partial<PluginOptions>;
 
-type ViteConfig = {
-  root: string;
-  command: 'serve' | 'build';
-};
-
 export default function linaria({
   include,
   exclude,
   sourceMap,
   preprocessor,
   ...rest
-}: RollupPluginOptions = {}): Plugin & {
-  configResolved: (config: ViteConfig) => void;
-} {
+}: RollupPluginOptions = {}): Plugin {
   const filter = createFilter(include, exclude);
   const cssLookup: { [key: string]: string } = {};
-  let config: ViteConfig;
-
   const codeCache: CodeCache = new Map();
   const resolveCache = new Map<string, string>();
   const evalCache = new Map<string, Module>();
 
-  return {
+  const plugin: Plugin = {
     name: 'linaria',
-    configResolved(resolvedConfig: ViteConfig) {
-      config = resolvedConfig;
-    },
     load(id: string) {
       return cssLookup[id];
     },
@@ -119,14 +107,48 @@ export default function linaria({
       }
 
       cssLookup[filename] = cssText;
-      if (config?.command === 'serve' && config?.root) {
-        cssLookup[`/${path.posix.relative(config.root, filename)}`] = cssText;
-      }
 
       result.code += `\nimport ${JSON.stringify(filename)};\n`;
 
       /* eslint-disable-next-line consistent-return */
       return { code: result.code, map: result.sourceMap };
     },
   };
+
+  let vite: VitePlugin | undefined;
+
+  return new Proxy<Plugin>(plugin, {
+    get(target, prop) {
+      return (vite || target)[prop as keyof Plugin];
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      return Object.getOwnPropertyDescriptor(
+        vite || target,
+        prop as keyof Plugin
+      );
+    },
+
+    ownKeys() {
+      // Rollup doesn't ask config about its own keys, so it is Vite.
+      vite = vitePlugin({
+        include,
+        exclude,
+        sourceMap,
+        preprocessor,
+        ...rest,
+      });
+
+      vite = {
+        ...vite,
+        buildStart() {
+          this.warn(
+            'You are trying to use @linaria/rollup with Vite. The support for Vite in @linaria/rollup is deprecated and will be removed in the next major release. Please use @linaria/vite instead.'
+          );
+        },
+      };
+
+      return Reflect.ownKeys(vite);
+    },
+  });
 }

packages/rollup/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": { "paths": {}, "rootDir": "src/", "types": ["node"] },
+  "compilerOptions": { "paths": {}, "rootDir": "src/" },
   "references": [{ "path": "../babel" }]
 }

packages/utils/src/scopeHelpers.ts

@@ -9,7 +9,7 @@ import type {
   Program,
   FieldOptions,
 } from '@babel/types';
-import { Function, NODE_FIELDS } from '@babel/types';
+import { NODE_FIELDS } from '@babel/types';
 
 import findIdentifiers, { nonType } from './findIdentifiers';
 import { getScope } from './getScope';