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

Multiline declaration doesn't work (CSS grid layout) #470

Closed
jgoux opened this issue Nov 22, 2017 · 5 comments
Closed

Multiline declaration doesn't work (CSS grid layout) #470

jgoux opened this issue Nov 22, 2017 · 5 comments
Labels
bug

Comments

@jgoux
Copy link

jgoux commented Nov 22, 2017

  • react-emotion version: 8.0.10
  • react version: 16.1.1

Relevant code.

const View = styled.main`
  display: grid;
  grid:
    'AppBar' auto
    'Main' 1fr
    / 1fr;
`

What you did:

I declared a grid ⭐️

What happened:

Only the first line of the declaration is taken into account :
image
@tkh44 tkh44 added the bug label Nov 22, 2017
@maciekmaciej
Copy link
Contributor

This is related to stylis issue thysultan/stylis#74
@thysultan is suggesting to disable auto semi-colon insertion mode until this is fixed.

@tkh44
Copy link
Member

tkh44 commented Nov 22, 2017

Thanks @asistapl.

emmatown added a commit that referenced this issue Nov 28, 2017
@emmatown
Use stylis from npm (it seems to create a smaller bundle with uglify …
ed185da 
…+ rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470
emmatown added a commit that referenced this issue Dec 23, 2017
@emmatown
Add Instances (#464)
3544dd6 
* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Fix stuff

* Increase bundlesize

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Fix using filepath when it doesn't exist

* Support nonces in new SSR methods

* Update snapshots

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Use undefined instead of null

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Fix withComponent carrying styles from flattened components

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update CHANGELOG.md

* Update sheet.dom tests

* Update snapshots

* Fix flow error
emmatown added a commit that referenced this issue Jan 4, 2018
@emmatown
New site with gatsby (#368)
108d78a 
* Start gatsby site

* Move stuff

* stuff

* Try to make the site work

* Try to fix site

* It actually works now

* Docs

* Update docs and add docs/ path

* Fix path

* Change header background color

* Change Error background color

* Use frontmatter for title

* Move playground into a component

* More stuff

* Commit for netlify to deploy

* Syntax highlighting for css

* Fix typo

* Use gatsby-plugin-emotion

* Update .gitignore

* Remove stuff and add rebass-emotion

* Update site

* Add unoptimized version of code as a comment for users who are learning.

* Fix a thing

* Fix scrolling in code

* Use babel-standalone from unpkg

* Add gatsby-plugin-netlify

* Clean up markup styles for docs pages.
Enable code examples on docs pages.

* Update doc layout to have sidebar. Not sure how to pull in pages from graphql.

* Use GraphQL to get code examples

* Rename markdownRemark in GraphQL instead of in JS

* Add .nvmrc for netlify

* Fix for code examples

* Update sidebar

* Update docs

* Move sidebar to the layout so the data for the sidebar isn't in the query of each doc page

* Linting

* Linting

* Fix a typo

* Update styles to start implementing @norbertdragan's designs.

#368

* Update styles

* Update links on index page

* Modified typography, layout and button styles (#382)

* Modified typography, layout and button styles

* Ran npm lint

* Run yarn lint

* Format

* Formatting

* Add Edit this page link to docs pages

* Add hover styles to the object button

* Update header and fix react unknown prop warnings

* Add animation to gradient in header

* Move docs

* stuff

* Change size of background gradient on home

* Update yarn.lock

* Update deps

* Update stuff

* Change netlify config

* Change netlify config

* Move docs back to root and sync from master

* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Make doc sidebar responsive

* Add animation to sidebar toggle button

* Fix stuff

* Increase bundlesize

* Fix flow error and gatsby ssr

* Change stuff

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Inline code examples that render with react-live

Use the language `jsx live` and call render with a React element and it'll render

* Fixes after merging instances into gatsby

* Change gatsby config

* Start improving styled docs

* Run prettier on markdown

* Add lodash and prop-types to deps of site

* Fix yarn.lock

* Hopefully fix stuff

* Update emotion-site README

* Update docs

* Make object styles page interactive

* Make with-props page interactive

* Change docs

* More stuff to docs

* Fix using filepath when it doesn't exist

* Update react

* Add react-helmet as a dep

* Add link headers back

* Change stuff

* Remove console.log

* Remove more console.*s

* More changes

* Remove name example

* Move babel standalone script tag

* Support nonces in new SSR methods

* Update snapshots

* Start sorting docs

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Add keyframes to index.yaml

* Start headings in sidebar

* Use undefined instead of null

* Fix styles

* stuff

* typo

* Add preact-emotion and react-emotion READMEs

* Add emotion-server README

* Start stuff for packages pages

* Change font in code blocks

* Remove styled block

* More stuff for displaying package READMEs

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Show packages in docs/

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Add jest-emotion and create-emotion-server to docs.yaml

* Fix withComponent carrying styles from flattened components

* Use renderStylesToString in gatsby site

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update docs

* Change docs

* Change a bunch of stuff

* Fix key warning

* Stuff

* Fix react-dom being included twice in site and only import darken from polished

* Don't include @babel/types

* stuff

* Update yarn on netlify

* Update netlify.toml

* Run babel in a worker 🎉

* stuff

* Fix SSR

* Fix babel worker

* Stop animating left

* Fix repaints on scroll

* Fix layout thrashing

* Revert "Fix layout thrashing"

This reverts commit 7c866f7.

* Change styles and stuff

* Change docs and change blockquote styles
@arlaurent
Copy link

Hey there, I'm still facing this issue in @emotion/[email protected].

i have tried the following, commas between lines, encasing the lines between single quotes, tried to use a {} to encapsulate them, tried [] to encapsulate them as well.

Can someone please clarify what the right way is to make this work?

Thanks!

@Andarist
Copy link
Member

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given (and they were not in this case).

@arlaurent
Copy link

arlaurent commented Sep 17, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tkh44 @jgoux @arlaurent @Andarist @maciekmaciej