How to use the astroturf function in astroturf

To help you get started, we’ve selected a few astroturf examples, based on popular ways it is used in public projects.

github 4Catalyzer / astroturf / test / fixtures / pass-options.js View on Github external
import styled from 'astroturf';

const SIZE = 75;

// prettier-ignore
const FancyBox = styled('div', { someOption: true })`
  color: red;
  width: ${SIZE}px;

  @media (min-width: 420px) {
    width: 96px;
    height: 96px;
  }

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const options = {};
github 4Catalyzer / astroturf / test / integration / main.js View on Github external
}
`;

const FancyBox = styled('div')`
  composes: foo from global;

  color: red;
  width: ${width}px;

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancierBox = styled('div')`
  color: ultra-red;

  > ${FancyBox} {
    padding: 4em;
  }

  ${styles.parent} > & {
    margin: 2em;
  }

  /* these are the same selector */
  & > ${Button} {
    margin-left: 4px;
  }
  & > ${Buttons.Button} {
    margin-left: 8px;
github 4Catalyzer / astroturf / test / fixtures / multiple-components.js View on Github external
import styled, { css } from 'astroturf';

const SIZE = 75;

// prettier-ignore
const FancyBox = styled('div')`
  color: red;
  width: ${SIZE}px;

  @media (min-width: 420px) {
		width: 96px;
		height: 96px;
	}

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancyHeader = styled('h2')`
  color: red;
github 4Catalyzer / astroturf / test / __file_snapshots__ / loader__typescript.tsx View on Github external
const SIZE = 75;

const styles = require("./typescript-styles.css");

interface PropsType {
  children: JSX.Element;
  name: string;
}

function someMath<T extends { x: number }>(obj: T): T {
  console.log(Math.abs(obj.x));
  return obj as T;
}

const Button = /*#__PURE__*/ styled("button", null, {
  displayName: "Button",
  styles: require("./typescript-Button.css"),
  attrs: null,
  vars: []
});

class Component extends React.Component<PropsType> {
  render() {
    return (
      <>
        <h2>{this.props.children}</h2>
        <Button
          variant="primary"
          css={[require("./typescript-CssProp1_Button.css"), []]}
        >
          click
github 4Catalyzer / astroturf / test / fixtures / display-name.js View on Github external
import styled from 'astroturf';

const Foo = () => {};
const bar = 'Bar';
Foo[bar]['baz'] = styled('div')`
  color: red;
`;

export default styled(FancyBox)`
  color: ultra-red;
`;
github 4Catalyzer / astroturf / test / fixtures / styled-interpolations.js View on Github external
&.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancierBox = styled('div')`
  color: ultra-red;

  > ${FancyBox} {
    padding: 4em;
  }
`;

const Button = styled(Button)`
  composes: button-with-caret from global;
`;
github jquense / react-formal / www / src / components / Playground.js View on Github external
composes: p-2 alert alert-info from global;
  position: absolute;
  top: 0;
  right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  pointer-events: none;
  font-size: 70%;

  *:not(:focus) + & {
    opacity: 0;
  }
`

const StyledProvider = styled(LiveProvider)`
  @import '../styles/theme';

  background-color: $body-bg;
  margin-bottom: 3rem;
`

const StyledEditor = withProps(props => ({
  children: (
    <LiveEditor
      {...props}
      renderTabMessage={(ignoreTab, msgProps) => (
        <EditorInfoMessage {...msgProps}>
          {ignoreTab ? (
            <>
              Press <kbd>enter</kbd> or type a key to enable tab-to-indent
            </>
github react-bootstrap / react-bootstrap / www / src / components / SideNav.js View on Github external
@include media-breakpoint-up(md) {
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: calc(100vh - 4rem);
    background-color: #f7f7f7;
    border-right: 1px solid $divider;
  }

  & > * + * {
    border-top: 1px solid $divider;
  }
`;

const OverflowWrapper = styled('div')`
  @import '../css/theme';

  @include media-breakpoint-up(md) {
    overflow: hidden;
    display: block !important;
    height: 100% !important;
  }
`;

const TableOfContents = styled('nav')`
  @import '../css/theme';

  composes: pt-2 pb-4 from global;

  @include media-breakpoint-up(md) {
    height: 100% !important;
github react-bootstrap / react-bootstrap / www / src / components / ComponentApi.js View on Github external
import { graphql } from 'gatsby';
import kebabCase from 'lodash/kebabCase';
import React from 'react';
import styled from 'astroturf';

import Heading from './Heading';
import Anchor from './Anchor';
import LinkToSource from './LinkToSource';
import PropTable from './PropTable';

const Keyword = styled('span')`
  color: #a626a4;
`;
const Code = styled('code')`
  padding: 0;
  display: block;
  color: #50a14f;
  background-color: transparent;
  margin-bottom: 1rem;
`;

const propTypes = {};

const Import = ({ name }) => (
  <Code aria-label={`Import code for the ${name} component`}>
    <Keyword>import</Keyword> {name} <Keyword>from</Keyword> 'react-bootstrap/
    {name}'
  </Code>
);
github react-bootstrap / react-overlays / www / src / components / HookDocumentation.js View on Github external
import styled from 'astroturf';
import { graphql } from 'gatsby';
import React from 'react';

const Wrapper = styled('span')`
  &.block {
    display: block;
    margin-top: 20px;
  }

  &:before,
  &:after {
    color: #969584;
  }
  &:before {
    content: '{ ';
  }
  &:after {
    content: ' }';
  }
`;

astroturf

Extract and process inline CSS literals in JavaScript files

MIT
Latest version published 8 months ago

Package Health Score

64 / 100
Full package analysis

Similar packages