Skip to content

Latest commit

 

History

History

schema-extract

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

@stylable/schema-extract

npm version

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