Jesus sucks

This commit is contained in:
2024-12-17 13:23:11 -08:00
parent 3a3382ffff
commit b2dbf46d28
13060 changed files with 1310035 additions and 1 deletions

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,346 @@
# @emotion/babel-plugin
> Babel plugin for the minification and optimization of emotion styles.
`@emotion/babel-plugin` is highly recommended, but not required in version 8 and
above of Emotion.
## Features
<table>
<thead>
<tr>
<th>Feature/Syntax</th>
<th>Native</th>
<th>Babel Plugin Required</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>css``</code></td>
<td align="center">✅</td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td><code>css(...)</code></td>
<td align="center">✅</td>
<td align="center"></td>
<td>Generally used for object styles.</td>
</tr>
<tr>
<td>components as selectors</td>
<td align="center"></td>
<td align="center">✅</td>
<td>Allows an emotion component to be <a href="https://emotion.sh/docs/styled#targeting-another-emotion-component">used as a CSS selector</a>.</td>
</tr>
<tr>
<td>Minification</td>
<td align="center"></td>
<td align="center">✅</td>
<td>Any leading/trailing space between properties in your <code>css</code> and <code>styled</code> blocks is removed. This can reduce the size of your final bundle.</td>
</tr>
<tr>
<td>Dead Code Elimination</td>
<td align="center"></td>
<td align="center">✅</td>
<td>Uglifyjs will use the injected <code>/*#__PURE__*/</code> flag comments to mark your <code>css</code> and <code>styled</code> blocks as candidates for dead code elimination.</td>
</tr>
<tr>
<td>Source Maps</td>
<td align="center"></td>
<td align="center">✅</td>
<td>When enabled, navigate directly to the style declaration in your javascript file.</td>
</tr>
<tr>
<td>Contextual Class Names</td>
<td align="center"></td>
<td align="center">✅</td>
<td>Generated class names include the name of the variable or component they were defined in.</td>
</tr>
</tbody>
</table>
## Example
**In**
```javascript
const myStyles = css`
font-size: 20px;
@media (min-width: 420px) {
color: blue;
${css`
width: 96px;
height: 96px;
`};
line-height: 26px;
}
background: green;
${{ backgroundColor: 'hotpink' }};
`
```
**Out**
```javascript
const myStyles = /* #__PURE__ */ css(
'font-size:20px;@media(min-width:420px){color:blue;',
/* #__PURE__ */ css('width:96px;height:96px;'),
';line-height:26px;}background:green;',
{ backgroundColor: 'hotpink' },
';'
)
```
## Installation
```bash
yarn add --dev @emotion/babel-plugin
```
or if you prefer npm
```bash
npm install --save-dev @emotion/babel-plugin
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@emotion"]
}
```
With options:
_Defaults Shown_
```js
{
"plugins": [
[
"@emotion",
{
// sourceMap is on by default but source maps are dead code eliminated in production
"sourceMap": true,
"autoLabel": "dev-only",
"labelFormat": "[local]",
"cssPropOptimization": true
}
]
]
}
```
Recommended Setup
**.babelrc**
```json
{
"plugins": ["@emotion"]
}
```
### Via CLI
```bash
babel --plugins @emotion/babel-plugin script.js
```
### Via Node API
```javascript
require('@babel/core').transform('code', {
plugins: ['@emotion/babel-plugin']
})
```
## Options
### `sourceMap`
`boolean`, defaults to `true`.
This option enables the following:
- Injected source maps for use in browser dev tools
[**Documentation**](https://emotion.sh/docs/source-maps)
> Note:
>
> Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds
### `autoLabel`
`'dev-only' | 'always' | 'never'`, defaults to `dev-only`.
This option enables the following:
- Automatically adds the `label` property to styles so that class names
generated by `css` or `styled` include the name of the variable the result is
assigned to.
- Please note that non word characters in the variable will be removed
(Eg. `iconStyles$1` will become `iconStyles1`) because `$` is not valid
[CSS ClassName Selector](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#449000)
Each possible value for this option produces different output code:
- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
- with `always` we always add labels when possible,
- with `never` we disable this entirely and no labels are added.
#### css
**In**
```javascript
const brownStyles = css({ color: 'brown' })
```
**Out**
```javascript
const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')
```
`brownStyles`'s value would be `css-1q8eu9e-brownStyles`
### `labelFormat`
`string`, defaults to `"[local]"`.
This option only works when `autoLabel` is set to `'dev-only'` or `'always'`. It allows you to
define the format of the resulting `label`. The format is defined via string where
variable parts are enclosed in square brackets `[]`.
For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced
with the name of the variable the result is assigned to.
Allowed values:
- `[local]` - the name of the variable the result of the `css` or `styled` expression is assigned to.
- `[filename]` - name of the file (without extension) where `css` or `styled` expression is located.
- `[dirname]` - name of the directory containing the file where `css` or `styled` expression is located.
This format only affects the label property of the expression, meaning that the `css` prefix and hash will
be prepended automatically.
#### css
**In**
```javascript
// BrownView.js
// autoLabel: 'dev-only'
// labelFormat: '[filename]--[local]'
const brownStyles = css({ color: 'brown' })
```
**Out**
```javascript
const brownStyles = /*#__PURE__*/ css(
{ color: 'brown' },
'label:BrownView--brownStyles;'
)
```
`BrownView--brownStyles`'s value would be `css-hash-BrownView--brownStyles`
#### styled
**In**
```javascript
const H1 = styled.h1({
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
boxSizing: 'border-box',
display: 'flex',
':hover': {
transform: 'scale(1.2)'
}
})
```
**Out**
```javascript
const H1 = /*#__PURE__*/ styled('h1', {
label: 'H1'
})({
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
boxSizing: 'border-box',
display: 'flex',
':hover': {
transform: 'scale(1.2)'
}
})
```
`H1`'s class name attribute would be `css-hash-H1`
### `cssPropOptimization`
`boolean`, defaults to `true`.
This option assumes that you are using something to make `@emotion/react`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
### `importMap`
This option allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
An example file:
```js
import { anotherExport } from 'my-package'
import { someExport, thisIsTheJsxExport } from 'some-package'
```
An example config:
```json
{
"my-package": {
"anotherExport": {
"canonicalImport": ["@emotion/styled", "default"],
"styledBaseImport": ["my-package/base", "anotherExport"]
}
},
"some-package": {
"someExport": {
"canonicalImport": ["@emotion/react", "css"]
},
"thisIsTheJsxExport": {
"canonicalImport": ["@emotion/react", "jsx"]
}
}
}
```
## Babel Macros
Instead of using `@emotion/babel-plugin`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.
```jsx
import {
css,
keyframes,
injectGlobal,
flush,
hydrate
} from '@emotion/css/macro'
import { jsx, css, Global, keyframes } from '@emotion/react/macro'
import styled from '@emotion/styled/macro'
```

View File

@@ -0,0 +1,23 @@
Copyright 2013 Thorsten Lorenz.
All rights reserved.
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,123 @@
# convert-source-map [![Build Status][ci-image]][ci-url]
Converts a source-map from/to different formats and allows adding/changing properties.
```js
var convert = require('convert-source-map');
var json = convert
.fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
.toJSON();
var modified = convert
.fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
.setProperty('sources', [ 'SRC/FOO.JS' ])
.toJSON();
console.log(json);
console.log(modified);
```
```json
{"version":3,"file":"build/foo.min.js","sources":["src/foo.js"],"names":[],"mappings":"AAAA","sourceRoot":"/"}
{"version":3,"file":"build/foo.min.js","sources":["SRC/FOO.JS"],"names":[],"mappings":"AAAA","sourceRoot":"/"}
```
## API
### fromObject(obj)
Returns source map converter from given object.
### fromJSON(json)
Returns source map converter from given json string.
### fromBase64(base64)
Returns source map converter from given base64 encoded json string.
### fromComment(comment)
Returns source map converter from given base64 encoded json string prefixed with `//# sourceMappingURL=...`.
### fromMapFileComment(comment, mapFileDir)
Returns source map converter from given `filename` by parsing `//# sourceMappingURL=filename`.
`filename` must point to a file that is found inside the `mapFileDir`. Most tools store this file right next to the
generated file, i.e. the one containing the source map.
### fromSource(source)
Finds last sourcemap comment in file and returns source map converter or returns null if no source map comment was found.
### fromMapFileSource(source, mapFileDir)
Finds last sourcemap comment in file and returns source map converter or returns null if no source map comment was
found.
The sourcemap will be read from the map file found by parsing `# sourceMappingURL=file` comment. For more info see
fromMapFileComment.
### toObject()
Returns a copy of the underlying source map.
### toJSON([space])
Converts source map to json string. If `space` is given (optional), this will be passed to
[JSON.stringify](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify) when the
JSON string is generated.
### toBase64()
Converts source map to base64 encoded json string.
### toComment([options])
Converts source map to an inline comment that can be appended to the source-file.
By default, the comment is formatted like: `//# sourceMappingURL=...`, which you would
normally see in a JS source file.
When `options.multiline == true`, the comment is formatted like: `/*# sourceMappingURL=... */`, which you would find in a CSS source file.
### addProperty(key, value)
Adds given property to the source map. Throws an error if property already exists.
### setProperty(key, value)
Sets given property to the source map. If property doesn't exist it is added, otherwise its value is updated.
### getProperty(key)
Gets given property of the source map.
### removeComments(src)
Returns `src` with all source map comments removed
### removeMapFileComments(src)
Returns `src` with all source map comments pointing to map files removed.
### commentRegex
Provides __a fresh__ RegExp each time it is accessed. Can be used to find source map comments.
### mapFileCommentRegex
Provides __a fresh__ RegExp each time it is accessed. Can be used to find source map comments pointing to map files.
### generateMapFileComment(file, [options])
Returns a comment that links to an external source map via `file`.
By default, the comment is formatted like: `//# sourceMappingURL=...`, which you would normally see in a JS source file.
When `options.multiline == true`, the comment is formatted like: `/*# sourceMappingURL=... */`, which you would find in a CSS source file.
[ci-url]: https://github.com/thlorenz/convert-source-map/actions?query=workflow:ci
[ci-image]: https://img.shields.io/github/workflow/status/thlorenz/convert-source-map/CI?style=flat-square

View File

@@ -0,0 +1,179 @@
'use strict';
var fs = require('fs');
var path = require('path');
Object.defineProperty(exports, 'commentRegex', {
get: function getCommentRegex () {
return /^\s*\/(?:\/|\*)[@#]\s+sourceMappingURL=data:(?:application|text)\/json;(?:charset[:=]\S+?;)?base64,(?:.*)$/mg;
}
});
Object.defineProperty(exports, 'mapFileCommentRegex', {
get: function getMapFileCommentRegex () {
// Matches sourceMappingURL in either // or /* comment styles.
return /(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"`]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^\*]+?)[ \t]*(?:\*\/){1}[ \t]*$)/mg;
}
});
var decodeBase64;
if (typeof Buffer !== 'undefined') {
if (typeof Buffer.from === 'function') {
decodeBase64 = decodeBase64WithBufferFrom;
} else {
decodeBase64 = decodeBase64WithNewBuffer;
}
} else {
decodeBase64 = decodeBase64WithAtob;
}
function decodeBase64WithBufferFrom(base64) {
return Buffer.from(base64, 'base64').toString();
}
function decodeBase64WithNewBuffer(base64) {
if (typeof value === 'number') {
throw new TypeError('The value to decode must not be of type number.');
}
return new Buffer(base64, 'base64').toString();
}
function decodeBase64WithAtob(base64) {
return decodeURIComponent(escape(atob(base64)));
}
function stripComment(sm) {
return sm.split(',').pop();
}
function readFromFileMap(sm, dir) {
// NOTE: this will only work on the server since it attempts to read the map file
var r = exports.mapFileCommentRegex.exec(sm);
// for some odd reason //# .. captures in 1 and /* .. */ in 2
var filename = r[1] || r[2];
var filepath = path.resolve(dir, filename);
try {
return fs.readFileSync(filepath, 'utf8');
} catch (e) {
throw new Error('An error occurred while trying to read the map file at ' + filepath + '\n' + e);
}
}
function Converter (sm, opts) {
opts = opts || {};
if (opts.isFileComment) sm = readFromFileMap(sm, opts.commentFileDir);
if (opts.hasComment) sm = stripComment(sm);
if (opts.isEncoded) sm = decodeBase64(sm);
if (opts.isJSON || opts.isEncoded) sm = JSON.parse(sm);
this.sourcemap = sm;
}
Converter.prototype.toJSON = function (space) {
return JSON.stringify(this.sourcemap, null, space);
};
if (typeof Buffer !== 'undefined') {
if (typeof Buffer.from === 'function') {
Converter.prototype.toBase64 = encodeBase64WithBufferFrom;
} else {
Converter.prototype.toBase64 = encodeBase64WithNewBuffer;
}
} else {
Converter.prototype.toBase64 = encodeBase64WithBtoa;
}
function encodeBase64WithBufferFrom() {
var json = this.toJSON();
return Buffer.from(json, 'utf8').toString('base64');
}
function encodeBase64WithNewBuffer() {
var json = this.toJSON();
if (typeof json === 'number') {
throw new TypeError('The json to encode must not be of type number.');
}
return new Buffer(json, 'utf8').toString('base64');
}
function encodeBase64WithBtoa() {
var json = this.toJSON();
return btoa(unescape(encodeURIComponent(json)));
}
Converter.prototype.toComment = function (options) {
var base64 = this.toBase64();
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return options && options.multiline ? '/*# ' + data + ' */' : '//# ' + data;
};
// returns copy instead of original
Converter.prototype.toObject = function () {
return JSON.parse(this.toJSON());
};
Converter.prototype.addProperty = function (key, value) {
if (this.sourcemap.hasOwnProperty(key)) throw new Error('property "' + key + '" already exists on the sourcemap, use set property instead');
return this.setProperty(key, value);
};
Converter.prototype.setProperty = function (key, value) {
this.sourcemap[key] = value;
return this;
};
Converter.prototype.getProperty = function (key) {
return this.sourcemap[key];
};
exports.fromObject = function (obj) {
return new Converter(obj);
};
exports.fromJSON = function (json) {
return new Converter(json, { isJSON: true });
};
exports.fromBase64 = function (base64) {
return new Converter(base64, { isEncoded: true });
};
exports.fromComment = function (comment) {
comment = comment
.replace(/^\/\*/g, '//')
.replace(/\*\/$/g, '');
return new Converter(comment, { isEncoded: true, hasComment: true });
};
exports.fromMapFileComment = function (comment, dir) {
return new Converter(comment, { commentFileDir: dir, isFileComment: true, isJSON: true });
};
// Finds last sourcemap comment in file or returns null if none was found
exports.fromSource = function (content) {
var m = content.match(exports.commentRegex);
return m ? exports.fromComment(m.pop()) : null;
};
// Finds last sourcemap comment in file or returns null if none was found
exports.fromMapFileSource = function (content, dir) {
var m = content.match(exports.mapFileCommentRegex);
return m ? exports.fromMapFileComment(m.pop(), dir) : null;
};
exports.removeComments = function (src) {
return src.replace(exports.commentRegex, '');
};
exports.removeMapFileComments = function (src) {
return src.replace(exports.mapFileCommentRegex, '');
};
exports.generateMapFileComment = function (file, options) {
var data = 'sourceMappingURL=' + file;
return options && options.multiline ? '/*# ' + data + ' */' : '//# ' + data;
};

View File

@@ -0,0 +1,41 @@
{
"name": "convert-source-map",
"version": "1.9.0",
"description": "Converts a source-map from/to different formats and allows adding/changing properties.",
"main": "index.js",
"scripts": {
"test": "tap test/*.js --color"
},
"repository": {
"type": "git",
"url": "git://github.com/thlorenz/convert-source-map.git"
},
"homepage": "https://github.com/thlorenz/convert-source-map",
"devDependencies": {
"inline-source-map": "~0.6.2",
"tap": "~9.0.0"
},
"keywords": [
"convert",
"sourcemap",
"source",
"map",
"browser",
"debug"
],
"author": {
"name": "Thorsten Lorenz",
"email": "thlorenz@gmx.de",
"url": "http://thlorenz.com"
},
"license": "MIT",
"engine": {
"node": ">=0.6"
},
"files": [
"index.js"
],
"browser": {
"fs": false
}
}

View File

@@ -0,0 +1,55 @@
{
"name": "@emotion/babel-plugin",
"version": "11.13.5",
"description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
"main": "dist/emotion-babel-plugin.cjs.js",
"module": "dist/emotion-babel-plugin.esm.js",
"exports": {
".": {
"types": {
"import": "./dist/emotion-babel-plugin.cjs.mjs",
"default": "./dist/emotion-babel-plugin.cjs.js"
},
"module": "./dist/emotion-babel-plugin.esm.js",
"import": "./dist/emotion-babel-plugin.cjs.mjs",
"default": "./dist/emotion-babel-plugin.cjs.js"
},
"./package.json": "./package.json"
},
"files": [
"src",
"lib",
"dist"
],
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
"@babel/runtime": "^7.18.3",
"@emotion/hash": "^0.9.2",
"@emotion/memoize": "^0.9.0",
"@emotion/serialize": "^1.3.3",
"babel-plugin-macros": "^3.1.0",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^4.0.0",
"find-root": "^1.1.0",
"source-map": "^0.5.7",
"stylis": "4.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.5",
"babel-check-duplicated-nodes": "^1.0.0"
},
"author": "Kye Hohenberger",
"homepage": "https://emotion.sh",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin",
"keywords": [
"styles",
"emotion",
"react",
"css",
"css-in-js"
],
"bugs": {
"url": "https://github.com/emotion-js/emotion/issues"
}
}

View File

@@ -0,0 +1,182 @@
import {
transformExpressionWithStyles,
createTransformerMacro,
getSourceMap,
addImport
} from './utils'
export const transformCssCallExpression = (
{ state, babel, path, sourceMap, annotateAsPure = true } /*: {
state: *,
babel: *,
path: *,
sourceMap?: string,
annotateAsPure?: boolean
} */
) => {
let node = transformExpressionWithStyles({
babel,
state,
path,
shouldLabel: true,
sourceMap
})
if (node) {
path.replaceWith(node)
path.hoist()
} else if (annotateAsPure && path.isCallExpression()) {
path.addComment('leading', '#__PURE__')
}
}
export const transformCsslessArrayExpression = (
{ state, babel, path } /*: {
babel: *,
state: *,
path: *
} */
) => {
let t = babel.types
let expressionPath = path.get('value.expression')
let sourceMap =
state.emotionSourceMap && path.node.loc !== undefined
? getSourceMap(path.node.loc.start, state)
: ''
expressionPath.replaceWith(
t.callExpression(
// the name of this identifier doesn't really matter at all
// it'll never appear in generated code
t.identifier('___shouldNeverAppearCSS'),
path.node.value.expression.elements
)
)
transformCssCallExpression({
babel,
state,
path: expressionPath,
sourceMap,
annotateAsPure: false
})
if (t.isCallExpression(expressionPath)) {
expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments))
}
}
export const transformCsslessObjectExpression = (
{ state, babel, path, cssImport } /*: {
babel: *,
state: *,
path: *,
cssImport: { importSource: string, cssExport: string }
} */
) => {
let t = babel.types
let expressionPath = path.get('value.expression')
let sourceMap =
state.emotionSourceMap && path.node.loc !== undefined
? getSourceMap(path.node.loc.start, state)
: ''
expressionPath.replaceWith(
t.callExpression(
// the name of this identifier doesn't really matter at all
// it'll never appear in generated code
t.identifier('___shouldNeverAppearCSS'),
[path.node.value.expression]
)
)
transformCssCallExpression({
babel,
state,
path: expressionPath,
sourceMap
})
if (t.isCallExpression(expressionPath)) {
expressionPath
.get('callee')
.replaceWith(
addImport(state, cssImport.importSource, cssImport.cssExport, 'css')
)
}
}
let cssTransformer = (
{ state, babel, reference } /*: {
state: any,
babel: any,
reference: any
} */
) => {
transformCssCallExpression({ babel, state, path: reference.parentPath })
}
let globalTransformer = (
{ state, babel, reference, importSource, options } /*: {
state: any,
babel: any,
reference: any,
importSource: string,
options: { cssExport?: string }
} */
) => {
const t = babel.types
if (
!t.isJSXIdentifier(reference.node) ||
!t.isJSXOpeningElement(reference.parentPath.node)
) {
return
}
const stylesPropPath = reference.parentPath
.get('attributes')
.find(p => t.isJSXAttribute(p.node) && p.node.name.name === 'styles')
if (!stylesPropPath) {
return
}
if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
transformCsslessArrayExpression({
state,
babel,
path: stylesPropPath
})
} else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
transformCsslessObjectExpression({
state,
babel,
path: stylesPropPath,
cssImport:
options.cssExport !== undefined
? {
importSource,
cssExport: options.cssExport
}
: {
importSource: '@emotion/react',
cssExport: 'css'
}
})
}
}
}
export const transformers = {
// this is an empty function because this transformer is never called
// we don't run any transforms on `jsx` directly
// instead we use it as a hint to enable css prop optimization
jsx: () => {},
css: cssTransformer,
Global: globalTransformer
}
export default createTransformerMacro(transformers, {
importSource: '@emotion/react'
})

View File

@@ -0,0 +1,64 @@
import { transformExpressionWithStyles, createTransformerMacro } from './utils'
const isAlreadyTranspiled = path => {
if (!path.isCallExpression()) {
return false
}
const firstArgPath = path.get('arguments.0')
if (!firstArgPath) {
return false
}
if (!firstArgPath.isConditionalExpression()) {
return false
}
const alternatePath = firstArgPath.get('alternate')
if (!alternatePath.isObjectExpression()) {
return false
}
const properties = new Set(
alternatePath.get('properties').map(p => p.node.key.name)
)
return ['name', 'styles'].every(p => properties.has(p))
}
let createEmotionTransformer =
(isPure /*: boolean */) =>
(
{ state, babel, importSource, reference, importSpecifierName } /*: Object */
) => {
const path = reference.parentPath
if (isAlreadyTranspiled(path)) {
return
}
if (isPure) {
path.addComment('leading', '#__PURE__')
}
let node = transformExpressionWithStyles({
babel,
state,
path,
shouldLabel: true
})
if (node) {
path.node.arguments[0] = node
}
}
export let transformers = {
css: createEmotionTransformer(true),
injectGlobal: createEmotionTransformer(false),
keyframes: createEmotionTransformer(true)
}
export let createEmotionMacro = (importSource /*: string */) =>
createTransformerMacro(transformers, { importSource })

View File

@@ -0,0 +1,314 @@
import {
createEmotionMacro,
transformers as vanillaTransformers
} from './emotion-macro'
import { createStyledMacro, styledTransformer } from './styled-macro'
import coreMacro, {
transformers as coreTransformers,
transformCsslessArrayExpression,
transformCsslessObjectExpression
} from './core-macro'
import { getStyledOptions, createTransformerMacro } from './utils'
const getCssExport = (reexported, importSource, mapping) => {
const cssExport = Object.keys(mapping).find(localExportName => {
const [packageName, exportName] = mapping[localExportName].canonicalImport
return packageName === '@emotion/react' && exportName === 'css'
})
if (!cssExport) {
throw new Error(
`You have specified that '${importSource}' re-exports '${reexported}' from '@emotion/react' but it doesn't also re-export 'css' from '@emotion/react', 'css' is necessary for certain optimisations, please re-export it from '${importSource}'`
)
}
return cssExport
}
let webStyledMacro = createStyledMacro({
importSource: '@emotion/styled/base',
originalImportSource: '@emotion/styled',
isWeb: true
})
let nativeStyledMacro = createStyledMacro({
importSource: '@emotion/native',
originalImportSource: '@emotion/native',
isWeb: false
})
let primitivesStyledMacro = createStyledMacro({
importSource: '@emotion/primitives',
originalImportSource: '@emotion/primitives',
isWeb: false
})
let vanillaEmotionMacro = createEmotionMacro('@emotion/css')
let transformersSource = {
'@emotion/css': vanillaTransformers,
'@emotion/react': coreTransformers,
'@emotion/styled': {
default: [
styledTransformer,
{ styledBaseImport: ['@emotion/styled/base', 'default'], isWeb: true }
]
},
'@emotion/primitives': {
default: [styledTransformer, { isWeb: false }]
},
'@emotion/native': {
default: [styledTransformer, { isWeb: false }]
}
}
export const macros = {
core: coreMacro,
nativeStyled: nativeStyledMacro,
primitivesStyled: primitivesStyledMacro,
webStyled: webStyledMacro,
vanillaEmotion: vanillaEmotionMacro
}
/*
export type BabelPath = any
export type EmotionBabelPluginPass = any
*/
const AUTO_LABEL_VALUES = ['dev-only', 'never', 'always']
export default function (babel, options) {
if (
options.autoLabel !== undefined &&
!AUTO_LABEL_VALUES.includes(options.autoLabel)
) {
throw new Error(
`The 'autoLabel' option must be undefined, or one of the following: ${AUTO_LABEL_VALUES.map(
s => `"${s}"`
).join(', ')}`
)
}
let t = babel.types
return {
name: '@emotion',
// https://github.com/babel/babel/blob/0c97749e0fe8ad845b902e0b23a24b308b0bf05d/packages/babel-plugin-syntax-jsx/src/index.ts#L9-L18
manipulateOptions(opts, parserOpts) {
const { plugins } = parserOpts
if (
plugins.some(p => {
const plugin = Array.isArray(p) ? p[0] : p
return plugin === 'typescript' || plugin === 'jsx'
})
) {
return
}
plugins.push('jsx')
},
visitor: {
ImportDeclaration(path, state) {
const macro = state.pluginMacros[path.node.source.value]
// most of this is from https://github.com/kentcdodds/babel-plugin-macros/blob/main/src/index.js
if (macro === undefined) {
return
}
if (t.isImportNamespaceSpecifier(path.node.specifiers[0])) {
return
}
const imports = path.node.specifiers.map(s => ({
localName: s.local.name,
importedName:
s.type === 'ImportDefaultSpecifier' ? 'default' : s.imported.name
}))
let shouldExit = false
let hasReferences = false
const referencePathsByImportName = imports.reduce(
(byName, { importedName, localName }) => {
let binding = path.scope.getBinding(localName)
if (!binding) {
shouldExit = true
return byName
}
byName[importedName] = binding.referencePaths
hasReferences =
hasReferences || Boolean(byName[importedName].length)
return byName
},
{}
)
if (!hasReferences || shouldExit) {
return
}
/**
* Other plugins that run before babel-plugin-macros might use path.replace, where a path is
* put into its own replacement. Apparently babel does not update the scope after such
* an operation. As a remedy, the whole scope is traversed again with an empty "Identifier"
* visitor - this makes the problem go away.
*
* See: https://github.com/kentcdodds/import-all.macro/issues/7
*/
state.file.scope.path.traverse({
Identifier() {}
})
macro({
path,
references: referencePathsByImportName,
state,
babel,
isEmotionCall: true,
isBabelMacrosCall: true
})
},
Program(path, state) {
let macros = {}
let jsxReactImports /*: Array<{
importSource: string,
export: string,
cssExport: string
}> */ = [
{ importSource: '@emotion/react', export: 'jsx', cssExport: 'css' }
]
state.jsxReactImport = jsxReactImports[0]
Object.keys(state.opts.importMap || {}).forEach(importSource => {
let value = state.opts.importMap[importSource]
let transformers = {}
Object.keys(value).forEach(localExportName => {
let { canonicalImport, ...options } = value[localExportName]
let [packageName, exportName] = canonicalImport
if (packageName === '@emotion/react' && exportName === 'jsx') {
jsxReactImports.push({
importSource,
export: localExportName,
cssExport: getCssExport('jsx', importSource, value)
})
return
}
let packageTransformers = transformersSource[packageName]
if (packageTransformers === undefined) {
throw new Error(
`There is no transformer for the export '${exportName}' in '${packageName}'`
)
}
let extraOptions
if (packageName === '@emotion/react' && exportName === 'Global') {
// this option is not supposed to be set in importMap
extraOptions = {
cssExport: getCssExport('Global', importSource, value)
}
} else if (
packageName === '@emotion/styled' &&
exportName === 'default'
) {
// this is supposed to override defaultOptions value
// and let correct value to be set if coming in options
extraOptions = {
styledBaseImport: undefined
}
}
let [exportTransformer, defaultOptions] = Array.isArray(
packageTransformers[exportName]
)
? packageTransformers[exportName]
: [packageTransformers[exportName]]
transformers[localExportName] = [
exportTransformer,
{
...defaultOptions,
...extraOptions,
...options
}
]
})
macros[importSource] = createTransformerMacro(transformers, {
importSource
})
})
state.pluginMacros = {
'@emotion/styled': webStyledMacro,
'@emotion/react': coreMacro,
'@emotion/primitives': primitivesStyledMacro,
'@emotion/native': nativeStyledMacro,
'@emotion/css': vanillaEmotionMacro,
...macros
}
for (const node of path.node.body) {
if (t.isImportDeclaration(node)) {
let jsxReactImport = jsxReactImports.find(
thing =>
node.source.value === thing.importSource &&
node.specifiers.some(
x =>
t.isImportSpecifier(x) && x.imported.name === thing.export
)
)
if (jsxReactImport) {
state.jsxReactImport = jsxReactImport
break
}
}
}
if (state.opts.cssPropOptimization === false) {
state.transformCssProp = false
} else {
state.transformCssProp = true
}
if (state.opts.sourceMap === false) {
state.emotionSourceMap = false
} else {
state.emotionSourceMap = true
}
},
JSXAttribute(path, state) {
if (path.node.name.name !== 'css' || !state.transformCssProp) {
return
}
if (t.isJSXExpressionContainer(path.node.value)) {
if (t.isArrayExpression(path.node.value.expression)) {
transformCsslessArrayExpression({
state,
babel,
path
})
} else if (t.isObjectExpression(path.node.value.expression)) {
transformCsslessObjectExpression({
state,
babel,
path,
cssImport: state.jsxReactImport
})
}
}
},
CallExpression: {
exit(path /*: BabelPath */, state /*: EmotionBabelPluginPass */) {
try {
if (
path.node.callee &&
path.node.callee.property &&
path.node.callee.property.name === 'withComponent'
) {
switch (path.node.arguments.length) {
case 1:
case 2: {
path.node.arguments[1] = getStyledOptions(t, path, state)
}
}
}
} catch (e) {
throw path.buildCodeFrameError(e)
}
}
}
}
}
}

View File

@@ -0,0 +1,144 @@
import {
transformExpressionWithStyles,
getStyledOptions,
addImport,
createTransformerMacro
} from './utils'
const getReferencedSpecifier = (path, specifierName) => {
const specifiers = path.get('specifiers')
return specifierName === 'default'
? specifiers.find(p => p.isImportDefaultSpecifier())
: specifiers.find(p => p.node.local.name === specifierName)
}
export let styledTransformer = (
{
state,
babel,
path,
importSource,
reference,
importSpecifierName,
options: { styledBaseImport, isWeb }
} /*: {
state: Object,
babel: Object,
path: any,
importSource: string,
importSpecifierName: string,
reference: Object,
options: { styledBaseImport?: [string, string], isWeb: boolean }
} */
) => {
let t = babel.types
let getStyledIdentifier = () => {
if (
!styledBaseImport ||
(styledBaseImport[0] === importSource &&
styledBaseImport[1] === importSpecifierName)
) {
return t.cloneNode(reference.node)
}
if (path.node) {
const referencedSpecifier = getReferencedSpecifier(
path,
importSpecifierName
)
if (referencedSpecifier) {
referencedSpecifier.remove()
}
if (!path.get('specifiers').length) {
path.remove()
}
}
const [baseImportSource, baseSpecifierName] = styledBaseImport
return addImport(state, baseImportSource, baseSpecifierName, 'styled')
}
let createStyledComponentPath = null
if (
t.isMemberExpression(reference.parent) &&
reference.parent.computed === false
) {
if (
// checks if the first character is lowercase
// becasue we don't want to transform the member expression if
// it's in primitives/native
reference.parent.property.name.charCodeAt(0) > 96
) {
reference.parentPath.replaceWith(
t.callExpression(getStyledIdentifier(), [
t.stringLiteral(reference.parent.property.name)
])
)
} else {
reference.replaceWith(getStyledIdentifier())
}
createStyledComponentPath = reference.parentPath
} else if (
reference.parentPath &&
t.isCallExpression(reference.parentPath) &&
reference.parent.callee === reference.node
) {
reference.replaceWith(getStyledIdentifier())
createStyledComponentPath = reference.parentPath
}
if (!createStyledComponentPath) {
return
}
const styledCallLikeWithStylesPath = createStyledComponentPath.parentPath
let node = transformExpressionWithStyles({
path: styledCallLikeWithStylesPath,
state,
babel,
shouldLabel: false
})
if (node && isWeb) {
// we know the argument length will be 1 since that's the only time we will have a node since it will be static
styledCallLikeWithStylesPath.node.arguments[0] = node
}
styledCallLikeWithStylesPath.addComment('leading', '#__PURE__')
if (isWeb) {
createStyledComponentPath.node.arguments[1] = getStyledOptions(
t,
createStyledComponentPath,
state
)
}
}
export let createStyledMacro = (
{
importSource,
originalImportSource = importSource,
baseImportName = 'default',
isWeb
} /*: {
importSource: string,
originalImportSource?: string,
baseImportName?: string,
isWeb: boolean
} */
) =>
createTransformerMacro(
{
default: [
styledTransformer,
{ styledBaseImport: [importSource, baseImportName], isWeb }
]
},
{ importSource: originalImportSource }
)

View File

@@ -0,0 +1,30 @@
import { addDefault, addNamed } from '@babel/helper-module-imports'
export function addImport(
state,
importSource /*: string */,
importedSpecifier /*: string */,
nameHint /* ?: string */
) {
let cacheKey = ['import', importSource, importedSpecifier].join(':')
if (state[cacheKey] === undefined) {
let importIdentifier
if (importedSpecifier === 'default') {
importIdentifier = addDefault(state.file.path, importSource, { nameHint })
} else {
importIdentifier = addNamed(
state.file.path,
importedSpecifier,
importSource,
{
nameHint
}
)
}
state[cacheKey] = importIdentifier.name
}
return {
type: 'Identifier',
name: state[cacheKey]
}
}

View File

@@ -0,0 +1,14 @@
export default function createNodeEnvConditional(t, production, development) {
return t.conditionalExpression(
t.binaryExpression(
'===',
t.memberExpression(
t.memberExpression(t.identifier('process'), t.identifier('env')),
t.identifier('NODE_ENV')
),
t.stringLiteral('production')
),
production,
development
)
}

View File

@@ -0,0 +1,102 @@
import { getLabelFromPath } from './label'
import { getTargetClassName } from './get-target-class-name'
import createNodeEnvConditional from './create-node-env-conditional'
const getKnownProperties = (t, node) =>
new Set(
node.properties
.filter(n => t.isObjectProperty(n) && !n.computed)
.map(n => (t.isIdentifier(n.key) ? n.key.name : n.key.value))
)
const createObjectSpreadLike = (t, file, ...objs) =>
t.callExpression(file.addHelper('extends'), [t.objectExpression([]), ...objs])
export let getStyledOptions = (t, path, state) => {
const autoLabel = state.opts.autoLabel || 'dev-only'
let args = path.node.arguments
let optionsArgument = args.length >= 2 ? args[1] : null
let prodProperties = []
let devProperties = null
let knownProperties =
optionsArgument && t.isObjectExpression(optionsArgument)
? getKnownProperties(t, optionsArgument)
: new Set()
if (!knownProperties.has('target')) {
prodProperties.push(
t.objectProperty(
t.identifier('target'),
t.stringLiteral(getTargetClassName(state, t))
)
)
}
let label =
autoLabel !== 'never' && !knownProperties.has('label')
? getLabelFromPath(path, state, t)
: null
if (label) {
const labelNode = t.objectProperty(
t.identifier('label'),
t.stringLiteral(label)
)
switch (autoLabel) {
case 'always':
prodProperties.push(labelNode)
break
case 'dev-only':
devProperties = [labelNode]
break
}
}
if (optionsArgument) {
// for some reason `.withComponent` transformer gets requeued
// so check if this has been already transpiled to avoid double wrapping
if (
t.isConditionalExpression(optionsArgument) &&
t.isBinaryExpression(optionsArgument.test) &&
t.buildMatchMemberExpression('process.env.NODE_ENV')(
optionsArgument.test.left
)
) {
return optionsArgument
}
if (!t.isObjectExpression(optionsArgument)) {
const prodNode = createObjectSpreadLike(
t,
state.file,
t.objectExpression(prodProperties),
optionsArgument
)
return devProperties
? createNodeEnvConditional(
t,
prodNode,
t.cloneNode(
createObjectSpreadLike(
t,
state.file,
t.objectExpression(prodProperties.concat(devProperties)),
optionsArgument
)
)
)
: prodNode
}
prodProperties.unshift(...optionsArgument.properties)
}
return devProperties
? createNodeEnvConditional(
t,
t.objectExpression(prodProperties),
t.cloneNode(t.objectExpression(prodProperties.concat(devProperties)))
)
: t.objectExpression(prodProperties)
}

View File

@@ -0,0 +1,51 @@
import findRoot from 'find-root'
import memoize from '@emotion/memoize'
import nodePath from 'path'
import hashString from '@emotion/hash'
import escapeRegexp from 'escape-string-regexp'
let hashArray = (arr /*: Array<string> */) => hashString(arr.join(''))
const unsafeRequire = require
const getPackageRootPath = memoize(filename => findRoot(filename))
const separator = new RegExp(escapeRegexp(nodePath.sep), 'g')
const normalizePath = path => nodePath.normalize(path).replace(separator, '/')
export function getTargetClassName(state, t) {
if (state.emotionTargetClassNameCount === undefined) {
state.emotionTargetClassNameCount = 0
}
const hasFilepath =
state.file.opts.filename && state.file.opts.filename !== 'unknown'
const filename = hasFilepath ? state.file.opts.filename : ''
// normalize the file path to ignore folder structure
// outside the current node project and arch-specific delimiters
let moduleName = ''
let rootPath = filename
try {
rootPath = getPackageRootPath(filename)
moduleName = unsafeRequire(rootPath + '/package.json').name
} catch (err) {}
const finalPath =
filename === rootPath ? 'root' : filename.slice(rootPath.length)
const positionInFile = state.emotionTargetClassNameCount++
const stuffToHash = [moduleName]
if (finalPath) {
stuffToHash.push(normalizePath(finalPath))
} else {
stuffToHash.push(state.file.code)
}
const stableClassName = `e${hashArray(stuffToHash)}${positionInFile}`
return stableClassName
}

View File

@@ -0,0 +1,12 @@
export { getLabelFromPath } from './label'
export { getSourceMap } from './source-maps'
export { getTargetClassName } from './get-target-class-name'
export { simplifyObject } from './object-to-string'
export { transformExpressionWithStyles } from './transform-expression-with-styles'
export { getStyledOptions } from './get-styled-options'
export {
appendStringReturningExpressionToArguments,
joinStringLiterals
} from './strings'
export { addImport } from './add-import'
export { createTransformerMacro } from './transformer-macro'

View File

@@ -0,0 +1,192 @@
import nodePath from 'path'
/*
type LabelFormatOptions = {
name: string,
path: string
}
*/
const invalidClassNameCharacters = /[!"#$%&'()*+,./:;<=>?@[\]^`|}~{]/g
const sanitizeLabelPart = (labelPart /*: string */) =>
labelPart.trim().replace(invalidClassNameCharacters, '-')
function getLabel(
identifierName /* ?: string */,
labelFormat /* ?: string | (LabelFormatOptions => string) */,
filename /*: string */
) {
if (!identifierName) return null
const sanitizedName = sanitizeLabelPart(identifierName)
if (!labelFormat) {
return sanitizedName
}
if (typeof labelFormat === 'function') {
return labelFormat({
name: sanitizedName,
path: filename
})
}
const parsedPath = nodePath.parse(filename)
let localDirname = nodePath.basename(parsedPath.dir)
let localFilename = parsedPath.name
if (localFilename === 'index') {
localFilename = localDirname
}
return labelFormat
.replace(/\[local\]/gi, sanitizedName)
.replace(/\[filename\]/gi, sanitizeLabelPart(localFilename))
.replace(/\[dirname\]/gi, sanitizeLabelPart(localDirname))
}
export function getLabelFromPath(path, state, t) {
return getLabel(
getIdentifierName(path, t),
state.opts.labelFormat,
state.file.opts.filename
)
}
const getObjPropertyLikeName = (path, t) => {
if (
(!t.isObjectProperty(path) && !t.isObjectMethod(path)) ||
path.node.computed
) {
return null
}
if (t.isIdentifier(path.node.key)) {
return path.node.key.name
}
if (t.isStringLiteral(path.node.key)) {
return path.node.key.value.replace(/\s+/g, '-')
}
return null
}
function getDeclaratorName(path, t) {
const parent = path.findParent(
p =>
p.isVariableDeclarator() ||
p.isAssignmentExpression() ||
p.isFunctionDeclaration() ||
p.isFunctionExpression() ||
p.isArrowFunctionExpression() ||
p.isObjectProperty() ||
p.isObjectMethod()
)
if (!parent) {
return ''
}
// we probably have a css call assigned to a variable
// so we'll just return the variable name
if (parent.isVariableDeclarator()) {
if (t.isIdentifier(parent.node.id)) {
return parent.node.id.name
}
return ''
}
if (parent.isAssignmentExpression()) {
let { left } = parent.node
if (t.isIdentifier(left)) {
return left.name
}
if (t.isMemberExpression(left)) {
let memberExpression = left
let name = ''
while (true) {
if (!t.isIdentifier(memberExpression.property)) {
return ''
}
name = `${memberExpression.property.name}${name ? `-${name}` : ''}`
if (t.isIdentifier(memberExpression.object)) {
return `${memberExpression.object.name}-${name}`
}
if (!t.isMemberExpression(memberExpression.object)) {
return ''
}
memberExpression = memberExpression.object
}
}
return ''
}
// we probably have an inline css prop usage
if (parent.isFunctionDeclaration()) {
return parent.node.id.name || ''
}
if (parent.isFunctionExpression()) {
if (parent.node.id) {
return parent.node.id.name || ''
}
return getDeclaratorName(parent, t)
}
if (parent.isArrowFunctionExpression()) {
return getDeclaratorName(parent, t)
}
// we could also have an object property
const objPropertyLikeName = getObjPropertyLikeName(parent, t)
if (objPropertyLikeName) {
return objPropertyLikeName
}
let variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
if (!variableDeclarator || !variableDeclarator.get('id').isIdentifier()) {
return ''
}
return variableDeclarator.node.id.name
}
function getIdentifierName(path, t) {
let objPropertyLikeName = getObjPropertyLikeName(path.parentPath, t)
if (objPropertyLikeName) {
return objPropertyLikeName
}
let classOrClassPropertyParent = path.findParent(
p => t.isClassProperty(p) || t.isClass(p)
)
if (classOrClassPropertyParent) {
if (
t.isClassProperty(classOrClassPropertyParent) &&
classOrClassPropertyParent.node.computed === false &&
t.isIdentifier(classOrClassPropertyParent.node.key)
) {
return classOrClassPropertyParent.node.key.name
}
if (
t.isClass(classOrClassPropertyParent) &&
classOrClassPropertyParent.node.id
) {
return t.isIdentifier(classOrClassPropertyParent.node.id)
? classOrClassPropertyParent.node.id.name
: ''
}
}
let declaratorName = getDeclaratorName(path, t)
// if the name starts with _ it was probably generated by babel so we should ignore it
if (declaratorName.charAt(0) === '_') {
return ''
}
return declaratorName
}

View File

@@ -0,0 +1,153 @@
import { compile } from 'stylis'
const haveSameLocation = (element1, element2) => {
return element1.line === element2.line && element1.column === element2.column
}
const isAutoInsertedRule = element =>
element.type === 'rule' &&
element.parent &&
haveSameLocation(element, element.parent)
const toInputTree = (elements, tree) => {
for (let i = 0; i < elements.length; i++) {
const element = elements[i]
const { parent, children } = element
if (!parent) {
tree.push(element)
} else if (!isAutoInsertedRule(element)) {
parent.children.push(element)
}
if (Array.isArray(children)) {
element.children = []
toInputTree(children, tree)
}
}
return tree
}
var stringifyTree = elements => {
return elements
.map(element => {
switch (element.type) {
case 'import':
case 'decl':
return element.value
case 'comm':
// When we encounter a standard multi-line CSS comment and it contains a '@'
// character, we keep the comment. Some Stylis plugins, such as
// the stylis-rtl via the cssjanus plugin, use this special comment syntax
// to control behavior (such as: /* @noflip */). We can do this
// with standard CSS comments because they will work with compression,
// as opposed to non-standard single-line comments that will break compressed CSS.
return element.props === '/' && element.value.includes('@')
? element.value
: ''
case 'rule':
return `${element.value.replace(/&\f/g, '&')}{${stringifyTree(
element.children
)}}`
default: {
return `${element.value}{${stringifyTree(element.children)}}`
}
}
})
.join('')
}
const interleave = (strings /*: Array<*> */, interpolations /*: Array<*> */) =>
interpolations.reduce(
(array, interp, i) => array.concat([interp], strings[i + 1]),
[strings[0]]
)
function getDynamicMatches(str /*: string */) {
const re = /xxx(\d+):xxx/gm
let match
const matches = []
while ((match = re.exec(str)) !== null) {
if (match !== null) {
matches.push({
value: match[0],
p1: parseInt(match[1], 10),
index: match.index
})
}
}
return matches
}
function replacePlaceholdersWithExpressions(
str /*: string */,
expressions /*: Array<*> */,
t
) {
const matches = getDynamicMatches(str)
if (matches.length === 0) {
if (str === '') {
return []
}
return [t.stringLiteral(str)]
}
const strings = []
const finalExpressions = []
let cursor = 0
matches.forEach(({ value, p1, index }, i) => {
const preMatch = str.substring(cursor, index)
cursor = cursor + preMatch.length + value.length
if (!preMatch && i === 0) {
strings.push(t.stringLiteral(''))
} else {
strings.push(t.stringLiteral(preMatch))
}
finalExpressions.push(expressions[p1])
if (i === matches.length - 1) {
strings.push(t.stringLiteral(str.substring(index + value.length)))
}
})
return interleave(strings, finalExpressions).filter(
(node /*: { value: string } */) => {
return node.value !== ''
}
)
}
function createRawStringFromTemplateLiteral(
quasi /*: {
quasis: Array<{ value: { cooked: string } }>
} */
) {
let strs = quasi.quasis.map(x => x.value.cooked)
const src = strs
.reduce((arr, str, i) => {
arr.push(str)
if (i !== strs.length - 1) {
arr.push(`xxx${i}:xxx`)
}
return arr
}, [])
.join('')
.trim()
return src
}
export default function minify(path, t) {
const quasi = path.node.quasi
const raw = createRawStringFromTemplateLiteral(quasi)
const minified = stringifyTree(toInputTree(compile(raw), []))
const expressions = replacePlaceholdersWithExpressions(
minified,
quasi.expressions || [],
t
)
path.replaceWith(t.callExpression(path.node.tag, expressions))
}

View File

@@ -0,0 +1,39 @@
import { serializeStyles } from '@emotion/serialize'
// to anyone looking at this, this isn't intended to simplify every single case
// it's meant to simplify the most common cases so i don't want to make it especially complex
// also, this will be unnecessary when prepack is ready
export function simplifyObject(node, t /*: Object */) {
let finalString = ''
for (let i = 0; i < node.properties.length; i++) {
let property = node.properties[i]
if (
!t.isObjectProperty(property) ||
property.computed ||
(!t.isIdentifier(property.key) && !t.isStringLiteral(property.key)) ||
(!t.isStringLiteral(property.value) &&
!t.isNumericLiteral(property.value) &&
!t.isObjectExpression(property.value))
) {
return node
}
let key = property.key.name || property.key.value
if (key === 'styles') {
return node
}
if (t.isObjectExpression(property.value)) {
let simplifiedChild = simplifyObject(property.value, t)
if (!t.isStringLiteral(simplifiedChild)) {
return node
}
finalString += `${key}{${simplifiedChild.value}}`
continue
}
let value = property.value.value
finalString += serializeStyles([{ [key]: value }]).styles
}
return t.stringLiteral(finalString)
}

View File

@@ -0,0 +1,44 @@
import { SourceMapGenerator } from 'source-map'
import convert from 'convert-source-map'
function getGeneratorOpts(file) {
return file.opts.generatorOpts ? file.opts.generatorOpts : file.opts
}
export function makeSourceMapGenerator(file) {
const generatorOpts = getGeneratorOpts(file)
const filename = generatorOpts.sourceFileName
const generator = new SourceMapGenerator({
file: filename,
sourceRoot: generatorOpts.sourceRoot
})
generator.setSourceContent(filename, file.code)
return generator
}
export function getSourceMap(
offset /*: {
line: number,
column: number
} */,
state
) /*: string */ {
const generator = makeSourceMapGenerator(state.file)
const generatorOpts = getGeneratorOpts(state.file)
if (
generatorOpts.sourceFileName &&
generatorOpts.sourceFileName !== 'unknown'
) {
generator.addMapping({
generated: {
line: 1,
column: 0
},
source: generatorOpts.sourceFileName,
original: offset
})
return convert.fromObject(generator).toComment({ multiline: true })
}
return ''
}

View File

@@ -0,0 +1,60 @@
import {
getTypeScriptMakeTemplateObjectPath,
isTaggedTemplateTranspiledByBabel
} from './transpiled-output-utils'
export const appendStringReturningExpressionToArguments = (
t,
path,
expression
) => {
let lastIndex = path.node.arguments.length - 1
let last = path.node.arguments[lastIndex]
if (t.isStringLiteral(last)) {
if (typeof expression === 'string') {
path.node.arguments[lastIndex].value += expression
} else {
path.node.arguments[lastIndex] = t.binaryExpression('+', last, expression)
}
} else {
const makeTemplateObjectCallPath = getTypeScriptMakeTemplateObjectPath(path)
if (makeTemplateObjectCallPath) {
makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
const elements = argPath.get('elements')
const lastElement = elements[elements.length - 1]
if (typeof expression === 'string') {
lastElement.replaceWith(
t.stringLiteral(lastElement.node.value + expression)
)
} else {
lastElement.replaceWith(
t.binaryExpression('+', lastElement.node, t.cloneNode(expression))
)
}
})
} else if (!isTaggedTemplateTranspiledByBabel(path)) {
if (typeof expression === 'string') {
path.node.arguments.push(t.stringLiteral(expression))
} else {
path.node.arguments.push(expression)
}
}
}
}
export const joinStringLiterals = (expressions /*: Array<*> */, t) => {
return expressions.reduce((finalExpressions, currentExpression, i) => {
if (!t.isStringLiteral(currentExpression)) {
finalExpressions.push(currentExpression)
} else if (
t.isStringLiteral(finalExpressions[finalExpressions.length - 1])
) {
finalExpressions[finalExpressions.length - 1].value +=
currentExpression.value
} else {
finalExpressions.push(currentExpression)
}
return finalExpressions
}, [])
}

View File

@@ -0,0 +1,144 @@
import { serializeStyles } from '@emotion/serialize'
import minify from './minify'
import { getLabelFromPath } from './label'
import { getSourceMap } from './source-maps'
import { simplifyObject } from './object-to-string'
import {
appendStringReturningExpressionToArguments,
joinStringLiterals
} from './strings'
import createNodeEnvConditional from './create-node-env-conditional'
const CSS_OBJECT_STRINGIFIED_ERROR =
"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
export let transformExpressionWithStyles = (
{ babel, state, path, shouldLabel, sourceMap = '' } /*: {
babel,
state,
path,
shouldLabel: boolean,
sourceMap?: string
} */
) => {
const autoLabel = state.opts.autoLabel || 'dev-only'
let t = babel.types
if (t.isTaggedTemplateExpression(path)) {
if (
!sourceMap &&
state.emotionSourceMap &&
path.node.quasi.loc !== undefined
) {
sourceMap = getSourceMap(path.node.quasi.loc.start, state)
}
minify(path, t)
}
if (t.isCallExpression(path)) {
const canAppendStrings = path.node.arguments.every(
arg => arg.type !== 'SpreadElement'
)
path.get('arguments').forEach(node => {
if (t.isObjectExpression(node)) {
node.replaceWith(simplifyObject(node.node, t))
}
})
path.node.arguments = joinStringLiterals(path.node.arguments, t)
if (
!sourceMap &&
canAppendStrings &&
state.emotionSourceMap &&
path.node.loc !== undefined
) {
sourceMap = getSourceMap(path.node.loc.start, state)
}
const label =
shouldLabel && autoLabel !== 'never'
? getLabelFromPath(path, state, t)
: null
if (
path.node.arguments.length === 1 &&
t.isStringLiteral(path.node.arguments[0])
) {
let cssString = path.node.arguments[0].value.replace(/;$/, '')
let res = serializeStyles([
`${cssString}${
label && autoLabel === 'always' ? `;label:${label};` : ''
}`
])
let prodNode = t.objectExpression([
t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))
])
if (!state.emotionStringifiedCssId) {
const uid = state.file.scope.generateUidIdentifier(
'__EMOTION_STRINGIFIED_CSS_ERROR__'
)
state.emotionStringifiedCssId = uid
const cssObjectToString = t.functionDeclaration(
uid,
[],
t.blockStatement([
t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
])
)
cssObjectToString._compact = true
state.file.path.unshiftContainer('body', [cssObjectToString])
}
if (label && autoLabel === 'dev-only') {
res = serializeStyles([`${cssString};label:${label};`])
}
let devNode = t.objectExpression(
[
t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
t.objectProperty(
t.identifier('styles'),
t.stringLiteral(res.styles + sourceMap)
),
t.objectProperty(
t.identifier('toString'),
t.cloneNode(state.emotionStringifiedCssId)
)
].filter(Boolean)
)
return createNodeEnvConditional(t, prodNode, devNode)
}
if (canAppendStrings && label) {
const labelString = `;label:${label};`
switch (autoLabel) {
case 'dev-only': {
const labelConditional = createNodeEnvConditional(
t,
t.stringLiteral(''),
t.stringLiteral(labelString)
)
appendStringReturningExpressionToArguments(t, path, labelConditional)
break
}
case 'always':
appendStringReturningExpressionToArguments(t, path, labelString)
break
}
}
if (sourceMap) {
let sourceMapConditional = createNodeEnvConditional(
t,
t.stringLiteral(''),
t.stringLiteral(sourceMap)
)
appendStringReturningExpressionToArguments(t, path, sourceMapConditional)
}
}
}

View File

@@ -0,0 +1,59 @@
import { createMacro } from 'babel-plugin-macros'
/*
type Transformer = Function
*/
export function createTransformerMacro(
transformers /*: { [key: string]: Transformer | [Transformer, Object] } */,
{ importSource } /*: { importSource: string } */
) {
let macro = createMacro(
({ path, source, references, state, babel, isEmotionCall }) => {
if (!path) {
path = state.file.scope.path
.get('body')
.find(p => p.isImportDeclaration() && p.node.source.value === source)
}
if (/\/macro$/.test(source)) {
path
.get('source')
.replaceWith(
babel.types.stringLiteral(source.replace(/\/macro$/, ''))
)
}
if (!isEmotionCall) {
state.emotionSourceMap = true
}
Object.keys(references).forEach(importSpecifierName => {
if (transformers[importSpecifierName]) {
references[importSpecifierName].reverse().forEach(reference => {
let options
let transformer
if (Array.isArray(transformers[importSpecifierName])) {
transformer = transformers[importSpecifierName][0]
options = transformers[importSpecifierName][1]
} else {
transformer = transformers[importSpecifierName]
options = {}
}
transformer({
state,
babel,
path,
importSource,
importSpecifierName,
options,
reference
})
})
}
})
return { keepImports: true }
}
)
macro.transformers = transformers
return macro
}

View File

@@ -0,0 +1,78 @@
// this only works correctly in modules, but we don't run on scripts anyway, so it's fine
// the difference is that in modules template objects are being cached per call site
export function getTypeScriptMakeTemplateObjectPath(path) {
if (path.node.arguments.length === 0) {
return null
}
const firstArgPath = path.get('arguments')[0]
if (
firstArgPath.isLogicalExpression() &&
firstArgPath.get('left').isIdentifier() &&
firstArgPath.get('right').isAssignmentExpression() &&
firstArgPath.get('right.right').isCallExpression() &&
firstArgPath.get('right.right.callee').isIdentifier() &&
firstArgPath.node.right.right.callee.name.includes('makeTemplateObject') &&
firstArgPath.node.right.right.arguments.length === 2
) {
return firstArgPath.get('right.right')
}
return null
}
// this is only used to prevent appending strings/expressions to arguments incorectly
// we could push them to found array expressions, as we do it for TS-transpile output ¯\_(ツ)_/¯
// it seems overly complicated though - mainly because we'd also have to check against existing stuff of a particular type (source maps & labels)
// considering Babel double-transpilation as a valid use case seems rather far-fetched
export function isTaggedTemplateTranspiledByBabel(path) {
if (path.node.arguments.length === 0) {
return false
}
const firstArgPath = path.get('arguments')[0]
if (
!firstArgPath.isCallExpression() ||
!firstArgPath.get('callee').isIdentifier()
) {
return false
}
const calleeName = firstArgPath.node.callee.name
if (!calleeName.includes('templateObject')) {
return false
}
const bindingPath = path.scope.getBinding(calleeName).path
if (!bindingPath.isFunction()) {
return false
}
const functionBody = bindingPath.get('body.body')
if (!functionBody[0].isVariableDeclaration()) {
return false
}
const declarationInit = functionBody[0].get('declarations')[0].get('init')
if (!declarationInit.isCallExpression()) {
return false
}
const declarationInitArguments = declarationInit.get('arguments')
if (
declarationInitArguments.length === 0 ||
declarationInitArguments.length > 2 ||
declarationInitArguments.some(argPath => !argPath.isArrayExpression())
) {
return false
}
return true
}

21
backend/frontend/node_modules/@emotion/cache/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

62
backend/frontend/node_modules/@emotion/cache/README.md generated vendored Normal file
View File

@@ -0,0 +1,62 @@
# @emotion/cache
### createCache
`createCache` allows for low level customization of how styles get inserted by emotion. It's intended to be used with the [`<CacheProvider/>`](https://emotion.sh/docs/cache-provider) component to override the default cache, which is created with sensible defaults for most applications.
```javascript
import createCache from '@emotion/cache'
export const myCache = createCache({
key: 'my-prefix-key',
stylisPlugins: [
/* your plugins here */
]
})
```
### Primary use cases
- Using emotion in embedded contexts such as an `<iframe/>`
- Setting a [nonce](#nonce-string) on any `<style/>` tag emotion creates for security purposes
- Using emotion with a developer defined `<style/>` tag
- Using emotion with custom Stylis plugins
## Options
### `nonce`
`string`
A nonce that will be set on each style tag that emotion inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
### `stylisPlugins`
`Array<Function>`
A Stylis plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#middleware). This can be used for many purposes such as RTL.
> Note:
>
> Prefixer is just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that (`import { prefixer } from 'stylis'`);
### `key`
`string (Pattern: [^a-z-])`
The prefix before class names. It will also be set as the value of the `data-emotion` attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in `renderStylesToString` and `renderStylesToNodeStream`. This is **required if using multiple emotion caches in the same app**.
### `container`
`Node`
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.
### `prepend`
`boolean`
A boolean representing whether to prepend rather than append style tags into the specified container DOM node.

View File

@@ -0,0 +1,100 @@
{
"name": "@emotion/cache",
"version": "11.13.5",
"description": "emotion's cache",
"main": "dist/emotion-cache.cjs.js",
"module": "dist/emotion-cache.esm.js",
"exports": {
".": {
"types": {
"import": "./dist/emotion-cache.cjs.mjs",
"default": "./dist/emotion-cache.cjs.js"
},
"development": {
"edge-light": {
"module": "./dist/emotion-cache.development.edge-light.esm.js",
"import": "./dist/emotion-cache.development.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.development.edge-light.cjs.js"
},
"worker": {
"module": "./dist/emotion-cache.development.edge-light.esm.js",
"import": "./dist/emotion-cache.development.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.development.edge-light.cjs.js"
},
"workerd": {
"module": "./dist/emotion-cache.development.edge-light.esm.js",
"import": "./dist/emotion-cache.development.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.development.edge-light.cjs.js"
},
"browser": {
"module": "./dist/emotion-cache.browser.development.esm.js",
"import": "./dist/emotion-cache.browser.development.cjs.mjs",
"default": "./dist/emotion-cache.browser.development.cjs.js"
},
"module": "./dist/emotion-cache.development.esm.js",
"import": "./dist/emotion-cache.development.cjs.mjs",
"default": "./dist/emotion-cache.development.cjs.js"
},
"edge-light": {
"module": "./dist/emotion-cache.edge-light.esm.js",
"import": "./dist/emotion-cache.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.edge-light.cjs.js"
},
"worker": {
"module": "./dist/emotion-cache.edge-light.esm.js",
"import": "./dist/emotion-cache.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.edge-light.cjs.js"
},
"workerd": {
"module": "./dist/emotion-cache.edge-light.esm.js",
"import": "./dist/emotion-cache.edge-light.cjs.mjs",
"default": "./dist/emotion-cache.edge-light.cjs.js"
},
"browser": {
"module": "./dist/emotion-cache.browser.esm.js",
"import": "./dist/emotion-cache.browser.cjs.mjs",
"default": "./dist/emotion-cache.browser.cjs.js"
},
"module": "./dist/emotion-cache.esm.js",
"import": "./dist/emotion-cache.cjs.mjs",
"default": "./dist/emotion-cache.cjs.js"
},
"./package.json": "./package.json"
},
"imports": {
"#is-development": {
"development": "./src/conditions/true.js",
"default": "./src/conditions/false.js"
},
"#is-browser": {
"edge-light": "./src/conditions/false.js",
"workerd": "./src/conditions/false.js",
"worker": "./src/conditions/false.js",
"browser": "./src/conditions/true.js",
"default": "./src/conditions/is-browser.js"
}
},
"types": "types/index.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/cache",
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
"@emotion/memoize": "^0.9.0",
"@emotion/sheet": "^1.4.0",
"@emotion/utils": "^1.4.2",
"@emotion/weak-memoize": "^0.4.0",
"stylis": "4.2.0"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"@emotion/hash": "*",
"typescript": "^5.4.5"
},
"files": [
"src",
"dist",
"types/*.d.ts"
]
}

View File

@@ -0,0 +1 @@
export default false

View File

@@ -0,0 +1 @@
export default typeof document !== 'undefined'

View File

@@ -0,0 +1 @@
export default true

View File

@@ -0,0 +1,2 @@
export * from '../types'
export { default } from '../types'

View File

@@ -0,0 +1,275 @@
import { StyleSheet } from '@emotion/sheet'
/* import { type EmotionCache, type SerializedStyles } from '@emotion/utils' */
import {
serialize,
compile,
middleware,
rulesheet,
stringify,
COMMENT
} from 'stylis'
import weakMemoize from '@emotion/weak-memoize'
import memoize from '@emotion/memoize'
import isDevelopment from '#is-development'
import isBrowser from '#is-browser'
import {
compat,
removeLabel,
createUnsafeSelectorsAlarm,
incorrectImportAlarm
} from './stylis-plugins'
import { prefixer } from './prefixer'
/* import type { StylisPlugin } from './types' */
/*
export type Options = {
nonce?: string,
stylisPlugins?: StylisPlugin[],
key: string,
container?: HTMLElement,
speedy?: boolean,
prepend?: boolean,
insertionPoint?: HTMLElement
}
*/
let getServerStylisCache = isBrowser
? undefined
: weakMemoize(() =>
memoize(() => {
let cache = {}
return name => cache[name]
})
)
const defaultStylisPlugins = [prefixer]
let getSourceMap
if (isDevelopment) {
let sourceMapPattern =
/\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g
getSourceMap = (styles /*: string */) => {
let matches = styles.match(sourceMapPattern)
if (!matches) return
return matches[matches.length - 1]
}
}
let createCache = (options /*: Options */) /*: EmotionCache */ => {
let key = options.key
if (isDevelopment && !key) {
throw new Error(
"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" +
`If multiple caches share the same key they might "fight" for each other's style elements.`
)
}
if (isBrowser && key === 'css') {
const ssrStyles = document.querySelectorAll(
`style[data-emotion]:not([data-s])`
)
// get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, (node /*: HTMLStyleElement */) => {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
const dataEmotionAttribute = node.getAttribute('data-emotion')
if (dataEmotionAttribute.indexOf(' ') === -1) {
return
}
document.head.appendChild(node)
node.setAttribute('data-s', '')
})
}
const stylisPlugins = options.stylisPlugins || defaultStylisPlugins
if (isDevelopment) {
if (/[^a-z-]/.test(key)) {
throw new Error(
`Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
)
}
}
let inserted = {}
let container /* : Node */
const nodesToHydrate = []
if (isBrowser) {
container = options.container || document.head
Array.prototype.forEach.call(
// this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll(`style[data-emotion^="${key} "]`),
(node /*: HTMLStyleElement */) => {
const attrib = node.getAttribute(`data-emotion`).split(' ')
for (let i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true
}
nodesToHydrate.push(node)
}
)
}
let insert /*: (
selector: string,
serialized: SerializedStyles,
sheet: StyleSheet,
shouldCache: boolean
) => string | void */
const omnipresentPlugins = [compat, removeLabel]
if (isDevelopment) {
omnipresentPlugins.push(
createUnsafeSelectorsAlarm({
get compat() {
return cache.compat
}
}),
incorrectImportAlarm
)
}
if (isBrowser) {
let currentSheet
const finalizingPlugins = [
stringify,
isDevelopment
? element => {
if (!element.root) {
if (element.return) {
currentSheet.insert(element.return)
} else if (element.value && element.type !== COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(`${element.value}{}`)
}
}
}
: rulesheet(rule => {
currentSheet.insert(rule)
})
]
const serializer = middleware(
omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
)
const stylis = styles => serialize(compile(styles), serializer)
insert = (
selector /*: string */,
serialized /*: SerializedStyles */,
sheet /*: StyleSheet */,
shouldCache /*: boolean */
) /*: void */ => {
currentSheet = sheet
if (isDevelopment) {
let sourceMap = getSourceMap(serialized.styles)
if (sourceMap) {
currentSheet = {
insert: (rule /*: string */) => {
sheet.insert(rule + sourceMap)
}
}
}
}
stylis(selector ? `${selector}{${serialized.styles}}` : serialized.styles)
if (shouldCache) {
cache.inserted[serialized.name] = true
}
}
} else {
const finalizingPlugins = [stringify]
const serializer = middleware(
omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
)
const stylis = styles => serialize(compile(styles), serializer)
let serverStylisCache = getServerStylisCache(stylisPlugins)(key)
let getRules = (
selector /*: string */,
serialized /*: SerializedStyles */
) /*: string */ => {
let name = serialized.name
if (serverStylisCache[name] === undefined) {
serverStylisCache[name] = stylis(
selector ? `${selector}{${serialized.styles}}` : serialized.styles
)
}
return serverStylisCache[name]
}
insert = (
selector /*: string */,
serialized /*: SerializedStyles */,
sheet /*: StyleSheet */,
shouldCache /*: boolean */
) /*: string | void */ => {
let name = serialized.name
let rules = getRules(selector, serialized)
if (cache.compat === undefined) {
// in regular mode, we don't set the styles on the inserted cache
// since we don't need to and that would be wasting memory
// we return them so that they are rendered in a style tag
if (shouldCache) {
cache.inserted[name] = true
}
if (isDevelopment) {
let sourceMap = getSourceMap(serialized.styles)
if (sourceMap) {
return rules + sourceMap
}
}
return rules
} else {
// in compat mode, we put the styles on the inserted cache so
// that emotion-server can pull out the styles
// except when we don't want to cache it which was in Global but now
// is nowhere but we don't want to do a major right now
// and just in case we're going to leave the case here
// it's also not affecting client side bundle size
// so it's really not a big deal
if (shouldCache) {
cache.inserted[name] = rules
} else {
return rules
}
}
}
}
const cache /*: EmotionCache */ = {
key,
sheet: new StyleSheet({
key,
container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend,
insertionPoint: options.insertionPoint
}),
nonce: options.nonce,
inserted,
registered: {},
insert
}
cache.sheet.hydrate(nodesToHydrate)
return cache
}
export default createCache

View File

@@ -0,0 +1,340 @@
/* eslint-disable no-fallthrough */
/* eslint-disable eqeqeq */
import {
charat,
combine,
copy,
DECLARATION,
hash,
indexof,
KEYFRAMES,
match,
MOZ,
MS,
replace,
RULESET,
serialize,
strlen,
WEBKIT
} from 'stylis'
// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
function prefix(value, length) {
switch (hash(value, length)) {
// color-adjust
case 5103:
return WEBKIT + 'print-' + value + value
// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
case 5737:
case 4201:
case 3177:
case 3433:
case 1641:
case 4457:
case 2921:
// text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
case 5572:
case 6356:
case 5844:
case 3191:
case 6645:
case 3005:
// mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
case 6391:
case 5879:
case 5623:
case 6135:
case 4599:
case 4855:
// background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
case 4215:
case 6389:
case 5109:
case 5365:
case 5621:
case 3829:
return WEBKIT + value + value
// appearance, user-select, transform, hyphens, text-size-adjust
case 5349:
case 4246:
case 4810:
case 6968:
case 2756:
return WEBKIT + value + MOZ + value + MS + value + value
// flex, flex-direction
case 6828:
case 4268:
return WEBKIT + value + MS + value + value
// order
case 6165:
return WEBKIT + value + MS + 'flex-' + value + value
// align-items
case 5187:
return (
WEBKIT +
value +
replace(
value,
/(\w+).+(:[^]+)/,
WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
) +
value
)
// align-self
case 5443:
return (
WEBKIT +
value +
MS +
'flex-item-' +
replace(value, /flex-|-self/, '') +
value
)
// align-content
case 4675:
return (
WEBKIT +
value +
MS +
'flex-line-pack' +
replace(value, /align-content|flex-|-self/, '') +
value
)
// flex-shrink
case 5548:
return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
// flex-basis
case 5292:
return (
WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
)
// flex-grow
case 6060:
return (
WEBKIT +
'box-' +
replace(value, '-grow', '') +
WEBKIT +
value +
MS +
replace(value, 'grow', 'positive') +
value
)
// transition
case 4554:
return (
WEBKIT +
replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
value
)
// cursor
case 6187:
return (
replace(
replace(
replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
/(image-set)/,
WEBKIT + '$1'
),
value,
''
) + value
)
// background, background-image
case 5495:
case 3959:
return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
// justify-content
case 4968:
return (
replace(
replace(
value,
/(.+:)(flex-)?(.*)/,
WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
),
/s.+-b[^;]+/,
'justify'
) +
WEBKIT +
value +
value
)
// (margin|padding)-inline-(start|end)
case 4095:
case 3583:
case 4068:
case 2532:
return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
// (min|max)?(width|height|inline-size|block-size)
case 8116:
case 7059:
case 5753:
case 5535:
case 5445:
case 5701:
case 4933:
case 4677:
case 5533:
case 5789:
case 5021:
case 4765:
// stretch, max-content, min-content, fill-available
if (strlen(value) - 1 - length > 6)
switch (charat(value, length + 1)) {
// (m)ax-content, (m)in-content
case 109:
// -
if (charat(value, length + 4) !== 45) break
// (f)ill-available, (f)it-content
case 102:
return (
replace(
value,
/(.+:)(.+)-([^]+)/,
'$1' +
WEBKIT +
'$2-$3' +
'$1' +
MOZ +
(charat(value, length + 3) == 108 ? '$3' : '$2-$3')
) + value
)
// (s)tretch
case 115:
return ~indexof(value, 'stretch')
? prefix(replace(value, 'stretch', 'fill-available'), length) +
value
: value
}
break
// position: sticky
case 4949:
// (s)ticky?
if (charat(value, length + 1) !== 115) break
// display: (flex|inline-flex)
case 6444:
switch (
charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
) {
// stic(k)y
case 107:
return replace(value, ':', ':' + WEBKIT) + value
// (inline-)?fl(e)x
case 101:
return (
replace(
value,
/(.+:)([^;!]+)(;|!.+)?/,
'$1' +
WEBKIT +
(charat(value, 14) === 45 ? 'inline-' : '') +
'box$3' +
'$1' +
WEBKIT +
'$2$3' +
'$1' +
MS +
'$2box$3'
) + value
)
}
break
// writing-mode
case 5936:
switch (charat(value, length + 11)) {
// vertical-l(r)
case 114:
return (
WEBKIT +
value +
MS +
replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
value
)
// vertical-r(l)
case 108:
return (
WEBKIT +
value +
MS +
replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
value
)
// horizontal(-)tb
case 45:
return (
WEBKIT +
value +
MS +
replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
value
)
}
return WEBKIT + value + MS + value + value
}
return value
}
export let prefixer = (element, index, children, callback) => {
if (element.length > -1)
if (!element.return)
switch (element.type) {
case DECLARATION:
element.return = prefix(element.value, element.length)
break
case KEYFRAMES:
return serialize(
[
copy(element, {
value: replace(element.value, '@', '@' + WEBKIT)
})
],
callback
)
case RULESET:
if (element.length)
return combine(element.props, function (value) {
switch (match(value, /(::plac\w+|:read-\w+)/)) {
// :read-(only|write)
case ':read-only':
case ':read-write':
return serialize(
[
copy(element, {
props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
})
],
callback
)
// :placeholder
case '::placeholder':
return serialize(
[
copy(element, {
props: [
replace(
value,
/:(plac\w+)/,
':' + WEBKIT + 'input-$1'
)
]
}),
copy(element, {
props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
}),
copy(element, {
props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
})
],
callback
)
}
return ''
})
}
}

View File

@@ -0,0 +1,269 @@
import {
compile,
alloc,
dealloc,
next,
delimit,
token,
char,
from,
peek,
position,
slice
} from 'stylis'
const last = arr => (arr.length ? arr[arr.length - 1] : null)
// based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
const identifierWithPointTracking = (begin, points, index) => {
let previous = 0
let character = 0
while (true) {
previous = character
character = peek()
// &\f
if (previous === 38 && character === 12) {
points[index] = 1
}
if (token(character)) {
break
}
next()
}
return slice(begin, position)
}
const toRules = (parsed, points) => {
// pretend we've started with a comma
let index = -1
let character = 44
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1
}
parsed[index] += identifierWithPointTracking(
position - 1,
points,
index
)
break
case 2:
parsed[index] += delimit(character)
break
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : ''
points[index] = parsed[index].length
break
}
// fallthrough
default:
parsed[index] += from(character)
}
} while ((character = next()))
return parsed
}
const getRules = (value, points) => dealloc(toRules(alloc(value), points))
// WeakSet would be more appropriate, but only WeakMap is supported in IE11
const fixedElements = /* #__PURE__ */ new WeakMap()
export let compat = element => {
if (
element.type !== 'rule' ||
!element.parent ||
// positive .length indicates that this rule contains pseudo
// negative .length indicates that this rule has been already prefixed
element.length < 1
) {
return
}
let { value, parent } = element
let isImplicitRule =
element.column === parent.column && element.line === parent.line
while (parent.type !== 'rule') {
parent = parent.parent
if (!parent) return
}
// short-circuit for the simplest case
if (
element.props.length === 1 &&
value.charCodeAt(0) !== 58 /* colon */ &&
!fixedElements.get(parent)
) {
return
}
// if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return
}
fixedElements.set(element, true)
const points = []
const rules = getRules(value, points)
const parentRules = parent.props
for (let i = 0, k = 0; i < rules.length; i++) {
for (let j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i]
? rules[i].replace(/&\f/g, parentRules[j])
: `${parentRules[j]} ${rules[i]}`
}
}
}
export let removeLabel = element => {
if (element.type === 'decl') {
var value = element.value
if (
// charcode for l
value.charCodeAt(0) === 108 &&
// charcode for b
value.charCodeAt(2) === 98
) {
// this ignores label
element.return = ''
element.value = ''
}
}
}
const ignoreFlag =
'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'
const isIgnoringComment = element =>
element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1
export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
if (element.type !== 'rule' || cache.compat) return
const unsafePseudoClasses = element.value.match(
/(:first|:nth|:nth-last)-child/g
)
if (unsafePseudoClasses) {
const isNested = !!element.parent
// in nested rules comments become children of the "auto-inserted" rule and that's always the `element.parent`
//
// considering this input:
// .a {
// .b /* comm */ {}
// color: hotpink;
// }
// we get output corresponding to this:
// .a {
// & {
// /* comm */
// color: hotpink;
// }
// .b {}
// }
const commentContainer = isNested
? element.parent.children
: // global rule at the root level
children
for (let i = commentContainer.length - 1; i >= 0; i--) {
const node = commentContainer[i]
if (node.line < element.line) {
break
}
// it is quite weird but comments are *usually* put at `column: element.column - 1`
// so we seek *from the end* for the node that is earlier than the rule's `element` and check that
// this will also match inputs like this:
// .a {
// /* comm */
// .b {}
// }
//
// but that is fine
//
// it would be the easiest to change the placement of the comment to be the first child of the rule:
// .a {
// .b { /* comm */ }
// }
// with such inputs we wouldn't have to search for the comment at all
// TODO: consider changing this comment placement in the next major version
if (node.column < element.column) {
if (isIgnoringComment(node)) {
return
}
break
}
}
unsafePseudoClasses.forEach(unsafePseudoClass => {
console.error(
`The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
unsafePseudoClass.split('-child')[0]
}-of-type".`
)
})
}
}
let isImportRule = element =>
element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64
const isPrependedWithRegularRules = (index, children) => {
for (let i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true
}
}
return false
}
// use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
const nullifyElement = element => {
element.type = ''
element.value = ''
element.return = ''
element.children = ''
element.props = ''
}
export let incorrectImportAlarm = (element, index, children) => {
if (!isImportRule(element)) {
return
}
if (element.parent) {
console.error(
"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."
)
nullifyElement(element)
} else if (isPrependedWithRegularRules(index, children)) {
console.error(
"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."
)
nullifyElement(element)
}
}

View File

@@ -0,0 +1,26 @@
/*
export type StylisElement = {
type: string
value: string
props: Array<string>
root: StylisElement | null
children: Array<StylisElement>
line: number
column: number
length: number
return: string
}
export type StylisPluginCallback = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void
export type StylisPlugin = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void
*/

View File

@@ -0,0 +1,45 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.2
import { EmotionCache } from '@emotion/utils'
export { EmotionCache }
export interface StylisElement {
type: string
value: string
props: Array<string> | string
root: StylisElement | null
parent: StylisElement | null
children: Array<StylisElement> | string
line: number
column: number
length: number
return: string
}
export type StylisPluginCallback = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void
export type StylisPlugin = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void
export interface Options {
nonce?: string
stylisPlugins?: Array<StylisPlugin>
key: string
container?: Node
speedy?: boolean
/** @deprecate use `insertionPoint` instead */
prepend?: boolean
insertionPoint?: HTMLElement
}
export default function createCache(options: Options): EmotionCache

21
backend/frontend/node_modules/@emotion/hash/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

11
backend/frontend/node_modules/@emotion/hash/README.md generated vendored Normal file
View File

@@ -0,0 +1,11 @@
# @emotion/hash
> A MurmurHash2 implementation
```jsx
import hash from '@emotion/hash'
hash('some-string') // 12fj1d
```
The source of this is from https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js.

View File

@@ -0,0 +1,29 @@
{
"name": "@emotion/hash",
"version": "0.9.2",
"description": "A MurmurHash2 implementation",
"main": "dist/emotion-hash.cjs.js",
"module": "dist/emotion-hash.esm.js",
"types": "dist/emotion-hash.cjs.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/hash",
"files": [
"src",
"dist"
],
"scripts": {
"test:typescript": "dtslint types"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"typescript": "^5.4.5"
},
"exports": {
".": {
"module": "./dist/emotion-hash.esm.js",
"import": "./dist/emotion-hash.cjs.mjs",
"default": "./dist/emotion-hash.cjs.js"
},
"./package.json": "./package.json"
}
}

View File

@@ -0,0 +1,63 @@
/* eslint-disable */
// Inspired by https://github.com/garycourt/murmurhash-js
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
export default function murmur2(str: string): string {
// 'm' and 'r' are mixing constants generated offline.
// They're not really 'magic', they just happen to work well.
// const m = 0x5bd1e995;
// const r = 24;
// Initialize the hash
var h = 0
// Mix 4 bytes at a time into the hash
var k,
i = 0,
len = str.length
for (; len >= 4; ++i, len -= 4) {
k =
(str.charCodeAt(i) & 0xff) |
((str.charCodeAt(++i) & 0xff) << 8) |
((str.charCodeAt(++i) & 0xff) << 16) |
((str.charCodeAt(++i) & 0xff) << 24)
k =
/* Math.imul(k, m): */
(k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)
k ^= /* k >>> r: */ k >>> 24
h =
/* Math.imul(k, m): */
((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
/* Math.imul(h, m): */
((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16))
}
// Handle the last few bytes of the input array
switch (len) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8
case 1:
h ^= str.charCodeAt(i) & 0xff
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16)
}
// Do a few final mixes of the hash to ensure the last few
// bytes are well-incorporated.
h ^= h >>> 13
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16)
return ((h ^ (h >>> 15)) >>> 0).toString(36)
}

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,15 @@
# @emotion/is-prop-valid
> Check whether a prop is valid for HTML and SVG elements
```bash
yarn add @emotion/is-prop-valid
```
```jsx
import isPropValid from '@emotion/is-prop-valid'
isPropValid('href') // true
isPropValid('someRandomProp') // false
```

View File

@@ -0,0 +1,39 @@
{
"name": "@emotion/is-prop-valid",
"version": "1.3.1",
"description": "A function to check whether a prop is valid for HTML and SVG elements",
"main": "dist/emotion-is-prop-valid.cjs.js",
"module": "dist/emotion-is-prop-valid.esm.js",
"types": "dist/emotion-is-prop-valid.cjs.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/is-prop-valid",
"scripts": {
"test:typescript": "dtslint types"
},
"publishConfig": {
"access": "public"
},
"dependencies": {
"@emotion/memoize": "^0.9.0"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"typescript": "^5.4.5"
},
"files": [
"src",
"dist"
],
"exports": {
".": {
"types": {
"import": "./dist/emotion-is-prop-valid.cjs.mjs",
"default": "./dist/emotion-is-prop-valid.cjs.js"
},
"module": "./dist/emotion-is-prop-valid.esm.js",
"import": "./dist/emotion-is-prop-valid.cjs.mjs",
"default": "./dist/emotion-is-prop-valid.cjs.js"
},
"./package.json": "./package.json"
}
}

View File

@@ -0,0 +1,17 @@
import memoize from '@emotion/memoize'
declare const codegen: { require: (path: string) => any }
// eslint-disable-next-line no-undef
const reactPropsRegex: RegExp = codegen.require('./props')
// https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
const isPropValid = /* #__PURE__ */ memoize(
prop =>
reactPropsRegex.test(prop) ||
(prop.charCodeAt(0) === 111 /* o */ &&
prop.charCodeAt(1) === 110 /* n */ &&
prop.charCodeAt(2) < 91) /* Z+1 */
)
export default isPropValid

View File

@@ -0,0 +1,499 @@
/**
* This module needs to remain pure JavaScript for codegen to work on it
*/
const props = {
// react props
// https://github.com/facebook/react/blob/5495a7f24aef85ba6937truetrue1ce962673ca9f5fde6/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
children: true,
dangerouslySetInnerHTML: true,
key: true,
ref: true,
autoFocus: true,
defaultValue: true,
defaultChecked: true,
innerHTML: true,
suppressContentEditableWarning: true,
suppressHydrationWarning: true,
// deprecated react prop
valueLink: true,
// https://github.com/facebook/react/blob/d7157651f7b72d9888ctrue123e191f9b88cd8f41e9/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
/**
* Standard Properties
*/
abbr: true,
accept: true,
acceptCharset: true,
accessKey: true,
action: true,
allow: true,
allowUserMedia: true,
allowPaymentRequest: true,
allowFullScreen: true,
allowTransparency: true,
alt: true,
// specifies target context for links with `preload` type
// as: true,
async: true,
autoComplete: true,
// autoFocus is polyfilled/normalized by AutoFocusUtils
// autoFocus: true,
autoPlay: true,
capture: true,
cellPadding: true,
cellSpacing: true,
// keygen prop
challenge: true,
charSet: true,
checked: true,
cite: true,
classID: true,
className: true,
cols: true,
colSpan: true,
content: true,
contentEditable: true,
contextMenu: true,
controls: true,
controlsList: true,
coords: true,
crossOrigin: true,
data: true, // For `<object />` acts as `src`.
dateTime: true,
decoding: true,
default: true,
defer: true,
dir: true,
disabled: true,
disablePictureInPicture: true,
disableRemotePlayback: true,
download: true,
draggable: true,
encType: true,
enterKeyHint: true,
fetchpriority: true,
fetchPriority: true,
form: true,
formAction: true,
formEncType: true,
formMethod: true,
formNoValidate: true,
formTarget: true,
frameBorder: true,
headers: true,
height: true,
hidden: true,
high: true,
href: true,
hrefLang: true,
htmlFor: true,
httpEquiv: true,
id: true,
inputMode: true,
integrity: true,
is: true,
keyParams: true,
keyType: true,
kind: true,
label: true,
lang: true,
list: true,
loading: true,
loop: true,
low: true,
// manifest: true,
marginHeight: true,
marginWidth: true,
max: true,
maxLength: true,
media: true,
mediaGroup: true,
method: true,
min: true,
minLength: true,
// Caution; `option.selected` is not updated if `select.multiple` is
// disabled with `removeAttribute`.
multiple: true,
muted: true,
name: true,
nonce: true,
noValidate: true,
open: true,
optimum: true,
pattern: true,
placeholder: true,
playsInline: true,
poster: true,
preload: true,
profile: true,
radioGroup: true,
readOnly: true,
referrerPolicy: true,
rel: true,
required: true,
reversed: true,
role: true,
rows: true,
rowSpan: true,
sandbox: true,
scope: true,
scoped: true,
scrolling: true,
seamless: true,
selected: true,
shape: true,
size: true,
sizes: true,
// support for projecting regular DOM Elements via V1 named slots ( shadow dom )
slot: true,
span: true,
spellCheck: true,
src: true,
srcDoc: true,
srcLang: true,
srcSet: true,
start: true,
step: true,
style: true,
summary: true,
tabIndex: true,
target: true,
title: true,
translate: true,
// Setting .type throws on non-<input> tags
type: true,
useMap: true,
value: true,
width: true,
wmode: true,
wrap: true,
/**
* RDFa Properties
*/
about: true,
datatype: true,
inlist: true,
prefix: true,
// property is also supported for OpenGraph in meta tags.
property: true,
resource: true,
typeof: true,
vocab: true,
/**
* Non-standard Properties
*/
// autoCapitalize and autoCorrect are supported in Mobile Safari for
// keyboard hints.
autoCapitalize: true,
autoCorrect: true,
// autoSave allows WebKit/Blink to persist values of input fields on page reloads
autoSave: true,
// color is for Safari mask-icon link
color: true,
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#incremental_This_API_has_not_been_standardized
incremental: true,
// used in amp html for indicating the fallback behavior
// https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/
fallback: true,
// https://html.spec.whatwg.org/multipage/interaction.html#inert
inert: true,
// itemProp, itemScope, itemType are for
// Microdata support. See http://schema.org/docs/gs.html
itemProp: true,
itemScope: true,
itemType: true,
// itemID and itemRef are for Microdata support as well but
// only specified in the WHATWG spec document. See
// https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
itemID: true,
itemRef: true,
// used in amp html for eventing purposes
// https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes/
on: true,
// used in amp html for indicating that the option is selectable
// https://amp.dev/documentation/components/amp-selector/
option: true,
// results show looking glass icon and recent searches on input
// search fields in WebKit/Blink
results: true,
// IE-only attribute that specifies security restrictions on an iframe
// as an alternative to the sandbox attribute on IE<1true
security: true,
// IE-only attribute that controls focus behavior
unselectable: true,
//
// SVG properties: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
// The following "onX" events have been omitted:
//
// onabort
// onactivate
// onbegin
// onclick
// onend
// onerror
// onfocusin
// onfocusout
// onload
// onmousedown
// onmousemove
// onmouseout
// onmouseover
// onmouseup
// onrepeat
// onresize
// onscroll
// onunload
accentHeight: true,
accumulate: true,
additive: true,
alignmentBaseline: true,
allowReorder: true,
alphabetic: true,
amplitude: true,
arabicForm: true,
ascent: true,
attributeName: true,
attributeType: true,
autoReverse: true,
azimuth: true,
baseFrequency: true,
baselineShift: true,
baseProfile: true,
bbox: true,
begin: true,
bias: true,
by: true,
calcMode: true,
capHeight: true,
clip: true,
clipPathUnits: true,
clipPath: true,
clipRule: true,
colorInterpolation: true,
colorInterpolationFilters: true,
colorProfile: true,
colorRendering: true,
contentScriptType: true,
contentStyleType: true,
cursor: true,
cx: true,
cy: true,
d: true,
decelerate: true,
descent: true,
diffuseConstant: true,
direction: true,
display: true,
divisor: true,
dominantBaseline: true,
dur: true,
dx: true,
dy: true,
edgeMode: true,
elevation: true,
enableBackground: true,
end: true,
exponent: true,
externalResourcesRequired: true,
fill: true,
fillOpacity: true,
fillRule: true,
filter: true,
filterRes: true,
filterUnits: true,
floodColor: true,
floodOpacity: true,
focusable: true,
fontFamily: true,
fontSize: true,
fontSizeAdjust: true,
fontStretch: true,
fontStyle: true,
fontVariant: true,
fontWeight: true,
format: true,
from: true,
fr: true, // valid SVG element but React will ask for removal
fx: true,
fy: true,
g1: true,
g2: true,
glyphName: true,
glyphOrientationHorizontal: true,
glyphOrientationVertical: true,
glyphRef: true,
gradientTransform: true,
gradientUnits: true,
hanging: true,
horizAdvX: true,
horizOriginX: true,
ideographic: true,
imageRendering: true,
in: true,
in2: true,
intercept: true,
k: true,
k1: true,
k2: true,
k3: true,
k4: true,
kernelMatrix: true,
kernelUnitLength: true,
kerning: true,
keyPoints: true,
keySplines: true,
keyTimes: true,
lengthAdjust: true,
letterSpacing: true,
lightingColor: true,
limitingConeAngle: true,
local: true,
markerEnd: true,
markerMid: true,
markerStart: true,
markerHeight: true,
markerUnits: true,
markerWidth: true,
mask: true,
maskContentUnits: true,
maskUnits: true,
mathematical: true,
mode: true,
numOctaves: true,
offset: true,
opacity: true,
operator: true,
order: true,
orient: true,
orientation: true,
origin: true,
overflow: true,
overlinePosition: true,
overlineThickness: true,
panose1: true,
paintOrder: true,
pathLength: true,
patternContentUnits: true,
patternTransform: true,
patternUnits: true,
pointerEvents: true,
points: true,
pointsAtX: true,
pointsAtY: true,
pointsAtZ: true,
preserveAlpha: true,
preserveAspectRatio: true,
primitiveUnits: true,
r: true,
radius: true,
refX: true,
refY: true,
renderingIntent: true,
repeatCount: true,
repeatDur: true,
requiredExtensions: true,
requiredFeatures: true,
restart: true,
result: true,
rotate: true,
rx: true,
ry: true,
scale: true,
seed: true,
shapeRendering: true,
slope: true,
spacing: true,
specularConstant: true,
specularExponent: true,
speed: true,
spreadMethod: true,
startOffset: true,
stdDeviation: true,
stemh: true,
stemv: true,
stitchTiles: true,
stopColor: true,
stopOpacity: true,
strikethroughPosition: true,
strikethroughThickness: true,
string: true,
stroke: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeLinecap: true,
strokeLinejoin: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true,
surfaceScale: true,
systemLanguage: true,
tableValues: true,
targetX: true,
targetY: true,
textAnchor: true,
textDecoration: true,
textRendering: true,
textLength: true,
to: true,
transform: true,
u1: true,
u2: true,
underlinePosition: true,
underlineThickness: true,
unicode: true,
unicodeBidi: true,
unicodeRange: true,
unitsPerEm: true,
vAlphabetic: true,
vHanging: true,
vIdeographic: true,
vMathematical: true,
values: true,
vectorEffect: true,
version: true,
vertAdvY: true,
vertOriginX: true,
vertOriginY: true,
viewBox: true,
viewTarget: true,
visibility: true,
widths: true,
wordSpacing: true,
writingMode: true,
x: true,
xHeight: true,
x1: true,
x2: true,
xChannelSelector: true,
xlinkActuate: true,
xlinkArcrole: true,
xlinkHref: true,
xlinkRole: true,
xlinkShow: true,
xlinkTitle: true,
xlinkType: true,
xmlBase: true,
xmlns: true,
xmlnsXlink: true,
xmlLang: true,
xmlSpace: true,
y: true,
y1: true,
y2: true,
yChannelSelector: true,
z: true,
zoomAndPan: true,
// For preact. We have this code here even though Emotion doesn't support
// Preact, since @emotion/is-prop-valid is used by some libraries outside of
// the context of Emotion.
for: true,
class: true,
autofocus: true
}
module.exports = `/^((${Object.keys(props).join(
'|'
)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/`

21
backend/frontend/node_modules/@emotion/memoize/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,32 @@
{
"name": "@emotion/memoize",
"version": "0.9.0",
"description": "emotion's memoize utility",
"main": "dist/emotion-memoize.cjs.js",
"module": "dist/emotion-memoize.esm.js",
"types": "dist/emotion-memoize.cjs.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/memoize",
"scripts": {
"test:typescript": "dtslint types"
},
"publishConfig": {
"access": "public"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"typescript": "^5.4.5"
},
"files": [
"src",
"dist"
],
"exports": {
".": {
"module": "./dist/emotion-memoize.esm.js",
"import": "./dist/emotion-memoize.cjs.mjs",
"default": "./dist/emotion-memoize.cjs.js"
},
"./package.json": "./package.json"
}
}

View File

@@ -0,0 +1,8 @@
export default function memoize<V>(fn: (arg: string) => V): (arg: string) => V {
const cache: Record<string, V> = Object.create(null)
return (arg: string) => {
if (cache[arg] === undefined) cache[arg] = fn(arg)
return cache[arg]
}
}

21
backend/frontend/node_modules/@emotion/react/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

48
backend/frontend/node_modules/@emotion/react/README.md generated vendored Normal file
View File

@@ -0,0 +1,48 @@
# @emotion/react
> Simple styling in React.
## Install
```bash
yarn add @emotion/react
```
## Usage
```jsx
/** @jsx jsx */
import { jsx, css, Global, ClassNames } from '@emotion/react'
render(
<div css={{ color: 'hotpink' }}>
<div
css={css`
color: green;
`}
/>
<Global
styles={{
body: {
margin: 0,
padding: 0
}
}}
/>
<ClassNames>
{({ css, cx }) => (
<div
className={cx(
'some-class',
css`
color: yellow;
`
)}
/>
)}
</ClassNames>
</div>
)
```
More documentation is available at [https://emotion.sh](https://emotion.sh).

View File

@@ -0,0 +1,9 @@
{
"main": "dist/emotion-react-_isolated-hnrs.cjs.js",
"module": "dist/emotion-react-_isolated-hnrs.esm.js",
"umd:main": "dist/emotion-react-_isolated-hnrs.umd.min.js",
"sideEffects": false,
"preconstruct": {
"umdName": "emotionHoistNonReactStatics"
}
}

View File

@@ -0,0 +1,10 @@
{
"main": "dist/emotion-react-jsx-dev-runtime.cjs.js",
"module": "dist/emotion-react-jsx-dev-runtime.esm.js",
"umd:main": "dist/emotion-react-jsx-dev-runtime.umd.min.js",
"types": "../types/jsx-dev-runtime",
"sideEffects": false,
"preconstruct": {
"umdName": "emotionReactJSXDevRuntime"
}
}

View File

@@ -0,0 +1,10 @@
{
"main": "dist/emotion-react-jsx-runtime.cjs.js",
"module": "dist/emotion-react-jsx-runtime.esm.js",
"umd:main": "dist/emotion-react-jsx-runtime.umd.min.js",
"types": "../types/jsx-runtime",
"sideEffects": false,
"preconstruct": {
"umdName": "emotionReactJSXRuntime"
}
}

View File

@@ -0,0 +1 @@
export * from './macro.js'

View File

@@ -0,0 +1 @@
export * from '@emotion/react'

View File

@@ -0,0 +1 @@
module.exports = require('@emotion/babel-plugin').macros.core

View File

@@ -0,0 +1,317 @@
{
"name": "@emotion/react",
"version": "11.13.5",
"main": "dist/emotion-react.cjs.js",
"module": "dist/emotion-react.esm.js",
"exports": {
".": {
"types": {
"import": "./dist/emotion-react.cjs.mjs",
"default": "./dist/emotion-react.cjs.js"
},
"development": {
"edge-light": {
"module": "./dist/emotion-react.development.edge-light.esm.js",
"import": "./dist/emotion-react.development.edge-light.cjs.mjs",
"default": "./dist/emotion-react.development.edge-light.cjs.js"
},
"worker": {
"module": "./dist/emotion-react.development.edge-light.esm.js",
"import": "./dist/emotion-react.development.edge-light.cjs.mjs",
"default": "./dist/emotion-react.development.edge-light.cjs.js"
},
"workerd": {
"module": "./dist/emotion-react.development.edge-light.esm.js",
"import": "./dist/emotion-react.development.edge-light.cjs.mjs",
"default": "./dist/emotion-react.development.edge-light.cjs.js"
},
"browser": {
"module": "./dist/emotion-react.browser.development.esm.js",
"import": "./dist/emotion-react.browser.development.cjs.mjs",
"default": "./dist/emotion-react.browser.development.cjs.js"
},
"module": "./dist/emotion-react.development.esm.js",
"import": "./dist/emotion-react.development.cjs.mjs",
"default": "./dist/emotion-react.development.cjs.js"
},
"edge-light": {
"module": "./dist/emotion-react.edge-light.esm.js",
"import": "./dist/emotion-react.edge-light.cjs.mjs",
"default": "./dist/emotion-react.edge-light.cjs.js"
},
"worker": {
"module": "./dist/emotion-react.edge-light.esm.js",
"import": "./dist/emotion-react.edge-light.cjs.mjs",
"default": "./dist/emotion-react.edge-light.cjs.js"
},
"workerd": {
"module": "./dist/emotion-react.edge-light.esm.js",
"import": "./dist/emotion-react.edge-light.cjs.mjs",
"default": "./dist/emotion-react.edge-light.cjs.js"
},
"browser": {
"module": "./dist/emotion-react.browser.esm.js",
"import": "./dist/emotion-react.browser.cjs.mjs",
"default": "./dist/emotion-react.browser.cjs.js"
},
"module": "./dist/emotion-react.esm.js",
"import": "./dist/emotion-react.cjs.mjs",
"default": "./dist/emotion-react.cjs.js"
},
"./jsx-runtime": {
"types": {
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
},
"development": {
"edge-light": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.js"
},
"worker": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.js"
},
"workerd": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.edge-light.cjs.js"
},
"browser": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.development.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.development.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.development.cjs.js"
},
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.development.cjs.js"
},
"edge-light": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.js"
},
"worker": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.js"
},
"workerd": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.edge-light.cjs.js"
},
"browser": {
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.cjs.js"
},
"module": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js",
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs",
"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
},
"./_isolated-hnrs": {
"types": {
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
},
"development": {
"edge-light": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js"
},
"worker": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js"
},
"workerd": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js"
},
"browser": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.cjs.js"
},
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.cjs.js"
},
"edge-light": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js"
},
"worker": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js"
},
"workerd": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js"
},
"browser": {
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.cjs.js"
},
"module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js",
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs",
"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
},
"./jsx-dev-runtime": {
"types": {
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
},
"development": {
"edge-light": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.js"
},
"worker": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.js"
},
"workerd": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.edge-light.cjs.js"
},
"browser": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.development.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.development.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.development.cjs.js"
},
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.development.cjs.js"
},
"edge-light": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.js"
},
"worker": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.js"
},
"workerd": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.edge-light.cjs.js"
},
"browser": {
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.cjs.js"
},
"module": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js",
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs",
"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
},
"./package.json": "./package.json",
"./types/css-prop": "./types/css-prop.d.ts",
"./macro": {
"types": {
"import": "./macro.d.mts",
"default": "./macro.d.ts"
},
"default": "./macro.js"
}
},
"imports": {
"#is-development": {
"development": "./src/conditions/true.js",
"default": "./src/conditions/false.js"
},
"#is-browser": {
"edge-light": "./src/conditions/false.js",
"workerd": "./src/conditions/false.js",
"worker": "./src/conditions/false.js",
"browser": "./src/conditions/true.js",
"default": "./src/conditions/is-browser.js"
}
},
"types": "types/index.d.ts",
"files": [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"_isolated-hnrs",
"types/*.d.ts",
"macro.*"
],
"sideEffects": false,
"author": "Emotion Contributors",
"license": "MIT",
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.13.5",
"@emotion/cache": "^11.13.5",
"@emotion/serialize": "^1.3.3",
"@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
"@emotion/utils": "^1.4.2",
"@emotion/weak-memoize": "^0.4.0",
"hoist-non-react-statics": "^3.3.1"
},
"peerDependencies": {
"react": ">=16.8.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"@emotion/css": "11.13.5",
"@emotion/css-prettifier": "1.1.4",
"@emotion/server": "11.11.0",
"@emotion/styled": "11.13.5",
"html-tag-names": "^1.1.2",
"react": "16.14.0",
"svg-tag-names": "^1.1.1",
"typescript": "^5.4.5"
},
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/react",
"publishConfig": {
"access": "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
"preconstruct": {
"entrypoints": [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./_isolated-hnrs.js"
],
"umdName": "emotionReact",
"exports": {
"extra": {
"./types/css-prop": "./types/css-prop.d.ts",
"./macro": {
"types": {
"import": "./macro.d.mts",
"default": "./macro.d.ts"
},
"default": "./macro.js"
}
}
}
}
}

View File

@@ -0,0 +1,3 @@
// this entry point is not publicly available so we don't need to expose any types here
// we need to define a definition file for each entrypoint though, otherwise Preconstruct might get confused
export {}

View File

@@ -0,0 +1,10 @@
// this file isolates this package that is not tree-shakeable
// and allows it to be dropped - if it stays unused
// it happens thanks to sideEffects: false in our package.json
import hoistNonReactStatics from 'hoist-non-react-statics'
// have to wrap it in a proxy function because Rollup is too damn smart
// and if this module doesn't actually contain any logic of its own
// then Rollup just use 'hoist-non-react-statics' directly in other chunks
export default (targetComponent, sourceComponent) =>
hoistNonReactStatics(targetComponent, sourceComponent)

View File

@@ -0,0 +1,169 @@
import * as React from 'react'
import {
getRegisteredStyles,
insertStyles,
registerStyles
} from '@emotion/utils'
import { serializeStyles } from '@emotion/serialize'
import isDevelopment from '#is-development'
import { withEmotionCache } from './context'
import { ThemeContext } from './theming'
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
import isBrowser from '#is-browser'
/*
type ClassNameArg =
| string
| boolean
| { [key: string]: boolean }
| Array<ClassNameArg>
| null
| void
*/
let classnames = (args /*: Array<ClassNameArg> */) /*: string */ => {
let len = args.length
let i = 0
let cls = ''
for (; i < len; i++) {
let arg = args[i]
if (arg == null) continue
let toAdd
switch (typeof arg) {
case 'boolean':
break
case 'object': {
if (Array.isArray(arg)) {
toAdd = classnames(arg)
} else {
if (
isDevelopment &&
arg.styles !== undefined &&
arg.name !== undefined
) {
console.error(
'You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' +
'`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.'
)
}
toAdd = ''
for (const k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ')
toAdd += k
}
}
}
break
}
default: {
toAdd = arg
}
}
if (toAdd) {
cls && (cls += ' ')
cls += toAdd
}
}
return cls
}
function merge(
registered /*: Object */,
css /*: (...args: Array<any>) => string */,
className /*: string */
) {
const registeredStyles = []
const rawClassName = getRegisteredStyles(
registered,
registeredStyles,
className
)
if (registeredStyles.length < 2) {
return className
}
return rawClassName + css(registeredStyles)
}
const Insertion = ({ cache, serializedArr }) => {
let rules = useInsertionEffectAlwaysWithSyncFallback(() => {
let rules = ''
for (let i = 0; i < serializedArr.length; i++) {
let res = insertStyles(cache, serializedArr[i], false)
if (!isBrowser && res !== undefined) {
rules += res
}
}
if (!isBrowser) {
return rules
}
})
if (!isBrowser && rules.length !== 0) {
return (
<style
{...{
[`data-emotion`]: `${cache.key} ${serializedArr
.map(serialized => serialized.name)
.join(' ')}`,
dangerouslySetInnerHTML: { __html: rules },
nonce: cache.sheet.nonce
}}
/>
)
}
return null
}
/*
type Props = {
children: ({
css: (...args: any) => string,
cx: (...args: Array<ClassNameArg>) => string,
theme: Object
}) => React.Node
} */
export const ClassNames /*: React.AbstractComponent<Props>*/ =
/* #__PURE__ */ withEmotionCache((props, cache) => {
let hasRendered = false
let serializedArr = []
let css = (...args /*: Array<any> */) => {
if (hasRendered && isDevelopment) {
throw new Error('css can only be used during render')
}
let serialized = serializeStyles(args, cache.registered)
serializedArr.push(serialized)
// registration has to happen here as the result of this might get consumed by `cx`
registerStyles(cache, serialized, false)
return `${cache.key}-${serialized.name}`
}
let cx = (...args /*: Array<ClassNameArg>*/) => {
if (hasRendered && isDevelopment) {
throw new Error('cx can only be used during render')
}
return merge(cache.registered, css, classnames(args))
}
let content = {
css,
cx,
theme: React.useContext(ThemeContext)
}
let ele = props.children(content)
hasRendered = true
return (
<>
<Insertion cache={cache} serializedArr={serializedArr} />
{ele}
</>
)
})
if (isDevelopment) {
ClassNames.displayName = 'EmotionClassNames'
}

View File

@@ -0,0 +1 @@
export default false

View File

@@ -0,0 +1 @@
export default typeof document !== 'undefined'

View File

@@ -0,0 +1 @@
export default true

View File

@@ -0,0 +1,69 @@
/* import { type EmotionCache } from '@emotion/utils' */
import * as React from 'react'
import { useContext, forwardRef } from 'react'
import createCache from '@emotion/cache'
import isDevelopment from '#is-development'
import isBrowser from '#is-browser'
let EmotionCacheContext /*: React.Context<EmotionCache | null> */ =
/* #__PURE__ */ React.createContext(
// we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined'
? /* #__PURE__ */ createCache({ key: 'css' })
: null
)
if (isDevelopment) {
EmotionCacheContext.displayName = 'EmotionCacheContext'
}
export let CacheProvider = EmotionCacheContext.Provider
export let __unsafe_useEmotionCache =
function useEmotionCache() /*: EmotionCache | null*/ {
return useContext(EmotionCacheContext)
}
let withEmotionCache =
function withEmotionCache /* <Props, Ref: React.Ref<*>> */(
func /*: (props: Props, cache: EmotionCache, ref: Ref) => React.Node */
) /*: React.AbstractComponent<Props> */ {
return forwardRef((props /*: Props */, ref /*: Ref */) => {
// the cache will never be null in the browser
let cache = useContext(EmotionCacheContext)
return func(props, cache, ref)
})
}
if (!isBrowser) {
withEmotionCache = function withEmotionCache /* <Props> */(
func /*: (props: Props, cache: EmotionCache) => React.Node */
) /*: React.StatelessFunctionalComponent<Props> */ {
return (props /*: Props */) => {
let cache = useContext(EmotionCacheContext)
if (cache === null) {
// yes, we're potentially creating this on every render
// it doesn't actually matter though since it's only on the server
// so there will only every be a single render
// that could change in the future because of suspense and etc. but for now,
// this works and i don't want to optimise for a future thing that we aren't sure about
cache = createCache({ key: 'css' })
return (
<EmotionCacheContext.Provider value={cache}>
{func(props, cache)}
</EmotionCacheContext.Provider>
)
} else {
return func(props, cache)
}
}
}
}
export { withEmotionCache }

View File

@@ -0,0 +1,8 @@
/* import type { Interpolation, SerializedStyles } from '@emotion/utils' */
import { serializeStyles } from '@emotion/serialize'
function css(...args /*: Array<Interpolation> */) /*: SerializedStyles */ {
return serializeStyles(args)
}
export default css

View File

@@ -0,0 +1,173 @@
import * as React from 'react'
import { withEmotionCache } from './context'
import { ThemeContext } from './theming'
import {
getRegisteredStyles,
insertStyles,
registerStyles
} from '@emotion/utils'
import { hasOwn } from './utils'
import { serializeStyles } from '@emotion/serialize'
import isDevelopment from '#is-development'
import isBrowser from '#is-browser'
import { getLabelFromStackTrace } from './get-label-from-stack-trace'
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
let typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'
let labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'
export const createEmotionProps = (
type /*: React.ElementType */,
props /*: Object */
) => {
if (
isDevelopment &&
typeof props.css === 'string' &&
// check if there is a css declaration
props.css.indexOf(':') !== -1
) {
throw new Error(
`Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css\`${props.css}\``
)
}
let newProps /*: any */ = {}
for (let key in props) {
if (hasOwn.call(props, key)) {
newProps[key] = props[key]
}
}
newProps[typePropName] = type
// Runtime labeling is an opt-in feature because:
// - It causes hydration warnings when using Safari and SSR
// - It can degrade performance if there are a huge number of elements
//
// Even if the flag is set, we still don't compute the label if it has already
// been determined by the Babel plugin.
if (
isDevelopment &&
typeof globalThis !== 'undefined' &&
!!globalThis.EMOTION_RUNTIME_AUTO_LABEL &&
!!props.css &&
(typeof props.css !== 'object' ||
typeof props.css.name !== 'string' ||
props.css.name.indexOf('-') === -1)
) {
const label = getLabelFromStackTrace(new Error().stack)
if (label) newProps[labelPropName] = label
}
return newProps
}
const Insertion = ({ cache, serialized, isStringTag }) => {
registerStyles(cache, serialized, isStringTag)
const rules = useInsertionEffectAlwaysWithSyncFallback(() =>
insertStyles(cache, serialized, isStringTag)
)
if (!isBrowser && rules !== undefined) {
let serializedNames = serialized.name
let next = serialized.next
while (next !== undefined) {
serializedNames += ' ' + next.name
next = next.next
}
return (
<style
{...{
[`data-emotion`]: `${cache.key} ${serializedNames}`,
dangerouslySetInnerHTML: { __html: rules },
nonce: cache.sheet.nonce
}}
/>
)
}
return null
}
let Emotion = /* #__PURE__ */ withEmotionCache(
/* <any, any> */ (props, cache, ref) => {
let cssProp = props.css
// so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (
typeof cssProp === 'string' &&
cache.registered[cssProp] !== undefined
) {
cssProp = cache.registered[cssProp]
}
let WrappedComponent = props[typePropName]
let registeredStyles = [cssProp]
let className = ''
if (typeof props.className === 'string') {
className = getRegisteredStyles(
cache.registered,
registeredStyles,
props.className
)
} else if (props.className != null) {
className = `${props.className} `
}
let serialized = serializeStyles(
registeredStyles,
undefined,
React.useContext(ThemeContext)
)
if (isDevelopment && serialized.name.indexOf('-') === -1) {
let labelFromStack = props[labelPropName]
if (labelFromStack) {
serialized = serializeStyles([
serialized,
'label:' + labelFromStack + ';'
])
}
}
className += `${cache.key}-${serialized.name}`
const newProps = {}
for (let key in props) {
if (
hasOwn.call(props, key) &&
key !== 'css' &&
key !== typePropName &&
(!isDevelopment || key !== labelPropName)
) {
newProps[key] = props[key]
}
}
newProps.className = className
if (ref) {
newProps.ref = ref
}
return (
<>
<Insertion
cache={cache}
serialized={serialized}
isStringTag={typeof WrappedComponent === 'string'}
/>
<WrappedComponent {...newProps} />
</>
)
}
)
if (isDevelopment) {
Emotion.displayName = 'EmotionCssPropInternal'
}
export default Emotion

