gasolin / provecss

Write future proved CSS from now
MIT License
1 stars 3 forks source link

Discussion for the Spec #1

Open gasolin opened 10 years ago

gasolin commented 10 years ago

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 https://github.com/buildingfirefoxos/Building-Blocks/issues/36

gasolin commented 10 years ago

Spec 1 and Spec 3 is done

cctuan commented 10 years ago

Spec4. Need to support command line.

.bin/purecss input.css output.css

shamenchens commented 10 years ago

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 commented 10 years ago

@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.