@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.