Socket
Socket
Sign inDemoInstall

stylable

Package Overview
Dependencies
Maintainers
3
Versions
96
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stylable - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

dist/src/stylable-processor.d.ts
dist/src/stylable-processor.js
dist/src/stylable-processor.js.map
src/stylable-processor.ts

2

dist/src/generator.d.ts

@@ -5,3 +5,3 @@ import { StylableTransformer } from "./stylable-transformer";

import { RuntimeStylesheet } from "./runtime";
import { StylableMeta } from "./postcss-process";
import { StylableMeta } from "./stylable-processor";
export declare function createGenerator(fs?: MinimalFS, requireModule?: (moduleId: string) => any, delimiter?: string): {

@@ -8,0 +8,0 @@ fileProcessor: FileProcessor<StylableMeta>;

6

dist/src/generator.js

@@ -8,3 +8,3 @@ "use strict";

var runtime_1 = require("./runtime");
var postcss_process_1 = require("./postcss-process");
var stylable_processor_1 = require("./stylable-processor");
function createGenerator(fs, requireModule, delimiter) {

@@ -18,3 +18,3 @@ if (fs === void 0) { fs = {

var fileProcessor = cached_process_file_1.cachedProcessFile(function (from, content) {
return postcss_process_1.process(parser_1.safeParse(content, { from: from }));
return stylable_processor_1.process(parser_1.safeParse(content, { from: from }));
}, fs);

@@ -43,3 +43,3 @@ function output(meta) {

var root = parser_1.safeParse(source, { from: path });
var meta = postcss_process_1.process(root);
var meta = stylable_processor_1.process(root);
fileProcessor.add(meta.source, meta);

@@ -46,0 +46,0 @@ return output(meta);

4

dist/src/index.d.ts
export { safeParse } from "./parser";
export { cachedProcessFile, FileProcessor } from "./cached-process-file";
export { StylableMeta, process, SDecl, SRule } from "./postcss-process";
export { createEmptyMeta, StylableMeta, process, SDecl, SRule } from "./stylable-processor";
export { StylableTransformer, StylableResults } from "./stylable-transformer";
export { CSSResolve, JSResolve, StylableResolver } from "./postcss-resolver";
export { Diagnostics } from "./diagnostics";
export { Diagnostics, Diagnostic } from "./diagnostics";
export { createGenerator } from "./generator";

@@ -8,0 +8,0 @@ export { createMinimalFS, File, MinimalFSSetup } from "./memory-minimal-fs";

5

dist/src/index.js

@@ -10,4 +10,5 @@ "use strict";

exports.cachedProcessFile = cached_process_file_1.cachedProcessFile;
var postcss_process_1 = require("./postcss-process");
exports.process = postcss_process_1.process;
var stylable_processor_1 = require("./stylable-processor");
exports.createEmptyMeta = stylable_processor_1.createEmptyMeta;
exports.process = stylable_processor_1.process;
var stylable_transformer_1 = require("./stylable-transformer");

@@ -14,0 +15,0 @@ exports.StylableTransformer = stylable_transformer_1.StylableTransformer;

3

dist/src/parser.d.ts
import { CSSObject } from "./types";
import * as postcss from "postcss";
export declare function cssObjectToAst(cssObject: CSSObject, sourceFile?: string): postcss.LazyResult;
export declare function stringifyCSSObject(cssObject: CSSObject): string;
export declare function objectifyCSS(css: string): CSSObject;
export declare function fromCSS(_css: string, _namespace?: string, _source?: string): void;
export declare function safeParse(css: string, options?: postcss.ProcessOptions): any;

20

dist/src/parser.js

@@ -11,13 +11,6 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var stylable_value_parsers_1 = require("./stylable-value-parsers");
var postcss = require("postcss");
var objectify = require("../modules/post-css-objectify");
var postcssJS = require("postcss-js");
var postcssNested = require("postcss-nested");
var safeParser = require("postcss-safe-parser");
var stylableObjectifyConfig = {
noCamel: [stylable_value_parsers_1.STYLABLE_VALUE_MATCHER],
noCamelSelector: [/^:vars$/],
mergeSame: false
};
var postcssConfig = { parser: postcssJS };

@@ -30,15 +23,2 @@ var processor = postcss([postcssNested]);

exports.cssObjectToAst = cssObjectToAst;
function stringifyCSSObject(cssObject) {
return cssObjectToAst(cssObject).css;
}
exports.stringifyCSSObject = stringifyCSSObject;
function objectifyCSS(css) {
// return stylis('', css);
return objectify(safeParser(css), stylableObjectifyConfig);
}
exports.objectifyCSS = objectifyCSS;
function fromCSS(_css, _namespace, _source) {
throw "TODO: implement";
}
exports.fromCSS = fromCSS;
function safeParse(css, options) {

@@ -45,0 +25,0 @@ if (options === void 0) { options = { from: 'style.css' }; }

2

dist/src/postcss-plugin.d.ts
import { FileProcessor, MinimalFS } from "./cached-process-file";
import { StylableMeta } from "./postcss-process";
import { StylableMeta } from "./stylable-processor";
export interface PluginOptions {
}
export declare function createGenerator(fileProcessor: FileProcessor<StylableMeta>, fs: MinimalFS): (source: string, path: string) => void;

6

dist/src/postcss-plugin.js

@@ -9,3 +9,3 @@ "use strict";

var runtime_1 = require("./runtime");
var postcss_process_1 = require("./postcss-process");
var stylable_processor_1 = require("./stylable-processor");
var fs_1 = require("fs");

@@ -18,7 +18,7 @@ function createGenerator(fileProcessor, fs) {

fileProcessor = fileProcessor || cached_process_file_1.cachedProcessFile(function (from, content) {
return postcss_process_1.process(postcss.parse(content, { from: from }));
return stylable_processor_1.process(postcss.parse(content, { from: from }));
}, fs);
return function generate(source, path) {
var root = parser_1.safeParse(source, { from: path });
var meta = postcss_process_1.process(root);
var meta = stylable_processor_1.process(root);
fileProcessor.add(meta.source, meta);

@@ -25,0 +25,0 @@ var transformer = new stylable_transformer_1.StylableTransformer({

6

dist/src/postcss-resolver.d.ts

@@ -1,2 +0,2 @@

import { StylableMeta, StylableSymbol } from './postcss-process';
import { StylableMeta, StylableSymbol } from './stylable-processor';
import { FileProcessor } from "./cached-process-file";

@@ -14,4 +14,4 @@ export interface CSSResolve {

export declare class StylableResolver {
private fileProcessor;
private requireModule;
protected fileProcessor: FileProcessor<StylableMeta>;
protected requireModule: (modulePath: string) => any;
constructor(fileProcessor: FileProcessor<StylableMeta>, requireModule: (modulePath: string) => any);

@@ -18,0 +18,0 @@ resolveVarValue(meta: StylableMeta, name: string): string | null;

7

dist/src/stylable-transformer.d.ts
import * as postcss from 'postcss';
import { StylableMeta, SRule, ClassSymbol, StylableSymbol } from './postcss-process';
import { StylableMeta, SRule, ClassSymbol, StylableSymbol } from './stylable-processor';
import { FileProcessor } from "./cached-process-file";

@@ -34,3 +34,6 @@ import { SelectorAstNode } from "./selector-utils";

handleClass(meta: StylableMeta, node: SelectorAstNode, name: string, metaExports: Pojo<string>): CSSResolve;
handleElement(meta: StylableMeta, node: SelectorAstNode, name: string): StylableMeta;
handleElement(meta: StylableMeta, node: SelectorAstNode, name: string): {
meta: StylableMeta;
symbol: StylableSymbol;
};
handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string): CSSResolve;

@@ -37,0 +40,0 @@ handlePseudoClass(meta: StylableMeta, node: SelectorAstNode, name: string, symbol: StylableSymbol): StylableMeta;

20

dist/src/stylable-transformer.js

@@ -294,3 +294,5 @@ "use strict";

else if (type === 'element') {
current = _this.handleElement(current, node, name);
var next = _this.handleElement(current, node, name);
symbol = next.symbol;
current = next.meta;
}

@@ -340,2 +342,6 @@ else if (type === 'pseudo-element') {

node.name = this.exportClass(next_1.meta, next_1.symbol.name, next_1.symbol, metaExports);
// const extended = this.resolver.resolve(next.symbol[valueMapping.extends]);
// if (extended && extended._kind === 'css') {
// return extended;
// }
return next_1;

@@ -381,8 +387,8 @@ }

var next = this.resolver.resolve(extend);
if (next && next.meta) {
if (next && next._kind === 'css') {
node.type = 'class';
node.name = this.scope(next.symbol.name, next.meta.namespace);
return next.meta;
return next;
}
return meta;
return { meta: meta, symbol: tRule };
};

@@ -409,3 +415,7 @@ StylableTransformer.prototype.handlePseudoElement = function (meta, node, name) {

node.name = this.scope(symbol.name, current.namespace);
next = this.resolver.resolve(symbol[stylable_value_parsers_1.valueMapping.extends]);
var extend = symbol[stylable_value_parsers_1.valueMapping.extends];
if (extend && extend._kind === 'class' && extend.alias) {
extend = extend.alias;
}
next = this.resolver.resolve(extend);
if (next && next._kind === 'css') {

@@ -412,0 +422,0 @@ return next;

2

dist/src/stylable-utils.d.ts
import * as postcss from 'postcss';
import { SRule, StylableMeta, Imported } from "./postcss-process";
import { SRule, StylableMeta, Imported } from "./stylable-processor";
export declare function isValidDeclaration(decl: postcss.Declaration): boolean;

@@ -4,0 +4,0 @@ export declare function mergeRules(mixinRoot: postcss.Root, rule: SRule): SRule;

18

dist/tests/diagnostics.spec.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var chai_1 = require("chai");
var postcss_process_1 = require("../src/postcss-process");
var stylable_processor_1 = require("../src/stylable-processor");
var parser_1 = require("../src/parser");

@@ -77,3 +77,3 @@ var customButton = "\n .root{\n -st-states:shmover;\n }\n .my-part{\n\n }\n .my-variant{\n -st-variant:true;\n color:red;\n }\n \n";

var root = parser_1.safeParse(source.css);
var res = postcss_process_1.process(root);
var res = stylable_processor_1.process(root);
res.diagnostics.reports.forEach(function (report, i) {

@@ -89,3 +89,3 @@ chai_1.expect(report.message).to.equal(warnings[i].message);

}
xdescribe('diagnostics: warnings and errors', function () {
describe('diagnostics: warnings and errors', function () {
xdescribe('syntax', function () {

@@ -157,3 +157,3 @@ describe('selectors', function () {

});
it('should warn when defining states on element selector', function () {
xit('should warn when defining states on element selector', function () {
expectWarnings("\n MyElement{\n |-st-states|:shmover;\n }\n ", [{ message: 'cannot define pseudo states inside complex selectors', file: "main.css" }]);

@@ -190,3 +190,3 @@ });

});
it('should return warning for non import rules inside imports', function () {
xit('should return warning for non import rules inside imports', function () {
expectWarnings("\n :import{\n -st-from:\"./file\";\n -st-default:Comp;\n |@color@:red;|\n }\n ", [{ message: '"color" css attribute cannot be used inside :import block', file: "main.css" }], [{ content: customButton, path: 'file.css' }]);

@@ -202,3 +202,3 @@ });

});
it('should warn on not imported extends', function () {
xit('should warn on not imported extends', function () {
expectWarnings("\n .root {\n |-st-extends: @Comp@|;\n }\n ", [{ message: 'cannot resolve extends type for "Comp"', file: "main.css" }]);

@@ -217,3 +217,3 @@ });

describe('redeclare symbols', function () {
it('should warn override mixin on same rule', function () {
xit('should warn override mixin on same rule', function () {
expectWarnings("\n .a {}\n .b {\n -st-mixin: a;\n -st-mixin: a;\n }\n ", [{ message: 'override mixin on same rule', file: "main.css" }]);

@@ -233,3 +233,3 @@ });

});
describe('complex examples', function () {
xdescribe('complex examples', function () {
describe(':import', function () {

@@ -285,3 +285,3 @@ it('should return warning for unknown file', function () {

describe('selectors', function () {
it('should not allow conflicting extends', function () {
xit('should not allow conflicting extends', function () {
expectWarnings("\n :import {\n -st-from: \"./sheetA\";\n -st-named: SheetA;\n }\n :import {\n -st-from: \"./sheetB\";\n -st-named: SheetB;\n }\n .my-a { -st-extends: SheetA }\n .my-b { -st-extends: SheetB }\n\n .my-a.my-b {}\n SheetA.my-b {}\n SheetB.my-a {}\n ", [

@@ -288,0 +288,0 @@ { message: 'conflicting extends matching same target [.my-a.my-b]', file: "main.css" },

8

dist/tests/postcss-process.spec.js

@@ -5,3 +5,3 @@ "use strict";

var cached_process_file_1 = require("../src/cached-process-file");
var postcss_process_1 = require("../src/postcss-process");
var stylable_processor_1 = require("../src/stylable-processor");
var falt_match_1 = require("./matchers/falt-match");

@@ -23,3 +23,3 @@ var chai = require("chai");

if (options === void 0) { options = {}; }
return postcss_process_1.process(postcss.parse(source, options));
return stylable_processor_1.process(postcss.parse(source, options));
}

@@ -45,3 +45,3 @@ describe('Stylable postcss process', function () {

var result = processSource("\n @namespace \"name\";\n @namespace 'anther-name';\n ", { from: from });
expect(result.namespace).to.equal(postcss_process_1.processNamespace('anther-name', from));
expect(result.namespace).to.equal(stylable_processor_1.processNamespace('anther-name', from));
});

@@ -51,3 +51,3 @@ it('use filename as default namespace prefix', function () {

var result = processSource("\n \n ", { from: from });
expect(result.namespace).to.eql(postcss_process_1.processNamespace('style', from));
expect(result.namespace).to.eql(stylable_processor_1.processNamespace('style', from));
});

@@ -54,0 +54,0 @@ it('collect :import', function () {

36

dist/tests/stylable-transformer/scoping.spec.js

@@ -63,2 +63,18 @@ "use strict";

});
it('component/tag selector with custom states', function () {
var result = generate_test_util_1.generateStylableRoot({
entry: "/style.st.css",
files: {
'/style.st.css': {
namespace: 'ns',
content: "\n :import {\n -st-from: \"./inner.st.css\";\n -st-default: Container;\n } \n Container:state {}\n \n "
},
'/inner.st.css': {
namespace: 'ns1',
content: "\n .root {\n -st-states: state;\n }\n "
}
}
});
chai_1.expect(result.nodes[0].selector).to.equal('.ns--root .ns1--root[data-ns1-state]');
});
it('class selector that extends root with inner class targeting (deep)', function () {

@@ -141,2 +157,22 @@ var result = generate_test_util_1.generateStylableRoot({

});
it('resolve extend on extended alias', function () {
var result = generate_test_util_1.generateStylableRoot({
entry: "/entry.st.css",
files: {
'/entry.st.css': {
namespace: 'entry',
content: "\n :import {\n -st-from: \"./inner.st.css\";\n -st-default: Inner;\n } \n \n Inner::deep::up { }\n "
},
'/inner.st.css': {
namespace: 'Inner',
content: "\n :import {\n -st-from: \"./deep.st.css\";\n -st-default: deep;\n } \n .deep { \n -st-extends: deep;\n }\n "
},
'/deep.st.css': {
namespace: 'Deep',
content: "\n .root {}\n .up{}\n "
}
}
});
chai_1.expect(result.nodes[0].selector).to.equal('.entry--root .Inner--root .Inner--deep .Deep--up');
});
});

@@ -143,0 +179,0 @@ describe('scoped classes', function () {

4

dist/tests/utils/generate-test-util.js

@@ -12,3 +12,3 @@ "use strict";

var cached_process_file_1 = require("../../src/cached-process-file");
var postcss_process_1 = require("../../src/postcss-process");
var stylable_processor_1 = require("../../src/stylable-processor");
var postcss = require("postcss");

@@ -28,3 +28,3 @@ var stylable_transformer_1 = require("../../src/stylable-transformer");

var fileProcessor = cached_process_file_1.cachedProcessFile(function (from, content) {
var meta = postcss_process_1.process(postcss.parse(content, { from: from }));
var meta = stylable_processor_1.process(postcss.parse(content, { from: from }));
meta.namespace = files[from].namespace || meta.namespace;

@@ -31,0 +31,0 @@ return meta;

2

package.json
{
"name": "stylable",
"version": "4.0.5",
"version": "4.0.6",
"description": "",

@@ -5,0 +5,0 @@ "main": "./dist/src/index.js",

2

src/generator.ts

@@ -6,3 +6,3 @@ import { StylableTransformer } from "./stylable-transformer";

import { create, RuntimeStylesheet } from "./runtime";
import { StylableMeta, process } from "./postcss-process";
import { StylableMeta, process } from "./stylable-processor";

@@ -9,0 +9,0 @@

4

src/index.ts
export { safeParse } from "./parser";
export { cachedProcessFile, FileProcessor } from "./cached-process-file";
export { StylableMeta, process, SDecl, SRule } from "./postcss-process";
export { createEmptyMeta, StylableMeta, process, SDecl, SRule } from "./stylable-processor";
export { StylableTransformer, StylableResults } from "./stylable-transformer";
export { CSSResolve, JSResolve, StylableResolver } from "./postcss-resolver";
export { Diagnostics } from "./diagnostics";
export { Diagnostics, Diagnostic } from "./diagnostics";
export { createGenerator } from "./generator";

@@ -8,0 +8,0 @@ export { createMinimalFS, File, MinimalFSSetup } from "./memory-minimal-fs";

27

src/parser.ts
import { CSSObject } from "./types";
import { STYLABLE_VALUE_MATCHER } from "./stylable-value-parsers";
import * as postcss from "postcss";
const objectify = require("../modules/post-css-objectify");
const postcssJS = require("postcss-js");

@@ -12,11 +8,2 @@ const postcssNested = require("postcss-nested");

const stylableObjectifyConfig = {
noCamel: [STYLABLE_VALUE_MATCHER],
noCamelSelector: [/^:vars$/],
mergeSame: false
};
const postcssConfig = { parser: postcssJS };

@@ -29,18 +16,4 @@ const processor = postcss([postcssNested]);

export function stringifyCSSObject(cssObject: CSSObject): string {
return cssObjectToAst(cssObject).css;
}
export function objectifyCSS(css: string): CSSObject {
// return stylis('', css);
return objectify(safeParser(css), stylableObjectifyConfig);
}
export function fromCSS(_css: string, _namespace?: string, _source?: string) {
throw "TODO: implement";
}
export function safeParse(css: string, options: postcss.ProcessOptions = {from: 'style.css'}) {
return safeParser(css, options);
}

2

src/postcss-plugin.ts

@@ -7,3 +7,3 @@ import * as postcss from 'postcss';

import { create } from "./runtime";
import { StylableMeta, process } from "./postcss-process";
import { StylableMeta, process } from "./stylable-processor";
import { readFileSync, statSync } from "fs";

@@ -10,0 +10,0 @@

4

src/postcss-resolver.ts
// import * as postcss from 'postcss';
// import * as path from 'path';
import { StylableMeta, ImportSymbol, StylableSymbol } from './postcss-process';
import { StylableMeta, ImportSymbol, StylableSymbol } from './stylable-processor';
import { FileProcessor } from "./cached-process-file";

@@ -20,3 +20,3 @@ import { stripQuotation } from "./utils";

export class StylableResolver {
constructor(private fileProcessor: FileProcessor<StylableMeta>, private requireModule: (modulePath: string) => any) {}
constructor(protected fileProcessor: FileProcessor<StylableMeta>, protected requireModule: (modulePath: string) => any) {}
resolveVarValue(meta: StylableMeta, name: string) {

@@ -23,0 +23,0 @@ let value;

28

src/stylable-transformer.ts
import * as postcss from 'postcss';
import { StylableMeta, SRule, ClassSymbol, StylableSymbol, SAtRule, SDecl } from './postcss-process';
import { StylableMeta, SRule, ClassSymbol, StylableSymbol, SAtRule, SDecl } from './stylable-processor';
import { FileProcessor } from "./cached-process-file";

@@ -314,3 +314,5 @@ import { traverseNode, stringifySelector, SelectorAstNode, parseSelector } from "./selector-utils";

} else if (type === 'element') {
current = this.handleElement(current, node, name);
const next = this.handleElement(current, node, name);
symbol = next.symbol;
current = next.meta;
} else if (type === 'pseudo-element') {

@@ -363,2 +365,6 @@ const next = this.handlePseudoElement(current, node, name);

node.name = this.exportClass(next.meta, next.symbol.name, next.symbol, metaExports);
// const extended = this.resolver.resolve(next.symbol[valueMapping.extends]);
// if (extended && extended._kind === 'css') {
// return extended;
// }
return next;

@@ -369,3 +375,3 @@ } else {

}
const scopedName = this.exportClass(meta, name, symbol, metaExports);

@@ -402,12 +408,12 @@

handleElement(meta: StylableMeta, node: SelectorAstNode, name: string) {
const tRule = meta.elements[name];
const tRule = <StylableSymbol>meta.elements[name];
const extend = tRule ? meta.mappedSymbols[name] : undefined;
const next = this.resolver.resolve(extend);
if (next && next.meta) {
if (next && next._kind === 'css') {
node.type = 'class';
node.name = this.scope(next.symbol.name, next.meta.namespace);
return next.meta;
return next;
}
return meta;
return {meta, symbol: tRule};
}

@@ -432,3 +438,3 @@ handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string): CSSResolve {

if (symbol._kind === 'class') {
node.type = 'class';

@@ -438,3 +444,7 @@ node.before = symbol[valueMapping.root] ? '' : ' ';

next = this.resolver.resolve(symbol[valueMapping.extends]);
let extend = symbol[valueMapping.extends];
if(extend && extend._kind === 'class' && extend.alias){
extend = extend.alias;
}
next = this.resolver.resolve(extend);

@@ -441,0 +451,0 @@ if (next && next._kind === 'css') {

2

src/stylable-utils.ts
import * as postcss from 'postcss';
import { SRule, StylableMeta, Imported } from "./postcss-process";
import { SRule, StylableMeta, Imported } from "./stylable-processor";
import { parseSelector, stringifySelector, traverseNode } from "./selector-utils";

@@ -4,0 +4,0 @@ import { valueMapping } from "./stylable-value-parsers";

src/postcss-process.ts
dist/src/generator.js.map

Sorry, the diff of this file is not supported yet

dist/src/index.js.map

Sorry, the diff of this file is not supported yet

dist/src/parser.js.map

Sorry, the diff of this file is not supported yet

dist/src/postcss-plugin.js.map

Sorry, the diff of this file is not supported yet

dist/src/postcss-resolver.js.map

Sorry, the diff of this file is not supported yet

dist/src/stylable-transformer.js.map

Sorry, the diff of this file is not supported yet

dist/tests/diagnostics.spec.js.map

Sorry, the diff of this file is not supported yet

dist/tests/postcss-process.spec.js.map

Sorry, the diff of this file is not supported yet

dist/tests/stylable-transformer/scoping.spec.js.map

Sorry, the diff of this file is not supported yet

dist/tests/utils/generate-test-util.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc