Showing preview only (268K chars total). Download the full file or copy to clipboard to get everything.
Repository: vercel/styled-jsx
Branch: main
Commit: d7a59379134d
Files: 113
Total size: 244.9 KB
Directory structure:
gitextract_mv38yaut/
├── .eslintignore
├── .github/
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── main.yml
│ └── prs.yml
├── .gitignore
├── .npmrc
├── .prettierrc.json
├── CODEOWNERS
├── Changelog.md
├── babel-test.js
├── babel.js
├── css.d.ts
├── css.js
├── global.d.ts
├── index.d.ts
├── index.js
├── lib/
│ ├── style-transform.js
│ └── stylesheet.js
├── license.md
├── macro.d.ts
├── macro.js
├── package.json
├── readme.md
├── src/
│ ├── .babelrc
│ ├── _constants.js
│ ├── _utils.js
│ ├── babel-external.js
│ ├── babel-test.js
│ ├── babel.js
│ ├── index.js
│ ├── lib/
│ │ ├── hash.js
│ │ ├── style-transform.js
│ │ └── stylesheet.js
│ ├── macro.js
│ ├── style.js
│ ├── stylesheet-registry.js
│ └── webpack.js
├── style.d.ts
├── style.js
├── test/
│ ├── .babelrc
│ ├── __snapshots__/
│ │ ├── attribute.js.snap
│ │ ├── external.js.snap
│ │ ├── index.js.snap
│ │ ├── macro.js.snap
│ │ ├── plugins.js.snap
│ │ └── styles.js.snap
│ ├── _read.js
│ ├── _transform.js
│ ├── attribute.js
│ ├── external.js
│ ├── fixtures/
│ │ ├── absent.js
│ │ ├── attribute-generation-classname-rewriting.js
│ │ ├── attribute-generation-modes.js
│ │ ├── class.js
│ │ ├── component-attribute.js
│ │ ├── conflicts.js
│ │ ├── css-tag-same-file.js
│ │ ├── different-jsx-ids.js
│ │ ├── dynamic-element-class.js
│ │ ├── dynamic-element-external.js
│ │ ├── dynamic-element.js
│ │ ├── dynamic-this-value-in-arrow.js
│ │ ├── expressions.js
│ │ ├── external-stylesheet-global.js
│ │ ├── external-stylesheet-multi-line.js
│ │ ├── external-stylesheet.js
│ │ ├── fragment.js
│ │ ├── global.js
│ │ ├── ignore.js
│ │ ├── macro.js
│ │ ├── mixed-global-scoped.js
│ │ ├── multiple-jsx.js
│ │ ├── nested-style-tags.js
│ │ ├── non-styled-jsx-style.js
│ │ ├── not-styled-jsx-tagged-templates.js
│ │ ├── plugins/
│ │ │ ├── another-plugin.js
│ │ │ ├── invalid-plugin.js
│ │ │ ├── multiple-options.js
│ │ │ ├── options.js
│ │ │ └── plugin.js
│ │ ├── simple-fragment.js
│ │ ├── source-maps.js
│ │ ├── stateless.js
│ │ ├── styles-external-invalid.js
│ │ ├── styles-external-invalid2.js
│ │ ├── styles.js
│ │ ├── styles2.js
│ │ ├── transform.css
│ │ ├── whitespace.js
│ │ └── with-plugins.js
│ ├── helpers/
│ │ ├── babel-test.macro.js
│ │ └── with-mock.js
│ ├── index.js
│ ├── index.ts
│ ├── macro.js
│ ├── plugins.js
│ ├── snapshots/
│ │ ├── attribute.js.md
│ │ ├── attribute.js.snap
│ │ ├── external.js.md
│ │ ├── external.js.snap
│ │ ├── index.js.md
│ │ ├── index.js.snap
│ │ ├── macro.js.md
│ │ ├── macro.js.snap
│ │ ├── plugins.js.md
│ │ ├── plugins.js.snap
│ │ ├── styles.js.md
│ │ └── styles.js.snap
│ ├── styles.js
│ ├── stylesheet-registry.js
│ └── stylesheet.js
├── tsconfig.json
└── webpack.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
test/fixtures
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
Before you open a new issue please take a look at our [**Frequent Asked Questions**](https://github.com/vercel/styled-jsx#faq) and [**open issues**](https://github.com/vercel/styled-jsx/issues). Or if you're using styled-jsx with Next.js but found issue there, please fill an issue to [**Next.js**](https://github.com/vercel/next.js/issues) instead.
Remember, often time asking in chat or looking at the FAQ/issues can be \*faster than waiting for us to reply to a new issue\*\*.
If you are here to report a bug or request a feature please remove this introductory section and fill out the information below!
-->
#### Do you want to request a _feature_ or report a _bug_?
#### What is the current behavior?
#### If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar
#### What is the expected behavior?
#### Environment (include versions)
- Version of styled-jsx (or next.js if it's being used):
- Browser:
- OS:
#### Did this work in previous versions?
================================================
FILE: .github/workflows/main.yml
================================================
name: CI
on:
push:
branches:
- main
- alpha
- beta
tags:
- '!*'
pull_request:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Begin CI...
uses: actions/checkout@v4
- name: Use Node 20
uses: actions/setup-node@v4
with:
node-version: 20.x
- name: Install dependencies
run: yarn install --frozen-lockfile
env:
CI: true
- name: Build
run: yarn build
env:
CI: true
- name: Lint
run: yarn lint
env:
CI: true
- name: Test
run: yarn test
env:
CI: true
- name: Test types
run: yarn test-types
env:
CI: true
- name: Release
if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha' || github.ref == 'refs/heads/beta')
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
run: yarn semantic-release
================================================
FILE: .github/workflows/prs.yml
================================================
name: 'Lint PR'
on:
pull_request_target:
types:
- opened
- edited
- synchronize
jobs:
main:
runs-on: ubuntu-latest
steps:
- uses: amannn/action-semantic-pull-request@v2.1.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .gitignore
================================================
# dependencies
node_modules
# build output
dist
out
# logs
npm-debug.log
================================================
FILE: .npmrc
================================================
package-lock=false
save-exact = true
================================================
FILE: .prettierrc.json
================================================
{ "singleQuote": true, "semi": false }
================================================
FILE: CODEOWNERS
================================================
# optionally request a review from @rauchg, @nkzawa, @leo manually
* @huozhi
* @ijjk
================================================
FILE: Changelog.md
================================================
# Changelog
## [5.0.0]
### Features
- Introduce contextual styles (#744)
- Opt-in react 18 insertion effect hook when available (#753)
- Fallback to module level registry in browser (#768)
### Improvements
- Make JSXStyle return a noop if the registry context is not provided (#749)
- Fix typings of `nonce` property
- Pre-compile dependencies to reduce install size/time (#770)
### BREAKING CHANGES
#### APIs
- `styled-jsx/server` import path is deprecated
- `flush` and `flushToHTML` from `styled-jsx/server` APIs are deprecated
- New component `<StyledRegistry>` is introduced
- New APIs `useStyleRegistry` and `createStyleRegistry` are introduced
#### Usage
If you're only using styled-jsx purely client side, nothing will effect you.
If you're using styled-jsx inside Next.js without customization, Next.js will automatically handle the changes for you.
If you have your own customization with styled-jsx in Next.js, for example you have a custom `_document`:
By default, doing this will let Next.js collect styles and pass them down.
```jsx
class Document extends React.Component {
static async getInitialProps(ctx) {
return await ctx.defaultGetInitialProps(ctx)
}
}
```
Or for instance you're passing `nonce` property in `getInitialProps` of `_document`, this will let you configure it:
```diff
class Document extends React.Component {
static async getInitialProps(ctx) {
- return await ctx.defaultGetInitialProps(ctx)
+ return await ctx.defaultGetInitialProps(ctx, { nonce })
}
}
```
If you're building the SSR solution yourself with other frameworks, please checkout the **Server-Side Rendering** section in readme.
## [4.0.1]
- Mark `@babel/core` as optional peer dependency
## [4.0.0]
- Use react hooks to manage styles injection (#720)
### BREAKING CHANGES
- Drop support for react versions < 16.8.0
### Improvements
- Drop babel 6 support (#730)
- Auto publish alpha/beta versions
## [3.4.x]
### Improvements
- Typing support
- Inject unique \_JSXStyle identifier
- Hide webpack loader warnings
- Refactor the import helpers
================================================
FILE: babel-test.js
================================================
/* eslint-ignore */
module.exports = require('./dist/babel').test()
================================================
FILE: babel.js
================================================
module.exports = require('./dist/babel').default
================================================
FILE: css.d.ts
================================================
// Definitions by: @types/styled-jsx <https://www.npmjs.com/package/@types/styled-jsx>
declare module 'styled-jsx/css' {
import type { JSX } from "react";
function css(chunks: TemplateStringsArray, ...args: any[]): JSX.Element
namespace css {
export function global(
chunks: TemplateStringsArray,
...args: any[]
): JSX.Element
export function resolve(
chunks: TemplateStringsArray,
...args: any[]
): { className: string; styles: JSX.Element }
}
export = css
}
================================================
FILE: css.js
================================================
function notTranspiledError(name) {
throw new Error(
'styled-jsx/css: if you are getting this error it means that your `' +
name +
'` tagged template literals were not transpiled.'
)
}
function css() {
notTranspiledError('css')
}
css.global = function() {
notTranspiledError('global')
}
css.resolve = function() {
notTranspiledError('resolve')
}
module.exports = css
module.exports.global = css.global
module.exports.resolve = css.resolve
================================================
FILE: global.d.ts
================================================
import React from 'react'
declare module 'react' {
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
jsx?: boolean
global?: boolean
}
}
================================================
FILE: index.d.ts
================================================
/// <reference types="./css" />
/// <reference types="./macro" />
/// <reference types="./style" />
/// <reference types="./global" />
declare module 'styled-jsx' {
import type { JSX } from "react";
export type StyledJsxStyleRegistry = {
styles(options?: { nonce?: string }): JSX.Element[]
flush(): void
add(props: any): void
remove(props: any): void
}
export function useStyleRegistry(): StyledJsxStyleRegistry
export function StyleRegistry({
children,
registry
}: {
children: JSX.Element | import('react').ReactNode
registry?: StyledJsxStyleRegistry
}): JSX.Element
export function createStyleRegistry(): StyledJsxStyleRegistry
}
================================================
FILE: index.js
================================================
module.exports = require('./dist/index')
================================================
FILE: lib/style-transform.js
================================================
/* eslint-ignore */
module.exports = require('../dist/lib/style-transform')
================================================
FILE: lib/stylesheet.js
================================================
module.exports = require('../dist/lib/stylesheet')
================================================
FILE: license.md
================================================
MIT License
Copyright (c) 2016-present Vercel, Inc.
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.
================================================
FILE: macro.d.ts
================================================
declare module 'styled-jsx/macro' {
import type { JSX } from "react";
namespace macro {
function resolve(
chunks: TemplateStringsArray,
...args: any[]
): {
className: string
styles: JSX.Element
}
}
export = macro
}
================================================
FILE: macro.js
================================================
module.exports = require('./dist/babel').macro()
================================================
FILE: package.json
================================================
{
"name": "styled-jsx",
"version": "0.0.0-development",
"license": "MIT",
"repository": "vercel/styled-jsx",
"description": "Full CSS support for JSX without compromises",
"files": [
"dist",
"lib",
"global.d.ts",
"index.d.ts",
"index.js",
"babel.js",
"babel-test.js",
"style.js",
"style.d.ts",
"macro.js",
"macro.d.ts",
"css.js",
"css.d.ts",
"webpack.js",
"license.md"
],
"typings": "./index.d.ts",
"scripts": {
"build-babel": "bunchee src/babel.js -f cjs -e babel-plugin-macros --runtime node -o dist/babel/index.js",
"build": "rm -rf dist && rm -rf out && yarn build-webpack && yarn build-index && yarn build-babel",
"build-webpack": "bunchee src/webpack.js -f cjs --runtime node -o dist/webpack/index.js",
"build-index": "bunchee src/index.js -f cjs --runtime node -o dist/index/index.js",
"test": "ava",
"test-types": "tsc --project tsconfig.json --noEmit",
"lint": "eslint ./src",
"format": "prettier --write \"./{src,test}/**/*.{js,css}\"",
"prepublishOnly": "yarn build && yarn test && yarn lint --quiet"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"ava": {
"require": [
"@babel/register"
]
},
"eslintConfig": {
"env": {
"node": true,
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"prettier"
],
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"rules": {
"no-empty": 0,
"capitalized-comments": 0,
"valid-jsdoc": 0,
"prefer-destructuring": 0,
"padding-line-between-statements": 0
}
},
"devDependencies": {
"@babel/cli": "7.18.10",
"@babel/core": "7.12.3",
"@babel/plugin-proposal-object-rest-spread": "7.12.1",
"@babel/plugin-syntax-jsx": "7.14.5",
"@babel/plugin-transform-arrow-functions": "7.12.1",
"@babel/plugin-transform-modules-commonjs": "7.12.1",
"@babel/plugin-transform-runtime": "7.12.1",
"@babel/preset-env": "7.12.1",
"@babel/preset-react": "7.12.5",
"@babel/register": "7.12.1",
"@babel/runtime": "7.12.5",
"@babel/types": "7.15.0",
"@types/react": "18.3.3",
"ava": "4.3.1",
"babel-plugin-macros": "2.8.0",
"bunchee": "2.1.5",
"convert-source-map": "1.7.0",
"eslint": "7.32.0",
"eslint-config-prettier": "4.0.0",
"husky": "4.3.0",
"loader-utils": "1.4.2",
"prettier": "1.16.4",
"pretty-quick": "3.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"semantic-release": "17.2.2",
"source-map": "0.7.3",
"string-hash": "1.1.3",
"stylis": "3.5.4",
"stylis-rule-sheet": "0.0.10",
"typescript": "~5.0.0"
},
"peerDependencies": {
"react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"babel-plugin-macros": {
"optional": true
}
},
"release": {
"branches": [
"main",
"alpha",
"beta"
]
},
"engines": {
"node": ">= 12.0.0"
},
"keywords": [
"babel-plugin-macros",
"vercel",
"zeit",
"css-in-js",
"css"
],
"dependencies": {
"client-only": "0.0.1"
},
"packageManager": "yarn@1.22.22"
}
================================================
FILE: readme.md
================================================
# styled-jsx
[](https://github.com/vercel/styled-jsx/actions?query=branch%3Amain)
Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).
Code and docs are for v3 which we highly recommend you to try. Looking for styled-jsx v2? Switch to the [v2 branch](https://github.com/vercel/styled-jsx/tree/v2).
- [Getting started](#getting-started)
- [Configuration options](#configuration-options)
- [`optimizeForSpeed`](#optimizeforspeed)
- [`sourceMaps`](#sourcemaps)
- [`styleModule`](#stylemodule)
- [`vendorPrefixes`](#vendorprefixes)
- [Features](#features)
- [How It Works](#how-it-works)
- [Why It Works Like This](#why-it-works-like-this)
- [Targeting The Root](#targeting-the-root)
- [Global styles](#global-styles)
- [One-off global selectors](#one-off-global-selectors)
- [Dynamic styles](#dynamic-styles)
- [Via interpolated dynamic props](#via-interpolated-dynamic-props)
- [Via `className` toggling](#via-classname-toggling)
- [Via inline `style`](#via-inline-style)
- [Constants](#constants)
- [Server-Side Rendering](#server-side-rendering)
- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)
- [External styles](#external-styles)
- [Styles outside of components](#styles-outside-of-components)
- [The `resolve` tag](#the-resolve-tag)
- [Styles in regular CSS files](#styles-in-regular-css-files)
- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)
- [Plugin options](#plugin-options)
- [Example plugins](#example-plugins)
- [Rendering in tests](#rendering-in-tests)
- [FAQ](#faq)
- [Warning: unknown `jsx` prop on <style> tag](#warning-unknown-jsx-prop-on-style-tag)
- [Can I return an array of components when using React 16?](#can-i-return-an-array-of-components-when-using-react-16)
- [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)
- [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)
- [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)
- [Syntax Highlighting](#syntax-highlighting)
- [ESLint](#eslint)
- [TypeScript](#typescript)
- [Credits](#credits)
## Getting started
Firstly, install the package:
```bash
npm install --save styled-jsx
```
Next, add `styled-jsx/babel` to `plugins` in your babel configuration:
```json
{
"plugins": ["styled-jsx/babel"]
}
```
Now add `<style jsx>` to your code and fill it with CSS:
```jsx
export default () => (
<div>
<p>only this paragraph will get the style :)</p>
{/* you can include <Component />s here that include
other <p>s that don't get unexpected styles! */}
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
```
## Configuration options
The following are optional settings for the babel plugin.
#### `optimizeForSpeed`
Blazing fast and optimized CSS rules injection system based on the CSSOM APIs.
```json
{
"plugins": [["styled-jsx/babel", { "optimizeForSpeed": true }]]
}
```
When in production\* this mode is automatically enabled.<br>
Beware that when using this option source maps cannot be generated and styles cannot be edited via the devtools.
\* `process.env.NODE_ENV === 'production'`
#### `sourceMaps`
Generates source maps (default: `false`)
#### `styleModule`
Module that the transpiled files should import (default: `styled-jsx/style`)
#### `vendorPrefixes`
Turn on/off automatic vendor prefixing (default: `true`)
## Features
- Full CSS support, no tradeoffs in power
- Runtime size of just **3kb** (gzipped, from 12kb)
- Complete isolation: Selectors, animations, keyframes
- Built-in CSS vendor prefixing
- Very fast, minimal and efficient transpilation (see below)
- High-performance runtime-CSS-injection when not server-rendering
- Future-proof: Equivalent to server-renderable "Shadow CSS"
- Source maps support
- Dynamic styles and themes support
- CSS Preprocessing via Plugins
## Using in Next.js
Next.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually.
## How It Works
The example above transpiles to the following:
```jsx
import _JSXStyle from 'styled-jsx/style'
export default () => (
<div className="jsx-123">
<p className="jsx-123">only this paragraph will get the style :)</p>
<_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
</div>
)
```
### Why It Works Like This
Unique classnames give us style encapsulation and `_JSXStyle` is heavily optimized for:
- Injecting styles upon render
- Only injecting a certain component's style once (even if the component is included multiple times)
- Removing unused styles
- Keeping track of styles for server-side rendering
### Targeting The Root
Notice that the outer `<div>` from the example above also gets a `jsx-123` classname. We do this so that
you can target the "root" element, in the same manner that
[`:host`](https://web.dev/articles/shadowdom-v1) works with Shadow DOM.
If you want to target _only_ the host, we suggest you use a class:
```jsx
export default () => (
<div className="root">
<style jsx>{`
.root {
color: green;
}
`}</style>
</div>
)
```
### Global styles
To skip scoping entirely, you can make the global-ness of your styles
explicit by adding _global_.
```jsx
export default () => (
<div>
<style jsx global>{`
body {
background: red;
}
`}</style>
</div>
)
```
The advantage of using this over `<style>` is twofold: no need
to use `dangerouslySetInnerHTML` to avoid escaping issues with CSS
and take advantage of `styled-jsx`'s de-duping system to avoid
the global styles being inserted multiple times.
### One-off global selectors
Sometimes it's useful to skip selectors scoping. In order to get a one-off global selector we support `:global()`, inspired by [css-modules](https://github.com/css-modules/css-modules).
This is very useful in order to, for example, generate a _global class_ that
you can pass to 3rd-party components. For example, to style
`react-select` which supports passing a custom class via `optionClassName`:
```jsx
import Select from 'react-select'
export default () => (
<div>
<Select optionClassName="react-select" />
<style jsx>{`
/* "div" will be prefixed, but ".react-select" won't */
div :global(.react-select) {
color: red;
}
`}</style>
</div>
)
```
### Dynamic styles
To make a component's visual representation customizable from the outside world there are three options.
#### Via interpolated dynamic props
Any value that comes from the component's `render` method scope is treated as dynamic. This makes it possible to use `props` and `state` for example.
```jsx
const Button = props => (
<button>
{props.children}
<style jsx>{`
button {
padding: ${'large' in props ? '50' : '20'}px;
background: ${props.theme.background};
color: #999;
display: inline-block;
font-size: 1em;
}
`}</style>
</button>
)
```
New styles' injection is optimized to perform well at runtime.
That said when your CSS is mostly static we recommend to split it up in static and dynamic styles and use two separate `style` tags so that, when changing, only the dynamic parts are recomputed/rendered.
```jsx
const Button = props => (
<button>
{props.children}
<style jsx>{`
button {
color: #999;
display: inline-block;
font-size: 2em;
}
`}</style>
<style jsx>{`
button {
padding: ${'large' in props ? '50' : '20'}px;
background: ${props.theme.background};
}
`}</style>
</button>
)
```
#### Via `className` toggling
The second option is to pass properties that toggle class names.
```jsx
const Button = props => (
<button className={'large' in props && 'large'}>
{props.children}
<style jsx>{`
button {
padding: 20px;
background: #eee;
color: #999;
}
.large {
padding: 50px;
}
`}</style>
</button>
)
```
Then you would use this component as either `<Button>Hi</Button>` or `<Button large>Big</Button>`.
#### Via inline `style`
\***best for animations**
Imagine that you wanted to make the padding in the button above completely customizable. You can override the CSS you configure via inline-styles:
```jsx
const Button = ({ padding, children }) => (
<button style={{ padding }}>
{children}
<style jsx>{`
button {
padding: 20px;
background: #eee;
color: #999;
}
`}</style>
</button>
)
```
In this example, the padding defaults to the one set in `<style>` (`20`), but the user can pass a custom one via `<Button padding={30}>`.
### Constants
It is possible to use constants like so:
```jsx
import { colors, spacing } from '../theme'
import { invertColor } from '../theme/utils'
const Button = ({ children }) => (
<button>
{children}
<style jsx>{`
button {
padding: ${spacing.medium};
background: ${colors.primary};
color: ${invertColor(colors.primary)};
}
`}</style>
</button>
)
```
Please keep in mind that constants defined outside of the component scope are treated as static styles.
## Server-Side Rendering
`styled-jsx` v5 introduced `StyledRegistry` component and `useStyleRegistry` hook to let you scope styles rendering in each SSR render to keep concurrent-safe.
- `registry.styles()` will return the array of react components for style tags.
- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render.
> Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you.
```jsx
import React from 'react'
import ReactDOM from 'react-dom/server'
import { StyleRegistry, useStyleRegistry } from 'styled-jsx'
import App from './app'
function Styles() {
const registry = useStyleRegistry()
const styles = registry.styles()
return <>{styles}</>
}
export default (req, res) => {
const app = ReactDOM.renderToString(<App />)
const html = ReactDOM.renderToStaticMarkup(
<StyleRegistry>
<html>
<head>
<Styles />
</head>
<body>
<div id="root" dangerouslySetInnerHTML={{ __html: app }} />
</body>
</html>
</StyleRegistry>
)
res.end('<!doctype html>' + html)
}
```
There's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).
```js
const registry = createStyleRegistry()
const styles = registry.styles() // access styles
function Page() {
return (
<StyleRegistry registry={registry}>
<App />
</StyleRegistry>
)
}
```
By default `<StyleRegistry />` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.
It's **paramount** that you use one of these two functions so that
the generated styles can be diffed when the client loads and
duplicate styles are avoided.
### Content Security Policy
Strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported.
You should generate a nonce **per request**.
```js
import nanoid from 'nanoid'
const nonce = Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3
```
You must then pass a nonce to `registry.styles({ nonce })` **and** set a `<meta property="csp-nonce" content={nonce} />` tag.
Your CSP policy must share the same nonce as well (the header nonce needs to match the html nonce and remain unpredictable).
`Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3';`
### External CSS and styles outside of the component
In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css` library. `styled-jsx/css` exports three tags that can be used to tag your styles:
- `css`, the default export, to define scoped styles.
- `css.global` to define global styles.
- `css.resolve` to define scoped styles that resolve to the scoped `className` and a `styles` element.
#### External styles
In an external file:
```js
/* styles.js */
import css from 'styled-jsx/css'
// Scoped styles
export const button = css`
button {
color: hotpink;
}
`
// Global styles
export const body = css.global`body { margin: 0; }`
// Resolved styles
export const link = css.resolve`a { color: green; }`
// link.className -> scoped className to apply to `a` elements e.g. jsx-123
// link.styles -> styles element to render inside of your component
// Works also with default exports
export default css`
div {
color: green;
}
`
```
You can then import and use those styles:
```jsx
import styles, { button, body } from './styles'
export default () => (
<div>
<button>styled-jsx</button>
<style jsx>{styles}</style>
<style jsx>{button}</style>
<style jsx global>
{body}
</style>
</div>
)
```
N.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.
`resolve` and `global` can also be imported individually:
```js
import { resolve } from 'styled-jsx/css'
import { global } from 'styled-jsx/css'
```
If you use Prettier we recommend you to use the default `css` export syntax since the tool doesn't support named imports.
#### Styles outside of components
The `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.
```jsx
import css from 'styled-jsx/css'
export default () => (
<div>
<button>styled-jsx</button>
<style jsx>{button}</style>
</div>
)
const button = css`
button {
color: hotpink;
}
`
```
Like in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `<style jsx>` element.
#### The `resolve` tag
The `resolve` tag from `styled-jsx/css` can be used when you need to scope some CSS - for example, if you need to style nested components from the parent, such as the `Link` component in the example below.
It works by returning the generated scoped `className` and related `styles`.
```jsx
import React from 'react'
import Link from 'some-library'
import css from 'styled-jsx/css'
const { className, styles } = css.resolve`
a { color: green }
`
export default () => (
<div>
{/* use the className */}
<Link className={className}>About</Link>
{/* render the styles for it */}
{styles}
</div>
)
```
The `resolve` tag also supports dynamic styles, via template string interpolation:
```jsx
import React from 'react'
import css from 'styled-jsx/css'
function getLinkStyles(color) {
return css.resolve`
a { color: ${color} }
`
}
export default props => {
const { className, styles } = getLinkStyles(props.theme.color)
return (
<div>
<Link className={className}>About</Link>
{styles}
</div>
)
}
```
#### Using `resolve` as a Babel macro
If you can't (or would rather not) make changes to your `.babelrc`, the `resolve` tag can be used as a Babel macro, thanks to the [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) system.
To set this up, first of all, install `styled-jsx` and `babel-plugin-macros`:
```bash
npm i --save styled-jsx
npm i --save-dev babel-plugin-macros
```
Next, add `babel-plugin-macros` to your Babel configuration:
```json
{
"plugins": ["babel-plugin-macros"]
}
```
You can then use `resolve` by importing it from `styled-jsx/macro`.
```jsx
import css from 'styled-jsx/macro'
const { className, styles } = css.resolve`
a { color: green }
`
export default () => (
<div>
<Link className={className}>About</Link>
{styles}
</div>
)
```
##### Usage with [`create-react-app`](https://create-react-app.dev)
[Create React App](https://create-react-app.dev) comes with `babel-plugin-macros` already installed, so the only thing that needs to be done is to install `styled-jsx`:
```bash
npm i --save styled-jsx
```
Then `resolve` can be imported from `styled-jsx/macro` and used the same way as in the example in the [Using `resolve` as a Babel macro](https://github.com/vercel/styled-jsx/blob/main/readme.md#using-resolve-as-a-babel-macro) section above.
#### Styles in regular CSS files
styled-jsx v3 comes with a webpack loader that lets you write styles in regular `css` files and consume them in React.
```js
import styles from '../components/button/styles.css'
export default () => (
<div>
<button>styled-jsx</button>
<style jsx>{styles}</style>
</div>
)
```
To consume the styles in your component you can import them from your CSS file and render them using a `<style jsx>` tag. Remember to add the `global` prop if you want your styles to be global.
To use this feature you need to register the loader in your webpack config file, before `babel-loader` which will then transpile the styles via `styled-jsx/babel`
```js
config: {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
}
]
}
]
}
}
```
The plugin accepts a `type` option to configure whether the styles should be `scoped`, `global` or `resolve` (see above). By default its values is set to `scoped`. `type` can also be a `function` which takes the `fileName` and the `fileNameQuery` that is being transpiled and must return a valid type.
```js
type validTypes = 'scoped' | 'global' | 'resolve'
type fileName = string
type Options = {|
type: validTypes | ((fileName, options) => validTypes)
|}
```
```js
import styles from './styles.css?type=global'
// webpack
config: {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: require('styled-jsx/webpack').loader,
options: {
type: (fileName, options) => options.query.type || 'scoped'
}
}
]
}
]
}
}
```
The type can also be set per individual CSS file via CSS comment:
```css
/* @styled-jsx=scoped */
button {
color: red;
}
```
The CSS comment option will override the one in the webpack configuration only for this specific file.
##### Next.js
Example of `next.config.js` to integrate `styled-jsx/webpack`:
```js
module.exports = {
webpack: (config, { defaultLoaders }) => {
config.module.rules.push({
test: /\.css$/,
use: [
defaultLoaders.babel,
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
}
]
})
return config
}
}
```
## CSS Preprocessing via Plugins
Styles can be preprocessed via plugins.
Plugins are regular JavaScript modules that export a simple function with the following signature:
```ts
function plugin(css: string, options: Object): string
```
Basically they accept a CSS string in input, optionally modify it and finally return it.
Plugins make it possible to use popular preprocessors like SASS, Less, Stylus, PostCSS or apply custom transformations to the styles at **compile time**.
To register a plugin add an option `plugins` for `styled-jsx/babel` to your `.babelrc`. `plugins` must be an array of module names or _full_ paths for local plugins.
```json
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
"my-styled-jsx-plugin-package",
"/full/path/to/local/plugin"
]
}
]
]
}
```
<details>
<summary>Instructions to integrate with Next.js</summary>
In order to register styled-jsx plugins in a Next.js app you need to create a custom .babelrc file:
```json
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": ["styled-jsx-plugin-postcss"]
}
}
]
]
}
```
This is a fairly new feature so make sure that you using a version of Next.js that supports passing options to `styled-jsx`.
</details>
<br>
Plugins are applied in definition order left to right before styles are scoped.
In order to resolve local plugins paths you can use NodeJS' [require.resolve](https://nodejs.org/api/globals.html#globals_require_resolve).
N.B. when applying the plugins styled-jsx replaces template literals expressions with placeholders because otherwise CSS parsers would get invalid CSS E.g.
```css
/* `ExprNumber` is a number */
%%styled-jsx-placeholder-ExprNumber%%
```
**Plugins won't transform expressions** (eg. dynamic styles).
When publishing a plugin you may want to add the keywords: `styled-jsx` and `styled-jsx-plugin`.
We also encourage you to use the following naming convention for your plugins:
```
styled-jsx-plugin-<your-plugin-name>
```
#### Plugin options
Users can set plugin options by registering a plugin as an array that contains
the plugin path and an options object.
```json
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
["my-styled-jsx-plugin-package", { "exampleOption": true }]
],
"sourceMaps": true
}
]
]
}
```
Each plugin receives a `options` object as second argument which contains
the babel and user options:
```js
;(css, options) => {
/* ... */
}
```
The `options` object has the following shape:
```js
{
// user options go here
// eg. exampleOption: true
// babel options
babel: {
sourceMaps: boolean,
vendorPrefixes: boolean,
isGlobal: boolean,
filename: ?string, // defined only when the filename option is passed to Babel, such as when using Babel CLI or Webpack
location: { // the original location of the CSS block in the JavaScript file
start: {
line: number,
column: number,
},
end: {
line: number,
column: number,
}
}
}
}
```
#### Example plugins
The following plugins are proof of concepts/sample:
- [styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass)
- [styled-jsx-plugin-postcss](https://github.com/giuseppeg/styled-jsx-plugin-postcss)
- [styled-jsx-plugin-stylelint](https://github.com/giuseppeg/styled-jsx-plugin-stylelint)
- [styled-jsx-plugin-less](https://github.com/erasmo-marin/styled-jsx-plugin-less)
- [styled-jsx-plugin-stylus](https://github.com/omardelarosa/styled-jsx-plugin-stylus)
## Rendering in tests
If you're using a tool such as Enzyme, you might want to avoid compiling your styles in test renders. In general, styled-jsx artifacts like `jsx-123` classnames and vendor prefixing are not direct concerns of your component, and they generate a lot of snapshot noise.
One option is to exclude the `styled-jsx/babel` plugin from the `test` environment using `env` in your Babel config (see [Config Merging options](https://babeljs.io/docs/en/options#config-merging-options)).
But this can cause noise in your terminal output when rendering:
```
console.error node_modules/react-dom/cjs/react-dom.development.js:527
Warning: Received `true` for a non-boolean attribute `jsx`.
```
The `styled-jsx/babel-test` solves this problem. It simply strips `jsx` attributes from all `<style>` tags. Be sure to target each environment with the appropriate plugin:
```json
{
"env": {
"production": {
"plugins": ["styled-jsx/babel"]
},
"development": {
"plugins": ["styled-jsx/babel"]
},
"test": {
"plugins": ["styled-jsx/babel-test"]
}
}
}
```
#### styled-jsx/css in tests
When using `styled-jsx/babel-test`, `styled-jsx/css` throws the following error:
```
styled-jsx/css: if you are getting this error it means that your `css` tagged template literals were not transpiled.
```
to solve this issue you need to mock `styled-jsx/css`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/
## FAQ
### Warning: unknown `jsx` prop on <style> tag
If you get this warning it means that your styles were not compiled by styled-jsx.
Please take a look at your setup and make sure that everything is correct and that the styled-jsx transformation is ran by Babel.
### Can I return an array of components when using React 16?
No, this feature is not supported. However we support React Fragments, which are available in React `16.2.0` and above.
```jsx
const StyledImage = ({ src, alt = '' }) => (
<React.Fragment>
<img src={src} alt={alt} />
<style jsx>{`
img {
max-width: 100%;
}
`}</style>
</React.Fragment>
)
```
### Styling third parties / child components from the parent
When the component accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css`](#the-resolve-tag).
When the component doesn't accept any `className` or doesn't expose any API to customize the component, then your only option is to use `:global()` styles:
```jsx
export default () => (
<div>
<ExternalComponent />
<style jsx>{`
/* "div" will be prefixed, but ".nested-element" won't */
div > :global(.nested-element) {
color: red;
}
`}</style>
</div>
)
```
Please keep in mind that `:global()` styles will affect the entire subtree, so in many cases you may want to be careful and use the children (direct descendant) selector `>`.
### Build a component library with styled-jsx
There's an [article](https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2) explaining how to bundle React components with Rollup and styled-jsx as an external dependency.
## Syntax Highlighting
When working with template literals a common drawback is missing syntax highlighting. The following editors currently have support for highlighting CSS inside `<style jsx>` elements.
_If you have a solution for an editor not on the list_ **please [open a PR](https://github.com/vercel/styled-jsx/pull/new/main)** _and let us now._
### Atom
The [`language-babel`](https://github.com/gandm/language-babel) package for the [Atom editor](https://atom.io/) has an option to [extend the grammar for JavaScript tagged template literals](https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions).
After [installing the package](https://github.com/gandm/language-babel#installation) add the code below to the appropriate settings entry. In a few moments you should be blessed with proper CSS syntax highlighting. ([source](https://github.com/gandm/language-babel/issues/324))
```
"(?<=<style jsx>{)|(?<=<style jsx global>{)|(?<=css)":source.css.styled
```
### Webstorm/Idea
The IDE let you inject any language in place with _Inject language or reference_ in an _Intention Actions_ (default _alt+enter_).
Simply perform the action in the string template and select CSS.
You get full CSS highlighting and autocompletion and it will last until you close the IDE.
Additionally you can use language injection comments to enable all the IDE language features indefinitely using the language comment style:
```jsx
import { colors, spacing } from '../theme'
import { invertColor } from '../theme/utils'
const Button = ({ children }) => (
<button>
{children}
{/*language=CSS*/}
<style jsx>{`
button {
padding: ${spacing.medium};
background: ${colors.primary};
color: ${invertColor(colors.primary)};
}
`}</style>
</button>
)
```
### Emmet
If you're using Emmet you can add the following snippet to `~/emmet/snippets-styledjsx.json` This will allow you to expand `style-jsx` to a styled-jsx block.
```json
{
"html": {
"snippets": {
"style-jsx": "<style jsx>{`\n\t$1\n`}</style>"
}
}
}
```
### Syntax Highlighting [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-syntax)
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.
```
ext install Divlo.vscode-styled-jsx-syntax
```
If you use Stylus instead of plain CSS, install [vscode-styled-jsx-stylus](https://marketplace.visualstudio.com/items?itemName=samuelroy.vscode-styled-jsx-stylus) or paste the command below.
```
ext install vscode-styled-jsx-stylus
```
### Autocomplete [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-languageserver)
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.
```
ext install Divlo.vscode-styled-jsx-languageserver
```
### Vim
Install [vim-styled-jsx](https://github.com/alampros/vim-styled-jsx) with your plugin manager of choice.
## ESLint
If you're using `eslint-plugin-import`, the `css` import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:
```
"settings": {"import/core-modules": ["styled-jsx/css"] }
```
## TypeScript
If you're using TypeScript, then in order to allow `<style jsx>` tags to be properly understood by it, create a file named "styled-jsx.d.ts" anywhere within your project containing the following, or add this line to the top of any single existing .ts file within your project:
```ts
/// <reference types="styled-jsx" />
```
> If you're using babel to transform styled-jsx code with TypeScript, you need to specify `"jsx": "preserve"` in your tsconfig.json to keep the original JSX and let babel parse and transform with styled-jsx babel plugin.
## Credits
- **Pedram Emrouznejad** ([rijs](https://github.com/rijs/fullstack)) suggested attribute selectors over my initial class prefixing idea.
- **Sunil Pai** ([glamor](https://github.com/threepointone/glamor)) inspired the use of `murmurhash2` (minimal and fast hashing) and an efficient style injection logic.
- **Sultan Tarimo** built [stylis.js](https://github.com/thysultan), a super fast and tiny CSS parser and compiler.
- **Max Stoiber** ([styled-components](https://github.com/styled-components)) proved the value of retaining the familiarity of CSS syntax and pointed me to the very efficient [stylis](https://github.com/thysultan/stylis.js) compiler (which we forked to very efficiently append attribute selectors to the user's css)
- **Yehuda Katz** ([ember](https://github.com/emberjs)) convinced me on Twitter to transpile CSS as an alternative to CSS-in-JS.
- **Evan You** ([vuejs](https://github.com/vuejs)) discussed his Vue.js CSS transformation with me.
- **Henry Zhu** ([babel](https://github.com/babel)) helpfully pointed me to some important areas of the babel plugin API.
## Authors
- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) - [▲Vercel](https://vercel.com)
- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) - [▲Vercel](https://vercel.com)
- Giuseppe Gurgone ([@giuseppegurgone](https://twitter.com/giuseppegurgone))
================================================
FILE: src/.babelrc
================================================
{
"presets": [
["@babel/preset-env", { "loose": true }]
],
"plugins": [
["@babel/plugin-proposal-object-rest-spread", { "loose": true }]
]
}
================================================
FILE: src/_constants.js
================================================
export const GLOBAL_ATTRIBUTE = 'global'
export const STYLE_ATTRIBUTE = 'jsx'
export const STYLE_COMPONENT = '_JSXStyle'
export const STYLE_COMPONENT_DYNAMIC = 'dynamic'
export const STYLE_COMPONENT_ID = 'id'
================================================
FILE: src/_utils.js
================================================
import path from 'path'
import * as t from '@babel/types'
import _hashString from 'string-hash'
import { SourceMapGenerator } from 'source-map'
import convert from 'convert-source-map'
import transform from './lib/style-transform'
import {
STYLE_ATTRIBUTE,
GLOBAL_ATTRIBUTE,
STYLE_COMPONENT_ID,
STYLE_COMPONENT_DYNAMIC
} from './_constants'
const concat = (a, b) => t.binaryExpression('+', a, b)
const and = (a, b) => t.logicalExpression('&&', a, b)
const or = (a, b) => t.logicalExpression('||', a, b)
const joinSpreads = spreads => spreads.reduce((acc, curr) => or(acc, curr))
export const hashString = str => String(_hashString(str))
export const addClassName = (path, jsxId) => {
const jsxIdWithSpace = concat(jsxId, t.stringLiteral(' '))
const attributes = path.get('attributes')
const spreads = []
let className = null
// Find className and collect spreads
for (let i = attributes.length - 1, attr; (attr = attributes[i]); i--) {
const node = attr.node
if (t.isJSXSpreadAttribute(attr)) {
if (t.isObjectExpression(node.argument)) {
const properties = node.argument.properties
const index = properties.findIndex(
property => property.key.name === 'className'
)
if (~index) {
className = attr.get('argument').get(`properties.${index}`)
// Remove jsx spread attribute if there is only className property
if (properties.length === 1) {
attr.remove()
}
break
}
}
if (
t.isMemberExpression(node.argument) ||
t.isIdentifier(node.argument)
) {
const name = node.argument.name
const spreadObj = t.isMemberExpression(node.argument)
? node.argument
: t.identifier(name)
const attrNameDotClassName = t.memberExpression(
spreadObj,
t.identifier('className')
)
spreads.push(
// `${name} && ${name}.className != null && ${name}.className`
and(
spreadObj,
and(
t.binaryExpression('!=', attrNameDotClassName, t.nullLiteral()),
attrNameDotClassName
)
)
)
}
continue
}
if (t.isJSXAttribute(attr) && node.name.name === 'className') {
className = attributes[i]
// found className break the loop
break
}
}
if (className) {
let newClassName = className.node.value.expression || className.node.value
newClassName =
t.isStringLiteral(newClassName) || t.isTemplateLiteral(newClassName)
? newClassName
: or(newClassName, t.stringLiteral(''))
className.remove()
className = t.jSXExpressionContainer(
spreads.length === 0
? concat(jsxIdWithSpace, newClassName)
: concat(jsxIdWithSpace, or(joinSpreads(spreads), newClassName))
)
} else {
className = t.jSXExpressionContainer(
spreads.length === 0
? jsxId
: concat(jsxIdWithSpace, or(joinSpreads(spreads), t.stringLiteral('')))
)
}
path.node.attributes.push(
t.jSXAttribute(t.jSXIdentifier('className'), className)
)
}
export const getScope = path =>
(
path.findParent(
path =>
path.isFunctionDeclaration() ||
path.isArrowFunctionExpression() ||
path.isClassMethod()
) || path
).scope
export const isGlobalEl = el =>
el && el.attributes.some(({ name }) => name && name.name === GLOBAL_ATTRIBUTE)
export const isStyledJsx = ({ node: el }) =>
t.isJSXElement(el) &&
el.openingElement.name.name === 'style' &&
el.openingElement.attributes.some(attr => attr.name.name === STYLE_ATTRIBUTE)
export const findStyles = path => {
if (isStyledJsx(path)) {
const { node } = path
return isGlobalEl(node.openingElement) ? [path] : []
}
return path.get('children').filter(isStyledJsx)
}
const validateExternalExpressionsVisitor = {
Identifier(path) {
if (t.isMemberExpression(path.parentPath)) {
return
}
const { name } = path.node
if (!path.scope.hasBinding(name)) {
throw path.buildCodeFrameError(path.getSource())
}
},
MemberExpression(path) {
const { node } = path
if (!t.isIdentifier(node.object)) {
return
}
if (!path.scope.hasBinding(node.object.name)) {
throw path.buildCodeFrameError(path.getSource())
}
},
ThisExpression(path) {
throw new Error(path.parentPath.getSource())
}
}
export const validateExternalExpressions = path => {
try {
path.traverse(validateExternalExpressionsVisitor)
} catch (error) {
throw path.buildCodeFrameError(`
Found an \`undefined\` or invalid value in your styles: \`${
error.message
}\`.
If you are trying to use dynamic styles in external files this is unfortunately not possible yet.
Please put the dynamic parts alongside the component. E.g.
<button>
<style jsx>{externalStylesReference}</style>
<style jsx>{\`
button { background-color: $\{${error.message}} }
\`}</style>
</button>
`)
}
}
export const getJSXStyleInfo = (expr, scope) => {
const { node } = expr
const location = node.loc
// Assume string literal
if (t.isStringLiteral(node)) {
return {
hash: hashString(node.value),
css: node.value,
expressions: [],
dynamic: false,
location
}
}
// Simple template literal without expressions
if (node.expressions.length === 0) {
return {
hash: hashString(node.quasis[0].value.raw),
css: node.quasis[0].value.raw,
expressions: [],
dynamic: false,
location
}
}
// Special treatment for template literals that contain expressions:
//
// Expressions are replaced with a placeholder
// so that the CSS compiler can parse and
// transform the css source string
// without having to know about js literal expressions.
// Later expressions are restored.
//
// e.g.
// p { color: ${myConstant}; }
// becomes
// p { color: %%styled-jsx-placeholder-${id}%%; }
const { quasis, expressions } = node
const hash = hashString(expr.getSource().slice(1, -1))
let dynamic = Boolean(scope)
if (dynamic) {
try {
const val = expr.evaluate()
if (val.confident) {
dynamic = false
} else if (val.deopt) {
const computedObject = val.deopt
.get('object')
.resolve()
.evaluate()
dynamic = !computedObject.confident
}
} catch (_) {}
}
const css = quasis.reduce(
(css, quasi, index) =>
`${css}${quasi.value.raw}${
quasis.length === index + 1 ? '' : `%%styled-jsx-placeholder-${index}%%`
}`,
''
)
return {
hash,
css,
expressions,
dynamic,
location
}
}
export const computeClassNames = (
styles,
externalJsxId,
styleComponentImportName
) => {
if (styles.length === 0) {
return {
className: externalJsxId
}
}
const hashes = styles.reduce(
(acc, styles) => {
if (styles.dynamic === false) {
acc.static.push(styles.hash)
} else {
acc.dynamic.push(styles)
}
return acc
},
{
static: [],
dynamic: []
}
)
const staticClassName = `jsx-${hashString(hashes.static.join(','))}`
// Static and optionally external classes. E.g.
// '[jsx-externalClasses] jsx-staticClasses'
if (hashes.dynamic.length === 0) {
return {
staticClassName,
className: externalJsxId
? concat(t.stringLiteral(staticClassName + ' '), externalJsxId)
: t.stringLiteral(staticClassName)
}
}
// _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])
const dynamic = t.callExpression(
// Callee: _JSXStyle.dynamic
t.memberExpression(
t.identifier(styleComponentImportName),
t.identifier(STYLE_COMPONENT_DYNAMIC)
),
// Arguments
[
t.arrayExpression(
hashes.dynamic.map(styles =>
t.arrayExpression([
t.stringLiteral(hashString(styles.hash + staticClassName)),
t.arrayExpression(styles.expressions)
])
)
)
]
)
// Dynamic and optionally external classes. E.g.
// '[jsx-externalClasses] ' + _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])
if (hashes.static.length === 0) {
return {
staticClassName,
className: externalJsxId
? concat(concat(externalJsxId, t.stringLiteral(' ')), dynamic)
: dynamic
}
}
// Static, dynamic and optionally external classes. E.g.
// '[jsx-externalClasses] jsx-staticClasses ' + _JSXStyle.dynamic([ ['5678', [props.foo, bar, fn(props)]], ... ])
return {
staticClassName,
className: externalJsxId
? concat(
concat(externalJsxId, t.stringLiteral(` ${staticClassName} `)),
dynamic
)
: concat(t.stringLiteral(`${staticClassName} `), dynamic)
}
}
export const templateLiteralFromPreprocessedCss = (css, expressions) => {
const quasis = []
const finalExpressions = []
const parts = css.split(/(?:%%styled-jsx-placeholder-(\d+)%%)/g)
if (parts.length === 1) {
return t.stringLiteral(css)
}
parts.forEach((part, index) => {
if (index % 2 > 0) {
// This is necessary because, after preprocessing, declarations might have been alterate.
// eg. properties are auto prefixed and therefore expressions need to match.
finalExpressions.push(expressions[part])
} else {
quasis.push(part)
}
})
return t.templateLiteral(
quasis.map((quasi, index) =>
t.templateElement(
{
raw: quasi,
cooked: quasi
},
quasis.length === index + 1
)
),
finalExpressions
)
}
export const cssToBabelType = css => {
if (typeof css === 'string') {
return t.stringLiteral(css)
}
if (Array.isArray(css)) {
return t.arrayExpression(css)
}
return t.cloneDeep(css)
}
export const makeStyledJsxTag = (
id,
transformedCss,
expressions = [],
styleComponentImportName
) => {
const css = cssToBabelType(transformedCss)
const attributes = [
t.jSXAttribute(
t.jSXIdentifier(STYLE_COMPONENT_ID),
t.jSXExpressionContainer(
typeof id === 'string' ? t.stringLiteral(id) : id
)
)
]
if (expressions.length > 0) {
attributes.push(
t.jSXAttribute(
t.jSXIdentifier(STYLE_COMPONENT_DYNAMIC),
t.jSXExpressionContainer(t.arrayExpression(expressions))
)
)
}
return t.jSXElement(
t.jSXOpeningElement(t.jSXIdentifier(styleComponentImportName), attributes),
t.jSXClosingElement(t.jSXIdentifier(styleComponentImportName)),
[t.jSXExpressionContainer(css)]
)
}
export const makeSourceMapGenerator = file => {
const filename = file.sourceFileName
const generator = new SourceMapGenerator({
file: filename,
sourceRoot: file.sourceRoot
})
generator.setSourceContent(filename, file.code)
return generator
}
export const addSourceMaps = (code, generator, filename) => {
const sourceMaps = [
convert.fromObject(generator).toComment({ multiline: true }),
`/*@ sourceURL=${filename.replace(/\\/g, '\\\\')} */`
]
if (Array.isArray(code)) {
return code.concat(sourceMaps)
}
return [code].concat(sourceMaps).join('\n')
}
const combinedPluginsCache = {
plugins: null,
combined: null
}
export const combinePlugins = plugins => {
if (!plugins) {
return css => css
}
const pluginsToString = JSON.stringify(plugins)
if (combinedPluginsCache.plugins === pluginsToString) {
return combinedPluginsCache.combined
}
if (
!Array.isArray(plugins) ||
plugins.some(p => !Array.isArray(p) && typeof p !== 'string')
) {
throw new Error(
'`plugins` must be an array of plugins names (string) or an array `[plugin-name, {options}]`'
)
}
combinedPluginsCache.plugins = pluginsToString
combinedPluginsCache.combined = plugins
.map((plugin, i) => {
let options = {}
if (Array.isArray(plugin)) {
options = plugin[1] || {}
plugin = plugin[0]
if (Object.prototype.hasOwnProperty.call(options, 'babel')) {
throw new Error(`
Error while trying to register the styled-jsx plugin: ${plugin}
The option name \`babel\` is reserved.
`)
}
}
log('Loading plugin from path: ' + plugin)
let p = require(plugin)
if (p.default) {
p = p.default
}
const type = typeof p
if (type !== 'function') {
throw new Error(
`Expected plugin ${
plugins[i]
} to be a function but instead got ${type}`
)
}
return {
plugin: p,
options
}
})
.reduce(
(previous, { plugin, options }) => (css, babelOptions) =>
plugin(previous ? previous(css, babelOptions) : css, {
...options,
babel: babelOptions
}),
null
)
return combinedPluginsCache.combined
}
const getPrefix = (isDynamic, id) =>
isDynamic ? '.__jsx-style-dynamic-selector' : `.${id}`
export const processCss = (stylesInfo, options) => {
const {
hash,
css,
expressions,
dynamic,
location,
file,
isGlobal,
plugins,
vendorPrefixes,
sourceMaps
} = stylesInfo
const fileInfo = {
code: file.code,
sourceRoot: file.opts.sourceRoot,
filename: file.opts.filename || file.filename
}
fileInfo.sourceFileName =
file.opts.sourceFileName ||
file.sourceFileName ||
// According to https://babeljs.io/docs/en/options#source-map-options
// filenameRelative = path.relative(file.opts.cwd, file.opts.filename)
// sourceFileName = path.basename(filenameRelative)
// or simply
// sourceFileName = path.basename(file.opts.filename)
(fileInfo.filename && path.basename(fileInfo.filename))
const staticClassName =
stylesInfo.staticClassName || `jsx-${hashString(hash)}`
const { splitRules } = options
const useSourceMaps = Boolean(sourceMaps) && !splitRules
const pluginsOptions = {
location: {
start: { ...location.start },
end: { ...location.end }
},
vendorPrefixes,
sourceMaps: useSourceMaps,
isGlobal,
filename: fileInfo.filename
}
let transformedCss
if (useSourceMaps) {
const generator = makeSourceMapGenerator(fileInfo)
const filename = fileInfo.sourceFileName
transformedCss = addSourceMaps(
transform(
isGlobal ? '' : getPrefix(dynamic, staticClassName),
plugins(css, pluginsOptions),
{
generator,
offset: location.start,
filename,
splitRules,
vendorPrefixes
}
),
generator,
filename
)
} else {
transformedCss = transform(
isGlobal ? '' : getPrefix(dynamic, staticClassName),
plugins(css, pluginsOptions),
{ splitRules, vendorPrefixes }
)
}
if (expressions.length > 0) {
if (typeof transformedCss === 'string') {
transformedCss = templateLiteralFromPreprocessedCss(
transformedCss,
expressions
)
} else {
transformedCss = transformedCss.map(transformedCss =>
templateLiteralFromPreprocessedCss(transformedCss, expressions)
)
}
} else if (Array.isArray(transformedCss)) {
transformedCss = transformedCss.map(transformedCss =>
t.stringLiteral(transformedCss)
)
}
return {
hash: dynamic ? hashString(hash + staticClassName) : hashString(hash),
css: transformedCss,
expressions: dynamic && expressions
}
}
export const booleanOption = opts => {
let ret
opts.some(opt => {
if (typeof opt === 'boolean') {
ret = opt
return true
}
return false
})
return ret
}
export const createReactComponentImportDeclaration = state => {
return t.importDeclaration(
[t.importDefaultSpecifier(t.identifier(state.styleComponentImportName))],
t.stringLiteral(state.styleModule)
)
}
export const setStateOptions = state => {
const vendorPrefixes = booleanOption([
state.opts.vendorPrefixes,
state.file.opts.vendorPrefixes
])
state.opts.vendorPrefixes =
typeof vendorPrefixes === 'boolean' ? vendorPrefixes : true
const sourceMaps = booleanOption([
state.opts.sourceMaps,
state.file.opts.sourceMaps
])
state.opts.sourceMaps = Boolean(sourceMaps)
if (!state.plugins) {
state.plugins = combinePlugins(state.opts.plugins, {
sourceMaps: state.opts.sourceMaps,
vendorPrefixes: state.opts.vendorPrefixes
})
}
state.styleModule =
typeof state.opts.styleModule === 'string'
? state.opts.styleModule
: 'styled-jsx/style'
}
export function log(message) {
console.log('[styled-jsx] ' + message)
}
================================================
FILE: src/babel-external.js
================================================
import * as t from '@babel/types'
import {
getJSXStyleInfo,
processCss,
cssToBabelType,
validateExternalExpressions,
getScope,
computeClassNames,
makeStyledJsxTag,
setStateOptions
} from './_utils'
const isModuleExports = t.buildMatchMemberExpression('module.exports')
export function processTaggedTemplateExpression({
type,
path,
file,
splitRules,
plugins,
vendorPrefixes,
sourceMaps,
styleComponentImportName
}) {
const templateLiteral = path.get('quasi')
let scope
// Check whether there are undefined references or
// references to this.something (e.g. props or state).
// We allow dynamic styles only when resolving styles.
if (type !== 'resolve') {
validateExternalExpressions(templateLiteral)
} else if (!path.scope.path.isProgram()) {
scope = getScope(path)
}
const stylesInfo = getJSXStyleInfo(templateLiteral, scope)
const { staticClassName, className } = computeClassNames(
[stylesInfo],
undefined,
styleComponentImportName
)
const styles = processCss(
{
...stylesInfo,
staticClassName,
file,
isGlobal: type === 'global',
plugins,
vendorPrefixes,
sourceMaps
},
{ splitRules }
)
if (type === 'resolve') {
const { hash, css, expressions } = styles
path.replaceWith(
// {
// styles: <_JSXStyle ... />,
// className: 'jsx-123'
// }
t.objectExpression([
t.objectProperty(
t.identifier('styles'),
makeStyledJsxTag(hash, css, expressions, styleComponentImportName)
),
t.objectProperty(t.identifier('className'), className)
])
)
return
}
const id = path.parentPath.node.id
const baseExportName = id ? id.name : 'default'
let parentPath =
baseExportName === 'default'
? path.parentPath
: path.findParent(
path =>
path.isVariableDeclaration() ||
(path.isAssignmentExpression() &&
isModuleExports(path.get('left').node))
)
if (baseExportName !== 'default' && !parentPath.parentPath.isProgram()) {
parentPath = parentPath.parentPath
}
const css = cssToBabelType(styles.css)
const newPath = t.isArrayExpression(css)
? css
: t.newExpression(t.identifier('String'), [css])
// default exports
if (baseExportName === 'default') {
const defaultExportIdentifier = path.scope.generateUidIdentifier(
'defaultExport'
)
parentPath.insertBefore(
t.variableDeclaration('const', [
t.variableDeclarator(defaultExportIdentifier, newPath)
])
)
parentPath.insertBefore(addHash(defaultExportIdentifier, styles.hash))
path.replaceWith(defaultExportIdentifier)
return
}
// local and named exports
parentPath.insertAfter(addHash(t.identifier(baseExportName), styles.hash))
path.replaceWith(newPath)
}
function addHash(exportIdentifier, hash) {
const value = typeof hash === 'string' ? t.stringLiteral(hash) : hash
return t.expressionStatement(
t.assignmentExpression(
'=',
t.memberExpression(exportIdentifier, t.identifier('__hash')),
value
)
)
}
export const visitor = {
ImportDeclaration(path, state) {
// import css from 'styled-jsx/css'
if (path.node.source.value !== 'styled-jsx/css') {
return
}
// Find all the imported specifiers.
// e.g import css, { global, resolve } from 'styled-jsx/css'
// -> ['css', 'global', 'resolve']
const specifiersNames = path.node.specifiers.map(
specifier => specifier.local.name
)
specifiersNames.forEach(tagName => {
// Get all the reference paths i.e. the places that use the tagName above
// eg.
// css`div { color: red }`
// css.global`div { color: red }`
// global`div { color: red `
const binding = path.scope.getBinding(tagName)
if (!binding || !Array.isArray(binding.referencePaths)) {
return
}
// Produces an object containing all the TaggedTemplateExpression paths detected.
// The object contains { scoped, global, resolve }
const taggedTemplateExpressions = binding.referencePaths
.map(ref => ref.parentPath)
.reduce(
(result, path) => {
let taggedTemplateExpression
if (path.isTaggedTemplateExpression()) {
// css`` global`` resolve``
taggedTemplateExpression = path
} else if (
path.parentPath &&
path.isMemberExpression() &&
path.parentPath.isTaggedTemplateExpression()
) {
// This part is for css.global`` or css.resolve``
// using the default import css
taggedTemplateExpression = path.parentPath
} else {
return result
}
const tag = taggedTemplateExpression.get('tag')
const id = tag.isIdentifier()
? tag.node.name
: tag.get('property').node.name
if (result[id]) {
result[id].push(taggedTemplateExpression)
} else {
result.scoped.push(taggedTemplateExpression)
}
return result
},
{
scoped: [],
global: [],
resolve: []
}
)
let hasJSXStyle = false
const { vendorPrefixes, sourceMaps } = state.opts
Object.keys(taggedTemplateExpressions).forEach(type =>
taggedTemplateExpressions[type].forEach(path => {
hasJSXStyle = true
// Process each css block
processTaggedTemplateExpression({
type,
path,
file: state.file,
splitRules:
typeof state.opts.optimizeForSpeed === 'boolean'
? state.opts.optimizeForSpeed
: process.env.NODE_ENV === 'production',
plugins: state.plugins,
vendorPrefixes,
sourceMaps,
styleComponentImportName: state.styleComponentImportName
})
})
)
const hasCssResolve =
hasJSXStyle && taggedTemplateExpressions.resolve.length > 0
// When using the `resolve` helper we need to add an import
// for the _JSXStyle component `styled-jsx/style`
if (hasCssResolve) {
state.file.hasCssResolve = true
}
})
// Finally remove the import
path.remove()
}
}
export default function() {
return {
Program(path, state) {
setStateOptions(state)
},
...visitor
}
}
================================================
FILE: src/babel-test.js
================================================
import jsx from '@babel/plugin-syntax-jsx'
export default function() {
return {
inherits: jsx,
visitor: {
JSXOpeningElement(path) {
const el = path.node
const { name } = el.name || {}
if (name !== 'style') {
return
}
el.attributes = el.attributes.filter(a => {
const name = a.name.name
return name !== 'jsx' && name !== 'global'
})
}
}
}
}
================================================
FILE: src/babel.js
================================================
import jsx from '@babel/plugin-syntax-jsx'
import { visitor as externalStylesVisitor } from './babel-external'
import {
isGlobalEl,
isStyledJsx,
findStyles,
makeStyledJsxTag,
getJSXStyleInfo,
computeClassNames,
addClassName,
getScope,
processCss,
createReactComponentImportDeclaration,
setStateOptions
} from './_utils'
import { STYLE_COMPONENT } from './_constants'
import { default as babelMacro } from './macro'
import { default as babelTest } from './babel-test'
export function macro() {
return babelMacro(require('babel-plugin-macros'))
}
export function test() {
return babelTest
}
export default function({ types: t }) {
const jsxVisitors = {
JSXOpeningElement(path, state) {
const el = path.node
const { name } = el.name || {}
if (!state.hasJSXStyle) {
return
}
if (state.ignoreClosing === null) {
// We keep a counter of elements inside so that we
// can keep track of when we exit the parent to reset state
// note: if we wished to add an option to turn off
// selectors to reach parent elements, it would suffice to
// set this to `1` and do an early return instead
state.ignoreClosing = 0
}
const tag = path.get('name')
if (
name &&
name !== 'style' &&
name !== state.styleComponentImportName &&
(name.charAt(0) !== name.charAt(0).toUpperCase() ||
Object.values(path.scope.bindings).some(binding =>
binding.referencePaths.some(r => r === tag)
))
) {
if (state.className) {
addClassName(path, state.className)
}
}
state.ignoreClosing++
// Next visit will be: JSXElement exit()
},
JSXElement: {
enter(path, state) {
if (state.hasJSXStyle !== null) {
return
}
const styles = findStyles(path)
if (styles.length === 0) {
return
}
state.styles = []
state.externalStyles = []
const scope = getScope(path)
for (const style of styles) {
// Compute children excluding whitespace
const children = style.get('children').filter(
c =>
t.isJSXExpressionContainer(c.node) ||
// Ignore whitespace around the expression container
(t.isJSXText(c.node) && c.node.value.trim() !== '')
)
if (children.length !== 1) {
throw path.buildCodeFrameError(
`Expected one child under ` +
`JSX Style tag, but got ${children.length} ` +
`(eg: <style jsx>{\`hi\`}</style>)`
)
}
const child = children[0]
if (!t.isJSXExpressionContainer(child)) {
throw path.buildCodeFrameError(
`Expected a child of ` +
`type JSXExpressionContainer under JSX Style tag ` +
`(eg: <style jsx>{\`hi\`}</style>), got ${child.type}`
)
}
const expression = child.get('expression')
if (t.isIdentifier(expression)) {
const idName = expression.node.name
if (expression.scope.hasBinding(idName)) {
const externalStylesIdentifier = t.identifier(idName)
const isGlobal = isGlobalEl(style.get('openingElement').node)
state.externalStyles.push([
t.memberExpression(
externalStylesIdentifier,
t.identifier('__hash')
),
externalStylesIdentifier,
isGlobal
])
continue
}
throw path.buildCodeFrameError(
`The Identifier ` +
`\`${expression.getSource()}\` is either \`undefined\` or ` +
`it is not an external StyleSheet reference i.e. ` +
`it doesn't come from an \`import\` or \`require\` statement`
)
}
if (
!t.isTemplateLiteral(expression) &&
!t.isStringLiteral(expression)
) {
throw path.buildCodeFrameError(
`Expected a template ` +
`literal or String literal as the child of the ` +
`JSX Style tag (eg: <style jsx>{\`some css\`}</style>),` +
` but got ${expression.type}`
)
}
state.styles.push(getJSXStyleInfo(expression, scope))
}
let externalJsxId
if (state.externalStyles.length > 0) {
const expressions = state.externalStyles
// Remove globals
.filter(s => !s[2])
.map(s => s[0])
const expressionsLength = expressions.length
if (expressionsLength === 0) {
externalJsxId = null
} else {
// Construct a template literal of this form:
// `jsx-${styles.__scopedHash} jsx-${otherStyles.__scopedHash}`
externalJsxId = t.templateLiteral(
[
t.templateElement({ raw: 'jsx-', cooked: 'jsx-' }),
...[...new Array(expressionsLength - 1).fill(null)].map(() =>
t.templateElement({ raw: ' jsx-', cooked: ' jsx-' })
),
t.templateElement({ raw: '', cooked: '' }, true)
],
expressions
)
}
}
if (state.styles.length > 0 || externalJsxId) {
const { staticClassName, className } = computeClassNames(
state.styles,
externalJsxId,
state.styleComponentImportName
)
state.className = className
state.staticClassName = staticClassName
}
state.hasJSXStyle = true
state.file.hasJSXStyle = true
// Next visit will be: JSXOpeningElement
},
exit(path, state) {
const isGlobal = isGlobalEl(path.node.openingElement)
if (state.hasJSXStyle && !--state.ignoreClosing && !isGlobal) {
state.hasJSXStyle = null
state.className = null
state.externalJsxId = null
}
if (!state.hasJSXStyle || !isStyledJsx(path)) {
return
}
if (state.ignoreClosing > 1) {
let styleTagSrc
try {
styleTagSrc = path.getSource()
} catch (error) {}
throw path.buildCodeFrameError(
'Detected nested style tag' +
(styleTagSrc ? `: \n\n${styleTagSrc}\n\n` : ' ') +
'styled-jsx only allows style tags ' +
'to be direct descendants (children) of the outermost ' +
'JSX element i.e. the subtree root.'
)
}
if (
state.externalStyles.length > 0 &&
path.get('children').filter(child => {
if (!t.isJSXExpressionContainer(child)) {
return false
}
const expression = child.get('expression')
return expression && expression.isIdentifier()
}).length === 1
) {
const [id, css] = state.externalStyles.shift()
path.replaceWith(
makeStyledJsxTag(id, css, [], state.styleComponentImportName)
)
return
}
const { vendorPrefixes, sourceMaps } = state.opts
const stylesInfo = {
...state.styles.shift(),
file: state.file,
staticClassName: state.staticClassName,
isGlobal,
plugins: state.plugins,
vendorPrefixes,
sourceMaps
}
const splitRules =
typeof state.opts.optimizeForSpeed === 'boolean'
? state.opts.optimizeForSpeed
: process.env.NODE_ENV === 'production'
const { hash, css, expressions } = processCss(stylesInfo, {
splitRules
})
path.replaceWith(
makeStyledJsxTag(
hash,
css,
expressions,
state.styleComponentImportName
)
)
}
}
}
// only apply JSXFragment visitor if supported
if (t.isJSXFragment) {
jsxVisitors.JSXFragment = jsxVisitors.JSXElement
jsxVisitors.JSXOpeningFragment = {
enter(path, state) {
if (!state.hasJSXStyle) {
return
}
if (state.ignoreClosing === null) {
// We keep a counter of elements inside so that we
// can keep track of when we exit the parent to reset state
// note: if we wished to add an option to turn off
// selectors to reach parent elements, it would suffice to
// set this to `1` and do an early return instead
state.ignoreClosing = 0
}
state.ignoreClosing++
}
}
}
const visitors = {
inherits: jsx,
visitor: {
Program: {
enter(path, state) {
setStateOptions(state)
state.hasJSXStyle = null
state.ignoreClosing = null
state.file.hasJSXStyle = false
state.file.hasCssResolve = false
// create unique identifier for _JSXStyle component
state.styleComponentImportName = path.scope.generateUidIdentifier(
STYLE_COMPONENT
).name
// we need to beat the arrow function transform and
// possibly others so we traverse from here or else
// dynamic values in classNames could be incorrect
path.traverse(jsxVisitors, state)
// Transpile external styles
path.traverse(externalStylesVisitor, state)
},
exit(path, state) {
if (!state.file.hasJSXStyle && !state.file.hasCssResolve) {
return
}
state.file.hasJSXStyle = true
const importDeclaration = createReactComponentImportDeclaration(state)
path.unshiftContainer('body', importDeclaration)
}
}
}
}
return visitors
}
================================================
FILE: src/index.js
================================================
import 'client-only'
export {
StyleRegistry,
createStyleRegistry,
useStyleRegistry
} from './stylesheet-registry'
export { default as style } from './style'
================================================
FILE: src/lib/hash.js
================================================
import hashString from 'string-hash'
const sanitize = rule => rule.replace(/\/style/gi, '\\/style')
const cache = {}
/**
* computeId
*
* Compute and memoize a jsx id from a basedId and optionally props.
*/
export function computeId(baseId, props) {
if (!props) {
return `jsx-${baseId}`
}
const propsToString = String(props)
const key = baseId + propsToString
if (!cache[key]) {
cache[key] = `jsx-${hashString(`${baseId}-${propsToString}`)}`
}
return cache[key]
}
/**
* computeSelector
*
* Compute and memoize dynamic selectors.
*/
export function computeSelector(id, css) {
const selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g
// Sanitize SSR-ed CSS.
// Client side code doesn't need to be sanitized since we use
// document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).
if (typeof window === 'undefined') {
css = sanitize(css)
}
const idcss = id + css
if (!cache[idcss]) {
cache[idcss] = css.replace(selectoPlaceholderRegexp, id)
}
return cache[idcss]
}
================================================
FILE: src/lib/style-transform.js
================================================
import Stylis from 'stylis'
import stylisRuleSheet from 'stylis-rule-sheet'
const stylis = new Stylis()
function disableNestingPlugin(...args) {
let [context, , , parent = [], line, column] = args
if (context === 2) {
// replace null characters and trim
// eslint-disable-next-line no-control-regex
parent = (parent[0] || '').replace(/\u0000/g, '').trim()
if (parent.length > 0 && parent.charAt(0) !== '@') {
throw new Error(
`Nesting detected at ${line}:${column}. ` +
'Unfortunately nesting is not supported by styled-jsx.'
)
}
}
}
let generator
let filename
let offset
function sourceMapsPlugin(...args) {
const [context, , , , line, column, length] = args
// Pre-processed, init source map
if (context === -1 && generator !== undefined) {
generator.addMapping({
generated: {
line: 1,
column: 0
},
source: filename,
original: offset
})
return
}
// Post-processed
if (context === -2 && generator !== undefined) {
generator = undefined
offset = undefined
filename = undefined
return
}
// Selector/property, update source map
if ((context === 1 || context === 2) && generator !== undefined) {
generator.addMapping({
generated: {
line: 1,
column: length
},
source: filename,
original: {
line: line + offset.line,
column: column + offset.column
}
})
}
}
/**
* splitRulesPlugin
* Used to split a blob of css into an array of rules
* that can inserted via sheet.insertRule
*/
let splitRules = []
const splitRulesPlugin = stylisRuleSheet(rule => {
splitRules.push(rule)
})
stylis.use(disableNestingPlugin)
stylis.use(sourceMapsPlugin)
stylis.use(splitRulesPlugin)
stylis.set({
cascade: false,
compress: true
})
/**
* Public transform function
*
* @param {String} hash
* @param {String} styles
* @param {Object} settings
* @return {string}
*/
function transform(hash, styles, settings = {}) {
generator = settings.generator
offset = settings.offset
filename = settings.filename
splitRules = []
stylis.set({
prefix:
typeof settings.vendorPrefixes === 'boolean'
? settings.vendorPrefixes
: true
})
stylis(hash, styles)
if (settings.splitRules) {
return splitRules
}
return splitRules.join('')
}
export default transform
================================================
FILE: src/lib/stylesheet.js
================================================
/*
Based on Glamor's sheet
https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
*/
const isProd =
typeof process !== 'undefined' &&
process.env &&
process.env.NODE_ENV === 'production'
const isString = o => Object.prototype.toString.call(o) === '[object String]'
export default class StyleSheet {
constructor({ name = 'stylesheet', optimizeForSpeed = isProd } = {}) {
invariant(isString(name), '`name` must be a string')
this._name = name
this._deletedRulePlaceholder = `#${name}-deleted-rule____{}`
invariant(
typeof optimizeForSpeed === 'boolean',
'`optimizeForSpeed` must be a boolean'
)
this._optimizeForSpeed = optimizeForSpeed
this._serverSheet = undefined
this._tags = []
this._injected = false
this._rulesCount = 0
const node =
typeof window !== 'undefined' &&
document.querySelector('meta[property="csp-nonce"]')
this._nonce = node ? node.getAttribute('content') : null
}
setOptimizeForSpeed(bool) {
invariant(
typeof bool === 'boolean',
'`setOptimizeForSpeed` accepts a boolean'
)
invariant(
this._rulesCount === 0,
'optimizeForSpeed cannot be when rules have already been inserted'
)
this.flush()
this._optimizeForSpeed = bool
this.inject()
}
isOptimizeForSpeed() {
return this._optimizeForSpeed
}
inject() {
invariant(!this._injected, 'sheet already injected')
this._injected = true
if (typeof window !== 'undefined' && this._optimizeForSpeed) {
this._tags[0] = this.makeStyleTag(this._name)
this._optimizeForSpeed = 'insertRule' in this.getSheet()
if (!this._optimizeForSpeed) {
if (!isProd) {
console.warn(
'StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.'
)
}
this.flush()
this._injected = true
}
return
}
this._serverSheet = {
cssRules: [],
insertRule: (rule, index) => {
if (typeof index === 'number') {
this._serverSheet.cssRules[index] = { cssText: rule }
} else {
this._serverSheet.cssRules.push({ cssText: rule })
}
return index
},
deleteRule: index => {
this._serverSheet.cssRules[index] = null
}
}
}
getSheetForTag(tag) {
if (tag.sheet) {
return tag.sheet
}
// this weirdness brought to you by firefox
for (let i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
return document.styleSheets[i]
}
}
}
getSheet() {
return this.getSheetForTag(this._tags[this._tags.length - 1])
}
insertRule(rule, index) {
invariant(isString(rule), '`insertRule` accepts only strings')
if (typeof window === 'undefined') {
if (typeof index !== 'number') {
index = this._serverSheet.cssRules.length
}
this._serverSheet.insertRule(rule, index)
return this._rulesCount++
}
if (this._optimizeForSpeed) {
const sheet = this.getSheet()
if (typeof index !== 'number') {
index = sheet.cssRules.length
}
// this weirdness for perf, and chrome's weird bug
// https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
try {
sheet.insertRule(rule, index)
} catch (error) {
if (!isProd) {
console.warn(
`StyleSheet: illegal rule: \n\n${rule}\n\nSee https://stackoverflow.com/q/20007992 for more info`
)
}
return -1
}
} else {
const insertionPoint = this._tags[index]
this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint))
}
return this._rulesCount++
}
replaceRule(index, rule) {
if (this._optimizeForSpeed || typeof window === 'undefined') {
const sheet =
typeof window !== 'undefined' ? this.getSheet() : this._serverSheet
if (!rule.trim()) {
rule = this._deletedRulePlaceholder
}
if (!sheet.cssRules[index]) {
// @TBD Should we throw an error?
return index
}
sheet.deleteRule(index)
try {
sheet.insertRule(rule, index)
} catch (error) {
if (!isProd) {
console.warn(
`StyleSheet: illegal rule: \n\n${rule}\n\nSee https://stackoverflow.com/q/20007992 for more info`
)
}
// In order to preserve the indices we insert a deleteRulePlaceholder
sheet.insertRule(this._deletedRulePlaceholder, index)
}
} else {
const tag = this._tags[index]
invariant(tag, `old rule at index \`${index}\` not found`)
tag.textContent = rule
}
return index
}
deleteRule(index) {
if (typeof window === 'undefined') {
this._serverSheet.deleteRule(index)
return
}
if (this._optimizeForSpeed) {
this.replaceRule(index, '')
} else {
const tag = this._tags[index]
invariant(tag, `rule at index \`${index}\` not found`)
tag.parentNode.removeChild(tag)
this._tags[index] = null
}
}
flush() {
this._injected = false
this._rulesCount = 0
if (typeof window !== 'undefined') {
this._tags.forEach(tag => tag && tag.parentNode.removeChild(tag))
this._tags = []
} else {
// simpler on server
this._serverSheet.cssRules = []
}
}
cssRules() {
if (typeof window === 'undefined') {
return this._serverSheet.cssRules
}
return this._tags.reduce((rules, tag) => {
if (tag) {
rules = rules.concat(
Array.prototype.map.call(this.getSheetForTag(tag).cssRules, rule =>
rule.cssText === this._deletedRulePlaceholder ? null : rule
)
)
} else {
rules.push(null)
}
return rules
}, [])
}
makeStyleTag(name, cssString, relativeToTag) {
if (cssString) {
invariant(
isString(cssString),
'makeStyleTag accepts only strings as second parameter'
)
}
const tag = document.createElement('style')
if (this._nonce) tag.setAttribute('nonce', this._nonce)
tag.type = 'text/css'
tag.setAttribute(`data-${name}`, '')
if (cssString) {
tag.appendChild(document.createTextNode(cssString))
}
const head = document.head || document.getElementsByTagName('head')[0]
if (relativeToTag) {
head.insertBefore(tag, relativeToTag)
} else {
head.appendChild(tag)
}
return tag
}
get length() {
return this._rulesCount
}
}
function invariant(condition, message) {
if (!condition) {
throw new Error(`StyleSheet: ${message}.`)
}
}
================================================
FILE: src/macro.js
================================================
import { processTaggedTemplateExpression } from './babel-external'
import {
setStateOptions,
createReactComponentImportDeclaration
} from './_utils'
import { STYLE_COMPONENT } from './_constants'
export default ({ createMacro, MacroError }) => {
return createMacro(styledJsxMacro)
function styledJsxMacro({ references, state }) {
setStateOptions(state)
// Holds a reference to all the lines where strings are tagged using the `css` tag name.
// We print a warning at the end of the macro in case there is any reference to css,
// because `css` is generally used as default import name for 'styled-jsx/css'.
// People who want to migrate from this macro to pure styled-jsx might have name conflicts issues.
const cssReferences = []
// references looks like this
// {
// default: [path, path],
// resolve: [path],
// }
Object.keys(references).forEach(refName => {
// Enforce `resolve` as named import so people
// can only import { resolve } from 'styled-jsx/macro'
// or an alias of it eg. { resolve as foo }
if (refName !== 'default' && refName !== 'resolve') {
throw new MacroError(
`Imported an invalid named import: ${refName}. Please import: resolve`
)
}
// Start processing the references for refName
references[refName].forEach(path => {
// We grab the parent path. Eg.
// path -> css
// path.parenPath -> css`div { color: red }`
let templateExpression = path.parentPath
// templateExpression member expression?
// path -> css
// path.parentPath -> css.resolve
if (templateExpression.isMemberExpression()) {
// grab .resolve
const tagPropertyName = templateExpression.get('property').node.name
// Member expressions are only valid on default imports
// eg. import css from 'styled-jsx/macro'
if (refName !== 'default') {
throw new MacroError(
`Can't use named import ${
path.node.name
} as a member expression: ${
path.node.name
}.${tagPropertyName}\`div { color: red }\` Please use it directly: ${
path.node.name
}\`div { color: red }\``
)
}
// Otherwise enforce `css.resolve`
if (tagPropertyName !== 'resolve') {
throw new MacroError(
`Using an invalid tag: ${tagPropertyName}. Please use ${
templateExpression.get('object').node.name
}.resolve`
)
}
// Grab the TaggedTemplateExpression
// i.e. css.resolve`div { color: red }`
templateExpression = templateExpression.parentPath
} else {
if (refName === 'default') {
const { name } = path.node
throw new MacroError(
`Can't use default import directly eg. ${name}\`div { color: red }\`. Please use ${name}.resolve\`div { color: red }\` instead.`
)
}
if (path.node.name === 'css') {
// If the path node name is `css` we push it to the references above to emit a warning later.
cssReferences.push(path.node.loc.start.line)
}
}
if (!state.styleComponentImportName) {
const programPath = path.findParent(p => p.isProgram())
state.styleComponentImportName = programPath.scope.generateUidIdentifier(
STYLE_COMPONENT
).name
const importDeclaration = createReactComponentImportDeclaration(state)
programPath.unshiftContainer('body', importDeclaration)
}
// Finally transform the path :)
processTaggedTemplateExpression({
type: 'resolve',
path: templateExpression,
file: state.file,
splitRules:
typeof state.opts.optimizeForSpeed === 'boolean'
? state.opts.optimizeForSpeed
: process.env.NODE_ENV === 'production',
plugins: state.plugins,
vendorPrefixes: state.opts.vendorPrefixes,
sourceMaps: state.opts.sourceMaps,
styleComponentImportName: state.styleComponentImportName
})
})
})
if (cssReferences.length > 0) {
console.warn(
`styled-jsx - Warning - We detected that you named your tag as \`css\` at lines: ${cssReferences.join(
', '
)}.\n` +
'This tag name is usually used as default import name for `styled-jsx/css`.\n' +
'Porting macro code to pure styled-jsx in the future might be a bit problematic.'
)
}
}
}
================================================
FILE: src/style.js
================================================
import React, { useLayoutEffect, useRef } from 'react'
import { useStyleRegistry, createStyleRegistry } from './stylesheet-registry'
import { computeId } from './lib/hash'
// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
// https://github.com/reactwg/react-18/discussions/110
const useInsertionEffect = React.useInsertionEffect || useLayoutEffect
const defaultRegistry =
typeof window !== 'undefined' ? createStyleRegistry() : undefined
export default function JSXStyle(props) {
const registry = defaultRegistry ? defaultRegistry : useStyleRegistry()
const insertionEffectCalled = useRef(false)
// `registry` might not exist while server-side rendering
if (!registry) {
return null
}
if (typeof window === 'undefined') {
registry.add(props)
return null
}
useInsertionEffect(() => {
// ReactDOM removes all DOM during hydration in certain cases
if (!document.head) {
return
}
registry.add(props)
insertionEffectCalled.current = true
return () => {
insertionEffectCalled.current = false
registry.remove(props)
}
}, [props.id, String(props.dynamic)])
useLayoutEffect(() => {
if (!document.head || insertionEffectCalled.current) {
return
}
registry.add(props)
return () => {
registry.remove(props)
}
// props.children can be string[], will be striped since id is identical
}, [props.id, String(props.dynamic)])
return null
}
JSXStyle.dynamic = info => {
return info
.map(tagInfo => {
const baseId = tagInfo[0]
const props = tagInfo[1]
return computeId(baseId, props)
})
.join(' ')
}
================================================
FILE: src/stylesheet-registry.js
================================================
import React, { useState, useContext, createContext } from 'react'
import DefaultStyleSheet from './lib/stylesheet'
import { computeId, computeSelector } from './lib/hash'
function mapRulesToStyle(cssRules, options = {}) {
return cssRules.map(args => {
const id = args[0]
const css = args[1]
return React.createElement('style', {
id: `__${id}`,
// Avoid warnings upon render with a key
key: `__${id}`,
nonce: options.nonce ? options.nonce : undefined,
dangerouslySetInnerHTML: {
__html: css
}
})
})
}
export class StyleSheetRegistry {
constructor({ styleSheet = null, optimizeForSpeed = false } = {}) {
this._sheet =
styleSheet ||
new DefaultStyleSheet({
name: 'styled-jsx',
optimizeForSpeed
})
this._sheet.inject()
if (styleSheet && typeof optimizeForSpeed === 'boolean') {
this._sheet.setOptimizeForSpeed(optimizeForSpeed)
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()
}
this._fromServer = undefined
this._indices = {}
this._instancesCounts = {}
}
add(props) {
if (undefined === this._optimizeForSpeed) {
this._optimizeForSpeed = Array.isArray(props.children)
this._sheet.setOptimizeForSpeed(this._optimizeForSpeed)
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()
}
if (typeof window !== 'undefined' && !this._fromServer) {
this._fromServer = this.selectFromServer()
this._instancesCounts = Object.keys(this._fromServer).reduce(
(acc, tagName) => {
acc[tagName] = 0
return acc
},
{}
)
}
const { styleId, rules } = this.getIdAndRules(props)
// Deduping: just increase the instances count.
if (styleId in this._instancesCounts) {
this._instancesCounts[styleId] += 1
return
}
const indices = rules
.map(rule => this._sheet.insertRule(rule))
// Filter out invalid rules
.filter(index => index !== -1)
this._indices[styleId] = indices
this._instancesCounts[styleId] = 1
}
remove(props) {
const { styleId } = this.getIdAndRules(props)
invariant(
styleId in this._instancesCounts,
`styleId: \`${styleId}\` not found`
)
this._instancesCounts[styleId] -= 1
if (this._instancesCounts[styleId] < 1) {
const tagFromServer = this._fromServer && this._fromServer[styleId]
if (tagFromServer) {
tagFromServer.parentNode.removeChild(tagFromServer)
delete this._fromServer[styleId]
} else {
this._indices[styleId].forEach(index => this._sheet.deleteRule(index))
delete this._indices[styleId]
}
delete this._instancesCounts[styleId]
}
}
update(props, nextProps) {
this.add(nextProps)
this.remove(props)
}
flush() {
this._sheet.flush()
this._sheet.inject()
this._fromServer = undefined
this._indices = {}
this._instancesCounts = {}
}
cssRules() {
const fromServer = this._fromServer
? Object.keys(this._fromServer).map(styleId => [
styleId,
this._fromServer[styleId]
])
: []
const cssRules = this._sheet.cssRules()
return fromServer.concat(
Object.keys(this._indices)
.map(styleId => [
styleId,
this._indices[styleId]
.map(index => cssRules[index].cssText)
.join(this._optimizeForSpeed ? '' : '\n')
])
// filter out empty rules
.filter(rule => Boolean(rule[1]))
)
}
styles(options) {
return mapRulesToStyle(this.cssRules(), options)
}
getIdAndRules(props) {
const { children: css, dynamic, id } = props
if (dynamic) {
const styleId = computeId(id, dynamic)
return {
styleId,
rules: Array.isArray(css)
? css.map(rule => computeSelector(styleId, rule))
: [computeSelector(styleId, css)]
}
}
return {
styleId: computeId(id),
rules: Array.isArray(css) ? css : [css]
}
}
/**
* selectFromServer
*
* Collects style tags from the document with id __jsx-XXX
*/
selectFromServer() {
const elements = Array.prototype.slice.call(
document.querySelectorAll('[id^="__jsx-"]')
)
return elements.reduce((acc, element) => {
const id = element.id.slice(2)
acc[id] = element
return acc
}, {})
}
}
function invariant(condition, message) {
if (!condition) {
throw new Error(`StyleSheetRegistry: ${message}.`)
}
}
export const StyleSheetContext = createContext(null)
StyleSheetContext.displayName = 'StyleSheetContext'
export function createStyleRegistry() {
return new StyleSheetRegistry()
}
export function StyleRegistry({ registry: configuredRegistry, children }) {
const rootRegistry = useContext(StyleSheetContext)
const [registry] = useState(
() => rootRegistry || configuredRegistry || createStyleRegistry()
)
return React.createElement(
StyleSheetContext.Provider,
{ value: registry },
children
)
}
export function useStyleRegistry() {
return useContext(StyleSheetContext)
}
================================================
FILE: src/webpack.js
================================================
import loaderUtils from 'loader-utils'
const types = ['scoped', 'global', 'resolve']
export default function(content) {
if (this.cacheable) this.cacheable()
this.addDependency(this.resourcePath)
const options = Object.assign({}, loaderUtils.getOptions(this))
if (!options.type) {
options.type = 'scoped'
}
// Calls type with the current file name.
if (typeof options.type === 'function') {
options.type = options.type(this.resourcePath, {
query: loaderUtils.parseQuery(this.resourceQuery || '?') || {}
})
}
if (!types.includes(options.type)) {
return this.callback(
'The given `type` option is invalid. \n\n' +
`Expected:\n One of scoped|global|resolve \n\n` +
'Actual:\n ' +
options.type
)
}
// Allows to define the type for each individual file using a CSS comment.
const commentType = content.match(/\/*\s*@styled-jsx=(scoped|global|resolve)/)
if (commentType) {
options.type = commentType[1]
}
let output = `import css from 'styled-jsx/css';\n\nconst styles = css`
if (options.type === 'global') {
// css.global``
output += '.global'
} else if (options.type === 'resolve') {
// css.resolve``
output += '.resolve'
}
// default css``
// Escape backticks and backslashes: “`” ⇒ “\`”, “\” ⇒ “\\”
// (c) https://github.com/coox/styled-jsx-css-loader/blob/97a38e90dddf2c4b066e9247db0612c8f95302de/index.js#L6
output += `\`${content.replace(
/[`\\]/g,
match => '\\' + match
)}\`;\n\nexport default styles;`
this.callback(null, output)
}
================================================
FILE: style.d.ts
================================================
declare module 'styled-jsx/style' {
export default function JSXStyle(props: any): null
}
================================================
FILE: style.js
================================================
module.exports = require('./dist/index').style
================================================
FILE: test/.babelrc
================================================
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
],
"sourceMaps": false
}
================================================
FILE: test/__snapshots__/attribute.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`generate attribute for mixed modes (global, static, dynamic) 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles from './styles';
const styles2 = require('./styles2');
// external only
export const Test1 = () => <div className={\`jsx-\${styles.__hash} jsx-\${styles2.__hash}\`}>
<p className={\`jsx-\${styles.__hash} jsx-\${styles2.__hash}\`}>external only</p>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
</div>;
// external and static
export const Test2 = () => <div className={'jsx-2982525546 ' + \`jsx-\${styles.__hash}\`}>
<p className={'jsx-2982525546 ' + \`jsx-\${styles.__hash}\`}>external and static</p>
<_JSXStyle id={\\"2982525546\\"}>{\\"p.jsx-2982525546{color:red;}\\"}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// external and dynamic
export const Test3 = ({ color }) => <div className={\`jsx-\${styles.__hash}\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>
<p className={\`jsx-\${styles.__hash}\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>external and dynamic</p>
<_JSXStyle id={\\"1947484460\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// external, static and dynamic
export const Test4 = ({ color }) => <div className={\`jsx-\${styles.__hash}\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>
<p className={\`jsx-\${styles.__hash}\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>external, static and dynamic</p>
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-3190985107{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"1336444426\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
// static only
export const Test5 = () => <div className={\\"jsx-1372669040\\"}>
<p className={\\"jsx-1372669040\\"}>static only</p>
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-1372669040{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"2982525546\\"}>{\\"p.jsx-1372669040{color:red;}\\"}</_JSXStyle>
</div>;
// static and dynamic
export const Test6 = ({ color }) => <div className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>
<p className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>static and dynamic</p>
<_JSXStyle id={\\"3190985107\\"}>{\\"p.jsx-3190985107{display:inline-block;}\\"}</_JSXStyle>
<_JSXStyle id={\\"1336444426\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
</div>;
// dynamic only
export const Test7 = ({ color }) => <div className={_JSXStyle.dynamic([['1947484460', [color]]])}>
<p className={_JSXStyle.dynamic([['1947484460', [color]]])}>dynamic only</p>
<_JSXStyle id={\\"1947484460\\"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
</div>;
// dynamic with scoped compound variable
export const Test8 = ({ color }) => {
if (color) {
const innerProps = { color };
return <div className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>
<p className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>dynamic with scoped compound variable</p>
<_JSXStyle id={\\"1791723528\\"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`}</_JSXStyle>
</div>;
}
};
// dynamic with compound variable
export const Test9 = ({ color }) => {
const innerProps = { color };
return <div className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>
<p className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>dynamic with compound variable</p>
<_JSXStyle id={\\"248922593\\"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`}</_JSXStyle>
</div>;
};
const foo = 'red';
// dynamic with constant variable
export const Test10 = () => <div className={\\"jsx-461505126\\"}>
<p className={\\"jsx-461505126\\"}>dynamic with constant variable</p>
<_JSXStyle id={\\"461505126\\"}>{\`p.jsx-461505126{color:\${foo};}\`}</_JSXStyle>
</div>;
// dynamic with complex scope
export const Test11 = ({ color }) => {
const items = Array.from({ length: 5 }).map((item, i) => <li key={i} className={_JSXStyle.dynamic([['2172653867', [color]]]) + ' ' + 'item'}>
<_JSXStyle id={\\"2172653867\\"} dynamic={[color]}>{\`.item.__jsx-style-dynamic-selector{color:\${color};}\`}</_JSXStyle>
Item #{i + 1}
</li>);
return <ul className=\\"items\\">{items}</ul>;
};"
`;
exports[`rewrites className 1`] = `
"var _this = this;
import _JSXStyle from \\"styled-jsx/style\\";
export default (() => {
const Element = 'div';
return <div className={\\"jsx-2886504620\\"}>
<div {...test.test} className={\\"jsx-2886504620\\" + \\" \\" + (test.test.className != null && test.test.className || \\"test\\")} />
<div {...test.test.test} className={\\"jsx-2886504620\\" + \\" \\" + (test.test.test.className != null && test.test.test.className || \\"test\\")} />
<div {..._this.test.test} className={\\"jsx-2886504620\\" + \\" \\" + (_this.test.test.className != null && _this.test.test.className || \\"test\\")} />
<div data-test=\\"test\\" className={\\"jsx-2886504620\\"} />
<div className={\\"jsx-2886504620\\" + \\" \\" + \\"test\\"} />
<div className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div className={\\"jsx-2886504620\\" + \\" \\" + \`test\`} />
<div className={\\"jsx-2886504620\\" + \\" \\" + \`test\${true ? ' test2' : ''}\`} />
<div className={\\"jsx-2886504620\\" + \\" \\" + ('test ' + test || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (['test', 'test2'].join(' ') || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (true && 'test' || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + ((test ? 'test' : null) || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (test || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (test && 'test' || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (test && test('test') || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (undefined || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (null || \\"\\")} />
<div className={\\"jsx-2886504620\\" + \\" \\" + (false || \\"\\")} />
<div data-test className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div data-test className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div data-test=\\"test\\" className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || 'test')} />
<div {...props} {...rest} className={\\"jsx-2886504620\\" + \\" \\" + (rest.className != null && rest.className || props.className != null && props.className || 'test')} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || \`test \${test ? 'test' : ''}\`)} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || test && test('test') || \\"\\")} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || test && test('test') && 'test' || \\"\\")} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || test && test('test') && test2('test') || \\"\\")} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div {...props} {...rest} className={\\"jsx-2886504620\\" + \\" \\" + 'test'} />
<div {...props} {...rest} className={\\"jsx-2886504620\\" + \\" \\" + (rest.className != null && rest.className || 'test')} />
<div {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || \\"\\")} />
<div {...props} {...rest} className={\\"jsx-2886504620\\" + \\" \\" + (rest.className != null && rest.className || props.className != null && props.className || \\"\\")} />
<div {...props} data-foo {...rest} className={\\"jsx-2886504620\\" + \\" \\" + (rest.className != null && rest.className || props.className != null && props.className || \\"\\")} />
<div {...props} data-foo {...rest} className={\\"jsx-2886504620\\" + \\" \\" + (rest.className != null && rest.className || 'test')} />
<Element className={\\"jsx-2886504620\\"} />
<Element className={\\"jsx-2886504620\\" + \\" \\" + \\"test\\"} />
<Element {...props} className={\\"jsx-2886504620\\" + \\" \\" + (props.className != null && props.className || \\"\\")} />
<_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>
</div>;
});"
`;
================================================
FILE: test/__snapshots__/external.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`(optimized) transpiles external stylesheets (CommonJS modules) 1`] = `
"const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];
_defaultExport.__hash = '2292456818';
module.exports = _defaultExport;"
`;
exports[`(optimized) transpiles external stylesheets 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import colors, { size } from './constants';
const color = 'red';
const bar = ['div.jsx-2141779268{font-size:3em;}'];
bar.__hash = '2141779268';
const baz = ['div{font-size:3em;}'];
baz.__hash = '2141779268';
a.__hash = '262929833';
const a = [\`div{font-size:\${size}em;}\`];
export const uh = bar;
export const foo = [\`div.jsx-2299908427{color:\${color};}\`];
foo.__hash = '2299908427';
({
styles: <_JSXStyle id={\\"1329679275\\"}>{[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,
className: 'jsx-1329679275'
});
const b = {
styles: <_JSXStyle id={\\"1329679275\\"}>{[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,
className: 'jsx-1329679275'
};
const dynamic = colors => {
const b = {
styles: <_JSXStyle id={\\"3325296745\\"} dynamic={[colors.green.light]}>{[\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}\`, 'a.__jsx-style-dynamic-selector{color:red;}']}</_JSXStyle>,
className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
};
};
export default {
styles: <_JSXStyle id={\\"3290112549\\"}>{['div.jsx-3290112549{font-size:3em;}', \`p.jsx-3290112549{color:\${color};}\`]}</_JSXStyle>,
className: 'jsx-3290112549'
};"
`;
exports[`Makes sure that style nodes are not re-used 1`] = `
"\\"use strict\\";
var _style = _interopRequireDefault(require(\\"styled-jsx/style\\"));
var _App = _interopRequireDefault(require(\\"./App.styles\\"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Test() {
return <div>
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>
</div>;
}"
`;
exports[`does not transpile non-styled-jsx tagged teplate literals 1`] = `
"import css from 'hell';
const color = 'red';
const bar = css\`
div {
font-size: 3em;
}
\`;
export const uh = bar;
export const foo = css\`div { color: \${color}}\`;
export default css\`
div {
font-size: 3em;
}
p {
color: \${color};
}
\`;
const Title = styled.h1\`
color: red;
font-size: 50px;
\`;
const AnotherTitle = Title.extend\`color: blue;\`;
export const Component = () => <AnotherTitle>My page</AnotherTitle>;"
`;
exports[`injects JSXStyle for nested scope 1`] = `
"import _JSXStyle from 'styled-jsx/style';
function test() {
({
styles: <_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2886504620'
});
}"
`;
exports[`transpiles external stylesheets (CommonJS modules) 1`] = `
"const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');
_defaultExport.__hash = '2292456818';
module.exports = _defaultExport;"
`;
exports[`transpiles external stylesheets 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import colors, { size } from './constants';
const color = 'red';
const bar = new String('div.jsx-2141779268{font-size:3em;}');
bar.__hash = '2141779268';
const baz = new String('div{font-size:3em;}');
baz.__hash = '2141779268';
a.__hash = '262929833';
const a = new String(\`div{font-size:\${size}em;}\`);
export const uh = bar;
export const foo = new String(\`div.jsx-2299908427{color:\${color};}\`);
foo.__hash = '2299908427';
({
styles: <_JSXStyle id={\\"1329679275\\"}>{\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,
className: 'jsx-1329679275'
});
const b = {
styles: <_JSXStyle id={\\"1329679275\\"}>{\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,
className: 'jsx-1329679275'
};
const dynamic = colors => {
const b = {
styles: <_JSXStyle id={\\"3325296745\\"} dynamic={[colors.green.light]}>{\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\`}</_JSXStyle>,
className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
};
};
export default {
styles: <_JSXStyle id={\\"3290112549\\"}>{\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:\${color};}\`}</_JSXStyle>,
className: 'jsx-3290112549'
};"
`;
exports[`use external stylesheet and dynamic element 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
import styles from './styles2';
export default (({ level = 1 }) => {
const Element = \`h\${level}\`;
return <Element className={\`jsx-\${styles.__hash}\` + \\" \\" + \\"root\\"}>
<p className={\`jsx-\${styles.__hash}\`}>dynamic element</p>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</Element>;
});"
`;
exports[`use external stylesheets (global only) 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles, { foo as styles3 } from './styles';
const styles2 = require('./styles2');
export default (() => <div>
<p>test</p>
<div>woot</div>
<p>woot</p>
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
exports[`use external stylesheets (multi-line) 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles from './styles';
export default (() => <div className={\`jsx-\${styles.__hash}\`}>
<p className={\`jsx-\${styles.__hash}\`}>test</p>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
exports[`use external stylesheets 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles from './styles';
const styles2 = require('./styles2');
import { foo as styles3 } from './styles';
export default (() => <div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\` + ' ' + 'foo'}>test</p>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>woot</p>
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash} jsx-\${styles.__hash}\`}>woot</div>
<_JSXStyle id={\\"1646697228\\"}>{\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);
export const Test = () => <div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\` + ' ' + 'foo'}>test</p>
<p className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>woot</p>
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
<div className={'jsx-1646697228 ' + \`jsx-\${styles3.__hash}\`}>woot</div>
<_JSXStyle id={\\"1646697228\\"}>{\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\"}</_JSXStyle>
</div>;"
`;
================================================
FILE: test/__snapshots__/index.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`generates source maps 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (() => <div className={\\"jsx-2743241663\\"}>
<p className={\\"jsx-2743241663\\"}>test</p>
<p className={\\"jsx-2743241663\\"}>woot</p>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-2743241663{color:red;}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNjLFVBQUMiLCJmaWxlIjoic291cmNlLW1hcHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPHA+dGVzdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxzdHlsZSBqc3g+eydwIHsgY29sb3I6IHJlZCB9J308L3N0eWxlPlxuICA8L2Rpdj5cbilcbiJdfQ== */\\\\n/*@ sourceURL=source-maps.js */\\"}</_JSXStyle>
</div>);"
`;
exports[`ignores when attribute is absent 1`] = `
"const a = () => <div>
<p>hi</p>
<style>{'woot'}</style>
</div>;"
`;
exports[`ignores whitespace around expression container 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (() => <div className={\\"jsx-2743241663\\"}>
<p className={\\"jsx-2743241663\\"}>test</p>
<p className={\\"jsx-2743241663\\"}>woot</p>
<p className={\\"jsx-2743241663\\"}>woot</p>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-2743241663{color:red;}\\"}</_JSXStyle>
</div>);"
`;
exports[`mixed global and scoped 1`] = `
"import _JSXStyle from 'styled-jsx/style';
const Test = () => <_JSXStyle id={\\"2743241663\\"}>{\\"p{color:red;}\\"}</_JSXStyle>;
export default (() => <div className={\\"jsx-2673076688\\"}>
<p className={\\"jsx-2673076688\\"}>test</p>
<_JSXStyle id={\\"4269072806\\"}>{\\"body{background:red;}\\"}</_JSXStyle>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-2673076688{color:red;}\\"}</_JSXStyle>
</div>);"
`;
exports[`should have different jsx ids 1`] = `
"import _JSXStyle from 'styled-jsx/style';
const color = 'red';
const otherColor = 'green';
const A = () => <div className={\\"jsx-57381496\\"}>
<p className={\\"jsx-57381496\\"}>test</p>
<_JSXStyle id={\\"57381496\\"}>{\`p.jsx-57381496{color:\${color};}\`}</_JSXStyle>
</div>;
const B = () => <div className={\\"jsx-3099245642\\"}>
<p className={\\"jsx-3099245642\\"}>test</p>
<_JSXStyle id={\\"3099245642\\"}>{\`p.jsx-3099245642{color:\${otherColor};}\`}</_JSXStyle>
</div>;
export default (() => <div>
<A />
<B />
</div>);"
`;
exports[`should not add the data-jsx attribute to components instances 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
const Test = () => <div className={\\"jsx-2529315885\\"}>
<span className={\\"jsx-2529315885\\"}>test</span>
<Component />
<_JSXStyle id={\\"2529315885\\"}>{\\"span.jsx-2529315885{color:red;}\\"}</_JSXStyle>
</div>;"
`;
exports[`works with class 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
export default class {
render() {
return <div className={\\"jsx-2101845350\\"}>
<p className={\\"jsx-2101845350\\"}>test</p>
<_JSXStyle id={\\"2101845350\\"}>{\\"p.jsx-2101845350{color:red;}\\"}</_JSXStyle>
</div>;
}
}"
`;
exports[`works with css tagged template literals in the same file 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (({ children }) => <div className={\`jsx-\${styles.__hash}\`}>
<p className={\`jsx-\${styles.__hash}\`}>{children}</p>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);
const styles = new String('p.jsx-2587355013{color:red;}');
styles.__hash = '2587355013';
class Test extends React.Component {
render() {
return <div className={\`jsx-\${styles.__hash}\`}>
<p className={\`jsx-\${styles.__hash}\`}>{this.props.children}</p>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>;
}
}"
`;
exports[`works with dynamic element 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
export default (({ level = 1 }) => {
const Element = \`h\${level}\`;
return <Element className={\\"jsx-1253978709\\" + \\" \\" + \\"root\\"}>
<p className={\\"jsx-1253978709\\"}>dynamic element</p>
<_JSXStyle id={\\"1253978709\\"}>{\\".root.jsx-1253978709{background:red;}\\"}</_JSXStyle>
</Element>;
});
export const TestLowerCase = ({ level = 1 }) => {
const element = \`h\${level}\`;
return <element className={\\"jsx-1253978709\\" + \\" \\" + \\"root\\"}>
<p className={\\"jsx-1253978709\\"}>dynamic element</p>
<_JSXStyle id={\\"1253978709\\"}>{\\".root.jsx-1253978709{background:red;}\\"}</_JSXStyle>
</element>;
};
const Element2 = 'div';
export const Test2 = () => {
return <Element2 className=\\"root\\">
<p className={\\"jsx-1253978709\\"}>dynamic element</p>
<_JSXStyle id={\\"1253978709\\"}>{\\".root.jsx-1253978709{background:red;}\\"}</_JSXStyle>
</Element2>;
};"
`;
exports[`works with dynamic element in class 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default class {
render() {
const Element = 'div';
return <Element className={'jsx-1800172487' + ' ' + 'root'}>
<p className={\\"jsx-1800172487\\"}>dynamic element</p>
<_JSXStyle id={\\"1800172487\\"}>{\\".root.jsx-1800172487{background:red;}\\"}</_JSXStyle>
</Element>;
}
}
const Element2 = 'div';
export const Test2 = class {
render() {
return <Element2 className=\\"root\\">
<p className={\\"jsx-1800172487\\"}>dynamic element</p>
<_JSXStyle id={\\"1800172487\\"}>{\\".root.jsx-1800172487{background:red;}\\"}</_JSXStyle>
</Element2>;
}
};"
`;
exports[`works with expressions in template literals 1`] = `
"import _JSXStyle from 'styled-jsx/style';
const darken = c => c;
const color = 'red';
const otherColor = 'green';
const mediumScreen = '680px';
const animationDuration = '200ms';
const animationName = 'my-cool-animation';
const obj = { display: 'block' };
export default (({ display }) => <div className={'jsx-3922596756 ' + _JSXStyle.dynamic([['1795062918', [display ? 'block' : 'none']]])}>
<p className={'jsx-3922596756 ' + _JSXStyle.dynamic([['1795062918', [display ? 'block' : 'none']]])}>test</p>
<_JSXStyle id={\\"1003380713\\"}>{\`p.\${color}.jsx-3922596756{color:\${otherColor};display:\${obj.display};}\`}</_JSXStyle>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-3922596756{color:red;}\\"}</_JSXStyle>
<_JSXStyle id={\\"602592955\\"}>{\`body{background:\${color};}\`}</_JSXStyle>
<_JSXStyle id={\\"602592955\\"}>{\`body{background:\${color};}\`}</_JSXStyle>
<_JSXStyle id={\\"128557999\\"}>{\`p.jsx-3922596756{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={\\"128557999\\"}>{\`p.jsx-3922596756{color:\${color};}\`}</_JSXStyle>
<_JSXStyle id={\\"2622100973\\"}>{\`p.jsx-3922596756{color:\${darken(color)};}\`}</_JSXStyle>
<_JSXStyle id={\\"1167419394\\"}>{\`p.jsx-3922596756{color:\${darken(color) + 2};}\`}</_JSXStyle>
<_JSXStyle id={\\"4052509549\\"}>{\`@media (min-width:\${mediumScreen}){p.jsx-3922596756{color:green;}p.jsx-3922596756{color:\${\`red\`};}}p.jsx-3922596756{color:red;}\`}</_JSXStyle>
<_JSXStyle id={\\"2824547816\\"}>{\`p.jsx-3922596756{-webkit-animation-duration:\${animationDuration};animation-duration:\${animationDuration};}\`}</_JSXStyle>
<_JSXStyle id={\\"417951176\\"}>{\`p.jsx-3922596756{-webkit-animation:\${animationDuration} forwards \${animationName};animation:\${animationDuration} forwards \${animationName};}div.jsx-3922596756{background:\${color};}\`}</_JSXStyle>
<_JSXStyle id={\\"1795062918\\"} dynamic={[display ? 'block' : 'none']}>{\`span.__jsx-style-dynamic-selector{display:\${display ? 'block' : 'none'};}\`}</_JSXStyle>
</div>);"
`;
exports[`works with global styles 1`] = `
"import _JSXStyle from 'styled-jsx/style';
const Test = () => <div className={\\"jsx-2209073070\\"}>
<_JSXStyle id={\\"2209073070\\"}>{\\"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}\\"}</_JSXStyle>
</div>;
const Test2 = () => <_JSXStyle id={\\"2743241663\\"}>{\\"p{color:red;}\\"}</_JSXStyle>;"
`;
exports[`works with multiple jsx blocks 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
const attrs = {
id: 'test'
};
const Test1 = () => <div className={\\"jsx-2529315885\\"}>
<span {...attrs} data-test=\\"test\\" className={\\"jsx-2529315885\\" + \\" \\" + (attrs.className != null && attrs.className || \\"\\")}>test</span>
<Component />
<_JSXStyle id={\\"2529315885\\"}>{\\"span.jsx-2529315885{color:red;}\\"}</_JSXStyle>
</div>;
const Test2 = () => <span>test</span>;
const Test3 = () => <div className={\\"jsx-2529315885\\"}>
<span className={\\"jsx-2529315885\\"}>test</span>
<_JSXStyle id={\\"2529315885\\"}>{\\"span.jsx-2529315885{color:red;}\\"}</_JSXStyle>
</div>;
export default class {
render() {
return <div className={\\"jsx-2101845350\\"}>
<p className={\\"jsx-2101845350\\"}>test</p>
<_JSXStyle id={\\"2101845350\\"}>{\\"p.jsx-2101845350{color:red;}\\"}</_JSXStyle>
</div>;
}
}"
`;
exports[`works with non styled-jsx styles 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (() => <div className={\\"jsx-2743241663\\"}>
<p className={\\"jsx-2743241663\\"}>woot</p>
<style dangerouslySetInnerHTML={{ __html: \`body { margin: 0; }\` }}></style>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-2743241663{color:red;}\\"}</_JSXStyle>
</div>);"
`;
exports[`works with stateless 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (() => <div className={\\"jsx-2743241663\\"}>
<p className={\\"jsx-2743241663\\"}>test</p>
<p className={\\"jsx-2743241663\\"}>woot</p>
<p className={\\"jsx-2743241663\\"}>woot</p>
<_JSXStyle id={\\"2743241663\\"}>{\\"p.jsx-2743241663{color:red;}\\"}</_JSXStyle>
</div>);"
`;
================================================
FILE: test/__snapshots__/macro.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`can alias the named import 1`] = `
"import _JSXStyle from 'styled-jsx/style';
({
styles: <_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2886504620'
});"
`;
exports[`injects JSXStyle for nested scope 1`] = `
"import _JSXStyle from 'styled-jsx/style';
function test() {
({
styles: <_JSXStyle id={\\"2886504620\\"}>{\\"div.jsx-2886504620{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2886504620'
});
}"
`;
exports[`transpiles correctly 1`] = `
"import _JSXStyle from 'styled-jsx/style';
const { className, styles } = {
styles: <_JSXStyle id={\\"2052294191\\"}>{\\"div.jsx-2052294191{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2052294191'
};
const dynamicStyles = props => ({
styles: <_JSXStyle id={\\"290194820\\"} dynamic={[props.color]}>{\`div.__jsx-style-dynamic-selector{color:\${props.color};}\`}</_JSXStyle>,
className: _JSXStyle.dynamic([['290194820', [props.color]]])
});
const test = {
styles: <_JSXStyle id={\\"2052294191\\"}>{\\"div.jsx-2052294191{color:red;}\\"}</_JSXStyle>,
className: 'jsx-2052294191'
};
const dynamicStyles2 = props => ({
styles: <_JSXStyle id={\\"290194820\\"} dynamic={[props.color]}>{\`div.__jsx-style-dynamic-selector{color:\${props.color};}\`}</_JSXStyle>,
className: _JSXStyle.dynamic([['290194820', [props.color]]])
});
const ExampleComponent = props => {
const { className, styles } = dynamicStyles(props);
return <div className={className}>
howdy
{styles}
</div>;
};"
`;
================================================
FILE: test/__snapshots__/plugins.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`applies plugins 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles from './styles';
const color = 'red';
export default (() => <div className={'jsx-3382438999 ' + \`jsx-\${styles.__hash}\`}>
<p className={'jsx-3382438999 ' + \`jsx-\${styles.__hash}\`}>test</p>
<_JSXStyle id={\\"3382438999\\"}>{\`span.\${color}.jsx-3382438999{color:\${otherColor};}\`}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
exports[`babel-test plugin strips jsx attribute 1`] = `
"import styles from './styles';
const color = 'red';
export default (() => <div>
<p>test</p>
<style>{\`
div.\${color} {
color: \${otherColor};
}
\`}</style>
<style>{styles}</style>
</div>);"
`;
exports[`passes options to plugins 1`] = `
"import _JSXStyle from 'styled-jsx/style';
import styles from './styles';
const color = 'red';
export default (() => <div className={'jsx-3382438999 ' + \`jsx-\${styles.__hash}\`}>
<p className={'jsx-3382438999 ' + \`jsx-\${styles.__hash}\`}>test</p>
<_JSXStyle id={\\"3382438999\\"}>{\\".test.jsx-3382438999{content:\\\\\\"{\\\\\\"foo\\\\\\":false,\\\\\\"babel\\\\\\":{\\\\\\"location\\\\\\":{\\\\\\"start\\\\\\":{\\\\\\"line\\\\\\":7,\\\\\\"column\\\\\\":16},\\\\\\"end\\\\\\":{\\\\\\"line\\\\\\":11,\\\\\\"column\\\\\\":5}},\\\\\\"vendorPrefixes\\\\\\":false,\\\\\\"sourceMaps\\\\\\":false,\\\\\\"isGlobal\\\\\\":false}}\\\\\\";}\\"}</_JSXStyle>
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
</div>);"
`;
================================================
FILE: test/__snapshots__/styles.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`transpile styles with attributes 1`] = `"html.jsx-123{background-image: linear-gradient(0deg,rgba(255,255,255,0.8),rgba(255,255,255,0.8)), url(/static/background.svg);}p{color:blue;}p{color:blue;}p,a.jsx-123{color:blue;}.foo + a{color:red;}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}p.jsx-123{color:red;}p.jsx-123{color:red;}*.jsx-123{color:blue;}[href=\\"woot\\"].jsx-123{color:red;}p.jsx-123 a.jsx-123 span.jsx-123{color:red;}p.jsx-123 span{background:blue;}p.jsx-123 a[title=\\"'w ' ' t'\\"].jsx-123{margin:auto;}p.jsx-123 span:not(.test){color:green;}p.jsx-123,h1.jsx-123{color:blue;-webkit-animation:hahaha-jsx-123 3s ease forwards infinite;animation:hahaha-jsx-123 3s ease forwards infinite;-webkit-animation-name:hahaha-jsx-123;animation-name:hahaha-jsx-123;-webkit-animation-delay:100ms;animation-delay:100ms;}p.jsx-123{-webkit-animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;}p.jsx-123:hover{color:red;}p.jsx-123::before{color:red;}.jsx-123:hover{color:red;}.jsx-123::before{color:red;}.jsx-123:hover p.jsx-123{color:red;}p.jsx-123+a.jsx-123{color:red;}p.jsx-123~a.jsx-123{color:red;}p.jsx-123>a.jsx-123{color:red;}p.jsx-123>>a.jsx-123{color:red;}@-webkit-keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@-webkit-keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@media (min-width:500px){.test.jsx-123{color:red;}}.test.jsx-123{display:block;}.inline-flex.jsx-123{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.flex.jsx-123{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.test.jsx-123{box-shadow:0 0 10px black,inset 0 0 5px black;}.test[title=\\",\\"].jsx-123{display:inline-block;}.test.is-status.jsx-123 .test.jsx-123{color:red;}.a-selector.jsx-123:hover,.a-selector.jsx-123:focus{outline:none;}@media (min-width:1px) and (max-width:768px){[class*='grid__col--'].jsx-123{margin-top:12px;margin-bottom:12px;}}@media (max-width:64em){.test.jsx-123{margin-bottom:1em;}@supports (-moz-appearance:none) and (display:contents){.test.jsx-123{margin-bottom:2rem;}}}"`;
================================================
FILE: test/_read.js
================================================
import { resolve } from 'path'
import { promises as fs } from 'fs'
export default async path => {
const buffer = await fs.readFile(resolve(__dirname, path))
return buffer.toString()
}
================================================
FILE: test/_transform.js
================================================
import path from 'path'
import { transform, transformFile } from '@babel/core'
export default (file, opts = {}) =>
new Promise((resolve, reject) => {
transformFile(
path.resolve(__dirname, file),
{
babelrc: false,
...opts
},
(error, data) => {
if (error) {
return reject(error)
}
resolve(data)
}
)
})
export const transformSource = (src, opts = {}) =>
new Promise((resolve, reject) => {
transform(
src,
{
babelrc: false,
...opts
},
(error, result) => {
if (error) {
return reject(error)
}
resolve(result)
}
)
})
================================================
FILE: test/attribute.js
================================================
// Packages
import test from 'ava'
// Ours
import plugin from '../src/babel'
import _transform from './_transform'
const transform = (file, opts = {}) =>
_transform(file, {
plugins: [plugin],
...opts
})
test('rewrites className', async t => {
const { code } = await transform(
'./fixtures/attribute-generation-classname-rewriting.js'
)
t.snapshot(code)
})
test('generate attribute for mixed modes (global, static, dynamic)', async t => {
const { code } = await transform('./fixtures/attribute-generation-modes.js')
t.snapshot(code)
})
================================================
FILE: test/external.js
================================================
// Packages
import test from 'ava'
// Ours
import plugin from '../src/babel'
import _transform, { transformSource as _transformSource } from './_transform'
const transform = (file, opts = {}) =>
_transform(file, {
plugins: [[plugin, opts]]
})
const transformSource = (src, opts = {}) =>
_transformSource(src.trim(), {
plugins: [[plugin, opts]],
...opts
})
test('transpiles external stylesheets', async t => {
const { code } = await transform('./fixtures/styles.js')
t.snapshot(code)
})
test('(optimized) transpiles external stylesheets', async t => {
const { code } = await transform('./fixtures/styles.js', {
optimizeForSpeed: true
})
t.snapshot(code)
})
test('transpiles external stylesheets (CommonJS modules)', async t => {
const { code } = await transform('./fixtures/styles2.js')
t.snapshot(code)
})
test('(optimized) transpiles external stylesheets (CommonJS modules)', async t => {
const { code } = await transform('./fixtures/styles2.js', {
optimizeForSpeed: true
})
t.snapshot(code)
})
test('does not transpile non-styled-jsx tagged teplate literals', async t => {
const { code } = await transform(
'./fixtures/not-styled-jsx-tagged-templates.js'
)
t.snapshot(code)
})
test('throws when using `this.something` in external stylesheets', async t => {
const { message } = await t.throwsAsync(() =>
transform('./fixtures/styles-external-invalid.js')
)
t.regex(message, /this\.props/)
})
test('throws when referring an undefined value in external stylesheets', async t => {
const { message } = await t.throwsAsync(() =>
transform('./fixtures/styles-external-invalid2.js')
)
t.regex(message, /props\.color/)
})
test('use external stylesheets', async t => {
const { code } = await transform('./fixtures/external-stylesheet.js')
t.snapshot(code)
})
test('use external stylesheets (multi-line)', async t => {
const { code } = await transform(
'./fixtures/external-stylesheet-multi-line.js'
)
t.snapshot(code)
})
test('use external stylesheets (global only)', async t => {
const { code } = await transform('./fixtures/external-stylesheet-global.js')
t.snapshot(code)
})
test('injects JSXStyle for nested scope', async t => {
const { code } = await transformSource(`
import css from 'styled-jsx/css'
function test() {
css.resolve\`div { color: red }\`
}
`)
t.snapshot(code)
})
test('use external stylesheet and dynamic element', async t => {
const { code } = await transform('./fixtures/dynamic-element-external.js')
t.snapshot(code)
})
test('Makes sure that style nodes are not re-used', async t => {
const { code } = await transformSource(
`
import styles from './App.styles';
function Test() {
return <div>
<style jsx global>{styles}</style>
</div>
}
`,
{
babelrc: false,
plugins: [plugin, '@babel/plugin-transform-modules-commonjs']
}
)
t.snapshot(code)
})
test('Make sure that it works with the new automatic transform', async t => {
const { code } = await transformSource(
`
import css from "styled-jsx/css";
const A = css.resolve\`
div {
color: green;
}
\`;
export default function IndexPage() {
return JSON.stringify(A);
}
`,
{
babelrc: false,
presets: [['@babel/preset-react', { runtime: 'automatic' }]],
plugins: [plugin]
}
)
t.snapshot(code)
})
================================================
FILE: test/fixtures/absent.js
================================================
const a = () => (
<div>
<p>hi</p>
<style>{'woot'}</style>
</div>
)
================================================
FILE: test/fixtures/attribute-generation-classname-rewriting.js
================================================
export default () => {
const Element = 'div'
return (
<div>
<div className="test" {...test.test} />
<div className="test" {...test.test.test} />
<div className="test" {...this.test.test} />
<div data-test="test" />
<div className="test" />
<div className={'test'} />
<div className={`test`} />
<div className={`test${true ? ' test2' : ''}`} />
<div className={'test ' + test} />
<div className={['test', 'test2'].join(' ')} />
<div className={true && 'test'} />
<div className={test ? 'test' : null} />
<div className={test} />
<div className={test && 'test'} />
<div className={test && test('test')} />
<div className={undefined} />
<div className={null} />
<div className={false} />
<div className={'test'} data-test />
<div data-test className={'test'} />
<div className={'test'} data-test="test" />
<div className={'test'} {...props} />
<div className={'test'} {...props} {...rest} />
<div className={`test ${test ? 'test' : ''}`} {...props} />
<div className={test && test('test')} {...props} />
<div className={test && test('test') && 'test'} {...props} />
<div className={test && test('test') && test2('test')} {...props} />
<div {...props} className={'test'} />
<div {...props} {...rest} className={'test'} />
<div {...props} className={'test'} {...rest} />
<div {...props} />
<div {...props} {...rest} />
<div {...props} data-foo {...rest} />
<div {...props} className={'test'} data-foo {...rest} />
<div {...{ id: 'foo' }} />
<div {...{ className: 'foo' }} />
<div {...{ className: 'foo' }} className="test" />
<div className="test" {...{ className: 'foo' }} />
<div {...{ className: 'foo' }} {...bar} />
<div {...{ className: 'foo' }} {...bar} className="test" />
<div className="test" {...{ className: 'foo' }} {...bar} />
<div className="test" {...{ className: props.className }} />
<div className="test" {...{ className: props.className }} {...bar} />
<div className="test" {...bar} {...{ className: props.className }} />
<div className="test" {...bar()} />
<Element />
<Element className="test" />
<Element {...props} />
<style jsx>{'div { color: red }'}</style>
</div>
)
}
================================================
FILE: test/fixtures/attribute-generation-modes.js
================================================
import styles from './styles'
const styles2 = require('./styles2')
// external only
export const Test1 = () => (
<div>
<p>external only</p>
<style jsx>{styles}</style>
<style jsx>{styles2}</style>
</div>
)
// external and static
export const Test2 = () => (
<div>
<p>external and static</p>
<style jsx>{`
p {
color: red;
}
`}</style>
<style jsx>{styles}</style>
</div>
)
// external and dynamic
export const Test3 = ({ color }) => (
<div>
<p>external and dynamic</p>
<style jsx>{`
p {
color: ${color};
}
`}</style>
<style jsx>{styles}</style>
</div>
)
// external, static and dynamic
export const Test4 = ({ color }) => (
<div>
<p>external, static and dynamic</p>
<style jsx>{`
p {
display: inline-block;
}
`}</style>
<style jsx>{`
p {
color: ${color};
}
`}</style>
<style jsx>{styles}</style>
</div>
)
// static only
export const Test5 = () => (
<div>
<p>static only</p>
<style jsx>{`
p {
display: inline-block;
}
`}</style>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
// static and dynamic
export const Test6 = ({ color }) => (
<div>
<p>static and dynamic</p>
<style jsx>{`
p {
display: inline-block;
}
`}</style>
<style jsx>{`
p {
color: ${color};
}
`}</style>
</div>
)
// dynamic only
export const Test7 = ({ color }) => (
<div>
<p>dynamic only</p>
<style jsx>{`
p {
color: ${color};
}
`}</style>
</div>
)
// dynamic with scoped compound variable
export const Test8 = ({ color }) => {
if (color) {
const innerProps = { color }
return (
<div>
<p>dynamic with scoped compound variable</p>
<style jsx>{`
p {
color: ${innerProps.color};
}
`}</style>
</div>
)
}
}
// dynamic with compound variable
export const Test9 = ({ color }) => {
const innerProps = { color }
return (
<div>
<p>dynamic with compound variable</p>
<style jsx>{`
p {
color: ${innerProps.color};
}
`}</style>
</div>
)
}
const foo = 'red'
// dynamic with constant variable
export const Test10 = () => (
<div>
<p>dynamic with constant variable</p>
<style jsx>{`
p {
color: ${foo};
}
`}</style>
</div>
)
// dynamic with complex scope
export const Test11 = ({ color }) => {
const items = Array.from({ length: 5 }).map((item, i) => (
<li className="item" key={i}>
<style jsx>{`
.item {
color: ${color};
}
`}</style>
Item #{i + 1}
</li>
))
return <ul className="items">{items}</ul>
}
================================================
FILE: test/fixtures/class.js
================================================
export default class {
render() {
return (
<div>
<p>test</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
}
}
================================================
FILE: test/fixtures/component-attribute.js
================================================
const Test = () => (
<div>
<span>test</span>
<Component />
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
)
================================================
FILE: test/fixtures/conflicts.js
================================================
export const _JSXStyle = '_JSXStyle-literal'
export default function() {
return (
<div>
<p>test</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
}
================================================
FILE: test/fixtures/css-tag-same-file.js
================================================
import css from 'styled-jsx/css'
export default ({ children }) => (
<div>
<p>{children}</p>
<style jsx>{styles}</style>
</div>
)
const styles = css`
p {
color: red;
}
`
class Test extends React.Component {
render() {
return (
<div>
<p>{this.props.children}</p>
<style jsx>{styles}</style>
</div>
)
}
}
================================================
FILE: test/fixtures/different-jsx-ids.js
================================================
const color = 'red'
const otherColor = 'green'
const A = () => (
<div>
<p>test</p>
<style jsx>{`
p {
color: ${color};
}
`}</style>
</div>
)
const B = () => (
<div>
<p>test</p>
<style jsx>{`
p {
color: ${otherColor};
}
`}</style>
</div>
)
export default () => (
<div>
<A />
<B />
</div>
)
================================================
FILE: test/fixtures/dynamic-element-class.js
================================================
export default class {
render() {
const Element = 'div'
return (
<Element className="root">
<p>dynamic element</p>
<style jsx>{`
.root {
background: red;
}
`}</style>
</Element>
)
}
}
const Element2 = 'div'
export const Test2 = class {
render() {
return (
<Element2 className="root">
<p>dynamic element</p>
<style jsx>{`
.root {
background: red;
}
`}</style>
</Element2>
)
}
}
================================================
FILE: test/fixtures/dynamic-element-external.js
================================================
import styles from './styles2'
export default ({ level = 1 }) => {
const Element = `h${level}`
return (
<Element className="root">
<p>dynamic element</p>
<style jsx>{styles}</style>
</Element>
)
}
================================================
FILE: test/fixtures/dynamic-element.js
================================================
export default ({ level = 1 }) => {
const Element = `h${level}`
return (
<Element className="root">
<p>dynamic element</p>
<style jsx>{`
.root {
background: red;
}
`}</style>
</Element>
)
}
export const TestLowerCase = ({ level = 1 }) => {
const element = `h${level}`
return (
<element className="root">
<p>dynamic element</p>
<style jsx>{`
.root {
background: red;
}
`}</style>
</element>
)
}
const Element2 = 'div'
export const Test2 = () => {
return (
<Element2 className="root">
<p>dynamic element</p>
<style jsx>{`
.root {
background: red;
}
`}</style>
</Element2>
)
}
================================================
FILE: test/fixtures/dynamic-this-value-in-arrow.js
================================================
import React, { Component } from 'react'
export default class Index extends Component {
static getInitialProps() {
return { color: 'aquamarine' }
}
render() {
return (
<div>
{[1, 2].map(idx => (
<div key={idx}>
{[3, 4].map(idx2 => (
<div key={idx2}>{this.props.color}</div>
))}
</div>
))}
{[1, 2].map(idx => (
<div key={idx}>
<div>
{this.props.color}
<div className="something">
<React.Fragment>
<div>
<div>{this.props.color} hello there</div>
</div>
</React.Fragment>
</div>
</div>
</div>
))}
<style jsx>{`
div {
background: ${this.props.color};
}
`}</style>
</div>
)
}
}
================================================
FILE: test/fixtures/expressions.js
================================================
const darken = c => c
const color = 'red'
const otherColor = 'green'
const mediumScreen = '680px'
const animationDuration = '200ms'
const animationName = 'my-cool-animation'
const obj = { display: 'block' }
export default ({ display }) => (
<div>
<p>test</p>
<style jsx>{`
p.${color} {
color: ${otherColor};
display: ${obj.display};
}
`}</style>
<style jsx>{'p { color: red }'}</style>
<style jsx global>{`
body {
background: ${color};
}
`}</style>
<style jsx global>{`
body {
background: ${color};
}
`}</style>
<style jsx>{`
p {
color: ${color};
}
`}</style>
<style jsx>{`
p {
color: ${color};
}
`}</style>
<style jsx>{`
p {
color: ${darken(color)};
}
`}</style>
<style jsx>{`
p {
color: ${darken(color) + 2};
}
`}</style>
<style jsx>{`
@media (min-width: ${mediumScreen}) {
p {
color: green;
}
p {
color: ${`red`};
}
}
p {
color: red;
}
`}</style>
<style jsx>{`
p {
animation-duration: ${animationDuration};
}
`}</style>
<style jsx>{`
p {
animation: ${animationDuration} forwards ${animationName};
}
div {
background: ${color};
}
`}</style>
<style jsx>{`
span {
display: ${display ? 'block' : 'none'};
}
`}</style>
<style jsx>{`
span:before {
display: ${display ? 'block' : 'none'};
content: '\`';
}
`}</style>
</div>
)
================================================
FILE: test/fixtures/external-stylesheet-global.js
================================================
import styles, { foo as styles3 } from './styles'
const styles2 = require('./styles2')
export default () => (
<div>
<p>test</p>
<div>woot</div>
<p>woot</p>
<style jsx global>
{styles2}
</style>
<style jsx global>
{styles3}
</style>
<style jsx global>
{styles}
</style>
</div>
)
================================================
FILE: test/fixtures/external-stylesheet-multi-line.js
================================================
import styles from './styles'
export default () => (
<div>
<p>test</p>
<style jsx>{styles}</style>
</div>
)
================================================
FILE: test/fixtures/external-stylesheet.js
================================================
import styles from './styles'
const styles2 = require('./styles2')
import { foo as styles3 } from './styles'
export default () => (
<div>
<p className="foo">test</p>
<p>woot</p>
<style jsx global>
{styles2}
</style>
<style jsx>{styles3}</style>
<div>woot</div>
<style jsx>{`
p {
color: red;
}
div {
color: green;
}
`}</style>
<style jsx>{styles}</style>
</div>
)
export const Test = () => (
<div>
<p className="foo">test</p>
<p>woot</p>
<style jsx>{styles3}</style>
<div>woot</div>
<style jsx>{`
p {
color: red;
}
div {
color: green;
}
`}</style>
</div>
)
================================================
FILE: test/fixtures/fragment.js
================================================
import React from 'react'
export default () => (
<>
<p>Testing!!!</p>
<p className="foo">Bar</p>
<>
<h3 id="head">Title...</h3>
<React.Fragment>
<p>hello</p>
<>
<p>foo</p>
<p>bar</p>
</>
<p>world</p>
</React.Fragment>
</>
<style jsx>{`
p {
color: cyan;
}
.foo {
font-size: 18px;
color: hotpink;
}
#head {
text-decoration: underline;
}
`}</style>
</>
)
function Component1() {
return (
<>
<div>test</div>
</>
)
}
function Component2() {
return (
<div>
<style jsx>{`
div {
color: red;
}
`}</style>
</div>
)
}
================================================
FILE: test/fixtures/global.js
================================================
const Test = () => (
<div>
<style jsx global>{`
body {
color: red;
}
:hover {
color: red;
display: flex;
animation: foo 1s ease-out;
}
div a {
display: none;
}
[data-test] > div {
color: red;
}
`}</style>
</div>
)
const Test2 = () => (
<style global jsx>
{'p { color: red }'}
</style>
)
================================================
FILE: test/fixtures/ignore.js
================================================
export default () => (
<div>
<p>test</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
================================================
FILE: test/fixtures/macro.js
================================================
import css, { resolve } from '../../test/helpers/babel-test.macro'
const { className, styles } = resolve`
div { color: red }
`
const dynamicStyles = props => resolve`
div { color: ${props.color} }
`
const test = css.resolve`
div { color: red }
`
const dynamicStyles2 = props => css.resolve`
div { color: ${props.color} }
`
const ExampleComponent = props => {
const { className, styles } = dynamicStyles(props)
return (
<div className={className}>
howdy
{styles}
</div>
)
}
================================================
FILE: test/fixtures/mixed-global-scoped.js
================================================
const Test = () => (
<style global jsx>
{'p { color: red }'}
</style>
)
export default () => (
<div>
<p>test</p>
<style jsx global>{`
body {
background: red;
}
`}</style>
<style jsx>{'p { color: red }'}</style>
</div>
)
================================================
FILE: test/fixtures/multiple-jsx.js
================================================
const attrs = {
id: 'test'
}
const Test1 = () => (
<div>
<span {...attrs} data-test="test">
test
</span>
<Component />
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
)
const Test2 = () => <span>test</span>
const Test3 = () => (
<div>
<span>test</span>
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
)
export default class {
render() {
return (
<div>
<p>test</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
}
}
================================================
FILE: test/fixtures/nested-style-tags.js
================================================
import styles from './styles'
export default () => (
<div>
<span>
test
<style jsx>
{`
div {
color: red;
}
` /* this should not be transpiled */}
</style>
</span>
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
)
export const Test = () => (
<div>
<span>
test
<style jsx>
{`
div {
color: red;
}
` /* this should not be transpiled */}
</style>
<Component>
<style jsx>
{`
div {
color: red;
}
` /* this should not be transpiled */}
</style>
<style jsx>{styles}</style> {/* this should not be transpiled */}
</Component>
</span>
<style jsx>{`
span {
color: red;
}
`}</style>
<style jsx>{styles}</style>
</div>
)
================================================
FILE: test/fixtures/non-styled-jsx-style.js
================================================
export default () => (
<div>
<p>woot</p>
<style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }} />
<style jsx>{'p { color: red }'}</style>
</div>
)
================================================
FILE: test/fixtures/not-styled-jsx-tagged-templates.js
================================================
import css from 'hell'
const color = 'red'
const bar = css`
div {
font-size: 3em;
}
`
export const uh = bar
export const foo = css`
div {
color: ${color};
}
`
export default css`
div {
font-size: 3em;
}
p {
color: ${color};
}
`
const Title = styled.h1`
color: red;
font-size: 50px;
`
const AnotherTitle = Title.extend`
color: blue;
`
export const Component = () => <AnotherTitle>My page</AnotherTitle>
================================================
FILE: test/fixtures/plugins/another-plugin.js
================================================
export default css => css.replace(/div/g, 'span')
================================================
FILE: test/fixtures/plugins/invalid-plugin.js
================================================
export default 'invalid'
================================================
FILE: test/fixtures/plugins/multiple-options.js
================================================
export default (css, settings) => {
let { babel, ...s } = settings
let { filename, ...b } = babel
s.babel = b
if (!filename) {
throw new Error('filename should be defined')
}
return `.test { content: "${JSON.stringify(s)}"; }`
}
================================================
FILE: test/fixtures/plugins/options.js
================================================
export default (css, settings) => settings.test
================================================
FILE: test/fixtures/plugins/plugin.js
================================================
export default css => `TEST (${css}) EOTEST`
================================================
FILE: test/fixtures/simple-fragment.js
================================================
export default () => (
<>
<p>This should throw in babel 6</p>
<style jsx>{`
p {
color: orange;
}
`}</style>
</>
)
================================================
FILE: test/fixtures/source-maps.js
================================================
export default () => (
<div>
<p>test</p>
<p>woot</p>
<style jsx>{'p { color: red }'}</style>
</div>
)
================================================
FILE: test/fixtures/stateless.js
================================================
export default () => (
<div>
<p>test</p>
<p>woot</p>
<p>woot</p>
<style jsx>{'p { color: red }'}</style>
</div>
)
================================================
FILE: test/fixtures/styles-external-invalid.js
================================================
import css from 'styled-jsx/css'
const color = 'red'
export const foo = css`
div {
color: ${color};
}
`
const props = { color: 'red ' }
export default css`
div {
font-size: 3em;
color: ${props.color};
}
p {
color: ${this.props.color};
}
`
================================================
FILE: test/fixtures/styles-external-invalid2.js
================================================
import css from 'styled-jsx/css'
const color = 'red'
export const foo = css`
div {
color: ${color};
}
`
export default css`
div {
font-size: 3em;
}
p {
color: ${props.color};
}
`
================================================
FILE: test/fixtures/styles.js
================================================
import css, { resolve, global } from 'styled-jsx/css'
import colors, { size } from './constants'
const color = 'red'
const bar = css`
div {
font-size: 3em;
}
`
const baz = css.global`
div {
font-size: 3em;
}
`
const a = global`
div {
font-size: ${size}em;
}
`
export const uh = bar
export const foo = css`
div {
color: ${color};
}
`
css.resolve`
div {
color: ${colors.green.light};
}
a { color: red }
`
const b = resolve`
div {
color: ${colors.green.light};
}
a { color: red }
`
const dynamic = colors => {
const b = resolve`
div {
color: ${colors.green.light};
}
a { color: red }
`
}
export default css.resolve`
div {
font-size: 3em;
}
p {
color: ${color};
}
`
================================================
FILE: test/fixtures/styles2.js
================================================
import css from 'styled-jsx/css'
module.exports = css`
div {
font-size: 3em;
}
`
================================================
FILE: test/fixtures/transform.css
================================================
html {
background-image: linear-gradient(
0deg,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0.8)
),
url(/static/background.svg);
}
:global(p) {
color: blue;
}
:global(p) {
color: blue;
}
:global(p),
a {
color: blue;
}
:global(.foo + a) {
color: red;
}
:global(body) {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif;
}
p {
color: red;
}
p {
color: red;
}
* {
color: blue;
}
[href='woot'] {
color: red;
}
p a span {
color: red;
}
p :global(span) {
background: blue;
}
p a[title="'w ' ' t'"] {
margin: auto;
}
p :global(span:not(.test)) {
color: green;
}
p,
h1 {
color: blue;
animation: hahaha 3s ease forwards infinite;
animation-name: hahaha;
animation-delay: 100ms;
}
p {
animation: hahaha 1s, hehehe 2s;
}
p:hover {
color: red;
}
p::before {
color: red;
}
:hover {
color: red;
}
::before {
color: red;
}
:hover p {
color: red;
}
p + a {
color: red;
}
p ~ a {
color: red;
}
p > a {
color: red;
}
@keyframes hahaha {
from {
top: 0;
}
to {
top: 100;
}
}
@keyframes hehehe {
from {
left: 0;
}
to {
left: 100;
}
}
@media (min-width: 500px) {
.test {
color: red;
}
}
.test {
/* test, test */
display: block;
/*
test
*/
}
.inline-flex {
display: inline-flex;
}
.flex {
display: flex;
}
.test {
box-shadow: 0 0 10px black, inset 0 0 5px black;
}
.test[title=','] {
display: inline-block;
}
.test.is-status .test {
color: red;
}
.a-selector:hover,
.a-selector:focus {
outline: none;
}
@media (min-width: 1px) and (max-width: 768px) {
[class*='grid__col--'] {
margin-top: 12px;
margin-bottom: 12px;
}
}
@media (max-width: 64em) {
.test {
margin-bottom: 1em;
}
@supports (-moz-appearance: none) and (display: contents) {
.test {
margin-bottom: 2rem;
}
}
}
================================================
FILE: test/fixtures/whitespace.js
================================================
export default () => (
<div>
<p>test</p>
<p>woot</p>
<p>woot</p>
<style jsx>{'p { color: red }'}</style>
</div>
)
================================================
FILE: test/fixtures/with-plugins.js
================================================
import styles from './styles'
const color = 'red'
export default () => (
<div>
<p>test</p>
<style jsx>{`
div.${color} {
color: ${otherColor};
}
`}</style>
<style jsx>{styles}</style>
</div>
)
================================================
FILE: test/helpers/babel-test.macro.js
================================================
import { macro } from '../../src/babel'
const m = macro()
console.log('m', m)
export default m
================================================
FILE: test/helpers/with-mock.js
================================================
export default function withMock(mockFn, testFn) {
return t => {
const cleanUp = mockFn(t)
if (typeof cleanUp !== 'function') {
throw new TypeError('mockFn should return a cleanup function')
}
testFn(t)
cleanUp(t)
}
}
export function withMockDocument(t) {
const originalDocument = globalThis.document
// We need to stub a document in order to simulate the meta tag
globalThis.document = {
querySelector(query) {
t.is(query, 'meta[property="csp-nonce"]')
return {
getAttribute(attr) {
t.is(attr, 'content')
return 'test-nonce'
}
}
}
}
return () => {
globalThis.document = originalDocument
}
}
================================================
FILE: test/index.js
================================================
// Packages
import test from 'ava'
import React from 'react'
import ReactDOM from 'react-dom/server'
// Ours
import plugin from '../src/babel'
import JSXStyle from '../src/style'
import {
StyleRegistry,
useStyleRegistry,
createStyleRegistry
} from '../src/stylesheet-registry'
import _transform, { transformSource as _transformSource } from './_transform'
const flushToHTML = (registry, options = {}) => {
const cssRules = registry.cssRules()
registry.flush()
return cssRules.reduce((html, args) => {
const id = args[0]
const css = args[1]
html += `<style id="__${id}"${
options.nonce ? ` nonce="${options.nonce}"` : ''
}>${css}</style>`
return html
}, '')
}
function mapCssRulesToReact(cssRules, options = {}) {
return cssRules.map(args => {
const id = args[0]
const css = args[1]
return React.createElement('style', {
id: `__${id}`,
// Avoid warnings upon render with a key
key: `__${id}`,
nonce: options.nonce ? options.nonce : undefined,
dangerouslySetInnerHTML: {
__html: css
}
})
})
}
function flushToReact(registry, options = {}) {
const cssRules = registry.cssRules()
registry.flush()
return mapCssRulesToReact(cssRules, options)
}
const transform = (file, opts = {}) =>
_transform(file, {
plugins: [plugin],
...opts
})
const transformSource = (src, opts = {}) =>
_transformSource(src.trim(), {
plugins: [[plugin, opts]],
...opts
})
test('handles dynamic `this` value inside of arrow function', async t => {
const { code } = await transform(
'./fixtures/dynamic-this-value-in-arrow.js',
{
plugins: ['@babel/plugin-transform-arrow-functions', plugin]
}
)
t.snapshot(code)
})
test('works with stateless', async t => {
const { code } = await transform('./fixtures/stateless.js')
t.snapshot(code)
})
test('works with fragment', async t => {
const { code } = await transform('./fixtures/fragment.js')
t.snapshot(code)
})
test('ignores whitespace around expression container', async t => {
const { code } = await transform('./fixtures/whitespace.js')
t.snapshot(code)
})
test('works with class', async t => {
const { code } = await transform('./fixtures/class.js')
t.snapshot(code)
})
test('ignores when attribute is absent', async t => {
const { code } = await transform('./fixtures/absent.js')
t.snapshot(code)
})
test('works with global styles', async t => {
const { code } = await transform('./fixtures/global.js')
t.snapshot(code)
})
test('generates source maps', async t => {
const { code } = await transform('./fixtures/source-maps.js', {
plugins: [[plugin, { sourceMaps: true }]]
})
t.snapshot(code)
})
test('mixed global and scoped', async t => {
const { code } = await transform('./fixtures/mixed-global-scoped.js')
t.snapshot(code)
})
test('works with multiple jsx blocks', async t => {
const { code } = await transform('./fixtures/multiple-jsx.js')
t.snapshot(code)
})
test('should not add the data-jsx attribute to components instances', async t => {
const { code } = await transform('./fixtures/component-attribute.js')
t.snapshot(code)
})
test('works with expressions in template literals', async t => {
const { code } = await transform('./fixtures/expressions.js')
t.snapshot(code)
})
test('should have different jsx ids', async t => {
const { code } = await transform('./fixtures/different-jsx-ids.js')
t.snapshot(code)
})
test('works with non styled-jsx styles', async t => {
const { code } = await transform('./fixtures/non-styled-jsx-style.js')
t.snapshot(code)
})
test('works with css tagged template literals in the same file', async t => {
const { code } = await transform('./fixtures/css-tag-same-file.js')
t.snapshot(code)
})
test('works with dynamic element', async t => {
const { code } = await transform('./fixtures/dynamic-element.js')
t.snapshot(code)
})
test('works with dynamic element in class', async t => {
const { code } = await transform('./fixtures/dynamic-element-class.js')
t.snapshot(code)
})
test('works with existing identifier for _JSXStyle', async t => {
const { code } = await transform('./fixtures/conflicts.js')
t.snapshot(code)
})
test('does not transpile nested style tags', async t => {
const { message } = await t.throwsAsync(() =>
transform('./fixtures/nested-style-tags.js')
)
t.regex(message, /detected nested style tag/i)
})
test('works with exported jsx-style (CommonJS modules)', async t => {
const { code } = await transformSource(
'module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>',
{
plugins: [plugin, '@babel/plugin-transform-modules-commonjs']
}
)
t.snapshot(code)
})
test('works with exported non-jsx style (CommonJS modules)', async t => {
const { code } = await transformSource(
'module.exports = () => <p><style>{`p { color:red; }`}</style></p>',
{
plugins: [plugin, '@babel/plugin-transform-modules-commonjs']
}
)
t.snapshot(code)
})
test('sever rendering with hook api', t => {
const registry = createStyleRegistry()
function Head() {
const registry = useStyleRegistry()
const styles = registry.styles()
registry.flush()
// should be empty and `push` won't effect styles
const stylesAfterFlushed = registry.styles()
styles.push(...stylesAfterFlushed)
return React.createElement('head', null, styles)
}
function App() {
const color = 'green'
return React.createElement(
'div',
null,
React.createElement(Head),
React.createElement(JSXStyle, { id: 2 }, 'div { color: blue }'),
React.createElement(JSXStyle, { id: 3 }, `div { color: ${color} }`)
)
}
// Expected DOM string
const styles =
'<style id="__jsx-2">div { color: blue }</style>' +
'<style id="__jsx-3">div { color: green }</style>'
const expected = `<head>${styles}</head>`
const createContextualApp = type =>
React.createElement(StyleRegistry, { registry }, React.createElement(type))
// Render using react
ReactDOM.renderToString(createContextualApp(App))
const html = ReactDOM.renderToStaticMarkup(createContextualApp(Head))
t.is(html, expected)
})
test('server rendering', t => {
function App() {
const color = 'green'
return React.createElement(
'div',
null,
React.createElement(
JSXStyle,
{
id: 1
},
'p { color: red }'
),
React.createElement(
JSXStyle,
{
id: 2
},
'div { color: blue }'
),
React.createElement(
JSXStyle,
{
id: 3
},
`div { color: ${color} }`
)
)
}
// Expected CSS
const expected =
'<style id="__jsx-1">p { color: red }</style>' +
'<style id="__jsx-2">div { color: blue }</style>' +
'<style id="__jsx-3">div { color: green }</style>'
const registry = createStyleRegistry()
const createApp = () =>
React.createElement(StyleRegistry, { registry }, React.createElement(App))
// Render using react
ReactDOM.renderToString(createApp())
const html = ReactDOM.renderToStaticMarkup(
React.createElement('head', null, flushToReact(registry))
)
t.is(html, `<head>${expected}</head>`)
// Assert that memory is empty
t.is(0, registry.cssRules().length)
t.is('', flushToHTML(registry))
// Render to html again
ReactDOM.renderToString(createApp())
t.is(expected, flushToHTML(registry))
// Assert that memory is empty
t.is(0, flushToReact(registry).length)
t.is('', flushToHTML(registry))
})
test('server rendering with nonce', t => {
function App() {
const color = 'green'
return React.createElement(
'div',
null,
React.createElement(
JSXStyle,
{
id: 1
},
'p { color: red }'
),
React.createElement(
JSXStyle,
{
id: 2
},
'div { color: blue }'
),
React.createElement(
JSXStyle,
{
id: 3
},
`div { color: ${color} }`
)
)
}
const registry = createStyleRegistry()
const createApp = () =>
React.createElement(StyleRegistry, { registry }, React.createElement(App))
// Expected CSS
const expected =
'<style id="__jsx-1" nonce="test-nonce">p { color: red }</style>' +
'<style id="__jsx-2" nonce="test-nonce">div { color: blue }</style>' +
'<style id="__jsx-3" nonce="test-nonce">div { color: green }</style>'
// Render using react
ReactDOM.renderToString(createApp())
const html = ReactDOM.renderToStaticMarkup(
React.createElement(
'head',
null,
flushToReact(registry, { nonce: 'test-nonce' })
)
)
t.is(html, `<head>${expected}</head>`)
// Assert that memory is empty
t.is(0, flushToReact(registry, { nonce: 'test-nonce' }).length)
t.is('', flushToHTML(registry, { nonce: 'test-nonce' }))
// Render to html again
ReactDOM.renderToString(createApp())
t.is(expected, flushToHTML(registry, { nonce: 'test-nonce' }))
// Assert that memory is empty
t.is(0, flushToReact(registry, { nonce: 'test-nonce' }).length)
t.is('', flushToHTML(registry, { nonce: 'test-nonce' }))
})
test('optimized styles do not contain new lines', t => {
function App() {
return React.createElement(
'div',
null,
React.createElement(
JSXStyle,
{
id: 1
},
['p { color: red }', '.foo { color: hotpink }']
)
)
}
const registry = createStyleRegistry()
const createApp = () =>
React.createElement(StyleRegistry, { registry }, React.createElement(App))
ReactDOM.renderToString(createApp())
const html = ReactDOM.renderToStaticMarkup(
React.createElement('head', null, flushToReact(registry))
)
const expected =
'<style id="__jsx-1">p { color: red }.foo { color: hotpink }</style>'
t.is(html, `<head>${expected}</head>`)
})
================================================
FILE: test/index.ts
================================================
import {} from 'styled-jsx'
================================================
FILE: test/macro.js
================================================
// Packages
import test from 'ava'
// Ours
import macros from 'babel-plugin-macros'
import jsx from '@babel/plugin-syntax-jsx'
import _transform, { transformSource as _transformSource } from './_transform'
const transform = (file, opts = {}) =>
_transform(file, {
plugins: [macros, jsx],
...opts
})
const transformSource = (src, opts = {}) =>
_transformSource(src.trim(), {
filename: './index.js',
plugins: [macros, jsx],
...opts
})
test('transpiles correctly', async t => {
const { code } = await transform('./fixtures/macro.js')
t.snapshot(code)
})
test('throws when using the default export directly', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import css from './test/helpers/babel-test.macro'
css\`div { color: red }\`
`)
)
t.regex(message, /can't use default import directly/i)
})
test('throws when using the default export directly and it is not called css', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import foo from './test/helpers/babel-test.macro'
foo\`div { color: red }\`
`)
)
t.regex(message, /can't use default import directly/i)
})
test('throws when using the default export directly and it is not called resolve', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import resolve from './test/helpers/babel-test.macro'
resolve\`div { color: red }\`
`)
)
t.regex(message, /can't use default import directly/i)
})
test('throws when using an invalid method from the default export', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import css from './test/helpers/babel-test.macro'
css.foo\`div { color: red }\`
`)
)
t.regex(message, /using an invalid tag/i)
})
test('throws when using a named import different than resolve', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import { foo } from './test/helpers/babel-test.macro'
foo\`div { color: red }\`
`)
)
t.regex(message, /imported an invalid named import/i)
})
test('throws when using a named import as a member expression', async t => {
const { message } = await t.throwsAsync(() =>
transformSource(`
import { resolve } from './test/helpers/babel-test.macro'
resolve.foo\`div { color: red }\`
`)
)
t.regex(message, /can't use named import/i)
})
test('can alias the named import', async t => {
const { code } = await transformSource(`
import { resolve as foo } from './test/helpers/babel-test.macro'
foo\`div { color: red }\`
`)
t.snapshot(code)
})
test('injects JSXStyle for nested scope', async t => {
const { code } = await transformSource(`
import { resolve } from './test/helpers/babel-test.macro'
function test() {
resolve\`div { color: red }\`
}
`)
t.snapshot(code)
})
================================================
FILE: test/plugins.js
================================================
// Packages
import test from 'ava'
// Ours
import babelPlugin from '../src/babel'
import babelTestPlugin from '../src/babel-test'
import { combinePlugins } from '../src/_utils'
import _transform from './_transform'
import testPlugin1 from './fixtures/plugins/plugin'
import testPlugin2 from './fixtures/plugins/another-plugin'
const transform = (file, opts = {}) =>
_transform(file, {
plugins: [
[
babelPlugin,
{ plugins: [require.resolve('./fixtures/plugins/another-plugin')] }
]
],
...opts
})
test('combinePlugins returns an identity function when plugins is undefined', t => {
const test = 'test'
const plugins = combinePlugins()
t.is(plugins(test), test)
})
test('combinePlugins throws if plugins is not an array', t => {
t.throws(() => {
combinePlugins(2)
})
})
test('combinePlugins throws if plugins is not an array of strings', t => {
t.throws(() => {
combinePlugins(['test', 2])
})
})
test('combinePlugins throws if loaded plugins are not functions', t => {
t.throws(() => {
combinePlugins([
require.resolve('./fixtures/plugins/plugin'),
require.resolve('./fixtures/plugins/invalid-plugin')
])
})
})
test('combinePlugins works with a single plugin', t => {
const plugins = combinePlugins([require.resolve('./fixtures/plugins/plugin')])
t.is(testPlugin1('test'), plugins('test'))
})
test('combinePlugins works with options', t => {
const expectedOption = 'my-test'
const plugins = combinePlugins([
[
require.resolve('./fixtures/plugins/options'),
{
test: expectedOption
}
]
])
t.is(plugins(''), expectedOption)
})
test('combinePlugins applies plugins left to right', t => {
const plugins = combinePlugins([
require.resolve('./fixtures/plugins/plugin'),
require.resolve('./fixtures/plugins/another-plugin')
])
t.is(testPlugin2(testPlugin1('test')), plugins('test'))
})
test('applies plugins', async t => {
const { code } = await transform('./fixtures/with-plugins.js')
t.snapshot(code)
})
test('babel-test plugin strips jsx attribute', async t => {
const { code } = await transform('./fixtures/with-plugins.js', {
plugins: [babelTestPlugin]
})
t.snapshot(code)
})
test('passes options to plugins', async t => {
const { code } = await transform('./fixtures/with-plugins.js', {
plugins: [
[
babelPlugin,
{
plugins: [
[require.resolve('./fixtures/plugins/options'), { foo: true }],
require.resolve('./fixtures/plugins/multiple-options'),
[
require.resolve('./fixtures/plugins/multiple-options'),
{ foo: false }
]
],
vendorPrefixes: false
}
]
]
})
t.snapshot(code)
})
test('combinePlugins throws if passing an option called `babel`', t => {
t.throws(() => {
combinePlugins([['test', { babel: true }]])
})
})
test('combinePlugins memoizes calls', t => {
const v1 = combinePlugins([require.resolve('./fixtures/plugins/plugin')])
const v2 = combinePlugins([require.resolve('./fixtures/plugins/plugin')])
t.is(v1('test div'), v2('test div'))
const v3 = combinePlugins([
require.resolve('./fixtures/plugins/plugin'),
require.resolve('./fixtures/plugins/another-plugin')
])
t.not(v2('test div'), v3('test div'))
})
================================================
FILE: test/snapshots/attribute.js.md
================================================
# Snapshot report for `test/attribute.js`
The actual snapshot is saved in `attribute.js.snap`.
Generated by [AVA](https://avajs.dev).
## rewrites className
> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
export default (() => {␊
const Element = 'div';␊
return <div className={"jsx-2886504620"}>␊
<div {...test.test} className={"jsx-2886504620" + " " + (test.test && test.test.className != null && test.test.className || "test")} />␊
<div {...test.test.test} className={"jsx-2886504620" + " " + (test.test.test && test.test.test.className != null && test.test.test.className || "test")} />␊
<div {...this.test.test} className={"jsx-2886504620" + " " + (this.test.test && this.test.test.className != null && this.test.test.className || "test")} />␊
<div data-test="test" className={"jsx-2886504620"} />␊
<div className={"jsx-2886504620" + " " + "test"} />␊
<div className={"jsx-2886504620" + " " + 'test'} />␊
<div className={"jsx-2886504620" + " " + \`test\`} />␊
<div className={"jsx-2886504620" + " " + \`test${true ? ' test2' : ''}\`} />␊
<div className={"jsx-2886504620" + " " + ('test ' + test || "")} />␊
<div className={"jsx-2886504620" + " " + (['test', 'test2'].join(' ') || "")} />␊
<div className={"jsx-2886504620" + " " + (true && 'test' || "")} />␊
<div className={"jsx-2886504620" + " " + ((test ? 'test' : null) || "")} />␊
<div className={"jsx-2886504620" + " " + (test || "")} />␊
<div className={"jsx-2886504620" + " " + (test && 'test' || "")} />␊
<div className={"jsx-2886504620" + " " + (test && test('test') || "")} />␊
<div className={"jsx-2886504620" + " " + (undefined || "")} />␊
<div className={"jsx-2886504620" + " " + (null || "")} />␊
<div className={"jsx-2886504620" + " " + (false || "")} />␊
<div data-test className={"jsx-2886504620" + " " + 'test'} />␊
<div data-test className={"jsx-2886504620" + " " + 'test'} />␊
<div data-test="test" className={"jsx-2886504620" + " " + 'test'} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || 'test')} />␊
<div {...props} {...rest} className={"jsx-2886504620" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || 'test')} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || \`test ${test ? 'test' : ''}\`)} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || test && test('test') || "")} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || test && test('test') && 'test' || "")} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || test && test('test') && test2('test') || "")} />␊
<div {...props} className={"jsx-2886504620" + " " + 'test'} />␊
<div {...props} {...rest} className={"jsx-2886504620" + " " + 'test'} />␊
<div {...props} {...rest} className={"jsx-2886504620" + " " + (rest && rest.className != null && rest.className || 'test')} />␊
<div {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || "")} />␊
<div {...props} {...rest} className={"jsx-2886504620" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")} />␊
<div {...props} data-foo {...rest} className={"jsx-2886504620" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")} />␊
<div {...props} data-foo {...rest} className={"jsx-2886504620" + " " + (rest && rest.className != null && rest.className || 'test')} />␊
<div {...{␊
id: 'foo'␊
}} className={"jsx-2886504620"} />␊
<div className={"jsx-2886504620" + " " + 'foo'} />␊
<div {...{␊
className: 'foo'␊
}} className={"jsx-2886504620" + " " + "test"} />␊
<div className="test" className={"jsx-2886504620" + " " + 'foo'} />␊
<div {...bar} className={"jsx-2886504620" + " " + (bar && bar.className != null && bar.className || 'foo')} />␊
<div {...{␊
className: 'foo'␊
}} {...bar} className={"jsx-2886504620" + " " + "test"} />␊
<div className="test" {...bar} className={"jsx-2886504620" + " " + (bar && bar.className != null && bar.className || 'foo')} />␊
<div className="test" className={"jsx-2886504620" + " " + (props.className || "")} />␊
<div className="test" {...bar} className={"jsx-2886504620" + " " + (bar && bar.className != null && bar.className || props.className || "")} />␊
<div className="test" {...bar} className={"jsx-2886504620" + " " + (props.className || "")} />␊
<div {...bar()} className={"jsx-2886504620" + " " + "test"} />␊
<Element className={"jsx-2886504620"} />␊
<Element className={"jsx-2886504620" + " " + "test"} />␊
<Element {...props} className={"jsx-2886504620" + " " + (props && props.className != null && props.className || "")} />␊
<_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>␊
</div>;␊
});`
## generate attribute for mixed modes (global, static, dynamic)
> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import styles from './styles';␊
␊
const styles2 = require('./styles2'); // external only␊
␊
␊
export const Test1 = () => <div className={\`jsx-${styles.__hash} jsx-${styles2.__hash}\`}>␊
<p className={\`jsx-${styles.__hash} jsx-${styles2.__hash}\`}>external only</p>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊
</div>; // external and static␊
␊
export const Test2 = () => <div className={"jsx-2982525546 " + \`jsx-${styles.__hash}\`}>␊
<p className={"jsx-2982525546 " + \`jsx-${styles.__hash}\`}>external and static</p>␊
<_JSXStyle id={"2982525546"}>{"p.jsx-2982525546{color:red;}"}</_JSXStyle>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>; // external and dynamic␊
␊
export const Test3 = ({␊
color␊
}) => <div className={\`jsx-${styles.__hash}\` + " " + _JSXStyle.dynamic([["1947484460", [color]]])}>␊
<p className={\`jsx-${styles.__hash}\` + " " + _JSXStyle.dynamic([["1947484460", [color]]])}>external and dynamic</p>␊
<_JSXStyle id={"1947484460"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:${color};}\`}</_JSXStyle>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>; // external, static and dynamic␊
␊
export const Test4 = ({␊
color␊
}) => <div className={\`jsx-${styles.__hash}\` + " jsx-3190985107 " + _JSXStyle.dynamic([["1336444426", [color]]])}>␊
<p className={\`jsx-${styles.__hash}\` + " jsx-3190985107 " + _JSXStyle.dynamic([["1336444426", [color]]])}>external, static and dynamic</p>␊
<_JSXStyle id={"3190985107"}>{"p.jsx-3190985107{display:inline-block;}"}</_JSXStyle>␊
<_JSXStyle id={"1336444426"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:${color};}\`}</_JSXStyle>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>; // static only␊
␊
export const Test5 = () => <div className={"jsx-1372669040"}>␊
<p className={"jsx-1372669040"}>static only</p>␊
<_JSXStyle id={"3190985107"}>{"p.jsx-1372669040{display:inline-block;}"}</_JSXStyle>␊
<_JSXStyle id={"2982525546"}>{"p.jsx-1372669040{color:red;}"}</_JSXStyle>␊
</div>; // static and dynamic␊
␊
export const Test6 = ({␊
color␊
}) => <div className={"jsx-3190985107 " + _JSXStyle.dynamic([["1336444426", [color]]])}>␊
<p className={"jsx-3190985107 " + _JSXStyle.dynamic([["1336444426", [color]]])}>static and dynamic</p>␊
<_JSXStyle id={"3190985107"}>{"p.jsx-3190985107{display:inline-block;}"}</_JSXStyle>␊
<_JSXStyle id={"1336444426"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:${color};}\`}</_JSXStyle>␊
</div>; // dynamic only␊
␊
export const Test7 = ({␊
color␊
}) => <div className={_JSXStyle.dynamic([["1947484460", [color]]])}>␊
<p className={_JSXStyle.dynamic([["1947484460", [color]]])}>dynamic only</p>␊
<_JSXStyle id={"1947484460"} dynamic={[color]}>{\`p.__jsx-style-dynamic-selector{color:${color};}\`}</_JSXStyle>␊
</div>; // dynamic with scoped compound variable␊
␊
export const Test8 = ({␊
color␊
}) => {␊
if (color) {␊
const innerProps = {␊
color␊
};␊
return <div className={_JSXStyle.dynamic([["1791723528", [innerProps.color]]])}>␊
<p className={_JSXStyle.dynamic([["1791723528", [innerProps.color]]])}>dynamic with scoped compound variable</p>␊
<_JSXStyle id={"1791723528"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:${innerProps.color};}\`}</_JSXStyle>␊
</div>;␊
}␊
}; // dynamic with compound variable␊
␊
export const Test9 = ({␊
color␊
}) => {␊
const innerProps = {␊
color␊
};␊
return <div className={_JSXStyle.dynamic([["248922593", [innerProps.color]]])}>␊
<p className={_JSXStyle.dynamic([["248922593", [innerProps.color]]])}>dynamic with compound variable</p>␊
<_JSXStyle id={"248922593"} dynamic={[innerProps.color]}>{\`p.__jsx-style-dynamic-selector{color:${innerProps.color};}\`}</_JSXStyle>␊
</div>;␊
};␊
const foo = 'red'; // dynamic with constant variable␊
␊
export const Test10 = () => <div className={"jsx-461505126"}>␊
<p className={"jsx-461505126"}>dynamic with constant variable</p>␊
<_JSXStyle id={"461505126"}>{\`p.jsx-461505126{color:${foo};}\`}</_JSXStyle>␊
</div>; // dynamic with complex scope␊
␊
export const Test11 = ({␊
color␊
}) => {␊
const items = Array.from({␊
length: 5␊
}).map((item, i) => <li key={i} className={_JSXStyle.dynamic([["2172653867", [color]]]) + " " + "item"}>␊
<_JSXStyle id={"2172653867"} dynamic={[color]}>{\`.item.__jsx-style-dynamic-selector{color:${color};}\`}</_JSXStyle>␊
Item #{i + 1}␊
</li>);␊
return <ul className="items">{items}</ul>;␊
};`
================================================
FILE: test/snapshots/external.js.md
================================================
# Snapshot report for `test/external.js`
The actual snapshot is saved in `external.js.snap`.
Generated by [AVA](https://avajs.dev).
## transpiles external stylesheets
> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import colors, { size } from './constants';␊
const color = 'red';␊
const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
bar.__hash = "2141779268";␊
const baz = new String("div{font-size:3em;}");␊
baz.__hash = "2141779268";␊
const a = new String(\`div{font-size:${size}em;}\`);␊
a.__hash = "262929833";␊
export const uh = bar;␊
export const foo = new S
gitextract_mv38yaut/ ├── .eslintignore ├── .github/ │ ├── ISSUE_TEMPLATE.md │ └── workflows/ │ ├── main.yml │ └── prs.yml ├── .gitignore ├── .npmrc ├── .prettierrc.json ├── CODEOWNERS ├── Changelog.md ├── babel-test.js ├── babel.js ├── css.d.ts ├── css.js ├── global.d.ts ├── index.d.ts ├── index.js ├── lib/ │ ├── style-transform.js │ └── stylesheet.js ├── license.md ├── macro.d.ts ├── macro.js ├── package.json ├── readme.md ├── src/ │ ├── .babelrc │ ├── _constants.js │ ├── _utils.js │ ├── babel-external.js │ ├── babel-test.js │ ├── babel.js │ ├── index.js │ ├── lib/ │ │ ├── hash.js │ │ ├── style-transform.js │ │ └── stylesheet.js │ ├── macro.js │ ├── style.js │ ├── stylesheet-registry.js │ └── webpack.js ├── style.d.ts ├── style.js ├── test/ │ ├── .babelrc │ ├── __snapshots__/ │ │ ├── attribute.js.snap │ │ ├── external.js.snap │ │ ├── index.js.snap │ │ ├── macro.js.snap │ │ ├── plugins.js.snap │ │ └── styles.js.snap │ ├── _read.js │ ├── _transform.js │ ├── attribute.js │ ├── external.js │ ├── fixtures/ │ │ ├── absent.js │ │ ├── attribute-generation-classname-rewriting.js │ │ ├── attribute-generation-modes.js │ │ ├── class.js │ │ ├── component-attribute.js │ │ ├── conflicts.js │ │ ├── css-tag-same-file.js │ │ ├── different-jsx-ids.js │ │ ├── dynamic-element-class.js │ │ ├── dynamic-element-external.js │ │ ├── dynamic-element.js │ │ ├── dynamic-this-value-in-arrow.js │ │ ├── expressions.js │ │ ├── external-stylesheet-global.js │ │ ├── external-stylesheet-multi-line.js │ │ ├── external-stylesheet.js │ │ ├── fragment.js │ │ ├── global.js │ │ ├── ignore.js │ │ ├── macro.js │ │ ├── mixed-global-scoped.js │ │ ├── multiple-jsx.js │ │ ├── nested-style-tags.js │ │ ├── non-styled-jsx-style.js │ │ ├── not-styled-jsx-tagged-templates.js │ │ ├── plugins/ │ │ │ ├── another-plugin.js │ │ │ ├── invalid-plugin.js │ │ │ ├── multiple-options.js │ │ │ ├── options.js │ │ │ └── plugin.js │ │ ├── simple-fragment.js │ │ ├── source-maps.js │ │ ├── stateless.js │ │ ├── styles-external-invalid.js │ │ ├── styles-external-invalid2.js │ │ ├── styles.js │ │ ├── styles2.js │ │ ├── transform.css │ │ ├── whitespace.js │ │ └── with-plugins.js │ ├── helpers/ │ │ ├── babel-test.macro.js │ │ └── with-mock.js │ ├── index.js │ ├── index.ts │ ├── macro.js │ ├── plugins.js │ ├── snapshots/ │ │ ├── attribute.js.md │ │ ├── attribute.js.snap │ │ ├── external.js.md │ │ ├── external.js.snap │ │ ├── index.js.md │ │ ├── index.js.snap │ │ ├── macro.js.md │ │ ├── macro.js.snap │ │ ├── plugins.js.md │ │ ├── plugins.js.snap │ │ ├── styles.js.md │ │ └── styles.js.snap │ ├── styles.js │ ├── stylesheet-registry.js │ └── stylesheet.js ├── tsconfig.json └── webpack.js
SYMBOL INDEX (87 symbols across 25 files)
FILE: css.js
function notTranspiledError (line 1) | function notTranspiledError(name) {
function css (line 9) | function css() {
FILE: global.d.ts
type StyleHTMLAttributes (line 4) | interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
FILE: index.d.ts
type StyledJsxStyleRegistry (line 9) | type StyledJsxStyleRegistry = {
FILE: src/_constants.js
constant GLOBAL_ATTRIBUTE (line 1) | const GLOBAL_ATTRIBUTE = 'global'
constant STYLE_ATTRIBUTE (line 2) | const STYLE_ATTRIBUTE = 'jsx'
constant STYLE_COMPONENT (line 3) | const STYLE_COMPONENT = '_JSXStyle'
constant STYLE_COMPONENT_DYNAMIC (line 4) | const STYLE_COMPONENT_DYNAMIC = 'dynamic'
constant STYLE_COMPONENT_ID (line 5) | const STYLE_COMPONENT_ID = 'id'
FILE: src/_utils.js
method Identifier (line 139) | Identifier(path) {
method MemberExpression (line 149) | MemberExpression(path) {
method ThisExpression (line 159) | ThisExpression(path) {
function log (line 666) | function log(message) {
FILE: src/babel-external.js
function processTaggedTemplateExpression (line 16) | function processTaggedTemplateExpression({
function addHash (line 121) | function addHash(exportIdentifier, hash) {
method ImportDeclaration (line 133) | ImportDeclaration(path, state) {
method Program (line 240) | Program(path, state) {
FILE: src/babel-test.js
method JSXOpeningElement (line 7) | JSXOpeningElement(path) {
FILE: src/babel.js
function macro (line 22) | function macro() {
function test (line 26) | function test() {
method JSXOpeningElement (line 32) | JSXOpeningElement(path, state) {
method enter (line 69) | enter(path, state) {
method exit (line 195) | exit(path, state) {
method enter (line 277) | enter(path, state) {
method enter (line 300) | enter(path, state) {
method exit (line 319) | exit(path, state) {
FILE: src/lib/hash.js
function computeId (line 11) | function computeId(baseId, props) {
function computeSelector (line 31) | function computeSelector(id, css) {
FILE: src/lib/style-transform.js
function disableNestingPlugin (line 6) | function disableNestingPlugin(...args) {
function sourceMapsPlugin (line 25) | function sourceMapsPlugin(...args) {
function transform (line 94) | function transform(hash, styles, settings = {}) {
FILE: src/lib/stylesheet.js
class StyleSheet (line 12) | class StyleSheet {
method constructor (line 13) | constructor({ name = 'stylesheet', optimizeForSpeed = isProd } = {}) {
method setOptimizeForSpeed (line 34) | setOptimizeForSpeed(bool) {
method isOptimizeForSpeed (line 49) | isOptimizeForSpeed() {
method inject (line 53) | inject() {
method getSheetForTag (line 90) | getSheetForTag(tag) {
method getSheet (line 103) | getSheet() {
method insertRule (line 107) | insertRule(rule, index) {
method replaceRule (line 146) | replaceRule(index, rule) {
method deleteRule (line 182) | deleteRule(index) {
method flush (line 198) | flush() {
method cssRules (line 210) | cssRules() {
method makeStyleTag (line 230) | makeStyleTag(name, cssString, relativeToTag) {
method length (line 258) | get length() {
function invariant (line 263) | function invariant(condition, message) {
FILE: src/macro.js
function styledJsxMacro (line 11) | function styledJsxMacro({ references, state }) {
FILE: src/style.js
function JSXStyle (line 11) | function JSXStyle(props) {
FILE: src/stylesheet-registry.js
function mapRulesToStyle (line 6) | function mapRulesToStyle(cssRules, options = {}) {
class StyleSheetRegistry (line 21) | class StyleSheetRegistry {
method constructor (line 22) | constructor({ styleSheet = null, optimizeForSpeed = false } = {}) {
method add (line 41) | add(props) {
method remove (line 76) | remove(props) {
method update (line 98) | update(props, nextProps) {
method flush (line 103) | flush() {
method cssRules (line 111) | cssRules() {
method styles (line 133) | styles(options) {
method getIdAndRules (line 137) | getIdAndRules(props) {
method selectFromServer (line 161) | selectFromServer() {
function invariant (line 174) | function invariant(condition, message) {
function createStyleRegistry (line 183) | function createStyleRegistry() {
function StyleRegistry (line 187) | function StyleRegistry({ registry: configuredRegistry, children }) {
function useStyleRegistry (line 200) | function useStyleRegistry() {
FILE: test/fixtures/class.js
method render (line 2) | render() {
FILE: test/fixtures/css-tag-same-file.js
class Test (line 16) | class Test extends React.Component {
method render (line 17) | render() {
FILE: test/fixtures/dynamic-element-class.js
method render (line 2) | render() {
method render (line 20) | render() {
FILE: test/fixtures/dynamic-this-value-in-arrow.js
class Index (line 3) | class Index extends Component {
method getInitialProps (line 4) | static getInitialProps() {
method render (line 8) | render() {
FILE: test/fixtures/fragment.js
function Component1 (line 33) | function Component1() {
function Component2 (line 41) | function Component2() {
FILE: test/fixtures/multiple-jsx.js
method render (line 33) | render() {
FILE: test/helpers/with-mock.js
function withMock (line 1) | function withMock(mockFn, testFn) {
function withMockDocument (line 13) | function withMockDocument(t) {
FILE: test/index.js
function mapCssRulesToReact (line 29) | function mapCssRulesToReact(cssRules, options = {}) {
function flushToReact (line 45) | function flushToReact(registry, options = {}) {
function Head (line 189) | function Head() {
function App (line 199) | function App() {
function App (line 227) | function App() {
function App (line 288) | function App() {
function App (line 353) | function App() {
FILE: test/styles.js
function assert (line 85) | function assert(input, expected, prefix = '') {
FILE: test/stylesheet-registry.js
function makeRegistry (line 10) | function makeRegistry(options = { optimizeForSpeed: true }) {
method querySelector (line 153) | querySelector(query) {
FILE: test/stylesheet.js
function makeSheet (line 10) | function makeSheet(options = { optimizeForSpeed: true }) {
Condensed preview — 113 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (269K chars).
[
{
"path": ".eslintignore",
"chars": 14,
"preview": "test/fixtures\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 1084,
"preview": "<!--\n\nBefore you open a new issue please take a look at our [**Frequent Asked Questions**](https://github.com/vercel/sty"
},
{
"path": ".github/workflows/main.yml",
"chars": 1088,
"preview": "name: CI\n\non:\n push:\n branches:\n - main\n - alpha\n - beta\n tags:\n - '!*'\n pull_request:\n\njobs"
},
{
"path": ".github/workflows/prs.yml",
"chars": 279,
"preview": "name: 'Lint PR'\non:\n pull_request_target:\n types:\n - opened\n - edited\n - synchronize\n\njobs:\n main:\n "
},
{
"path": ".gitignore",
"chars": 75,
"preview": "# dependencies\nnode_modules\n\n# build output\ndist\nout\n\n# logs\nnpm-debug.log\n"
},
{
"path": ".npmrc",
"chars": 37,
"preview": "package-lock=false\nsave-exact = true\n"
},
{
"path": ".prettierrc.json",
"chars": 39,
"preview": "{ \"singleQuote\": true, \"semi\": false }\n"
},
{
"path": "CODEOWNERS",
"chars": 97,
"preview": "# optionally request a review from @rauchg, @nkzawa, @leo manually\n* @huozhi\n* @ijjk\n"
},
{
"path": "Changelog.md",
"chars": 2082,
"preview": "# Changelog\n\n## [5.0.0]\n\n### Features\n\n- Introduce contextual styles (#744)\n- Opt-in react 18 insertion effect hook when"
},
{
"path": "babel-test.js",
"chars": 68,
"preview": "/* eslint-ignore */\nmodule.exports = require('./dist/babel').test()\n"
},
{
"path": "babel.js",
"chars": 49,
"preview": "module.exports = require('./dist/babel').default\n"
},
{
"path": "css.d.ts",
"chars": 512,
"preview": "// Definitions by: @types/styled-jsx <https://www.npmjs.com/package/@types/styled-jsx>\n\ndeclare module 'styled-jsx/css' "
},
{
"path": "css.js",
"chars": 469,
"preview": "function notTranspiledError(name) {\n throw new Error(\n 'styled-jsx/css: if you are getting this error it means that "
},
{
"path": "global.d.ts",
"chars": 160,
"preview": "import React from 'react'\n\ndeclare module 'react' {\n interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {\n j"
},
{
"path": "index.d.ts",
"chars": 682,
"preview": "/// <reference types=\"./css\" />\n/// <reference types=\"./macro\" />\n/// <reference types=\"./style\" />\n/// <reference types"
},
{
"path": "index.js",
"chars": 41,
"preview": "module.exports = require('./dist/index')\n"
},
{
"path": "lib/style-transform.js",
"chars": 76,
"preview": "/* eslint-ignore */\nmodule.exports = require('../dist/lib/style-transform')\n"
},
{
"path": "lib/stylesheet.js",
"chars": 51,
"preview": "module.exports = require('../dist/lib/stylesheet')\n"
},
{
"path": "license.md",
"chars": 1077,
"preview": "MIT License\n\nCopyright (c) 2016-present Vercel, Inc.\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "macro.d.ts",
"chars": 261,
"preview": "declare module 'styled-jsx/macro' {\n import type { JSX } from \"react\";\n\n namespace macro {\n function resolve(\n "
},
{
"path": "macro.js",
"chars": 49,
"preview": "module.exports = require('./dist/babel').macro()\n"
},
{
"path": "package.json",
"chars": 3319,
"preview": "{\n \"name\": \"styled-jsx\",\n \"version\": \"0.0.0-development\",\n \"license\": \"MIT\",\n \"repository\": \"vercel/styled-jsx\",\n \""
},
{
"path": "readme.md",
"chars": 31649,
"preview": "# styled-jsx\n\n[](h"
},
{
"path": "src/.babelrc",
"chars": 157,
"preview": "{\n \"presets\": [\n [\"@babel/preset-env\", { \"loose\": true }]\n ],\n \"plugins\": [\n [\"@babel/plugin-proposal-object-re"
},
{
"path": "src/_constants.js",
"chars": 209,
"preview": "export const GLOBAL_ATTRIBUTE = 'global'\nexport const STYLE_ATTRIBUTE = 'jsx'\nexport const STYLE_COMPONENT = '_JSXStyle'"
},
{
"path": "src/_utils.js",
"chars": 16898,
"preview": "import path from 'path'\nimport * as t from '@babel/types'\nimport _hashString from 'string-hash'\nimport { SourceMapGenera"
},
{
"path": "src/babel-external.js",
"chars": 6608,
"preview": "import * as t from '@babel/types'\n\nimport {\n getJSXStyleInfo,\n processCss,\n cssToBabelType,\n validateExternalExpress"
},
{
"path": "src/babel-test.js",
"chars": 449,
"preview": "import jsx from '@babel/plugin-syntax-jsx'\n\nexport default function() {\n return {\n inherits: jsx,\n visitor: {\n "
},
{
"path": "src/babel.js",
"chars": 10008,
"preview": "import jsx from '@babel/plugin-syntax-jsx'\n\nimport { visitor as externalStylesVisitor } from './babel-external'\nimport {"
},
{
"path": "src/index.js",
"chars": 165,
"preview": "import 'client-only'\n\nexport {\n StyleRegistry,\n createStyleRegistry,\n useStyleRegistry\n} from './stylesheet-registry'"
},
{
"path": "src/lib/hash.js",
"chars": 1051,
"preview": "import hashString from 'string-hash'\n\nconst sanitize = rule => rule.replace(/\\/style/gi, '\\\\/style')\nconst cache = {}\n\n/"
},
{
"path": "src/lib/style-transform.js",
"chars": 2411,
"preview": "import Stylis from 'stylis'\nimport stylisRuleSheet from 'stylis-rule-sheet'\n\nconst stylis = new Stylis()\n\nfunction disab"
},
{
"path": "src/lib/stylesheet.js",
"chars": 6788,
"preview": "/*\nBased on Glamor's sheet\nhttps://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/she"
},
{
"path": "src/macro.js",
"chars": 4716,
"preview": "import { processTaggedTemplateExpression } from './babel-external'\nimport {\n setStateOptions,\n createReactComponentImp"
},
{
"path": "src/style.js",
"chars": 1679,
"preview": "import React, { useLayoutEffect, useRef } from 'react'\nimport { useStyleRegistry, createStyleRegistry } from './styleshe"
},
{
"path": "src/stylesheet-registry.js",
"chars": 5168,
"preview": "import React, { useState, useContext, createContext } from 'react'\n\nimport DefaultStyleSheet from './lib/stylesheet'\nimp"
},
{
"path": "src/webpack.js",
"chars": 1576,
"preview": "import loaderUtils from 'loader-utils'\n\nconst types = ['scoped', 'global', 'resolve']\n\nexport default function(content) "
},
{
"path": "style.d.ts",
"chars": 91,
"preview": "declare module 'styled-jsx/style' {\n export default function JSXStyle(props: any): null\n}\n"
},
{
"path": "style.js",
"chars": 47,
"preview": "module.exports = require('./dist/index').style\n"
},
{
"path": "test/.babelrc",
"chars": 192,
"preview": "{\n \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"],\n \"plugins\": [\n \"@babel/plugin-proposal-object-rest-spre"
},
{
"path": "test/__snapshots__/attribute.js.snap",
"chars": 9148,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`generate attribute for mixed modes (global, static, dynamic) 1`] = "
},
{
"path": "test/__snapshots__/external.js.snap",
"chars": 7188,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`(optimized) transpiles external stylesheets (CommonJS modules) 1`] "
},
{
"path": "test/__snapshots__/index.js.snap",
"chars": 9951,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`generates source maps 1`] = `\n\"import _JSXStyle from 'styled-jsx/st"
},
{
"path": "test/__snapshots__/macro.js.snap",
"chars": 1586,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`can alias the named import 1`] = `\n\"import _JSXStyle from 'styled-j"
},
{
"path": "test/__snapshots__/plugins.js.snap",
"chars": 1573,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`applies plugins 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n"
},
{
"path": "test/__snapshots__/styles.js.snap",
"chars": 2310,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`transpile styles with attributes 1`] = `\"html.jsx-123{background-im"
},
{
"path": "test/_read.js",
"chars": 189,
"preview": "import { resolve } from 'path'\nimport { promises as fs } from 'fs'\n\nexport default async path => {\n const buffer = awai"
},
{
"path": "test/_transform.js",
"chars": 700,
"preview": "import path from 'path'\nimport { transform, transformFile } from '@babel/core'\n\nexport default (file, opts = {}) =>\n ne"
},
{
"path": "test/attribute.js",
"chars": 565,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport plugin from '../src/babel'\nimport _transform from './_transform'\n\ncon"
},
{
"path": "test/external.js",
"chars": 3456,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport plugin from '../src/babel'\nimport _transform, { transformSource as _t"
},
{
"path": "test/fixtures/absent.js",
"chars": 79,
"preview": "const a = () => (\n <div>\n <p>hi</p>\n <style>{'woot'}</style>\n </div>\n)\n"
},
{
"path": "test/fixtures/attribute-generation-classname-rewriting.js",
"chars": 2397,
"preview": "export default () => {\n const Element = 'div'\n return (\n <div>\n <div className=\"test\" {...test.test} />\n "
},
{
"path": "test/fixtures/attribute-generation-modes.js",
"chars": 2833,
"preview": "import styles from './styles'\n\nconst styles2 = require('./styles2')\n\n// external only\nexport const Test1 = () => (\n <di"
},
{
"path": "test/fixtures/class.js",
"chars": 197,
"preview": "export default class {\n render() {\n return (\n <div>\n <p>test</p>\n <style jsx>{`\n p {\n "
},
{
"path": "test/fixtures/component-attribute.js",
"chars": 154,
"preview": "const Test = () => (\n <div>\n <span>test</span>\n <Component />\n <style jsx>{`\n span {\n color: red;\n"
},
{
"path": "test/fixtures/conflicts.js",
"chars": 210,
"preview": "export const _JSXStyle = '_JSXStyle-literal'\nexport default function() {\n return (\n <div>\n <p>test</p>\n <s"
},
{
"path": "test/fixtures/css-tag-same-file.js",
"chars": 365,
"preview": "import css from 'styled-jsx/css'\n\nexport default ({ children }) => (\n <div>\n <p>{children}</p>\n <style jsx>{style"
},
{
"path": "test/fixtures/different-jsx-ids.js",
"chars": 375,
"preview": "const color = 'red'\nconst otherColor = 'green'\n\nconst A = () => (\n <div>\n <p>test</p>\n <style jsx>{`\n p {\n "
},
{
"path": "test/fixtures/dynamic-element-class.js",
"chars": 543,
"preview": "export default class {\n render() {\n const Element = 'div'\n\n return (\n <Element className=\"root\">\n <p>"
},
{
"path": "test/fixtures/dynamic-element-external.js",
"chars": 225,
"preview": "import styles from './styles2'\n\nexport default ({ level = 1 }) => {\n const Element = `h${level}`\n\n return (\n <Eleme"
},
{
"path": "test/fixtures/dynamic-element.js",
"chars": 750,
"preview": "export default ({ level = 1 }) => {\n const Element = `h${level}`\n\n return (\n <Element className=\"root\">\n <p>dy"
},
{
"path": "test/fixtures/dynamic-this-value-in-arrow.js",
"chars": 919,
"preview": "import React, { Component } from 'react'\n\nexport default class Index extends Component {\n static getInitialProps() {\n "
},
{
"path": "test/fixtures/expressions.js",
"chars": 1672,
"preview": "const darken = c => c\nconst color = 'red'\nconst otherColor = 'green'\nconst mediumScreen = '680px'\nconst animationDuratio"
},
{
"path": "test/fixtures/external-stylesheet-global.js",
"chars": 338,
"preview": "import styles, { foo as styles3 } from './styles'\n\nconst styles2 = require('./styles2')\n\nexport default () => (\n <div>\n"
},
{
"path": "test/fixtures/external-stylesheet-multi-line.js",
"chars": 121,
"preview": "import styles from './styles'\n\nexport default () => (\n <div>\n <p>test</p>\n <style jsx>{styles}</style>\n </div>\n)"
},
{
"path": "test/fixtures/external-stylesheet.js",
"chars": 712,
"preview": "import styles from './styles'\nconst styles2 = require('./styles2')\nimport { foo as styles3 } from './styles'\n\nexport def"
},
{
"path": "test/fixtures/fragment.js",
"chars": 744,
"preview": "import React from 'react'\n\nexport default () => (\n <>\n <p>Testing!!!</p>\n <p className=\"foo\">Bar</p>\n <>\n "
},
{
"path": "test/fixtures/global.js",
"chars": 407,
"preview": "const Test = () => (\n <div>\n <style jsx global>{`\n body {\n color: red;\n }\n\n :hover {\n c"
},
{
"path": "test/fixtures/ignore.js",
"chars": 129,
"preview": "export default () => (\n <div>\n <p>test</p>\n <style jsx>{`\n p {\n color: red;\n }\n `}</style>\n "
},
{
"path": "test/fixtures/macro.js",
"chars": 513,
"preview": "import css, { resolve } from '../../test/helpers/babel-test.macro'\n\nconst { className, styles } = resolve`\n div { color"
},
{
"path": "test/fixtures/mixed-global-scoped.js",
"chars": 269,
"preview": "const Test = () => (\n <style global jsx>\n {'p { color: red }'}\n </style>\n)\n\nexport default () => (\n <div>\n <p>t"
},
{
"path": "test/fixtures/multiple-jsx.js",
"chars": 602,
"preview": "const attrs = {\n id: 'test'\n}\n\nconst Test1 = () => (\n <div>\n <span {...attrs} data-test=\"test\">\n test\n </sp"
},
{
"path": "test/fixtures/nested-style-tags.js",
"chars": 923,
"preview": "import styles from './styles'\n\nexport default () => (\n <div>\n <span>\n test\n <style jsx>\n {`\n "
},
{
"path": "test/fixtures/non-styled-jsx-style.js",
"chars": 176,
"preview": "export default () => (\n <div>\n <p>woot</p>\n <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }} />"
},
{
"path": "test/fixtures/not-styled-jsx-tagged-templates.js",
"chars": 447,
"preview": "import css from 'hell'\n\nconst color = 'red'\n\nconst bar = css`\n div {\n font-size: 3em;\n }\n`\nexport const uh = bar\n\ne"
},
{
"path": "test/fixtures/plugins/another-plugin.js",
"chars": 50,
"preview": "export default css => css.replace(/div/g, 'span')\n"
},
{
"path": "test/fixtures/plugins/invalid-plugin.js",
"chars": 25,
"preview": "export default 'invalid'\n"
},
{
"path": "test/fixtures/plugins/multiple-options.js",
"chars": 245,
"preview": "export default (css, settings) => {\n let { babel, ...s } = settings\n let { filename, ...b } = babel\n s.babel = b\n if"
},
{
"path": "test/fixtures/plugins/options.js",
"chars": 48,
"preview": "export default (css, settings) => settings.test\n"
},
{
"path": "test/fixtures/plugins/plugin.js",
"chars": 45,
"preview": "export default css => `TEST (${css}) EOTEST`\n"
},
{
"path": "test/fixtures/simple-fragment.js",
"chars": 150,
"preview": "export default () => (\n <>\n <p>This should throw in babel 6</p>\n <style jsx>{`\n p {\n color: orange;\n "
},
{
"path": "test/fixtures/source-maps.js",
"chars": 118,
"preview": "export default () => (\n <div>\n <p>test</p>\n <p>woot</p>\n <style jsx>{'p { color: red }'}</style>\n </div>\n)\n"
},
{
"path": "test/fixtures/stateless.js",
"chars": 134,
"preview": "export default () => (\n <div>\n <p>test</p>\n <p>woot</p>\n <p>woot</p>\n <style jsx>{'p { color: red }'}</styl"
},
{
"path": "test/fixtures/styles-external-invalid.js",
"chars": 271,
"preview": "import css from 'styled-jsx/css'\n\nconst color = 'red'\n\nexport const foo = css`\n div {\n color: ${color};\n }\n`\n\nconst"
},
{
"path": "test/fixtures/styles-external-invalid2.js",
"chars": 206,
"preview": "import css from 'styled-jsx/css'\n\nconst color = 'red'\n\nexport const foo = css`\n div {\n color: ${color};\n }\n`\n\nexpor"
},
{
"path": "test/fixtures/styles.js",
"chars": 761,
"preview": "import css, { resolve, global } from 'styled-jsx/css'\nimport colors, { size } from './constants'\nconst color = 'red'\n\nco"
},
{
"path": "test/fixtures/styles2.js",
"chars": 90,
"preview": "import css from 'styled-jsx/css'\n\nmodule.exports = css`\n div {\n font-size: 3em;\n }\n`\n"
},
{
"path": "test/fixtures/transform.css",
"chars": 1909,
"preview": "html {\n background-image: linear-gradient(\n 0deg,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0.8)\n "
},
{
"path": "test/fixtures/whitespace.js",
"chars": 134,
"preview": "export default () => (\n <div>\n <p>test</p>\n <p>woot</p>\n <p>woot</p>\n <style jsx>{'p { color: red }'}</styl"
},
{
"path": "test/fixtures/with-plugins.js",
"chars": 233,
"preview": "import styles from './styles'\nconst color = 'red'\n\nexport default () => (\n <div>\n <p>test</p>\n <style jsx>{`\n "
},
{
"path": "test/helpers/babel-test.macro.js",
"chars": 96,
"preview": "import { macro } from '../../src/babel'\n\nconst m = macro()\nconsole.log('m', m)\nexport default m\n"
},
{
"path": "test/helpers/with-mock.js",
"chars": 703,
"preview": "export default function withMock(mockFn, testFn) {\n return t => {\n const cleanUp = mockFn(t)\n if (typeof cleanUp "
},
{
"path": "test/index.js",
"chars": 10000,
"preview": "// Packages\nimport test from 'ava'\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\n\n// Ours\nimport plu"
},
{
"path": "test/index.ts",
"chars": 28,
"preview": "import {} from 'styled-jsx'\n"
},
{
"path": "test/macro.js",
"chars": 2912,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport macros from 'babel-plugin-macros'\nimport jsx from '@babel/plugin-synt"
},
{
"path": "test/plugins.js",
"chars": 3379,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport babelPlugin from '../src/babel'\nimport babelTestPlugin from '../src/b"
},
{
"path": "test/snapshots/attribute.js.md",
"chars": 10776,
"preview": "# Snapshot report for `test/attribute.js`\n\nThe actual snapshot is saved in `attribute.js.snap`.\n\nGenerated by [AVA](http"
},
{
"path": "test/snapshots/external.js.md",
"chars": 8446,
"preview": "# Snapshot report for `test/external.js`\n\nThe actual snapshot is saved in `external.js.snap`.\n\nGenerated by [AVA](https:"
},
{
"path": "test/snapshots/index.js.md",
"chars": 15201,
"preview": "# Snapshot report for `test/index.js`\n\nThe actual snapshot is saved in `index.js.snap`.\n\nGenerated by [AVA](https://avaj"
},
{
"path": "test/snapshots/macro.js.md",
"chars": 1859,
"preview": "# Snapshot report for `test/macro.js`\n\nThe actual snapshot is saved in `macro.js.snap`.\n\nGenerated by [AVA](https://avaj"
},
{
"path": "test/snapshots/plugins.js.md",
"chars": 1961,
"preview": "# Snapshot report for `test/plugins.js`\n\nThe actual snapshot is saved in `plugins.js.snap`.\n\nGenerated by [AVA](https://"
},
{
"path": "test/snapshots/styles.js.md",
"chars": 2373,
"preview": "# Snapshot report for `test/styles.js`\n\nThe actual snapshot is saved in `styles.js.snap`.\n\nGenerated by [AVA](https://av"
},
{
"path": "test/styles.js",
"chars": 6423,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport transform from '../src/lib/style-transform'\nimport read from './_read"
},
{
"path": "test/stylesheet-registry.js",
"chars": 9062,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport { StyleSheetRegistry } from '../src/stylesheet-registry'\nimport makeS"
},
{
"path": "test/stylesheet.js",
"chars": 6761,
"preview": "// Packages\nimport test from 'ava'\n\n// Ours\nimport StyleSheet from '../src/lib/stylesheet'\nimport withMock, { withMockDo"
},
{
"path": "tsconfig.json",
"chars": 12041,
"preview": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig to read more about this file */\n\n /* Projects */\n //"
},
{
"path": "webpack.js",
"chars": 65,
"preview": "module.exports = {\n loader: require.resolve('./dist/webpack')\n}\n"
}
]
// ... and 6 more files (download for full content)
About this extraction
This page contains the full source code of the vercel/styled-jsx GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 113 files (244.9 KB), approximately 72.9k tokens, and a symbol index with 87 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.