vercel / styled-jsx Goto Github PK

There's a few things missing pre-v0.6.4 of the stylis compiler that your fork will not handle that could be nice to have.

1. flat css

/* this should get wrapped in the namespace */
color: red;

h1 {
    font-size:1px;
}

2. full prefix support in @root and @keyframes blocks.

3. support opting out of name-spacing keyframes and animations.

I've done away with the regex solution i was using, and added supports for stylis("[data-id=namespace]") namespaces.

Hi,

I'm not sure before, after selector are support? In case it will never support, what is replacement or workaround.

Thanks!

Here's the stack trace:

ERROR in ./app/Resources/assets/js/react/jsx/Form/VariablesForm.js
Module build failed: TypeError: .../app/Resources/assets/js/react/jsx/Form/VariablesForm.js: Cannot read property 'name' of undefined
    at .../node_modules/styled-jsx/dist/babel.js:18:23
    at Array.some (native)
    at isGlobalEl (.../node_modules/styled-jsx/dist/babel.js:17:26)
    at PluginPass.exit (.../node_modules/styled-jsx/dist/babel.js:185:26)
    at newFn (.../node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (.../node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (.../node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (.../node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (.../node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (.../node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (.../node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (.../node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:156:21)
    at TraversalContext.visitSingle (.../node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (.../node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (.../node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (.../node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (.../node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (.../node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (.../node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (.../node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (.../node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (.../node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (.../node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (.../node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (.../node_modules/babel-traverse/lib/context.js:150:16)
 @ ./app/Resources/assets/js/react/components/BuildSettings/VariablesEdit/Modal.js 18:0-60
 @ ./app/Resources/assets/js/react/components/BuildSettings/VariablesEdit/VariablesEditButton.js
 @ ./app/Resources/assets/js/react/components/BuildSettings/VariablesEdit/index.js
 @ ./app/Resources/assets/js/react/jsx/Dashboard/SubComp/BuildSettings.js
 @ ./app/Resources/assets/js/react/jsx/Dashboard/SubComp/BuildList.js
 @ ./app/Resources/assets/js/react/jsx/Dashboard/SubComp/AsyncBuildList.js
 @ ./app/Resources/assets/js/react/containers/dashboard-routing.js
 @ ./app/Resources/assets/js/react/containers/dashboard.prod.js
 @ ./app/Resources/assets/js/react/containers/dashboard.js
 @ ./app/Resources/assets/js/react/dashboard-bundle.js
 @ multi ./app/Resources/assets/js/react/webpack-bootstrap ./app/Resources/assets/js/react/dashboard-bundle

Run benchmarks to accurately communicate the performance tradeoffs involved in:

• the usage of attribute selectors (varies per browser?)
• the extra burden of diffing one more attribute per element (React)

input

.host {
  font-family: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera San';
}
h1::before {
  content: '# ';
}

the style i see

.host {
  font-family: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera San';
}
h1::before {
  content: '# ';
}

I added the following to the transform.css fixture:

h1::before {
  font-family: 'Menlo, sans-serif';
  content: '# ';
}

The result was properly quoted (h1[data-jsx="woot"]::before {font-family: 'Menlo, sans-serif';content: '# ';}), so the escaping must happen after that, when injecting into the page.

The following doesn't compile well, unless I take out the comment

.story {
  /* todo: probably a more flex-y way of doing this? */
  flex: 100;
  display: inline-block;
}

And based on how stylis.js was originally written, it uses split with , for selectors, where it should actually keep track that the , is not inside a selector for example., so this will break:

.story[title=","] {
  display: inline-block;
}

Could we imagine a webpack-loader that loads *.sjsx files? That way you could save your styles in separate files and configure your editor to use regular old css syntax-highlighting and code-completion. Love the idea of styled-jsx, but styles inside a string literal get pretty hard to read.

// Component.js
import React from 'react';
import './Component.sjsx';

export default () => (
  <div>
    <p>Some component</p>
  </div>
)

// Component.sjsx
p {
  color: red;
}

Why don't we use the familiar syntax like this:

 <style jsx>
      p {
        color: red;
      }
 </style>

But this:

 <style jsx>{`
      p {
        color: red;
      }
 `}</style>

It'd be interesting to skip prefixing if the user uses >>:

export default () => (
  <div>
    <div class="my-component">
      <MyComponent /> { /* this component has a <span> child */ }
    </div>
    <style jsx>{`
       .my-component >> span {
         color: red
       }
    `}</style>
  </div>
)

Not sure if >> is in conflict with any existing or future CSS specs, but I like this a lot. styled-jsx effectively turns the CSS model upside down, making the dangerous aspects of it "opt-in", through, in this case the extra >>

I thought I was being clever with my use of variables, but it seems to break the styles:

// colours.js
export const blue = opacity => `rgba(51, 77, 92, ${opacity})`;

// component.js
import { blue } from './colours.js';

const Foo = () => (
  <div>
    Hello world
    <style jsx>{`
      div {
        color: ${blue(1)};
      }
    `}</style>
  </div>
);

Is there a recommended way to use variables like this?

I think it would be nice if styled-jsx had a non-singleton interface.

The main use case I've found where a global singleton is problematic is related to rendering within iframes. In short, styles from components rendered within a iframe get rendered outside the iframe, preventing the styles from reaching inside the iframe.

The common pattern to solve this is to rely on React context to share instances, which allow the instance to be overridden within an iframe by overriding context. Then styles from components within a given iframe will be rendered within the iframe using its own instance.

This is somewhat uncommon use case, but creating a singleton interface from an instance is straightforward whereas going the reverse direction is much more difficult. I think making separate packages for the core and singleton interface would not add too much additional complexity or maintenance effort. I'd be happy to work on a PR, otherwise feel free to close this issue.

@rauchg and I discussed about possible ways to support dynamic styles i.e. allow props and other dynamic values which #80 doesn't.

From slack:

@g and I are contemplating a "dynamic" mode for styled-jsx where you pay a small penalty in performance but you can write stuff like

<style jsx dynamic>{`
 p {
   width: 100%;
   color: ${someProp ? 'red' : 'blue'}
 }
`}</style>

Basically this mean separate static css from dynamic one, render static css with the current system and inline the dynamic one i.e. each instance will get its own styles.

In order to do so we would need a CSS parser to split things up so that the example above becomes:

[
  {
    dynamic: false,
    css: 'p { width: 100% }'
  },
  {
    dynamic: true,
    css: 'p { color: ___styled-jsx-expression_placeholder_n_1___ }'
  }
]

which eventually compiles down to

<_JSXStyle styleId={woot} css={"p[data-jsx=\"woot\"] {width: 100%;}"} />
<_JSXStyle dynamic styleId={woot2} css={`p[data-jsx=\"woot2\"] {color: ${someProp ? 'red' : 'blue'}}`} />

When dynamic is set our component renders a regular style tag instead of returning null.

To parse the CSS we could write a tiny parser or use something like CSSTree since it seems to be fairly fast https://csstree.github.io/docs/validator.html (we could reuse this for the css transformation as well).

When using the transform-react-constant-elements alongside the style-jsx plugin, the result is broken, see:

<html>
    <body>
        <div id="app"></div>
    </body>
    <script src="app.js"></script>
</html>

import React from 'react';
import { render } from 'react-dom';

function Component2() {
    return (
        <div>
            <style jsx>{`
                p {
                    color: red;
                }
            `}</style>
            <p>{'This should be red'}</p>
        </div>
    );
}

function Component1() {
    return (
        <div>
            <p>{'This should be black'}</p>
            <Component2 />
        </div>
    );
}

render(<Component1 />, document.getElementById('app'));

When using webpack configuration:

  {
      "presets": [
        ["es2015", { "modules": false }],
        "react",
        "stage-0"
      ],
      "plugins": [
        "styled-jsx/babel",
      ]
    }

When using webpack configuration:

  {
      "presets": [
        ["es2015", { "modules": false }],
        "react",
        "stage-0"
      ],
      "plugins": [
        "transform-react-constant-elements",
        "styled-jsx/babel",
      ]
    }

All of the examples only show how to style core DOM nodes in JSX, like <p>:

  <div>
    <p>only this paragraph will get the style :O</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>

Is it possible to use styled-jsx to pass styles into components, like <Button>? Having a hard time understanding how that would work, or how this library is a true solution to CSS without that? Would I need to require one of the other CSS-in-JS solutions to theme things?

Sometimes styles can be quite long and it makes sense for them to live in a seperate file. For example, if you are using next.js and you want to put your styles in a ./styles.js file next to a component (minimal styling just for the example):

export default `
  p {
    color: red;
  }
`

Then import it:

import styles from './styles';

export default () => (
  <div>
    <p>only this paragraph will get the style :)</p>
    <style jsx>{styles}</style>
  </div>
)

Will give you the following error: Module build failed: SyntaxError: Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{some css}</style>), but got Identifier.

I suspect it's very very fast (specially thanks to @thysultan), but it'd be nice to know

style-transform.js could get rid of extra spaces and trailing ; for smaller SSR footprint

I'm trying to use this as a way to polyfill CSS encapsulation when working with non-native shadow roots. It works great for that. However, when native support is available, styles aren't applied because the styles are appended to the <head>.

It seems from reading the issues and the README, that this is, and will continue to, track close to the shadow DOM specs. If that's the case, would it be worth making this append to the head if no native support is available and simply return the JSX <style /> tag if it is so that it can just be rendered out?

I found that if I have a component that mounts another component in example by clicking some button, the styles applied for the mounted component doesn't get applied.

Here is the example case:

import React, { Component } from 'react'
import Head from 'next/head'

class App extends Component {

  constructor () {
    super()
    this.state = {
      showDiv: false
    }
  }

  onLinkClick () {
    this.setState({
      showDiv: !this.state.showDiv
    })
  }

  render () {
    return (
      <div>
        <Head>
          <title>Next.js with styled-jsx and IE10</title>
          <script src='https://cdn.polyfill.io/v2/polyfill.min.js' />
        </Head>
        <a href='#' onClick={(e) => { this.onLinkClick() }}>Click me!</a>
        { this.state.showDiv &&
          <SubComponent />
        }
      </div>
    )
  }
}

class SubComponent extends Component {
  render () {
    return (
      <div>
        <div className='subcomponent'>
          This and that
        </div>
        <style jsx>{`
          .subcomponent {
            background-color: black;
            color: white;
          }  
        `}</style>
      </div>
    )
  }
}

export default App

The subcomponent doesn't get the black background or the white text colors. The component gets the data-jsx attribute, but the <style></style> tags doesn't get appended to the pages <head> as they are in Chrome (or other newer browsers).

This bug occurs in both IE10 and IE11.

Here is the complete example repo: https://github.com/roopemerikukka/next.js-styled-jsx-ie10-issue

When using the transform-react-inline-elements alongside the style-jsx plugin, the result is broken, see:

<html>
    <body>
        <div id="app"></div>
    </body>
    <script src="app.js"></script>
</html>

import React from 'react';
import { render } from 'react-dom';

function Component2() {
    return (
        <div>
            <style jsx>{`
                p {
                    color: red;
                }
            `}</style>
            <p>{'This should be red'}</p>
        </div>
    );
}

function Component1() {
    return (
        <div>
            <p>{'This should be black'}</p>
            <Component2 />
        </div>
    );
}

render(<Component1 />, document.getElementById('app'));

When using webpack configuration:

  {
      "presets": [
        ["es2015", { "modules": false }],
        "react",
        "stage-0"
      ],
      "plugins": [
        "styled-jsx/babel",
      ]
    }

When using webpack configuration:

  {
      "presets": [
        ["es2015", { "modules": false }],
        "react",
        "stage-0"
      ],
      "plugins": [
        "transform-react-inline-elements",
        "styled-jsx/babel",
      ]
    }

In Shadow DOM :host selects the element hosting a shadow tree.
Similarly the legacy scoped styles spec added a :scope pseudo-class.

Maybe someone would ❤️ the idea of being able to use this selector and we/you can add support for it.

Further reading.

After pulling from master, working around #11, and linking, babel still doesn't seem to compile the tag. Babel is running without any complaints.

Workaround, because I very well may have broken it

styled-jsx

.babelrc in project

{
	"presets": [
		"react",
		["es2015", { "modules": false }]
	],
	"plugins": [
		"array-includes",
		"styled-jsx/dist/babel"
	]
}

React complaining about jsx prop

After converting a site to next@beta and styled-jsx, I started to notice a FOUC in Safari when I transitioned pages.

Having already looked at styled-jsx my hunch was the rAF callback that updates the styles in the DOM is called in a different order in Safari than Chrome. I set a break-point within the rAF callback in both Safari and Chrome and sure enough the order of operations is different.

Chrome:

1. unmount outgoing <style jsx> components
2. render incoming <style jsx> components
3. mount incoming <style jsx> components
4. rAF callback fires, update <style>s in <head>
5. paint

Safari:

1. unmount outgoing <style jsx> components
2. render incoming <style jsx> components
3. mount incoming <style jsx> components
4. paint
5. rAF callback fires, update <style>s in <head>

Safari painted the updated DOM tree before styled-jsx's rAF callback was called. While in Chrome, the rAF callback is called first, then Chrome paints. This is why I'm seeing FOUC in Safari but not in Chrome.

I didn't have time to dig into a possible solution for this, but wanted to bring it up in case this wasn't already a known issue.

Hello!

I had this scenario today: https://gist.github.com/rickyrauch/a9aa62854d2ebf9bed22d4bd14561de8

I fixed this wrap it in a <div>

Thanks

In a non-next.js project, after installing styled-jsx and adding "styled-jsx/babel" to the plugins array in my .babelrc file, I'm seeing the following error on compilation:

Module build failed: /my_project/node_modules/styled-jsx/babel.js:1
(function (exports, require, module, __filename, __dirname) { import jsx from 'babel-plugin-syntax-jsx'
                                                              ^^^^^^
SyntaxError: Unexpected token import

Is there something else needed in the babel config to get this to work?

The following tag will fail, because the whitespace causes styled-jsx to think that the style tag has three children, when really two of them aren't real/are just empty whitespace.

<style jsx>
    {`
        div { color: 'red'; }
    `}
</style>

Error:

ERROR in ./src/components/FullCalendar.js
Module build failed: SyntaxError: Expected a child under JSX Style tag, but got 3 (eg: <style jsx>{`hi`}</style>)

  32 | 
  33 | 		return (
> 34 | 			<div>
     | 			^
  35 | 				<div id={this.state.calendarId}></div>
  36 | 				<style jsx>
  37 | 					{`

Changing the above to the following makes it work:

<style jsx>{`
    div { color: 'red'; }
`}</style>

I just kind of like the former syntax a little better personally, the style tags line up correctly this way at the expense of some horizontal space.

This is purely a preference thing, and since the workaround is very straightforward it's certainly not a priority, but it would be appreciated.

Thanks for everything! 🐣

I'm using the <Head> component to import a Google Fonts stylesheet:

<Head>
  <title>Foo</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" />
</Head>

And it works fine on renders after the initial render. Unfortunately on the first render I don't get access to Open Sans.

Is there a better way to handle font loading like this? Maybe download the fonts and put them in /statics?

The transformation of styled-jsx/babel adds the import statement (styled-jsx/inject), which means you always have to transpile it to CommonJS by using babel-transform-es2015-modules-commonjs.
I wonder if this is the design decision, like for tree-shaking.

See vercel/next.js#785 (comment)

cc @thysultan

The following doesn't work.

export default () => (
  <div>
    <style jsx global>{`
      body {
        background: red
      }
    `}</style>
    <style jsx>{`p { color: red; }`}</style>
  </div>
)

Hi!
I was trying to do a keyframe animation with styled-jsx, but the produced css looks a bit strange and my animation doesn't work.

This is what I try to render:

<div>
  <span>test</span>
  <style jsx> {`
    span {
      animation-duration: 0.6s;
      animation-name: slidein;
      animation-iteration-count: infinite;
    }
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%;
      }

      to {
        margin-left: 0%;
        width: 100%;
      }
    }
  `}</style jsx>
</div>

and this is the produced css:

span[data-jsx="1065293759"] {-webkit-animation-duration:10652937590.6s;-moz-animation-duration:10652937590.6s;animation-duration:10652937590.6s;-webkit-animation-name:1065293759slidein;-moz-animation-name:1065293759slidein;animation-name:1065293759slidein;-webkit-animation-iteration-count:1065293759infinite;-moz-animation-iteration-count:1065293759infinite;animation-iteration-count:1065293759infinite;}@-webkit-keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@-moz-keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}

As you can see the data-jsx number (1065293759) seem to be prefixed before all animation property values.

Am I doing this wrong or could this be a real issue?

When using a css solution like css-modules, you have hot module replacement, no need to reload the whole React app.
Is this somehow planned?
Would be awesome, especially if you have some UI state that you want to preserve.

Probably outside the scope of this module, but we could document how to make this work:

<script jsx type="text/sass">{`
  p {
    color: red;
    & a {
       color: #fff;
    }
  }
`}</script>

const Test = () => (
  <div>
    <Component />
    <style jsx>{`
      span { color: red; }
    `}</style>
  </div>
)

When transpiled Component gets the data-jsx attribute.

<Component data-jsx={2520901095} />

Is it possible to use this with typescript as I don't know if the typescript compiler integrates with babel? Or would you just need to do a pre-compilation step with babel?

• Multiple style tags per component
• Multiple components with styles per file
• Extensive error handling

To reproduce

  render () {
    return (
        <div>
          <dl className="foo">
            <style jsx>{`
              .foo {
                color: red; 
              }
              .foo p {
                color: green; 
              }
              .foo p + p {
                color: blue; 
              }
              `}
            </style>
            red<p>green</p><p>blue</p>
          </dl>
        </div>
    )
  }

Preact (Working)

React via vercel/next.js@cae706d (Not working)

Also sometime hot reload refuse to process CSS (all appear no colour just black) and will need full refresh.
Is it a bug? Thanks.

I would understand if dynamic properties didn't work, but dynamic values don't seem to be working either. Compiling succeeds, but the pieces with the expression seem to be omitted from the inserted script tag.

<div>
	<div id={this.state.calendarId}></div>
	<style jsx>{`
			#${this.state.calendarId} .fc-button.fc-state-default {
				border: 2px solid ${buttonColor};
			}
	`}</style>
</div>

const buttonColor = 'red';

return (
	<div>
		<div id="foo"></div>
		<style jsx>{`
			#foo .fc-button.fc-state-default {
				border: 2px solid ${buttonColor};
			}
		`}</style>
	</div>
);

<div>
	<div id="foo"></div>
	<style jsx>{`
		#foo .fc-button.fc-state-default {
			border: 2px solid red;
		}
	`}</style>
</div>

Thank you!

I haven't had the need myself to do this, but it might be interesting to be able to sub-scope:

<div>
  {
    stuff.map((child) => (
      <div>
         <style jsx /> /* scoped to sub-div */
      </div>
    ))
  }
  <style jsx />
</div>

Module not found: Error: Can't resolve 'styled-jsx/inject'

At styled-jsx v0.0.5

Using it with preact and webpack 2. Here is the code.

WebStorm's JSX interpreter does not like the use of <style> tags, so you get tons of syntax errors and warnings, and there is apparently no way to suppress the errors. Perhaps there could be an alternative syntax such as <styled jsx>? This would allow developers who use intelliJ IDEs to use this project.

Have you tried constants in styled jsx markup plus using a PostCSS autoprefixer with styled jsx? This seems to cause a fatal error.

We're using this combo because styled jsx doesn't prefix flexbox correctly on its own.

I'm thinking something you have with autoprefixer like last 2 versions or similar.

So that we make the markup smaller and avoid the warning

Just adding this issue as a way to discuss what's the best way to do theming with styled-jsx. Particularly styling a component with multiple variations

eg.

1. red button
2. blue large button
3. green xxl button

I believe pr #61 will open a lot of techniques in this domain.

I can see it's very logical that this doesn't work, but it would be great. Consider the following pseudo-code:

export default ({people}) => (
  <div className="root">
    {people.map(person =>
      <Person key={person._id} person={person} />
    )}

    <style jsx>{`
      .root {
        display: flex;
      }
      .root > * {
        flex: 1 0 50%;
      }
    `}</style>
  </div>
)

The only way to set the flex of Person is inside of that component. But I wouldn't always want it to be 50%, it could be rendered anywhere. I could add an extra component or element in between, but in that case Person always needs to do some "full width/height to its parent" trickery. Overriding it with a prop doesn't feel right either..

Is there any way to make this work? Would be awesome!

It seems we have to skip generating style tags on client if it's already rendered on SSR.

For background: #4 (comment)
The transformation we might have to use would look like this:

<div className={ a ? 'b' : 'c' }></div>

becomes

import _styledJsxPrefix from 'styled-jsx'
<div className=_styledJsxPrefix('r4nd0m', { a ? 'b' : 'c' })></div>

and the implementation of _styledJsxPrefix would perform class prefixing

for example, of react router for instance where the 3rd party controls how that element is rendered.

First of all, awesome tool!
We're using it together with TypeScript and it works like a charm.
However, jsx and global are no standard html attributes, so the React Typings don't include them and the TypeScript compiler throws errors.
That can easiliy be fixed with these 2 additions:
DefinitelyTyped/DefinitelyTyped@master...timsuchanek:patch-1
What are your ideas on it? Is there another way to make it work with TypeScript?
Thanks