Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Overview

Aphrodite npm version Build Status Coverage Status Gitter chat gzip size size

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.

Support for colocating your styles with your JavaScript component.

  • Works great with and without React
  • Supports media queries without window.matchMedia
  • Supports pseudo-selectors like :hover, :active, etc. without needing to store hover or active state in components. :visited works just fine too.
  • Supports automatic global @font-face detection and insertion.
  • Respects precedence order when specifying multiple styles
  • Requires no AST transform
  • Injects only the exact styles needed for the render into the DOM.
  • Can be used for server rendering
  • Few dependencies, small (20k, 6k gzipped)
  • No external CSS file generated for inclusion
  • Autoprefixes styles

Installation

Aphrodite is distributed via npm:

npm install --save aphrodite

API

If you'd rather watch introductory videos, you can find them here.

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';

class App extends Component {
    render() {
        return <div>
            <span className={css(styles.red)}>
                This is red.
            </span>
            <span className={css(styles.hover)}>
                This turns red on hover.
            </span>
            <span className={css(styles.small)}>
                This turns red when the browser is less than 600px width.
            </span>
            <span className={css(styles.red, styles.blue)}>
                This is blue.
            </span>
            <span className={css(styles.blue, styles.small)}>
                This is blue and turns red when the browser is less than
                600px width.
            </span>
        </div>;
    }
}

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    },

    blue: {
        backgroundColor: 'blue'
    },

    hover: {
        ':hover': {
            backgroundColor: 'red'
        }
    },

    small: {
        '@media (max-width: 600px)': {
            backgroundColor: 'red',
        }
    }
});

Conditionally Applying Styles

Note: If you want to conditionally use styles, that is simply accomplished via:

const className = css(
  shouldBeRed() ? styles.red : styles.blue,
  shouldBeResponsive() && styles.small,
  shouldBeHoverable() && styles.hover
)

<div className={className}>Hi</div>

This is possible because any falsey arguments will be ignored.

Combining Styles

To combine styles, pass multiple styles or arrays of styles into css(). This is common when combining styles from an owner component:

class App extends Component {
    render() {
        return <Marker styles={[styles.large, styles.red]} />;
    }
}

class Marker extends Component {
    render() {
        // css() accepts styles, arrays of styles (including nested arrays),
        // and falsy values including undefined.
        return <div className={css(styles.marker, this.props.styles)} />;
    }
}

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    },

    large: {
        height: 20,
        width: 20
    },

    marker: {
        backgroundColor: 'blue'
    }
});

Resetting Style Cache

The reset function can be used to reset the HTML style tag, injection buffer, and injected cache. Useful when Aphrodite needs to be torn down and set back up.

import { reset } from 'aphrodite';

reset();

While the resetInjectedStyle function can be used to reset the injected cache for a single key (usually the class name).

import { resetInjectedStyle } from 'aphrodite';

resetInjectedStyle('class_1sAs8jg');

Server-side rendering

To perform server-side rendering, make a call to StyleSheetServer.renderStatic, which takes a callback. Do your rendering inside of the callback and return the generated HTML. All of the calls to css() inside of the callback will be collected and the generated css as well as the generated HTML will be returned.

Rehydrating lets Aphrodite know which styles have already been inserted into the page. If you don't rehydrate, Aphrodite might add duplicate styles to the page.

To perform rehydration, call StyleSheet.rehydrate with the list of generated class names returned to you by StyleSheetServer.renderStatic.

Note: If you are using aphrodite/no-important in your project and you want to render it on server side, be sure to import StyleSheetServer from aphrodite/no-important otherwise you are going to get an error.

As an example:

import { StyleSheetServer } from 'aphrodite';

// Contains the generated html, as well as the generated css and some
// rehydration data.
var {html, css} = StyleSheetServer.renderStatic(() => {
    return ReactDOMServer.renderToString(<App/>);
});

// Return the base HTML, which contains your rendered HTML as well as a
// simple rehydration script.
return `
    <html>
        <head>
            <style data-aphrodite>${css.content}</style>
        </head>
        <body>
            <div id='root'>${html}</div>
            <script src="./bundle.js"></script>
            <script>
                StyleSheet.rehydrate(${JSON.stringify(css.renderedClassNames)});
                ReactDOM.render(<App/>, document.getElementById('root'));
            </script>
        </body>
    </html>
`;

