Style with CSS

Style with CSS

This package contains PostCSS files with CSS rules that you can use, to style the Monster UI Framework components.

The PostCSS files can be directly included in your PostCSS files via IMPORT directly into your PostCSS files.

@import "@schukai/component-style/source/style/mixin/button.pcss";
@import "@schukai/component-style/source/style/mixin/media.pcss";
@import "@schukai/component-style/source/style/mixin/typography.pcss";

The whole thing is then built with PostCSS.

const postcss = require('postcss');
const importCss = require('postcss-import');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');

postcss([
    importCss({
        path: [...your paths...]
    }),
    autoprefixer,
    cssnano
]).process(content, {
    from: undefined,
}).catch((e) => {
   console.error(e + " in file " + sourceFile);
}).then(result => {
    console.log(newPath, result.css);
});

But you can also use the Javascript StyleSheet definitions from the .mjs files in your javascript.

import {NormalizeStylesheet} from "@schukai/component-style/source/stylesheet/normalize.mjs";
document.adoptedStyleSheets = [NormalizeStylesheet];

Alternatively, you can unpack the object again and insert it into the DOM as a style node. However, this method is not recommended because it is not performant.

import {NormalizeStylesheet} from "@schukai/component-style/source/stylesheet/normalize.mjs";

const style = document.createElement('style');
[...NormalizeStylesheet.cssRules].forEach((rule) => {
    style.innerHTML += (rule.cssText);
});

document.querySelector('head').appendChild(style);

If you build a web control, then the corresponding object must be returned from the method getCSSStyleSheet method.

/**
 *
 * @return {CSSStyleSheet[]}
 */
static getCSSStyleSheet() {
    return [NormalizeStylesheet, ...];
}