@stylable/schema-extract

@stylable/schema-extract is a utility that allows you to transform Stylable stylesheets into JSON-Schema compatible format.

Installation

yarn add @stylable/schema-extract

Usage

Import the extractSchema utility function from @stylable/schema-extract, and invoke it. The extractSchema function receives four arguments, css, filePath, rootPath and path.

Arguments

Name	Type	Description
css	string	CSS content to be processed and extracted
filePath	string	absolute path to the file currently being extracted
basePath	string	absolute path to the root of the project. all generated paths will be absolute to this base path
path	MinimalPath	path object containing a minimal set of required utility methods

MinimalPath interface

export interface MinimalPath {
    dirname:    (p: string) => string;
    join:       (...paths: string[]) => string;
    isAbsolute: (path: string) => boolean;
    relative:   (from: string, to: string) => string;
}

Example

Usage example for extractSchema.

import fs from 'fs';
import path from 'path';
import { extractSchema } from '@stylable/schema-extract';

const filePath = path.join(__dirname, 'src/entry.st.css');
const css = fs.readFileSync(filePath, 'utf8');

const stylesheetSchema = extractSchema(
    css,
    filePath,
    __dirname,
    path
);

Source

/* ~/myproject/src/entry.st.css */
:import {
    -st-from: './imported.st.css';
    -st-default: Comp;
    -st-named: part;
}
:vars {
    myColor: red;
}
.root {
    -st-extends: Comp;
}
.otherPart {
    -st-extends: part;
}

Result

{
    "$id": "/entry.st.css",
    "$ref": "stylable/module",
    "properties": {
        "root": {
            "$ref": "stylable/class",
            "states": {
                "userSelected": {
                    "type": "boolean"
                }
            },
            "extends": {
                "$ref": "/imported.st.css#root"
            }
        },
        "Comp": {},
        "part": {},
        "myColor": {
            "$ref": "stylable/var"
        },
        "otherPart": {
            "$ref": "stylable/class",
            "states": {
                "size": {
                    "type": "enum",
                    "enum": [
                        "s",
                        "m",
                        "l"
                    ]
                }
            },
            "extends": {
                "$ref": "/imported.st.css#part"
            }
        }
    }
}

License

Copyright (c) 2018 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.