Disabling !important

By default, Aphrodite will append !important to style definitions. This is intended to make integrating with a pre-existing codebase easier. If you'd like to avoid this behaviour, then instead of importing aphrodite, import aphrodite/no-important. Otherwise, usage is the same:

import { StyleSheet, css } from 'aphrodite/no-important';

Minifying style names

By default, Aphrodite will minify style names down to their hashes in production (process.env.NODE_ENV === 'production'). You can override this behavior by calling minify with true or false before calling StyleSheet.create.

This is useful if you want to facilitate debugging in production for example.

import { StyleSheet, minify } from 'aphrodite';

// Always keep the full style names
minify(false);

// ... proceed to use StyleSheet.create etc.

Font Faces

Creating custom font faces is a special case. Typically you need to define a global @font-face rule. In the case of Aphrodite we only want to insert that rule if it's actually being referenced by a class that's in the page. We've made it so that the fontFamily property can accept a font-face object (either directly or inside an array). A global @font-face rule is then generated based on the font definition.

const coolFont = {
    fontFamily: "CoolFont",
    fontStyle: "normal",
    fontWeight: "normal",
    src: "url('coolfont.woff2') format('woff2')"
};

const styles = StyleSheet.create({
    headingText: {
        fontFamily: coolFont,
        fontSize: 20
    },
    bodyText: {
        fontFamily: [coolFont, "sans-serif"]
        fontSize: 12
    }
});

Aphrodite will ensure that the global @font-face rule for this font is only inserted once, no matter how many times it's referenced.

Animations

Similar to Font Faces, Aphrodite supports keyframe animations, but it's treated as a special case. Once we find an instance of the animation being referenced, a global @keyframes rule is created and appended to the page.

Animations are provided as objects describing the animation, in typical @keyframes fashion. Using the animationName property, you can supply a single animation object, or an array of animation objects. Other animation properties like animationDuration can be provided as strings.

const translateKeyframes = {
    '0%': {
        transform: 'translateX(0)',
    },

    '50%': {
        transform: 'translateX(100px)',
    },

    '100%': {
        transform: 'translateX(0)',
    },
};

const opacityKeyframes = {
    'from': {
        opacity: 0,
    },

    'to': {
        opacity: 1,
    }
};

const styles = StyleSheet.create({
    zippyHeader: {
        animationName: [translateKeyframes, opacityKeyframes],
        animationDuration: '3s, 1200ms',
        animationIterationCount: 'infinite',
    },
});

Aphrodite will ensure that @keyframes rules are never duplicated, no matter how many times a given rule is referenced.

Use without React

Aphrodite was built with React in mind but does not depend on React. Here, you can see it used with Web Components:

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    }
});

class App extends HTMLElement {
    attachedCallback() {
        this.innerHTML = `
            <div class="${css(styles.red)}">
                This is red.
            </div>
        `;
    }
}

document.registerElement('my-app', App);

Caveats

Style injection and buffering

Aphrodite will automatically attempt to create a <style> tag in the document's <head> element to put its generated styles in. Aphrodite will only generate one <style> tag and will add new styles to this over time. If you want to control which style tag Aphrodite uses, create a style tag yourself with the data-aphrodite attribute and Aphrodite will use that instead of creating one for you.

To speed up injection of styles, Aphrodite will automatically try to buffer writes to this <style> tag so that minimum number of DOM modifications happen.

Aphrodite uses asap to schedule buffer flushing. If you measure DOM elements' dimensions in componentDidMount or componentDidUpdate, you can use setTimeout or flushToStyleTag to ensure all styles are injected.

import { StyleSheet, css } from 'aphrodite';

class Component extends React.Component {
    render() {
        return <div ref="root" className={css(styles.div)} />;
    }

    componentDidMount() {
        // At this point styles might not be injected yet.
        this.refs.root.offsetHeight; // 0 or 10

        setTimeout(() => {
            this.refs.root.offsetHeight; // 10
        }, 0);
    }
}

const styles = StyleSheet.create({
    div: {
        height: 10,
    },
});

Assigning a string to a content property for a pseudo-element

When assigning a string to the content property it requires double or single quotes in CSS. Therefore with Aphrodite you also have to provide the quotes within the value string for content to match how it will be represented in CSS.

As an example:

const styles = StyleSheet.create({
  large: {
      ':after': {
        content: '"Aphrodite"',
      },
    },
  },
  small: {
      ':before': {
        content: "'Aphrodite'",
      },
    },
  });

The generated css will be:

  .large_im3wl1:after {
      content: "Aphrodite" !important;
  }

  .small_ffd5jf:before {
      content: 'Aphrodite' !important;
  }

Overriding styles

When combining multiple aphrodite styles, you are strongly recommended to merge all of your styles into a single call to css(), and should not combine the generated class names that aphrodite outputs (via string concatenation, classnames, etc.). For example, if you have a base style of foo which you are trying to override with bar:

Do this:

const styles = StyleSheet.create({
  foo: {
    color: 'red'
  },

  bar: {
    color: 'blue'
  }
});

// ...

const className = css(styles.foo, styles.bar);

Don't do this:

const styles = StyleSheet.create({
  foo: {
    color: 'red'
  },

  bar: {
    color: 'blue'
  }
});

// ...

const className = css(styles.foo) + " " + css(styles.bar);

Why does it matter? Although the second one will produce a valid class name, it cannot guarantee that the bar styles will override the foo ones. The way the CSS works, it is not the class name that comes last on an element that matters, it is specificity. When we look at the generated CSS though, we find that all of the class names have the same specificity, since they are all a single class name:

.foo_im3wl1 {
  color: red;
}
.bar_hxfs3d {
  color: blue;
}

In the case where the specificity is the same, what matters is the order that the styles appear in the stylesheet. That is, if the generated stylesheet looks like

.foo_im3wl1 {
  color: red;
}
.bar_hxfs3d {
  color: blue;
}

then you will get the appropriate effect of the bar styles overriding the foo ones, but if the stylesheet looks like

.bar_hxfs3d {
  color: blue;
}
.foo_im3wl1 {
  color: red;
}

then we end up with the opposite effect, with foo overriding bar! The way to solve this is to pass both of the styles into aphrodite's css() call. Then, it will produce a single class name, like foo_im3wl1-o_O-bar_hxfs3d, with the correctly overridden styles, thus solving the problem:

.foo_im3wl1-o_O-bar_hxfs3d {
  color: blue;
}

Object key ordering

When styles are specified in Aphrodite, the order that they appear in the actual stylesheet depends on the order that keys are retrieved from the objects. This ordering is determined by the JavaScript engine that is being used to render the styles. Sometimes, the order that the styles appear in the stylesheet matter for the semantics of the CSS. For instance, depending on the engine, the styles generated from

const styles = StyleSheet.create({
    ordered: {
        margin: 0,
        marginLeft: 15,
    },
});
css(styles.ordered);

you might expect the following CSS to be generated:

margin: 0px;
margin-left: 15px;

but depending on the ordering of the keys in the style object, the CSS might appear as

margin-left: 15px;
margin: 0px;

which is semantically different, because the style which appears later will override the style before it.

This might also manifest as a problem when server-side rendering, if the generated styles appear in a different order on the client and on the server.

If you experience this issue where styles don't appear in the generated CSS in the order that they appear in your objects, there are two solutions:

  1. Don't use shorthand properties. For instance, in the margin example above, by switching from using a shorthand property and a longhand property in the same styles to using only longhand properties, the issue could be avoided.

    const styles = StyleSheet.create({
        ordered: {
            marginTop: 0,
            marginRight: 0,
            marginBottom: 0,
            marginLeft: 15,
        },
    });
  2. Specify the ordering of your styles by specifying them using a Map. Since Maps preserve their insertion order, Aphrodite is able to place your styles in the correct order.

    const styles = StyleSheet.create({
        ordered: new Map([
            ["margin", 0],
            ["marginLeft", 15],
        ]),
    });

    Note that Maps are not fully supported in all browsers. It can be polyfilled by using a package like es6-shim.

Advanced: Extensions

Extra features can be added to Aphrodite using extensions.

To add extensions to Aphrodite, call StyleSheet.extend with the extensions you are adding. The result will be an object containing the usual exports of Aphrodite (css, StyleSheet, etc.) which will have your extensions included. For example:

// my-aphrodite.js
import {StyleSheet} from "aphrodite";

export default StyleSheet.extend([extension1, extension2]);

// styled.js
import {StyleSheet, css} from "my-aphrodite.js";

const styles = StyleSheet.create({
    ...
});

Note: Using extensions may cause Aphrodite's styles to not work properly. Plain Aphrodite, when used properly, ensures that the correct styles will always be applied to elements. Due to CSS specificity rules, extensions might allow you to generate styles that conflict with each other, causing incorrect styles to be shown. See the global extension below to see what could go wrong.

Creating extensions

Currently, there is only one kind of extension available: selector handlers. These kinds of extensions let you look at the selectors that someone specifies and generate new selectors based on them. They are used to handle pseudo-styles and media queries inside of Aphrodite. See the defaultSelectorHandlers docs for information about how to create a selector handler function.

To use your extension, create an object containing a key of the kind of extension that you created, and pass that into StyleSheet.extend():

const mySelectorHandler = ...;

const myExtension = {selectorHandler: mySelectorHandler};

const { StyleSheet: newStyleSheet, css: newCss } = StyleSheet.extend([myExtension]);

As an example, you could write an extension which generates global styles like

const globalSelectorHandler = (selector, _, generateSubtreeStyles) => {
    if (selector[0] !== "*") {
        return null;
    }

    return generateSubtreeStyles(selector.slice(1));
};

const globalExtension = {selectorHandler: globalSelectorHandler};

This might cause problems when two places try to generate styles for the same global selector however! For example, after

const styles = StyleSheet.create({
    globals: {
        '*div': {
            color: 'red',
        },
    }
});

const styles2 = StyleSheet.create({
    globals: {
        '*div': {
            color: 'blue',
        },
    },
});

css(styles.globals);
css(styles2.globals);

It isn't determinate whether divs will be red or blue.

Minify class names

Minify class names by setting the environment variable process.env.NODE_ENV to the string value production.

Tools

TODO

  • Add JSdoc
  • Consider removing !important from everything.

Other solutions

License (MIT)

Copyright (c) 2016 Khan Academy

