rollup-plugin-cssifyfromdb

cssifyFromDB

A Rollup plugin that transforms @CSSify annotations inside FormantJS component templates, replacing them with CSS style objects fetched from a MongoDB design-system database. This plugin is thought to be used in conjonction with rollup-plugin-import-paths.

Installation

npm install rollup-plugin-cssifyFromDB

Example Usage

(rollup.config ad-hoc files are part of the formantJS distrib, example given here is somewhat theoritical)

In your rollup.config.mjs:

import cssifyFromDB from "rollup-plugin-cssifyFromDB";

export default {
  input: "src/index.js",
  plugins: [
    cssifyFromDB({
      dbURL: "mongodb://localhost:27017/themed_components",
      include: "**/*.js",
      exclude: "node_modules/**",
    }),
  ],
};

Example

In a FormantJS component template:

/**
 * @def ClickableComponent
 *
 * @CSSify styleName : ClickableComponentHost
 * @CSSify styleName : ClickableComponentMemberView
 * @CSSifyTheme themeName : basic-light
 */

Inside the same file:

var slotDef = new ComponentTemplate({
    type: "ComponentWithView",
    view : new ViewTemplate({
      nodeName: "pseudo-tag", /**@CSSifyStyle componentStyle : ClickableComponentHost */
    }),
    states: []
  }),
});

During the build, the plugin will replace @CSSifyStyle placeholders with style data from the DB. For example:

states: [],
sWrapper: CreateStyle(
  hostStyles
)

Where hostStyles is injected from MongoDB:

var hostStyles = [
  {
    "selector": ":host, div",
    "boxSizing": "border-box",
    "background": "none",
    "border": "0",
    "boxShadow": "none",
    "margin": "0",
    "outline": "0",
    "padding": "0",
    "verticalAlign": "baseline"
  }
];

Annotations

• @CSSify styleName : <name> Fetches and injects a style definition by name.
• @CSSifyTheme themeName : <theme> Applies a theme to the component’s styles.
• /**@CSSifyStyle componentStyle : <name> */ Placeholder annotation replaced with the final CreateStyle(...) call.
• /**@CSSifyDEBUG*/ Enables verbose logging during transformation.