One of classes from app stylesheet not available in example

[Kamilius]

I'm generating app.css from an application *.scss structure. Class .text-bold is being properly preprocessed into a final app.css file. But when I try to apply this class to an example, styles are not being applied. Fun thing, is that applying next class .text-italic which is in a same file and right after .text-bold, styles are applied properly.

After briefly checking livingcss code, to find out where it renders app.css contents (contents of context.stylesheets), I've found a node <style scope="livingcss-example"></style> which contains my styles, but not all of them. On the other hand when I'm passing app.css into context.globalStylesheets it works, but is being applied globally, which's not good for me. Any ideas on what can cause such a behavior?

Node script which generates livingcss styleguide:

const livingcss = require('livingcss'); // eslint-disable-line import/no-extraneous-dependencies
const sass = require('node-sass');
const fs = require('fs');

const dirName = `${__dirname}/..`;
const options = {
  preprocess: (context) => {
    context.globalStylesheets = [
      `${dirName}/styleguide/styles/styleguide.css`,
    ];
    context.title = 'My styleguide';
    context.stylesheets.push(`${__dirname}/app.css`);
  },
};

fs.writeFileSync(`${dirName}/styleguide/app.css`,
  sass.renderSync({
    file: `${dirName}/app/src/_common/styles/main.scss`,
  }).css);

livingcss(`${dirName}/app/src/_common/styles/**/*.scss`, `${dirName}/styleguide`, options);

CSS of partial which is not being transferred into generated stylesheet:

/**
 * @section Bold text
 * @example
 * <div class="text-bold">Bold weight text letter-space: 0</div>
 */
.text-bold {
  font-weight: bold !important;
  letter-spacing: 0;
}

Btw, body styles like line-height or font-family are also not being applied.

[straker]

So I'm not able to reproduce this on my end with a test case. I created a single file main.scss and added just the text bold selector as you've given it to me. I then used your node script to generate the style guide and I get the correct output.

main.scss

/**
 * @section Bold text
 * @example
 * <div class="text-bold">Bold weight text letter-space: 0</div>
 */
.text-bold {
  font-weight: bold !important;
  letter-spacing: 0;
}

node script

var livingcss = require('livingcss');
const sass = require('node-sass');
const fs = require('fs');

const dirName = `${__dirname}`;
const options = {
  preprocess: (context) => {
    // context.globalStylesheets = [
    //   `${dirName}/styleguide.css`,
    // ];
    context.title = 'My styleguide';
    context.stylesheets.push(`${__dirname}/app.css`);
  },
};

fs.writeFileSync(`${dirName}/app.css`,
  sass.renderSync({
    file: `${dirName}/main.scss`,
  }).css);

livingcss(`${dirName}/*.scss`, `.`, options);

[straker]

I'm also seeing body and html styles correctly being applied to the examples

[Kamilius]

@straker your new release (4.1.4) actually fixed both of reported issues. So I'm closing this one. Thanks for help.

[straker]

Awesome, glad it worked out.