Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Node.js ESM #641

Draft
wants to merge 2 commits into
base: alpha
Choose a base branch
from
Draft

Support Node.js ESM #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b947efd
Support Node.js ESM.
jaydenseric May 12, 2020
cc26ba9
Update readme code examples for Node.js ESM compatibility.
jaydenseric May 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 3 additions & 21 deletions css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,5 @@
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')
}
const { css, global, resolve } = require('./dist/decoys')

module.exports = css
module.exports.global = css.global
module.exports.resolve = css.resolve
module.exports.global = global
module.exports.resolve = resolve
5 changes: 5 additions & 0 deletions css.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import decoys from './dist/decoys.js'

export default decoys.css
export const global = decoys.global
export const resolve = decoys.resolve
53 changes: 26 additions & 27 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Code and docs are for v3 which we highly recommend you to try. Looking for style
* [Via inline `style`](#via-inline-style)
- [Constants](#constants)
- [Server-Side Rendering](#server-side-rendering)
* [`styled-jsx/server`](#styled-jsxserver)
* [`styled-jsx/server.js`](#styled-jsxserver)
- [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)
Expand Down Expand Up @@ -128,7 +128,7 @@ Turn on/off automatic vendor prefixing (default: `true`)
The example above transpiles to the following:

```jsx
import _JSXStyle from 'styled-jsx/style'
import _JSXStyle from 'styled-jsx/style.js'

export default () => (
<div className="jsx-123">
Expand Down Expand Up @@ -316,8 +316,8 @@ In this example, the padding defaults to the one set in `<style>` (`20`), but th
It is possible to use constants like so:

```jsx
import { colors, spacing } from '../theme'
import { invertColor } from '../theme/utils'
import { colors, spacing } from '../theme.mjs'
import { invertColor } from '../theme/utils.mjs'

const Button = ({ children }) => (
<button>
Expand All @@ -337,15 +337,15 @@ Please keep in mind that constants defined outside of the component scope are tr

## Server-Side Rendering

### `styled-jsx/server`
### `styled-jsx/server.js`

The main export flushes your styles to an array of `React.Element`:

```jsx
import React from 'react'
import ReactDOM from 'react-dom/server'
import flush from 'styled-jsx/server'
import App from './app'
import ReactDOM from 'react-dom/server.js'
import flush from 'styled-jsx/server.js'
import App from './app.mjs'

export default (req, res) => {
const app = ReactDOM.renderToString(<App />)
Expand All @@ -364,9 +364,9 @@ We also expose `flushToHTML` to return generated HTML:

```jsx
import React from 'react'
import ReactDOM from 'react-dom/server'
import { flushToHTML } from 'styled-jsx/server'
import App from './app'
import ReactDOM from 'react-dom/server.js'
import { flushToHTML } from 'styled-jsx/server.js'
import App from './app.mjs'

export default (req, res) => {
const app = ReactDOM.renderToString(<App />)
Expand Down Expand Up @@ -404,7 +404,7 @@ Your CSP policy must share the same nonce as well (the header nonce needs to mat

### 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:
In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css.mjs` library. `styled-jsx/css.mjs` 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.
Expand All @@ -416,7 +416,7 @@ In an external file:

```js
/* styles.js */
import css from 'styled-jsx/css'
import css from 'styled-jsx/css.mjs'

// Scoped styles
export const button = css`button { color: hotpink; }`
Expand All @@ -436,7 +436,7 @@ export default css`div { color: green; }`
You can then import and use those styles:

```jsx
import styles, { button, body } from './styles'
import styles, { button, body } from './styles.mjs'

export default () => (
<div>
Expand All @@ -450,21 +450,20 @@ export default () => (

N.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.

`resolve` and `global` can also be imported individually:
`global` and `resolve` can also be imported individually:

```js
import { resolve } from 'styled-jsx/css'
import { global } from 'styled-jsx/css'
import { global, resolve } from 'styled-jsx/css.mjs'
```

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.
The `css` tag from `styled-jsx/css.mjs` 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'
import css from 'styled-jsx/css.mjs'

export default () => (
<div>
Expand All @@ -480,15 +479,15 @@ Like in externals styles `css` doesn't work with dynamic styles. If you have dyn

#### 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.
The `resolve` tag from `styled-jsx/css.mjs` 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'
import css from 'styled-jsx/css.mjs'

const { className, styles } = css.resolve`
a { color: green }
Expand All @@ -509,7 +508,7 @@ The `resolve` tag also supports dynamic styles, via template string interpolatio

```jsx
import React from 'react'
import css from 'styled-jsx/css'
import css from 'styled-jsx/css.mjs'

function getLinkStyles(color) {
return css.resolve`
Expand Down Expand Up @@ -851,13 +850,13 @@ The `styled-jsx/babel-test` solves this problem. It simply strips `jsx` attribut

#### styled-jsx/css in tests

When using `styled-jsx/babel-test`, `styled-jsx/css` throws the following error:
When using `styled-jsx/babel-test`, `styled-jsx/css.mjs` 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/
to solve this issue you need to mock `styled-jsx/css.mjs`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/

## FAQ

Expand All @@ -882,7 +881,7 @@ const StyledImage = ({ src, alt = '' }) => (

### 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 accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css.mjs`](#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:

Expand Down Expand Up @@ -935,8 +934,8 @@ You get full CSS highlighting and autocompletion and it will last until you clos
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'
import { colors, spacing } from '../theme.mjs'
import { invertColor } from '../theme/utils.mjs'

const Button = ({ children }) => (
<button>
Expand Down
2 changes: 1 addition & 1 deletion src/_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,7 +678,7 @@ export const booleanOption = opts => {
export const createReactComponentImportDeclaration = () =>
t.importDeclaration(
[t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
t.stringLiteral('styled-jsx/style')
t.stringLiteral('styled-jsx/style.js')
)

export const setStateOptions = state => {
Expand Down
9 changes: 6 additions & 3 deletions src/babel-external.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,11 @@ function addHash(exportIdentifier, hash) {

export const visitor = {
ImportDeclaration(path, state) {
// import css from 'styled-jsx/css'
if (path.node.source.value !== 'styled-jsx/css') {
// Bail if the import doesn’t have one of these specifiers:
// - styled-jsx/css
// - styled-jsx/css.mjs
// - 'styled-jsx/css.js
if (!/^styled-jsx\/css(?:\.m?js)?$/.test(path.node.source.value)) {
return
}

Expand Down Expand Up @@ -218,7 +221,7 @@ export const visitor = {
)

// When using the `resolve` helper we need to add an import
// for the _JSXStyle component `styled-jsx/style`
// for the _JSXStyle component `styled-jsx/style.js`
if (
hasJSXStyle &&
taggedTemplateExpressions.resolve.length > 0 &&
Expand Down
19 changes: 19 additions & 0 deletions src/decoys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
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.'
)
}

export function css() {
notTranspiledError('css')
}

export function global() {
notTranspiledError('global')
}

export function resolve() {
notTranspiledError('resolve')
}
4 changes: 2 additions & 2 deletions test/babel6/snapshots/attribute.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
import styles from './styles';␊
␊
const styles2 = require('./styles2');␊
Expand Down Expand Up @@ -108,7 +108,7 @@ Generated by [AVA](https://ava.li).

`var _this = this;␊
␊
import _JSXStyle from "styled-jsx/style";␊
import _JSXStyle from "styled-jsx/style.js";␊
export default (() => {␊
const Element = 'div';␊
return <div className={"jsx-2886504620"}>␊
Expand Down
Binary file modified test/babel6/snapshots/attribute.js.snap
View file
Open in desktop
Binary file not shown.
14 changes: 7 additions & 7 deletions test/babel6/snapshots/external.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
␊
import colors, { size } from './constants';␊
const color = 'red';␊
Expand Down Expand Up @@ -98,7 +98,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
␊
␊
function test() {␊
Expand All @@ -112,7 +112,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
␊
import colors, { size } from './constants';␊
const color = 'red';␊
Expand Down Expand Up @@ -168,7 +168,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyle from "styled-jsx/style.js";␊
import styles from './styles2';␊
␊
export default (({ level = 1 }) => {␊
Expand All @@ -184,7 +184,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
import styles from './styles';␊
const styles2 = require('./styles2');␊
import { foo as styles3 } from './styles';␊
Expand All @@ -211,7 +211,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
import styles, { foo as styles3 } from './styles';␊
␊
const styles2 = require('./styles2');␊
Expand All @@ -229,7 +229,7 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyle from 'styled-jsx/style.js';␊
import styles from './styles';␊
␊
export default (() => <div className={`jsx-${styles.__hash}`}>␊
Expand Down
Binary file modified test/babel6/snapshots/external.js.snap
View file
Open in desktop
Binary file not shown.
Loading