walmartlabs / circus-stylus Goto Github PK

We want to support things like:

background: url('file!foo.png');

To allow for optimizations for cases where we don't want to inline failover images, etc.

We want to optimize image handling and generate specific stylesheets for different environments. General plan of attack:

• Non-image styles should be rendered as normal into one stylesheet.
• Images should be broken out into environment specific stylesheets that augment the normal sheet. These should allow for:
  • SVG content
  • Pixel density-based raster content (From a technical side, this is likely not important on the pixel density scale. Any browser that is able to report a pixel density larger than 1 will likely support SVG, but workflows may dictate raster vs. SVG)

The require.css calls should then be augmented to allow for loading/unloading both sheets in unison.

"Built" include files are going to have issues with url references due to path concerns.

1. Users could move these references into the includes dir and they can be copied at build time. This would work and remove the concerns about the file not being available but this could also end up with a fair amount of overhead due to files being duplicated across multiple projects.
2. Can attempt to parse include files on build and copy over all references. This is more flexible for users but could also run into issues due to ambiguous constructs.

Both of these cases suffer from potential concerns of duplication when content is pulled in to multiple components. That concern should be handled by a publish step that maps include url references to published path names.

/cc @alande