View File

@@ -0,0 +1,52 @@
const getLastPart = (functionName /* : string */) /* : string */ => {
// The match may be something like 'Object.createEmotionProps' or
// 'Loader.prototype.render'
const parts = functionName.split('.')
return parts[parts.length - 1]
}
const getFunctionNameFromStackTraceLine = (line /*: string*/) /*: ?string*/ => {
// V8
let match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line)
if (match) return getLastPart(match[1])
// Safari / Firefox
match = /^([A-Za-z0-9$.]+)@/.exec(line)
if (match) return getLastPart(match[1])
return undefined
}
const internalReactFunctionNames = /* #__PURE__ */ new Set([
'renderWithHooks',
'processChild',
'finishClassComponent',
'renderToString'
])
// These identifiers come from error stacks, so they have to be valid JS
// identifiers, thus we only need to replace what is a valid character for JS,
// but not for CSS.
const sanitizeIdentifier = identifier => identifier.replace(/\$/g, '-')
export const getLabelFromStackTrace = stackTrace => {
if (!stackTrace) return undefined
const lines = stackTrace.split('\n')
for (let i = 0; i < lines.length; i++) {
const functionName = getFunctionNameFromStackTraceLine(lines[i])
// The first line of V8 stack traces is just "Error"
if (!functionName) continue
// If we reach one of these, we have gone too far and should quit
if (internalReactFunctionNames.has(functionName)) break
// The component name is the first function in the stack that starts with an
// uppercase letter
if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName)
}
return undefined
}

View File

@@ -0,0 +1,145 @@
import * as React from 'react'
import isDevelopment from '#is-development'
import { withEmotionCache } from './context'
import { ThemeContext } from './theming'
import { insertStyles } from '@emotion/utils'
import isBrowser from '#is-browser'
import { useInsertionEffectWithLayoutFallback } from '@emotion/use-insertion-effect-with-fallbacks'
import { serializeStyles } from '@emotion/serialize'
/*
type Styles = Object | Array<Object>
type GlobalProps = {
+styles: Styles | (Object => Styles)
}
*/
let warnedAboutCssPropForGlobal = false
// maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
export let Global /*: React.AbstractComponent<
GlobalProps
> */ = /* #__PURE__ */ withEmotionCache((props /*: GlobalProps */, cache) => {
if (
isDevelopment &&
!warnedAboutCssPropForGlobal && // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// I don't really want to add it to the type since it shouldn't be used
(props.className || props.css)
) {
console.error(
"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"
)
warnedAboutCssPropForGlobal = true
}
let styles = props.styles
let serialized = serializeStyles(
[styles],
undefined,
React.useContext(ThemeContext)
)
if (!isBrowser) {
let serializedNames = serialized.name
let serializedStyles = serialized.styles
let next = serialized.next
while (next !== undefined) {
serializedNames += ' ' + next.name
serializedStyles += next.styles
next = next.next
}
let shouldCache = cache.compat === true
let rules = cache.insert(
``,
{ name: serializedNames, styles: serializedStyles },
cache.sheet,
shouldCache
)
if (shouldCache) {
return null
}
return (
<style
{...{
[`data-emotion`]: `${cache.key}-global ${serializedNames}`,
dangerouslySetInnerHTML: { __html: rules },
nonce: cache.sheet.nonce
}}
/>
)
}
// yes, i know these hooks are used conditionally
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
let sheetRef = React.useRef()
useInsertionEffectWithLayoutFallback(() => {
const key = `${cache.key}-global`
// use case of https://github.com/emotion-js/emotion/issues/2675
let sheet = new cache.sheet.constructor({
key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
})
let rehydrating = false
let node /*: HTMLStyleElement | null*/ = document.querySelector(
`style[data-emotion="${key} ${serialized.name}"]`
)
if (cache.sheet.tags.length) {
sheet.before = cache.sheet.tags[0]
}
if (node !== null) {
rehydrating = true
// clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
node.setAttribute('data-emotion', key)
sheet.hydrate([node])
}
sheetRef.current = [sheet, rehydrating]
return () => {
sheet.flush()
}
}, [cache])
useInsertionEffectWithLayoutFallback(() => {
let sheetRefCurrent = sheetRef.current
let [sheet, rehydrating] = sheetRefCurrent
if (rehydrating) {
sheetRefCurrent[1] = false
return
}
if (serialized.next !== undefined) {
// insert keyframes
insertStyles(cache, serialized.next, true)
}
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
let element = sheet.tags[sheet.tags.length - 1].nextElementSibling
sheet.before = element
sheet.flush()
}
cache.insert(``, serialized, sheet, false)
}, [cache, serialized.name])
return null
})
if (isDevelopment) {
Global.displayName = 'EmotionGlobal'
}

View File

@@ -0,0 +1 @@
export * from '../types/index'

View File

@@ -0,0 +1,42 @@
import isDevelopment from '#is-development'
import pkg from '../package.json'
// export type { SerializedStyles } from '@emotion/utils'
export {
withEmotionCache,
CacheProvider,
__unsafe_useEmotionCache
} from './context'
export { jsx } from './jsx'
export { jsx as createElement } from './jsx'
export { Global } from './global'
export { keyframes } from './keyframes'
export { ClassNames } from './class-names'
export { ThemeContext, useTheme, ThemeProvider, withTheme } from './theming'
export { default as css } from './css'
if (isDevelopment) {
const isBrowser = typeof document !== 'undefined'
// #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked
const isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined'
if (isBrowser && !isTestEnv) {
// globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
const globalContext =
// $FlowIgnore
typeof globalThis !== 'undefined'
? globalThis // eslint-disable-line no-undef
: isBrowser
? window
: global
const globalKey = `__EMOTION_REACT_${pkg.version.split('.')[0]}__`
if (globalContext[globalKey]) {
console.warn(
'You are loading @emotion/react when it is already loaded. Running ' +
'multiple instances may cause problems. This can happen if multiple ' +
'versions are used, or if multiple builds of the same version are ' +
'used.'
)
}
globalContext[globalKey] = true
}
}

View File

@@ -0,0 +1 @@
export * from '../types/jsx-dev-runtime'

View File

@@ -0,0 +1,27 @@
import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime'
import Emotion, { createEmotionProps } from './emotion-element'
import { hasOwn } from './utils'
export const Fragment = ReactJSXRuntimeDev.Fragment
export function jsxDEV(type, props, key, isStaticChildren, source, self) {
if (!hasOwn.call(props, 'css')) {
return ReactJSXRuntimeDev.jsxDEV(
type,
props,
key,
isStaticChildren,
source,
self
)
}
return ReactJSXRuntimeDev.jsxDEV(
Emotion,
createEmotionProps(type, props),
key,
isStaticChildren,
source,
self
)
}

View File

@@ -0,0 +1 @@
export * from '../types/jsx-runtime'

View File

@@ -0,0 +1,21 @@
import * as ReactJSXRuntime from 'react/jsx-runtime'
import Emotion, { createEmotionProps } from './emotion-element'
import { hasOwn } from './utils'
export const Fragment = ReactJSXRuntime.Fragment
export function jsx(type, props, key) {
if (!hasOwn.call(props, 'css')) {
return ReactJSXRuntime.jsx(type, props, key)
}
return ReactJSXRuntime.jsx(Emotion, createEmotionProps(type, props), key)
}
export function jsxs(type, props, key) {
if (!hasOwn.call(props, 'css')) {
return ReactJSXRuntime.jsxs(type, props, key)
}
return ReactJSXRuntime.jsxs(Emotion, createEmotionProps(type, props), key)
}

View File

@@ -0,0 +1,25 @@
import * as React from 'react'
import Emotion, { createEmotionProps } from './emotion-element'
import { hasOwn } from './utils'
export const jsx /*: typeof React.createElement */ = function (
type /*: React.ElementType */,
props /*: Object */
) {
let args = arguments
if (props == null || !hasOwn.call(props, 'css')) {
return React.createElement.apply(undefined, args)
}
let argsLength = args.length
let createElementArgArray = new Array(argsLength)
createElementArgArray[0] = Emotion
createElementArgArray[1] = createEmotionProps(type, props)
for (let i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i]
}
return React.createElement.apply(null, createElementArgArray)
}

View File

@@ -0,0 +1,23 @@
import css from './css'
/*
type Keyframes = {|
name: string,
styles: string,
anim: 1,
toString: () => string
|} & string
*/
export const keyframes = (...args) /*: Keyframes */ => {
let insertable = css(...args)
const name = `animation-${insertable.name}`
return {
name,
styles: `@keyframes ${name}{${insertable.styles}}`,
anim: 1,
toString() {
return `_EMO_${this.name}_${this.styles}_EMO_`
}
}
}

View File

@@ -0,0 +1,83 @@
import * as React from 'react'
import weakMemoize from '@emotion/weak-memoize'
import isDevelopment from '#is-development'
import hoistNonReactStatics from './_isolated-hnrs'
export const ThemeContext = /* #__PURE__ */ React.createContext({})
if (isDevelopment) {
ThemeContext.displayName = 'EmotionThemeContext'
}
export const useTheme = () => React.useContext(ThemeContext)
const getTheme = (
outerTheme /*: Object */,
theme /*: Object | (Object => Object) */
) => {
if (typeof theme === 'function') {
const mergedTheme = theme(outerTheme)
if (
isDevelopment &&
(mergedTheme == null ||
typeof mergedTheme !== 'object' ||
Array.isArray(mergedTheme))
) {
throw new Error(
'[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'
)
}
return mergedTheme
}
if (
isDevelopment &&
(theme == null || typeof theme !== 'object' || Array.isArray(theme))
) {
throw new Error(
'[ThemeProvider] Please make your theme prop a plain object'
)
}
return { ...outerTheme, ...theme }
}
let createCacheWithTheme = /* #__PURE__ */ weakMemoize(outerTheme => {
return weakMemoize(theme => {
return getTheme(outerTheme, theme)
})
})
/*
type ThemeProviderProps = {
theme: Object | (Object => Object),
children: React.Node
}
*/
export const ThemeProvider = (props /*: ThemeProviderProps */) => {
let theme = React.useContext(ThemeContext)
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme)
}
return (
<ThemeContext.Provider value={theme}>
{props.children}
</ThemeContext.Provider>
)
}
export function withTheme /* <Config: {}> */(
Component /*: React.AbstractComponent<Config> */
) /*: React.AbstractComponent<$Diff<Config, { theme: Object }>> */ {
const componentName = Component.displayName || Component.name || 'Component'
let render = (props, ref) => {
let theme = React.useContext(ThemeContext)
return <Component theme={theme} ref={ref} {...props} />
}
let WithTheme = React.forwardRef(render)
WithTheme.displayName = `WithTheme(${componentName})`
return hoistNonReactStatics(WithTheme, Component)
}

View File

@@ -0,0 +1 @@
export const hasOwn = {}.hasOwnProperty

View File

@@ -0,0 +1,9 @@
import {} from 'react'
import { Interpolation } from '@emotion/serialize'
import { Theme } from '@emotion/react'
declare module 'react' {
interface Attributes {
css?: Interpolation<Theme>
}
}

View File

@@ -0,0 +1,14 @@
import { ReactJSX } from './jsx-namespace'
/**
* @desc Utility type for getting props type of React component.
* It takes `defaultProps` into an account - making props with defaults optional.
*/
export type PropsOf<
C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
// We need to use this version of Omit as it's distributive (Will preserve unions)
export type DistributiveOmit<T, U> = T extends any
? Pick<T, Exclude<keyof T, U>>
: never

View File

@@ -0,0 +1,115 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 3.4
import { EmotionCache } from '@emotion/cache'
import {
ArrayInterpolation,
ComponentSelector,
CSSInterpolation,
CSSObject,
FunctionInterpolation,
Interpolation,
Keyframes,
SerializedStyles
} from '@emotion/serialize'
import {
ClassAttributes,
Context,
Provider,
FC,
ReactElement,
ReactNode,
Ref,
createElement
} from 'react'
import { EmotionJSX } from './jsx-namespace'
export {
ArrayInterpolation,
ComponentSelector,
CSSObject,
EmotionCache,
FunctionInterpolation,
Interpolation,
Keyframes,
SerializedStyles
}
export * from './theming'
export * from './helper'
// tslint:disable-next-line: no-empty-interface
export interface Theme {}
export const ThemeContext: Context<object>
export const CacheProvider: Provider<EmotionCache>
export function withEmotionCache<Props, RefType = any>(
func: (props: Props, context: EmotionCache, ref: Ref<RefType>) => ReactNode
): FC<Props & ClassAttributes<RefType>>
export function css(
template: TemplateStringsArray,
...args: Array<CSSInterpolation>
): SerializedStyles
export function css(...args: Array<CSSInterpolation>): SerializedStyles
export interface GlobalProps {
styles: Interpolation<Theme>
}
/**
* @desc
* JSX generic are supported only after TS@2.9
*/
export function Global(props: GlobalProps): ReactElement
export function keyframes(
template: TemplateStringsArray,
...args: Array<CSSInterpolation>
): Keyframes
export function keyframes(...args: Array<CSSInterpolation>): Keyframes
export interface ArrayClassNamesArg extends Array<ClassNamesArg> {}
export type ClassNamesArg =
| undefined
| null
| string
| boolean
| { [className: string]: boolean | null | undefined }
| ArrayClassNamesArg
export interface ClassNamesContent {
css(template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string
css(...args: Array<CSSInterpolation>): string
cx(...args: Array<ClassNamesArg>): string
theme: Theme
}
export interface ClassNamesProps {
children(content: ClassNamesContent): ReactNode
}
/**
* @desc
* JSX generic are supported only after TS@2.9
*/
export function ClassNames(props: ClassNamesProps): ReactElement
export const jsx: typeof createElement
export namespace jsx {
namespace JSX {
type ElementType = EmotionJSX.ElementType
interface Element extends EmotionJSX.Element {}
interface ElementClass extends EmotionJSX.ElementClass {}
interface ElementAttributesProperty
extends EmotionJSX.ElementAttributesProperty {}
interface ElementChildrenAttribute
extends EmotionJSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<
C,
P
>
interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T>
extends EmotionJSX.IntrinsicClassAttributes<T> {}
type IntrinsicElements = EmotionJSX.IntrinsicElements
}
}

View File

@@ -0,0 +1 @@
export { EmotionJSX as JSX } from './jsx-namespace'

View File

@@ -0,0 +1,102 @@
import 'react'
import { Interpolation } from '@emotion/serialize'
import { Theme } from '@emotion/react'
type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
? true
: false
type WithConditionalCSSProp<P> = 'className' extends keyof P
? string extends P['className' & keyof P]
? { css?: Interpolation<Theme> }
: {}
: {}
// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
type ReactJSXElement = true extends IsPreReact19
? /** @ts-ignore */
JSX.Element
: /** @ts-ignore */
React.JSX.Element
type ReactJSXElementClass = true extends IsPreReact19
? /** @ts-ignore */
JSX.ElementClass
: /** @ts-ignore */
React.JSX.ElementClass
type ReactJSXElementAttributesProperty = true extends IsPreReact19
? /** @ts-ignore */
JSX.ElementAttributesProperty
: /** @ts-ignore */
React.JSX.ElementAttributesProperty
type ReactJSXElementChildrenAttribute = true extends IsPreReact19
? /** @ts-ignore */
JSX.ElementChildrenAttribute
: /** @ts-ignore */
React.JSX.ElementChildrenAttribute
type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
? /** @ts-ignore */
JSX.LibraryManagedAttributes<C, P>
: /** @ts-ignore */
React.JSX.LibraryManagedAttributes<C, P>
type ReactJSXIntrinsicAttributes = true extends IsPreReact19
? /** @ts-ignore */
JSX.IntrinsicAttributes
: /** @ts-ignore */
React.JSX.IntrinsicAttributes
type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
? /** @ts-ignore */
JSX.IntrinsicClassAttributes<T>
: /** @ts-ignore */
React.JSX.IntrinsicClassAttributes<T>
type ReactJSXIntrinsicElements = true extends IsPreReact19
? /** @ts-ignore */
JSX.IntrinsicElements
: /** @ts-ignore */
React.JSX.IntrinsicElements
type ReactJSXElementType = true extends IsPreReact19
? // based on the code from @types/react@18.2.8
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
string | React.JSXElementConstructor<any>
: /** @ts-ignore */
React.JSX.ElementType
export namespace ReactJSX {
type ElementType = ReactJSXElementType
interface Element extends ReactJSXElement {}
interface ElementClass extends ReactJSXElementClass {}
interface ElementAttributesProperty
extends ReactJSXElementAttributesProperty {}
interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
interface IntrinsicClassAttributes<T>
extends ReactJSXIntrinsicClassAttributes<T> {}
type IntrinsicElements = ReactJSXIntrinsicElements
}
export namespace EmotionJSX {
type ElementType = ReactJSXElementType
interface Element extends ReactJSXElement {}
interface ElementClass extends ReactJSXElementClass {}
interface ElementAttributesProperty
extends ReactJSXElementAttributesProperty {}
interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = P extends unknown
? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
: never
interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
interface IntrinsicClassAttributes<T>
extends ReactJSXIntrinsicClassAttributes<T> {}
type IntrinsicElements = {
[K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
css?: Interpolation<Theme>
}
}
}

View File

@@ -0,0 +1 @@
export { EmotionJSX as JSX } from './jsx-namespace'

View File

@@ -0,0 +1,31 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 3.1
import * as React from 'react'
import { Theme } from '@emotion/react'
import { DistributiveOmit, PropsOf } from './helper'
export interface ThemeProviderProps {
theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
children: React.ReactNode
}
export interface ThemeProvider {
(props: ThemeProviderProps): React.ReactElement
}
export type withTheme = <
C extends React.ComponentType<React.ComponentProps<C>>
>(
component: C
) => React.FC<DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }>
export function useTheme(): Theme
export const ThemeProvider: ThemeProvider
export const withTheme: withTheme
export type WithTheme<P, T> = P extends { theme: infer Theme }
? P & { theme: Exclude<Theme, undefined> }
: P & { theme: T }

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,54 @@
{
"name": "@emotion/serialize",
"version": "1.3.3",
"description": "serialization utils for emotion",
"main": "dist/emotion-serialize.cjs.js",
"module": "dist/emotion-serialize.esm.js",
"types": "dist/emotion-serialize.cjs.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/serialize",
"publishConfig": {
"access": "public"
},
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
"@emotion/hash": "^0.9.2",
"@emotion/memoize": "^0.9.0",
"@emotion/unitless": "^0.10.0",
"@emotion/utils": "^1.4.2",
"csstype": "^3.0.2"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"typescript": "^5.4.5"
},
"files": [
"src",
"dist"
],
"exports": {
".": {
"types": {
"import": "./dist/emotion-serialize.cjs.mjs",
"default": "./dist/emotion-serialize.cjs.js"
},
"development": {
"module": "./dist/emotion-serialize.development.esm.js",
"import": "./dist/emotion-serialize.development.cjs.mjs",
"default": "./dist/emotion-serialize.development.cjs.js"
},
"module": "./dist/emotion-serialize.esm.js",
"import": "./dist/emotion-serialize.cjs.mjs",
"default": "./dist/emotion-serialize.cjs.js"
},
"./package.json": "./package.json"
},
"imports": {
"#is-development": {
"development": "./src/conditions/true.ts",
"default": "./src/conditions/false.ts"
}
}
}

