search

openstax / css-manipulate

Do more with CSS!
https://jsfiddle.net/philschatz/hjk2z4af/
5 stars 0 forks source link

Output unprocessed CSS #4

Closed philschatz closed 6 years ago

philschatz commented 6 years ago

This outputs an additional CSS file when the original CSS file contains "vanilla" CSS. For example the following input file will result in an additional CSS file:

Input HTML

<html>
<body>
  <p>Hi</p>
  <a href="#fig1">link</a>
</body>
</html>

Input CSS

/* input.css */
p { color: green; }
p::before {
  content: url("./images/icon.svg");
}
a:target('.figure') { 
  content: "See Figure";
  color: blue;
}
/*# sourceMappingURL=input.css.map */

Output HTML

<html>
<head>
  <style>
    .-css-plus-autogen-1 { color: green; }
    .-css-plus-autogen-2 { content: url("data:image/svg+xml;utf-8,..."); }
    .-css-plus-autogen-3 { color: blue; }
    /*# sourceMappingURL=data:application/json;utf-8,%7B%22 ... */
  </style>
<body>
  <p class="-css-plus-autogen-1">
    <span class="-css-plus-autogen-2"></span>
    Hi
  </p>
  <a href="#fig1" class="-css-plus-autogen-3">See Figure</a>
</body>
</html>

TODO

codecov[bot] commented 6 years ago

Codecov Report

Merging #4 into master will decrease coverage by 1.55%. The diff coverage is 84.51%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master       #4      +/-   ##
==========================================
- Coverage   88.24%   86.68%   -1.56%     
==========================================
  Files          73       78       +5     
  Lines        1982     2186     +204     
  Branches      354      430      +76     
==========================================
+ Hits         1749     1895     +146     
- Misses        233      291      +58
Impacted Files Coverage Δ
src/helper/assert.js 100% <ø> (+33.33%) :arrow_up:
src/declarations.js 97.46% <100%> (ø) :arrow_up:
src/helper/rule-with-pseudos.js 89.28% <100%> (ø) :arrow_up:
test/unit/vanilla.css 100% <100%> (ø)
test/unit/sandbox.in.xhtml 100% <100%> (ø)
test/unit/display-none.css 100% <100%> (ø) :arrow_up:
test/unit/sandbox.less 100% <100%> (ø)
src/helper/pseudo-element.js 98.11% <100%> (ø) :arrow_up:
test/unit/vanilla.in.xhtml 100% <100%> (ø)
src/functions.js 94.44% <100%> (+1.11%) :arrow_up:
... and 48 more

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 8ac372c...2e32acb. Read the comment docs.

philschatz commented 6 years ago

The idea

The main idea I'm trying to show is that we can now bake and style the book's Raw HTML file using css-plus (aka CSS Transforms). The CSS file can now contain both the transforms and styling in the same file. This is useful because now you do not have to manually keep the recipe and styling file in sync. For example, here is what styling one of the features could look like:

image

Input CSS

// Pseudocode. Some styling omitted for brevity
.astronomy-basics {
  // Add the purple header to the feature
  &::before {                    // transform
    tag-name-set: 'div';         // transform
    content: 'Astronomy Basics'; // transform
    color: white;                // styling
    background-color: #3C2747;   // styling
    // Add the feature image
    &::after {                                   // transform
      content: url(images/astronomy-basics.svg); // styling
    }
  }
}
Click me to show/hide the Output files ### Output HTML ```html
Astronomy Basics

Lorem Ipsum...

``` ### Output Styling ```css .-autogen-1 { color: white; background-color: #3C2747; } .-autogen-2 { content: url("data:image/svg+xml;utf-8,...gibberish"); } ```

Screencap

This screencap shows the conversion of the entire astronomy book (1min). It shows the following (click it for a larger version):

  1. the conversion process using the astronomy CSS (original)
  2. all the styling is "baked" into the HTML file as a <style> tag (no need to pass an additional CSS file to prince)
    • Note: all the CSS specificity is preserved from the original CSS file
    • even SVG/PNG images are embedded in the <style> tag
  3. source maps still work so you can click to edit the original LESS/SASS files

textbook-with-sourcemap-and-style