Discussion for the Spec

[gasolin]

Goal

Write with pure CSS and post-compile to good performance static styles.

Origin Styles

The stylesheet as the demo base for manipulation.

settings.css

@import url("settings_core.css");
@import url("settings_large.css");

settings_core.css

headers {
}

settings_large.css

@media (min-width: 768px) {
  headers {
  }
}

@import support

Spec 1. inline import styles
output:

headers {
}

@media (min-width: 768px) {
  headers {
  }
}

Spec 2. inline import styles by option {"layout": "tiny"}

output: (discard _large @import)

headers {
}

Ref: might be done with https://github.com/simme/rework-importer

CSS var support

Spec 3. replace css variable to static value

all variables should declare in ::root and not allowed change inline.

::root {
  --bgcolor: 'orange'; 
}

headers {
  background-color: var(--bgcolor);
}

to

::root {
  --bgcolor: 'orange'; 
}

headers {
  background-color: orange;
}

or better (remove the ::root)

headers {
  background-color: orange;
}

Ref: might be done with https://github.com/reworkcss/rework-vars

Ref: origin proposal at buildingfirefoxos/Building-Blocks#36

[gasolin]

Spec 1 and Spec 3 is done

[cctuan]

Spec4. Need to support command line.

.bin/purecss input.css output.css

[shamenchens]

I have some thoughts on combining Spec 1 and 2. Given the option is {"layout": "large"}, maybe we can extract style definitions from media query block in settings_large.css and append to the bottom of settings.css, overwrite/extend existing style definition and save media query usage.
Output would be like:

headers {
}

/* extract from settings_large.css */
headers {
}

[gasolin]

@shamenchens it's a good idea. It could align to spec2: when there's an option

{
  width: "1024",
  height: "768",
  orientation: ['portrait', 'landscape']
}

, parse the inlined style and overwrite/extend existing style definition.