View File

@@ -0,0 +1 @@
export default false as boolean

View File

@@ -0,0 +1 @@
export default true as boolean

View File

@@ -0,0 +1,451 @@
import type { RegisteredCache, SerializedStyles } from '@emotion/utils'
import hashString from '@emotion/hash'
import unitless from '@emotion/unitless'
import memoize from '@emotion/memoize'
import isDevelopment from '#is-development'
import * as CSS from 'csstype'
export type { RegisteredCache, SerializedStyles }
type Cursor = {
name: string
styles: string
next?: Cursor
}
export type CSSProperties = CSS.PropertiesFallback<number | string>
export type CSSPropertiesWithMultiValues = {
[K in keyof CSSProperties]:
| CSSProperties[K]
| ReadonlyArray<Extract<CSSProperties[K], string>>
}
export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
export interface ArrayCSSInterpolation
extends ReadonlyArray<CSSInterpolation> {}
export type InterpolationPrimitive =
| null
| undefined
| boolean
| number
| string
| ComponentSelector
| Keyframes
| SerializedStyles
| CSSObject
export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
export interface CSSOthersObject {
[propertiesName: string]: CSSInterpolation
}
export interface CSSObject
extends CSSPropertiesWithMultiValues,
CSSPseudos,
CSSOthersObject {}
export interface ComponentSelector {
__emotion_styles: any
}
export type Keyframes = {
name: string
styles: string
anim: number
toString: () => string
} & string
export interface ArrayInterpolation<Props = unknown>
extends ReadonlyArray<Interpolation<Props>> {}
export interface FunctionInterpolation<Props = unknown> {
(props: Props): Interpolation<Props>
}
export type Interpolation<Props = unknown> =
| InterpolationPrimitive
| ArrayInterpolation<Props>
| FunctionInterpolation<Props>
const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
const UNDEFINED_AS_OBJECT_KEY_ERROR =
"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."
let hyphenateRegex = /[A-Z]|^ms/g
let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
const isCustomProperty = (property: string) => property.charCodeAt(1) === 45
const isProcessableValue = (value: Interpolation) =>
value != null && typeof value !== 'boolean'
const processStyleName = /* #__PURE__ */ memoize((styleName: string) =>
isCustomProperty(styleName)
? styleName
: styleName.replace(hyphenateRegex, '-$&').toLowerCase()
)
let processStyleValue = (
key: string,
value: string | number
): string | number => {
switch (key) {
case 'animation':
case 'animationName': {
if (typeof value === 'string') {
return value.replace(animationRegex, (match, p1, p2) => {
cursor = {
name: p1,
styles: p2,
next: cursor
}
return p1
})
}
}
}
if (
unitless[key as keyof typeof unitless] !== 1 &&
!isCustomProperty(key) &&
typeof value === 'number' &&
value !== 0
) {
return value + 'px'
}
return value
}
if (isDevelopment) {
let contentValuePattern =
/(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
let oldProcessStyleValue = processStyleValue
let msPattern = /^-ms-/
let hyphenPattern = /-(.)/g
let hyphenatedCache: Record<string, boolean | undefined> = {}
processStyleValue = (key: string, value: string | number) => {
if (key === 'content') {
if (
typeof value !== 'string' ||
(contentValues.indexOf(value) === -1 &&
!contentValuePattern.test(value) &&
(value.charAt(0) !== value.charAt(value.length - 1) ||
(value.charAt(0) !== '"' && value.charAt(0) !== "'")))
) {
throw new Error(
`You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
)
}
}
const processed = oldProcessStyleValue(key, value)
if (
processed !== '' &&
!isCustomProperty(key) &&
key.indexOf('-') !== -1 &&
hyphenatedCache[key] === undefined
) {
hyphenatedCache[key] = true
console.error(
`Using kebab-case for css properties in objects is not supported. Did you mean ${key
.replace(msPattern, 'ms-')
.replace(hyphenPattern, (str, char) => char.toUpperCase())}?`
)
}
return processed
}
}
const noComponentSelectorMessage =
'Component selectors can only be used in conjunction with ' +
'@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' +
'compiler transform.'
function handleInterpolation(
mergedProps: unknown | undefined,
registered: RegisteredCache | undefined,
interpolation: Interpolation
): string | number {
if (interpolation == null) {
return ''
}
const componentSelector = interpolation as ComponentSelector
if (componentSelector.__emotion_styles !== undefined) {
if (
isDevelopment &&
String(componentSelector) === 'NO_COMPONENT_SELECTOR'
) {
throw new Error(noComponentSelectorMessage)
}
return componentSelector as unknown as string
}
switch (typeof interpolation) {
case 'boolean': {
return ''
}
case 'object': {
const keyframes = interpolation as Keyframes
if (keyframes.anim === 1) {
cursor = {
name: keyframes.name,
styles: keyframes.styles,
next: cursor
}
return keyframes.name
}
const serializedStyles = interpolation as SerializedStyles
if (serializedStyles.styles !== undefined) {
let next = serializedStyles.next
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
}
next = next.next
}
}
let styles = `${serializedStyles.styles};`
return styles
}
return createStringFromObject(
mergedProps,
registered,
interpolation as ArrayInterpolation | CSSObject
)
}
case 'function': {
if (mergedProps !== undefined) {
let previousCursor = cursor
let result = interpolation(mergedProps)
cursor = previousCursor
return handleInterpolation(mergedProps, registered, result)
} else if (isDevelopment) {
console.error(
'Functions that are interpolated in css calls will be stringified.\n' +
'If you want to have a css call based on props, create a function that returns a css call like this\n' +
'let dynamicStyle = (props) => css`color: ${props.color}`\n' +
'It can be called directly with props or interpolated in a styled call like this\n' +
"let SomeComponent = styled('div')`${dynamicStyle}`"
)
}
break
}
case 'string':
if (isDevelopment) {
const matched: string[] = []
const replaced = interpolation.replace(
animationRegex,
(_match, _p1, p2) => {
const fakeVarName = `animation${matched.length}`
matched.push(
`const ${fakeVarName} = keyframes\`${p2.replace(
/^@keyframes animation-\w+/,
''
)}\``
)
return `\${${fakeVarName}}`
}
)
if (matched.length) {
console.error(
`\`keyframes\` output got interpolated into plain string, please wrap it with \`css\`.
Instead of doing this:
${[...matched, `\`${replaced}\``].join('\n')}
You should wrap it with \`css\` like this:
css\`${replaced}\``
)
}
}
break
}
// finalize string values (regular strings and functions interpolated into css calls)
const asString = interpolation as string
if (registered == null) {
return asString
}
const cached = registered[asString]
return cached !== undefined ? cached : asString
}
function createStringFromObject(
mergedProps: unknown | undefined,
registered: RegisteredCache | undefined,
obj: ArrayInterpolation | CSSObject
): string {
let string = ''
if (Array.isArray(obj)) {
for (let i = 0; i < obj.length; i++) {
string += `${handleInterpolation(mergedProps, registered, obj[i])};`
}
} else {
for (let key in obj) {
let value: unknown = obj[key as never]
if (typeof value !== 'object') {
const asString = value as string
if (registered != null && registered[asString] !== undefined) {
string += `${key}{${registered[asString]}}`
} else if (isProcessableValue(asString)) {
string += `${processStyleName(key)}:${processStyleValue(
key,
asString
)};`
}
} else {
if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
throw new Error(noComponentSelectorMessage)
}
if (
Array.isArray(value) &&
typeof value[0] === 'string' &&
(registered == null || registered[value[0]] === undefined)
) {
for (let i = 0; i < value.length; i++) {
if (isProcessableValue(value[i])) {
string += `${processStyleName(key)}:${processStyleValue(
key,
value[i] as string | number
)};`
}
}
} else {
const interpolated = handleInterpolation(
mergedProps,
registered,
value as Interpolation
)
switch (key) {
case 'animation':
case 'animationName': {
string += `${processStyleName(key)}:${interpolated};`
break
}
default: {
if (isDevelopment && key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)
}
string += `${key}{${interpolated}}`
}
}
}
}
}
}
return string
}
let labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g
// this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
let cursor: Cursor | undefined
export function serializeStyles<Props>(
args: Array<TemplateStringsArray | Interpolation<Props>>,
registered?: RegisteredCache,
mergedProps?: Props
): SerializedStyles
export function serializeStyles(
args: Array<TemplateStringsArray | Interpolation<unknown>>,
registered?: RegisteredCache,
mergedProps?: unknown
): SerializedStyles {
if (
args.length === 1 &&
typeof args[0] === 'object' &&
args[0] !== null &&
(args[0] as SerializedStyles).styles !== undefined
) {
return args[0] as SerializedStyles
}
let stringMode = true
let styles = ''
cursor = undefined
let strings = args[0]
if (strings == null || (strings as TemplateStringsArray).raw === undefined) {
stringMode = false
styles += handleInterpolation(
mergedProps,
registered,
strings as Interpolation
)
} else {
const asTemplateStringsArr = strings as TemplateStringsArray
if (isDevelopment && asTemplateStringsArr[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
}
styles += asTemplateStringsArr[0]
}
// we start at 1 since we've already handled the first arg
for (let i = 1; i < args.length; i++) {
styles += handleInterpolation(
mergedProps,
registered,
args[i] as Interpolation
)
if (stringMode) {
const templateStringsArr = strings as TemplateStringsArray
if (isDevelopment && templateStringsArr[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
}
styles += templateStringsArr[i]
}
}
// using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0
let identifierName = ''
let match
// https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + match[1]
}
let name = hashString(styles) + identifierName
if (isDevelopment) {
const devStyles = {
name,
styles,
next: cursor,
toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
}
}
return devStyles
}
return {
name,
styles,
next: cursor
}
}

21
backend/frontend/node_modules/@emotion/sheet/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

121
backend/frontend/node_modules/@emotion/sheet/README.md generated vendored Normal file
View File

@@ -0,0 +1,121 @@
# @emotion/sheet
> A StyleSheet for css-in-js libraries
```bash
yarn add @emotion/sheet
```
```jsx
import { StyleSheet } from '@emotion/sheet'
const sheet = new StyleSheet({ key: '', container: document.head })
sheet.insert('html { color: hotpink; }')
```
> **Note:**
> This is not useful for server-side rendering, you should implement SSR seperately
## StyleSheet
### Options
```ts
type Options = {
nonce?: string
key: string
container: Node
speedy?: boolean
prepend?: boolean
}
```
#### nonce
A nonce that will be set on each style tag that the sheet inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
#### container
A DOM Node that the sheet will insert all of it's style tags into, this is useful for inserting styles into iframes.
#### key
This will be set as the value of the `data-emotion` attribute on the style tags that get inserted. This is useful to identify different sheets.
#### speedy
This defines how rules are inserted. If it is true, rules will be inserted with [`insertRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) which is very fast but doesn't allow rules to be edited in DevTools. If it is false, rules will be inserted by appending text nodes to style elements which is much slower than insertRule but allows rules to be edited in DevTools. By default, speedy is enabled in production and disabled in development.
#### prepend
**Deprecated:** Please use `insertionPoint` option instead.
This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option.
#### insertionPoint
This defines specific dom node after which the rules are inserted into the `container`. You can use a `meta` tag to specify the specific location:
```jsx
const head = document.querySelector('head')
// <meta name="emotion-insertion-point" content="">
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
emotionInsertionPoint.setAttribute('content', '')
head.appendChild(emotionInsertionPoint)
// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
insertionPoint: emotionInsertionPoint
})
function App() {
return (
<CacheProvider value={cache}>
<Main />
</CacheProvider>
)
}
```
### Methods
#### insert
This method inserts a single rule into the document. It **must** be a single rule otherwise an error will be thrown in speedy mode which is enabled by default in production.
#### flush
This method will remove all style tags that were inserted into the document.
#### hydrate
This method moves given style elements into sheet's container and put them into internal tags collection. It's can be used for SSRed styles.
### Example with all options
```jsx
import { StyleSheet } from '@emotion/sheet'
const container = document.createElement('div')
document.head.appendChild(container)
const sheet = new StyleSheet({
nonce: 'some-nonce',
key: 'some-key',
container
})
sheet.insert('html { color: hotpink; }')
sheet.flush()
```
# Thanks
This StyleSheet is based on [glamor's StyleSheet](https://github.com/threepointone/glamor) written by [Sunil Pai](https://github.com/threepointone). ❤️

View File

@@ -0,0 +1,47 @@
{
"name": "@emotion/sheet",
"version": "1.4.0",
"description": "emotion's stylesheet",
"main": "dist/emotion-sheet.cjs.js",
"module": "dist/emotion-sheet.esm.js",
"types": "dist/emotion-sheet.cjs.d.ts",
"exports": {
".": {
"types": {
"import": "./dist/emotion-sheet.cjs.mjs",
"default": "./dist/emotion-sheet.cjs.js"
},
"development": {
"module": "./dist/emotion-sheet.development.esm.js",
"import": "./dist/emotion-sheet.development.cjs.mjs",
"default": "./dist/emotion-sheet.development.cjs.js"
},
"module": "./dist/emotion-sheet.esm.js",
"import": "./dist/emotion-sheet.cjs.mjs",
"default": "./dist/emotion-sheet.cjs.js"
},
"./package.json": "./package.json"
},
"imports": {
"#is-development": {
"development": "./src/conditions/true.ts",
"default": "./src/conditions/false.ts"
}
},
"license": "MIT",
"scripts": {
"test:typescript": "dtslint types"
},
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/sheet",
"publishConfig": {
"access": "public"
},
"files": [
"src",
"dist"
],
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
"typescript": "^5.4.5"
}
}

View File

@@ -0,0 +1 @@
export default false

View File

@@ -0,0 +1 @@
export default true

View File

@@ -0,0 +1,173 @@
import isDevelopment from '#is-development'
/*
Based off glamor's StyleSheet, thanks Sunil ❤️
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
function sheetForTag(tag: HTMLStyleElement): CSSStyleSheet {
if (tag.sheet) {
return tag.sheet
}
// this weirdness brought to you by firefox
/* istanbul ignore next */
for (let i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
return document.styleSheets[i]
}
}
// this function should always return with a value
// TS can't understand it though so we make it stop complaining here
return undefined as any
}
export type Options = {
nonce?: string
key: string
container: Node
speedy?: boolean
prepend?: boolean
insertionPoint?: HTMLElement
}
function createStyleElement(options: Options): HTMLStyleElement {
let tag = document.createElement('style')
tag.setAttribute('data-emotion', options.key)
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce)
}
tag.appendChild(document.createTextNode(''))
tag.setAttribute('data-s', '')
return tag
}
export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: HTMLStyleElement[]
// Using Node instead of HTMLElement since container may be a ShadowRoot
container: Node
key: string
nonce: string | undefined
prepend: boolean | undefined
before: Element | null
insertionPoint: HTMLElement | undefined
private _alreadyInsertedOrderInsensitiveRule: boolean | undefined
constructor(options: Options) {
this.isSpeedy =
options.speedy === undefined ? !isDevelopment : options.speedy
this.tags = []
this.ctr = 0
this.nonce = options.nonce
// key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key
this.container = options.container
this.prepend = options.prepend
this.insertionPoint = options.insertionPoint
this.before = null
}
private _insertTag = (tag: HTMLStyleElement): void => {
let before
if (this.tags.length === 0) {
if (this.insertionPoint) {
before = this.insertionPoint.nextSibling
} else if (this.prepend) {
before = this.container.firstChild
} else {
before = this.before
}
} else {
before = this.tags[this.tags.length - 1].nextSibling
}
this.container.insertBefore(tag, before)
this.tags.push(tag)
}
hydrate(nodes: HTMLStyleElement[]): void {
nodes.forEach(this._insertTag)
}
insert(rule: string): void {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this))
}
const tag = this.tags[this.tags.length - 1]
if (isDevelopment) {
const isImportRule =
rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105
if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error(
`You're attempting to insert the following rule:\n` +
rule +
'\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.'
)
}
this._alreadyInsertedOrderInsensitiveRule =
this._alreadyInsertedOrderInsensitiveRule || !isImportRule
}
if (this.isSpeedy) {
const sheet = sheetForTag(tag)
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length)
} catch (e) {
if (
isDevelopment &&
!/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(
rule
)
) {
console.error(
`There was a problem inserting the following rule: "${rule}"`,
e
)
}
}
} else {
tag.appendChild(document.createTextNode(rule))
}
this.ctr++
}
flush(): void {
this.tags.forEach(tag => tag.parentNode?.removeChild(tag))
this.tags = []
this.ctr = 0
if (isDevelopment) {
this._alreadyInsertedOrderInsensitiveRule = false
}
}
}

21
backend/frontend/node_modules/@emotion/styled/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,31 @@
# @emotion/styled
> The styled API for @emotion/react
## Install
```bash
yarn add @emotion/react @emotion/styled
```
## Usage
```jsx
import styled from '@emotion/styled'
let SomeComp = styled.div({
color: 'hotpink'
})
let AnotherComp = styled.div`
color: ${props => props.color};
`
render(
<SomeComp>
<AnotherComp color="green" />
</SomeComp>
)
```
More documentation is available at [https://emotion.sh/docs/styled](https://emotion.sh/docs/styled).

View File

@@ -0,0 +1,9 @@
{
"main": "dist/emotion-styled-base.cjs.js",
"module": "dist/emotion-styled-base.esm.js",
"umd:main": "dist/emotion-styled-base.umd.min.js",
"types": "../types/base",
"preconstruct": {
"umdName": "emotionStyledBase"
}
}

View File

@@ -0,0 +1,3 @@
import styled from '@emotion/styled'
export * from '@emotion/styled'
export default styled

Some files were not shown because too many files have changed in this diff Show More