diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:46:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:48:30 -0300 |
commit | 38acabfa6089ab8ac469c12b5f55022fb96935e5 (patch) | |
tree | 453dbf70000cc5e338b06201af1eaca8343f8f73 /@linaria/packages/esbuild | |
parent | f26125e039143b92dc0d84e7775f508ab0cdcaa8 (diff) | |
download | node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.tar.gz node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.tar.bz2 node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.zip |
Diffstat (limited to '@linaria/packages/esbuild')
-rw-r--r-- | @linaria/packages/esbuild/CHANGELOG.md | 34 | ||||
-rw-r--r-- | @linaria/packages/esbuild/README.md | 35 | ||||
-rw-r--r-- | @linaria/packages/esbuild/babel.config.js | 3 | ||||
-rw-r--r-- | @linaria/packages/esbuild/package.json | 48 | ||||
-rw-r--r-- | @linaria/packages/esbuild/src/index.ts | 106 | ||||
-rw-r--r-- | @linaria/packages/esbuild/tsconfig.json | 12 |
6 files changed, 238 insertions, 0 deletions
diff --git a/@linaria/packages/esbuild/CHANGELOG.md b/@linaria/packages/esbuild/CHANGELOG.md new file mode 100644 index 0000000..e5945ab --- /dev/null +++ b/@linaria/packages/esbuild/CHANGELOG.md @@ -0,0 +1,34 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [3.0.0-beta.8](https://github.com/callstack/linaria/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2021-07-18) + + +### Bug Fixes + +* **esbuild:** add missing resolveDir to support webfont bundling ([#789](https://github.com/callstack/linaria/issues/789)) ([45e5de0](https://github.com/callstack/linaria/commit/45e5de06cef880a3b3524e2fed5cec313903cc43)) + + + + + +# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24) + + +### Bug Fixes + +* **esbuild:** import esbuild correctly ([#783](https://github.com/callstack/linaria/issues/783)) ([a22522b](https://github.com/callstack/linaria/commit/a22522b0c91eefa12a10f67caf27ecb2954d8d1d)) +* **esbuild:** workaround to for esbuild compile options ([#784](https://github.com/callstack/linaria/issues/784)) ([ac47f43](https://github.com/callstack/linaria/commit/ac47f43d7d2f692ef57b12573fdacdde72c25e19)) + + + + + +# [3.0.0-beta.6](https://github.com/callstack/linaria/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2021-06-06) + + +### Features + +* add esbuild integration ([#765](https://github.com/callstack/linaria/issues/765)) ([511a717](https://github.com/callstack/linaria/commit/511a7178fd9c77fb971d392067b0f7ea8fcd30a4)) diff --git a/@linaria/packages/esbuild/README.md b/@linaria/packages/esbuild/README.md new file mode 100644 index 0000000..0d75b37 --- /dev/null +++ b/@linaria/packages/esbuild/README.md @@ -0,0 +1,35 @@ +<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> + +--- + +### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation. + +## Features + +- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build +- Familiar **CSS syntax** with Sass like nesting +- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes +- Easily find where the style was defined with **CSS sourcemaps** +- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint) +- Use **JavaScript for logic**, no CSS preprocessor needed +- Optionally use any **CSS preprocessor** such as Sass or PostCSS + +**[Why use Linaria](../../docs/BENEFITS.md)** + +## Installation + +```sh +npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker +``` + +or + +```sh +yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker +``` diff --git a/@linaria/packages/esbuild/babel.config.js b/@linaria/packages/esbuild/babel.config.js new file mode 100644 index 0000000..c9ad680 --- /dev/null +++ b/@linaria/packages/esbuild/babel.config.js @@ -0,0 +1,3 @@ +const config = require('../../babel.config'); + +module.exports = config; diff --git a/@linaria/packages/esbuild/package.json b/@linaria/packages/esbuild/package.json new file mode 100644 index 0000000..148d5c5 --- /dev/null +++ b/@linaria/packages/esbuild/package.json @@ -0,0 +1,48 @@ +{ + "name": "@linaria/esbuild", + "version": "3.0.0-beta.8", + "publishConfig": { + "access": "public" + }, + "description": "Blazing fast zero-runtime CSS in JS library", + "main": "lib/index.js", + "module": "esm/index.js", + "types": "types", + "files": [ + "types/", + "lib/", + "esm/" + ], + "license": "MIT", + "repository": "git@github.com:callstack/linaria.git", + "bugs": { + "url": "https://github.com/callstack/linaria/issues" + }, + "homepage": "https://github.com/callstack/linaria#readme", + "keywords": [ + "react", + "linaria", + "css", + "css-in-js", + "styled-components", + "babel-plugin", + "babel", + "esbuild" + ], + "scripts": { + "build:lib": "cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start", + "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start", + "build": "yarn build:lib && yarn build:esm", + "build:declarations": "tsc --emitDeclarationOnly --outDir types", + "prepare": "yarn build && yarn build:declarations", + "typecheck": "tsc --noEmit --composite false", + "watch": "yarn build --watch" + }, + "dependencies": { + "@linaria/babel-preset": "^3.0.0-beta.7", + "esbuild": "^0.12.5" + }, + "peerDependencies": { + "@babel/core": ">=7" + } +} diff --git a/@linaria/packages/esbuild/src/index.ts b/@linaria/packages/esbuild/src/index.ts new file mode 100644 index 0000000..ab58fca --- /dev/null +++ b/@linaria/packages/esbuild/src/index.ts @@ -0,0 +1,106 @@ +/** + * This file contains an esbuild loader for Linaria. + * It uses the transform.ts function to generate class names from source code, + * returns transformed code without template literals and attaches generated source maps + */ + +import path from 'path'; +import fs from 'fs'; +import type { PluginOptions, Preprocessor } from '@linaria/babel-preset'; +import { slugify, transform } from '@linaria/babel-preset'; +import { transformSync, Plugin, TransformOptions, Loader } from 'esbuild'; + +type EsbuildPluginOptions = { + sourceMap?: boolean; + preprocessor?: Preprocessor; + esbuildOptions?: TransformOptions; +} & Partial<PluginOptions>; + +const nodeModulesRegex = /^(?:.*[\\/])?node_modules(?:[\\/].*)?$/; + +export default function linaria({ + sourceMap, + preprocessor, + esbuildOptions, + ...rest +}: EsbuildPluginOptions = {}): Plugin { + return { + name: 'linaria', + setup(build) { + const cssLookup = new Map<string, string>(); + + build.onResolve({ filter: /\.linaria\.css$/ }, (args) => { + return { + namespace: 'linaria', + path: args.path, + }; + }); + + build.onLoad({ filter: /.*/, namespace: 'linaria' }, (args) => { + return { + contents: cssLookup.get(args.path), + loader: 'css', + resolveDir: path.basename(args.path), + }; + }); + + build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, (args) => { + const rawCode = fs.readFileSync(args.path, 'utf8'); + const { ext, name: filename } = path.parse(args.path); + const loader = ext.replace(/^\./, '') as Loader; + + if (nodeModulesRegex.test(args.path)) { + return { + loader, + contents: rawCode, + }; + } + + if (typeof esbuildOptions === 'undefined') { + esbuildOptions = {}; + if ('jsxFactory' in build.initialOptions) { + esbuildOptions.jsxFactory = build.initialOptions.jsxFactory; + } + if ('jsxFragment' in build.initialOptions) { + esbuildOptions.jsxFragment = build.initialOptions.jsxFragment; + } + } + + const { code } = transformSync(rawCode, { + ...esbuildOptions, + loader, + }); + const result = transform(code, { + filename: args.path, + preprocessor, + pluginOptions: rest, + }); + + if (!result.cssText) { + return { + contents: code, + }; + } + + let { cssText } = result; + + const slug = slugify(cssText); + const cssFilename = `${filename}_${slug}.linaria.css`; + + if (sourceMap && result.cssSourceMapText) { + const map = Buffer.from(result.cssSourceMapText).toString('base64'); + cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`; + } + + cssLookup.set(cssFilename, cssText); + + return { + contents: ` + import ${JSON.stringify(cssFilename)}; + ${result.code} + `, + }; + }); + }, + }; +} diff --git a/@linaria/packages/esbuild/tsconfig.json b/@linaria/packages/esbuild/tsconfig.json new file mode 100644 index 0000000..3d5aeee --- /dev/null +++ b/@linaria/packages/esbuild/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "paths": {}, + "rootDir": "src/" + }, + "references": [ + { + "path": "../babel" + } + ] +}
\ No newline at end of file |