Comments
  • Make

    Make "!important" optional

    Not yet ready for merge.

    Looking for feedback :)

    In https://github.com/Khan/aphrodite/issues/25, @xymostech mentioned adding an api like

    StyleSheet.create({
        ...
    }, { important: false });
    

    which sounded good to me.

    However, the actual CSS is not generated at the call to StyleSheet.create, but rather at the call to css. Thus I thought it made more sense for the !important option to be provided at the call to css. (Open to other ideas on this though.)

    Since css is variadic, I exported another function unimportantCss (open to better name) which does exactly what css does, but doesn't add !important to the CSS it generates.

    opened by montemishkin 46
  • Allow additional handlers for special selectors to be added.

    Allow additional handlers for special selectors to be added.

    Summary: This adds the ability for users of Aphrodite to add extensions which support other special selectors. I'm not sure if the interface that is exposed is expressive enough to allow people to make all of the changes that they might want to, but it would let people do the selector(...) thing:

    const regex = /^selector\((.*)\)$/;
    
    function(selector, baseSelector, callback) => {
        const match = selector.match(regex);
    
        if (!match) {
            return null;
        }
    
        return callback(`${baseSelector} ${match[1]}`);
    };
    

    Maybe fixes #10

    Test Plan:

    • npm run test

    @jlfwong @zgotsch @kentcdodds @montemishkin

    opened by xymostech 43
  • How to handle descendant selection of pseudo-states?

    How to handle descendant selection of pseudo-states?

    If I want to apply styles to a child based on its parent's :hover state, I think I have to track hover state in js. Is that accurate? Do you think handling this is in the scope of aphrodite?

    Specifically I am thinking of something that emulates the CSS:

    .parent:hover .child {
        background-color: blue;
    }
    
    opened by zgotsch 37
  • Update inline-style-prefixer ^2.0.0 -> ^3.0.1

    Update inline-style-prefixer ^2.0.0 -> ^3.0.1

    It seems that this version is a complete rewrite with some performance improvements. In my benchmarks, this seems to improve the speed of css() by about 10%.

    Changelog:

    • performance improvements (~10% faster)
    • ordering prefixed properties correctly
    • introducing new core prefixer that perform up to 4.5x faster
    • added a whole new generator to create your custom prefixer
    • added 4 new plugins to prefix special values
    • new documentation using gitbook
    • integrated flowtype
    opened by lencioni 27
  • really try insertRule

    really try insertRule

    Features:

    • ~~Fix #156 by generating short, unique font names~~ See #158
    • Fix #155 by roughly treating pseudos like media queries
    • Fix #147 by using insertRule
    • ~~Remove px from 0 _because every byte counts_™~~ See #159
    • adds 4-space indent to eslint

    I'm betting this is gonna be a hard sell, so here's the pitch:

    • Touching a style tag after creation is bad. Really bad. After changing it, the DOM must parse the text, then evaluate the rules. ALL the rules. This isn't cheap, and it grows in O(n) time as more styles get added. We could solve this by creating multiple tags, but having 4000 style tags is tough to debug. Plus, if you exceed that, IE10 yells at you. We can kick the can down the road by sticking fonts in their own tag, but then you get a flicker on initial load & for every font you async load. Also, if a tag gets large enough, it'll cause a flicker regardless of a font being in there or not.
    • This allows for styles to fail loudly. I think bugs like #155 went uncaught largely because browsers parse style tags and toss out anything that doesn't make sense. The tossing stuff out is a silent fail. By using an API that doesn't fail silently, we can use it down the road when we create a dev/production build. Could you imagine? You could run QA without needing to know what the page is supposed to look like because it just logs an error if a style didn't load. I did that with my own app while writing this. It's a treat 👍
    • This opens the door to removing inline-styles-prefixer from the client build, saving ~3KB
    • This opens the door to removing asap since injections are so insanely cheap. This would solve #76 in the best way possible.

    How it works: The buffer used to store an big glob of text comprised of many rules. Now, the buffer stores an array of rules + for each rule a boolean called isDangerous. If a rule is dangerous, we use a try/catch block, which means V8 will bail on that function and never try to optimize it. That's fine because the calling function is externalized and the only things that trigger a dangerous flag are the vendor-proprietary things that they don't list in their computedStyles: ::-moz-placeholder, ::-moz-focus-inner or already prefixed globals that user is manually trying to inject. Otherwise, we inject with confidence.

    We could whitelist these things, but by not using a whitelist, we save a little space in the payload. More importantly, we don't have to update the package whenever a browser vendor adds something. Also worth noting that the call is memoized so we only make 1 call to window.getComputedStyles and that array learns browser prefixes, so aphrodite gets (negligibly) faster the more you use it.

    By avoiding prefixAll, we only generate rules that the client can understand. This is great because it is faster (less to generate = less to inject), gets rid of prefix problems (#100), and opens up the door to more helpful debugging.

    Happy to answer questions. I know it's a big change, but for large apps, it's a necessary one. I know there are a few other folks like @abhiaiyer91 with large apps who have been struggling with the same performance bottlenecks, so I wanted to provide an option to stay competitive with JSS.

    opened by mattkrick 27
  • Added promise support to renderStatic

    Added promise support to renderStatic

    I'm yielding on the rendering of my app until all of my data requirements have been loaded. I want to keep the buffer open while this is happening, though.

    This means that I need to wait on an async resolution before I can do my final static render, these changes should make it so my scenario is supported.

    I have not bumped the npm version, if that's needed I'll be happy to make that change.

    Thanks for all your great work on aphrodite!

    opened by gtg092x 23
  • Aphrodite + Jest error

    Aphrodite + Jest error

    I'm running an App that uses Aphrodite and Jest. After the test succeed, I get this error, related to Aphrodite:

    /home/ricardo/Documents/Projects/reaxor/node_modules/aphrodite/lib/inject.js:29
            styleTag = document.querySelector("style[data-aphrodite]");
                               ^
    TypeError: Cannot read property 'querySelector' of undefined
        at injectStyleTag (/home/ricardo/Documents/Projects/reaxor/node_modules/aphrodite/lib/inject.js:29:28)
        at flushToStyleTag (/home/ricardo/Documents/Projects/reaxor/node_modules/aphrodite/lib/inject.js:132:9)
        at RawTask.call (/home/ricardo/Documents/Projects/reaxor/node_modules/asap/asap.js:40:19)
        at flush (/home/ricardo/Documents/Projects/reaxor/node_modules/asap/raw.js:50:29)
        at /home/ricardo/Documents/Projects/reaxor/node_modules/jest-util/lib/FakeTimers.js:351:18
        at _combinedTickCallback (internal/process/next_tick.js:67:7)
        at process._tickCallback (internal/process/next_tick.js:98:9)
    npm ERR! Test failed.  See above for more details.
    
    
    opened by KadoBOT 23
  • add FlowType annotations

    add FlowType annotations

    • I prefer my code to remain valid and executable ECMAScript syntax, so I've added the FlowType annotations using the optional comment style: https://flowtype.org/blog/2015/02/20/Flow-Comments.html
    • I can switch this to real FlowType syntax if you like, as you're already using Babel anyway
    • I copied a few basic FlowType settings from yarn: https://github.com/yarnpkg/yarn/blob/v0.15.1/.flowconfig
    • while mostly arbitrary, some of the longer function signatures were broken into multiple lines, and some of the shorter function signatures remain on a single line
    • the one suppression I had to put in (// $FlowFixMe: ...) was because the built-in declaration of querySelector() is that it returns an HTMLElement, and FlowType strictly does not allow us to downcast to the HTMLStyleElement class as required here
    opened by jokeyrhyme 20
  • Importantify breaks data-uri's

    Importantify breaks data-uri's

    Hi! The following:

    .test {
        background: 'url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat left center';
    }
    

    will result in an important statement before base64 like so:

    background: url(data:image/gif !important;base64,R0IG
    

    In my use case, I'm requiring the images using webpack. The webpack config decides weather or not to encode this file into a data-uri or serving it as a static file based on the file size.

    I hope this makes sense :)

    opened by ostrgard 20
  • Error while running examples

    Error while running examples

    npm run examples

    > babel-node server.js
    
    module.js:341
        throw err;
        ^
    
    Error: Cannot find module 'asap'
        at Function.Module._resolveFilename (module.js:339:15)
        at Function.Module._load (module.js:290:25)
        at Module.require (module.js:367:17)
        at require (internal/module.js:16:19)
        at Object.<anonymous> (/home/ricardo/Documents/Projects/aphrodite/src/inject.js:9:13)
        at Module._compile (module.js:413:34)
        at normalLoader (/home/ricardo/Documents/Projects/aphrodite/examples/node_modules/babel-core/lib/api/register/node.js:199:5)
        at Object.require.extensions.(anonymous function) [as .js] (/home/ricardo/Documents/Projects/aphrodite/examples/node_modules/babel-core/lib/api/register/node.js:216:7)
        at Module.load (module.js:357:32)
        at Function.Module._load (module.js:314:12)
    
    
    opened by KadoBOT 19
  • How to add multiple animations?

    How to add multiple animations?

    The shorthand syntax for animations doesn't work and i would like to have this:

    {
          animation: 
              first-animation 2s infinite, 
              another-animation 1s;
    }
    

    Is it possible?

    opened by kitze 16
  • Handling multiple selectors

    Handling multiple selectors

    This issue is to resurface a four year old issue https://github.com/Khan/aphrodite/issues/196.

    As the issue already explains, using a , to separate two psuedo slectors in the same style block, wont add the base style (with the hash) to the second psuedo-selector. I've been scrutinising the library's code and beleive it si due to the fact that the logic only targets the first psuedo selector in the generateSubtreeStyles function: https://github.com/Khan/aphrodite/blob/225f43c5802259a9e042b384a1f4f2e5b48094ea/src/generate.js#L74-L81 I don't have the expertise to solve this problem or I would submit a PR. I hope this sort of feature can be added. Ideally, I would want it to work like this:

    const style = StyleSheet.create({
      selector1: {
        ':before, :after': {backgroundColor: "green"}
    });
    

    to output something like this:

    .selector1_HASH:before, .selector1_HASH:after {
       background-color: green;
    }
    

    Thanks!

    opened by Abban-Fahim 0
  • improve npmignore

    improve npmignore

    Update .npmignore file to not publish files and dirs that aren't used by consumers. This simplified the distributed binaries but the main motivation for this change is that .flowconfig is included when aphrodite is published. Which if I browse the files within node_modules, flow server will crash because it detects multiple upstream flow configs.

    @lencioni @jlfwong

    opened by Brianzchen 4
  • Update flow syntax

    Update flow syntax

    This change is all about maintaining the flowtype code.

    • Update to latest version so that it can be maintained easier and also allows LSP mode
    • Update flow config for best practice warnings including ambiguous-object-type which ensures as a library we explicitly define objects as exact/inexact for if flow types are exposed in the future
    • Fix all flow errors from upgrading flow version, no logic has been changed
    • Migrate from flow comment syntax to regular syntax and stripping with @babel/preset-flow. After upgrading there were syntax errors raised by flow in the dist file. Doing this removes the errors and makes the project easier to maintain
    • All src files are now flow typed which will help in future flow exposure

    @lencioni @jlfwong

    opened by Brianzchen 1
  • how can i do this compatible?

    how can i do this compatible?

    .linear-gradient-color(@from,@to) { background-image: linear-gradient(@from, @to); background-image:-moz-linear-gradient(@from, @to); background-image:-webkit-linear-gradient(@from, @to); background-image:-o-linear-gradient(@from, @to); }

    opened by Mrpaker 0
  • How to load ESM from a CDN? (development without build)

    How to load ESM from a CDN? (development without build)

    I'm playing around with a style of development where I'd write, for example: import {html, Component, render, useState} from "https://unpkg.com/htm/preact/standalone.mjs";

    And let evergreen browsers chew on that :)

    It occurs to me that at the moment, same is not possible with aphrodite:

    https://unpkg.com/aphrodite/dist/aphrodite.js is common js.

    If I do import {css} from "https://unpkg.com/[email protected]/src/no-important.js"; then loading fails because src/util.js has import stringHash from 'string-hash';

    It's same for es/..., where chunk-XXX has stringHash and import asap from 'asap';

    opened by dimaqq 1
  • Is Aphrodite still actively maintained

    Is Aphrodite still actively maintained

    Hi,

    The last release was v2.4.0 in Aug 2019, and there is 0 commits since then. The commits were far in between, only 27 commits since v. 2.2.3 in Aug 2018.

    I see that the main contributors are no longer with Khan. Is Aphrodite still maintained?

    Thanks.

    opened by manian-kumaran 6
Owner
Khan Academy
Working to make a free, world-class education available for anyone, anywhere.
Khan Academy
Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo Read the blog post Checkout the demo Developing By default, the content on the site is based off our public Notion page.

Vercel 384 Sep 8, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 124 Aug 11, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Sep 20, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 94 Sep 13, 2022
Full CSS support for JSX without compromises

styled-jsx Need help? Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client). Code and docs are for v3 which w

Vercel 7.2k Sep 21, 2022
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.7k Sep 22, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 159.5k Sep 18, 2022
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.1k Sep 23, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 60.7k Sep 19, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.7k Sep 15, 2022
A minimalist CSS framework.

A minimalist CSS framework. Why it's awesome Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipp

Milligram 9.8k Sep 25, 2022
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Sep 19, 2022
The Less Formal CSS Framework

PaperCSS The less formal CSS framework, with a quick and easy integration. Table of contents Table of contents Quick-start Status Content of the frame

PaperCSS 3.7k Sep 23, 2022
A classless CSS framework to write modern websites using only HTML.

new.css new.css A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb. All it does is set some sensible defaults and sty

null 3.6k Sep 22, 2022
Feature rich CSS framework for the new decade https://shorthandcss.com

Shorthand Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using .scss only. Size Dist File URL Li

Shorthand 250 Aug 28, 2022
A new flexbox based CSS micro-framework.

Strawberry CSS What Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and

Andrea Simone Costa 72 Aug 18, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 60.7k Sep 20, 2022
NES-style CSS Framework | ファミコン風CSSフレームワーク

日本語 / 简体中文 / Español / Português / Русский / Français NES.css is a NES-style(8bit-like) CSS Framework. Installation Styles NES.css is available via ei

null 18.9k Sep 16, 2022