diff --git a/README.md b/README.md index d9e02bd08..416dd73cd 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ React Component Usage: }, ` .root { background: white; - -sb-states: my-state; + -st-states: my-state; } `); diff --git a/_docs/components/definitly-stylable.md b/_docs/components/definitly-stylable.md index 275315ebe..bf3e5f738 100644 --- a/_docs/components/definitly-stylable.md +++ b/_docs/components/definitly-stylable.md @@ -18,7 +18,7 @@ A separate "interface" stylesheet can help describe a way to style it: ```css /* external-toggle-button.css */ .root {/* ToDo: way to override root selector */ - -sb-states: toggled(".btn--toggled"); + -st-states: toggled(".btn--toggled"); } :--icon :global(.btn__icon); :--label :global(.btn__label); @@ -31,11 +31,11 @@ Use like any other Stylable stylesheet to style: CSS api: ```css :import { - -sb-from: "./external-toggle-button.css"; - -sb-default: ToggleBtn; + -st-from: "./external-toggle-button.css"; + -st-default: ToggleBtn; } .my-btn{ - -sb-extends: ToggleBtn; + -st-extends: ToggleBtn; background: red; } .my-btn:toggled { diff --git a/_docs/deleted-files.md b/_docs/deleted-files.md index 6eaa8aeca..37a8b0124 100644 --- a/_docs/deleted-files.md +++ b/_docs/deleted-files.md @@ -147,35 +147,35 @@ Adds mixins allowing you to use component variants and create your own, use and Syntax and Terminology Reference Term Definiton Link to Code Example --sb-from gets the path to the module that's being imported Code --sb-default defines a default export class, as well as namespaces it / names the default import --sb-named defines and namespaces other exports from the same module +-st-from gets the path to the module that's being imported Code +-st-default defines a default export class, as well as namespaces it / names the default import +-st-named defines and namespaces other exports from the same module CLASSES --sb-root one per component, declares the class that is describing the root level of the component. default is false of course +-st-root one per component, declares the class that is describing the root level of the component. default is false of course }" --sb-from gets the path to the module that's being imported }" -sb-default defines a default export class, as well as namespaces it / names the default import -sb-named defines and namespaces other exports from the same module NS Classes -sb-root one per component, declares the class that is describing the root level of the component. default is false of course "set root: +-st-from gets the path to the module that's being imported }" -st-default defines a default export class, as well as namespaces it / names the default import -st-named defines and namespaces other exports from the same module NS Classes -st-root one per component, declares the class that is describing the root level of the component. default is false of course "set root: -.rootClass { -sb-root: true; color: blue; }" -sb-type type of the component - has to be declared elsewhere above, or imported from an external source "declare root as an exportable type: +.rootClass { -st-root: true; color: blue; }" -st-type type of the component - has to be declared elsewhere above, or imported from an external source "declare root as an exportable type: -.galleryRoot { -sb-root: true; -sb-type: Gallery; color: blue; } +.galleryRoot { -st-root: true; -st-type: Gallery; color: blue; } implement an imported or existing type on a class: -.galleryButton { -sb-type: Button; color: white; }" -sb-states list of states that are available on our component (hover, loading, empty) "expose a state on the root node: +.galleryButton { -st-type: Button; color: white; }" -st-states list of states that are available on our component (hover, loading, empty) "expose a state on the root node: -.galleryRoot { -sb-root: true; -sb-states: loading, error; color: blue; } +.galleryRoot { -st-root: true; -st-states: loading, error; color: blue; } implement the state: -.myGallery:loading { -sb-type: gallery; color: black; }" -sb-mixins list of mixins we want to apply to our class ".submitButton { -sb-type: Button; -sb-mixin: grid(5,3); background-color: white; } +.myGallery:loading { -st-type: gallery; color: black; }" -st-mixins list of mixins we want to apply to our class ".submitButton { -st-type: Button; -st-mixin: grid(5,3); background-color: white; } -will apply a grid layout with the parameters 5 and 3 (probably cols and rows)" -sb-preset marks a class as a "preset". a mixin without parameters. it's a boolean. "in Button we declare +will apply a grid layout with the parameters 5 and 3 (probably cols and rows)" -st-preset marks a class as a "preset". a mixin without parameters. it's a boolean. "in Button we declare -.Button_large { -sb-preset: true; font-size: larger; } +.Button_large { -st-preset: true; font-size: larger; } then in a button instance -.myButton { -sb-type: Button; -sb-mixin: grid(5,3), Button_large; background-color: white; }" +.myButton { -st-type: Button; -st-mixin: grid(5,3), Button_large; background-color: white; }" ## README diff --git a/_docs/references/extend-stylesheet.md b/_docs/references/extend-stylesheet.md index 7cd8bf4a6..0afe7a848 100644 --- a/_docs/references/extend-stylesheet.md +++ b/_docs/references/extend-stylesheet.md @@ -1,17 +1,17 @@ # Extend Stylable stylesheet -Use the `-sb-extends` directive rule to extend a CSS class with another stylesheet, in order to be able to describe styling of [pseudo classes](./pseudo-classes.md) and [pseudo elements](./pseudo-elements.md) of the extended stylesheet. +Use the `-st-extends` directive rule to extend a CSS class with another stylesheet, in order to be able to describe styling of [pseudo classes](./pseudo-classes.md) and [pseudo elements](./pseudo-elements.md) of the extended stylesheet. -> *Note*: `-sb-extends` may only be applied to [class selector](./class-selectors.md) and [root selector](./root.md). +> *Note*: `-st-extends` may only be applied to [class selector](./class-selectors.md) and [root selector](./root.md). CSS API: ```css :import{ - -sb-from: "./toggle-button.css"; - -sb-default: ToggleButton; + -st-from: "./toggle-button.css"; + -st-default: ToggleButton; } .check-btn{ - -sb-extends:ToggleButton; + -st-extends:ToggleButton; background:white; } .check-btn::label{ color:green; } /* style pseudo element label */ diff --git a/_docs/references/imports.md b/_docs/references/imports.md index c36569319..4a9856f11 100644 --- a/_docs/references/imports.md +++ b/_docs/references/imports.md @@ -2,11 +2,11 @@ **Stylable** enables you to import other stylesheets and modules in a way that is similar to [JS Imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import). You can then use the stylesheet or module as it's been defined, or just one or more of its named values, in your own **Stylable** stylesheet. -You use the **Stylable** syntax beginning with `-sb-` for the `:import` config: +You use the **Stylable** syntax beginning with `-st-` for the `:import` config: - * ```-sb-from:``` Identifies the path to the stylesheet or JavaScript module. Can be a relative path or a 3rd party path. - * ```-sb-default:``` Imports the default export of the module named in ```-sb-from:```. Use with the name by which to identify the imported value in the scoped stylesheet. - * ```-sb-named:``` List of the named exports to import into the local scoped stylesheet from the file named in ```-sb-from:```. + * ```-st-from:``` Identifies the path to the stylesheet or JavaScript module. Can be a relative path or a 3rd party path. + * ```-st-default:``` Imports the default export of the module named in ```-st-from:```. Use with the name by which to identify the imported value in the scoped stylesheet. + * ```-st-named:``` List of the named exports to import into the local scoped stylesheet from the file named in ```-st-from:```. > Note: > * `:import` is a Stylable directive and not a selector. @@ -21,8 +21,8 @@ Import the ```toggle-button.css``` stylesheet from a local location. Assign the ```css :import{ - -sb-from:"./toggle-button.css"; - -sb-default: ToggleButton; + -st-from:"./toggle-button.css"; + -st-default: ToggleButton; } ``` @@ -37,8 +37,8 @@ The values ```Gallery``` and ```Menu``` are imported from the local JavaScript m ```css :import{ - -sb-from:"./my-components"; - -sb-named: Gallery, Menu; + -st-from:"./my-components"; + -st-named: Gallery, Menu; } ``` @@ -53,8 +53,8 @@ The values ```Menu``` and ```Gallery``` are imported from the local JavaScript m ```css :import{ - -sb-from:"./my-components"; - -sb-named: Menu, Gallery as ProductGallery; + -st-from:"./my-components"; + -st-named: Menu, Gallery as ProductGallery; } ``` diff --git a/_docs/references/mixin-syntax.md b/_docs/references/mixin-syntax.md index b870241f6..0137c102b 100644 --- a/_docs/references/mixin-syntax.md +++ b/_docs/references/mixin-syntax.md @@ -13,11 +13,11 @@ Use cases: CSS API: ```css :import{ - -sb-from: "./my-mixins"; - -sb-names: textTooltip; + -st-from: "./my-mixins"; + -st-names: textTooltip; } .submit-button{ - -sb-mixin: textTooltip(300, data-tooltip); + -st-mixin: textTooltip(300, data-tooltip); } ``` @@ -30,15 +30,15 @@ With and without params and with multiple mixins ```css .a{ /* no parameters */ - -sb-mixin: noParams; + -st-mixin: noParams; } .b{ /* multiple parameters */ - -sb-mixin: multiParams(param1, param2); + -st-mixin: multiParams(param1, param2); } .c{ /* apply multiple mixins */ - -sb-mixin: noParams, multiParams(param1, param2); + -st-mixin: noParams, multiParams(param1, param2); } ``` @@ -46,16 +46,16 @@ Everything is a string: ```css .a { - -sb-mixin: mix(300, xxx); /* ["300", "xxx"] */ + -st-mixin: mix(300, xxx); /* ["300", "xxx"] */ } .b { - -sb-mixin: mix(300, "xxx"); /* ["300", "xxx"] */ + -st-mixin: mix(300, "xxx"); /* ["300", "xxx"] */ } .c { /* use quotations to include comma */ - -sb-mixin: mix(300, "xx,x"); /* ["300", "xx,x"] */ + -st-mixin: mix(300, "xx,x"); /* ["300", "xx,x"] */ } .d { /* escape slashes */ - -sb-mixin: mix(300, "\"xxx\""); /* ["300", "\"xxx\""] */ + -st-mixin: mix(300, "\"xxx\""); /* ["300", "\"xxx\""] */ } ``` @@ -63,7 +63,7 @@ Everything is a string: Mixins may add CSS declarations to the CSS ruleset that they are applied to: -* rules are added at the position that the `-sb-mixin` is declared +* rules are added at the position that the `-st-mixin` is declared * appended selectors are added directly after the rule-set that the mixin was applied to * multiple mixins are applied according to the order that they are specified in @@ -71,7 +71,7 @@ CSS API: ```css .a{ color:red; - -sb-mixin: golden; + -st-mixin: golden; background:white; } .a:hover{ diff --git a/_docs/references/pseudo-classes.md b/_docs/references/pseudo-classes.md index 1fc1a4626..3ab154db2 100644 --- a/_docs/references/pseudo-classes.md +++ b/_docs/references/pseudo-classes.md @@ -8,15 +8,15 @@ Native pseudo-classes like `:hover` and `:nth-child()` are valid and supported n ## Define custom states -To define custom states, you tell Stylable the list of possible custom states that the CSS declaration may be given, using the Stylable directive rule `-sb-states`: +To define custom states, you tell Stylable the list of possible custom states that the CSS declaration may be given, using the Stylable directive rule `-st-states`: -> *Note*: `-sb-states` directive rule may only be defined for simple selectors like [tag selector](./tag-selectors.md), [class selector](./class-selectors.md) and [root selector](./root.md). +> *Note*: `-st-states` directive rule may only be defined for simple selectors like [tag selector](./tag-selectors.md), [class selector](./class-selectors.md) and [root selector](./root.md). CSS API: ```css /* example1.css */ .root{ - -sb-states: toggled, loading; + -st-states: toggled, loading; } .root:toggled { color:red; } .root:loading { color:green; } @@ -39,7 +39,7 @@ CSS API: ```css /* example-custom.css */ .root{ - -sb-states: toggled(".on"), loading("[data-spinner]"); + -st-states: toggled(".on"), loading("[data-spinner]"); } .root:toggled { color:red; } .root:loading { color:green; } @@ -64,12 +64,12 @@ CSS API: ```css /* example2.css */ :import { - -sb-from: "./example1.css"; /* stylesheet a previous example */ - -sb-default: Comp1; /* import color1 and color2 variables */ + -st-from: "./example1.css"; /* stylesheet a previous example */ + -st-default: Comp1; /* import color1 and color2 variables */ } .media-button{ - -sb-extends: Comp1; - -sb-states: toggled, selected; + -st-extends: Comp1; + -st-states: toggled, selected; } .media-button:hover { border:10px solid black; } .media-button:toggled { color:gold;} diff --git a/_docs/references/pseudo-elements.md b/_docs/references/pseudo-elements.md index ee44be08f..3e4b24247 100644 --- a/_docs/references/pseudo-elements.md +++ b/_docs/references/pseudo-elements.md @@ -12,11 +12,11 @@ Stylesheet can [import](./imports.md) a `video-player` component (stylesheet), e CSS API ```css :import { - -sb-from: './video-player.css'; - -sb-default: VideoPlayer; + -st-from: './video-player.css'; + -st-default: VideoPlayer; } .main-video { - -sb-extends: VideoPlayer; /* define main-video as VideoPlayer */ + -st-extends: VideoPlayer; /* define main-video as VideoPlayer */ } .main-video::play-button { /* override main-video play button */ background: green; @@ -58,11 +58,11 @@ CSS API ```css /* super-video-player.css */ :import { - -sb-from: './video-player.css'; - -sb-default: VideoPlayer; + -st-from: './video-player.css'; + -st-default: VideoPlayer; } .root{ - -sb-extends: VideoPlayer; + -st-extends: VideoPlayer; } .root::play-button { color: gold; @@ -72,11 +72,11 @@ CSS API ```css /* page.css */ :import { - -sb-from: './super-video-player.css'; - -sb-default: SuperVideoPlayer; + -st-from: './super-video-player.css'; + -st-default: SuperVideoPlayer; } .main-player { - -sb-extends: SuperVideoPlayer; + -st-extends: SuperVideoPlayer; } .main-player::play-button { color: silver; @@ -103,11 +103,11 @@ CSS API ```css /* super-video-player.css */ :import { - -sb-from: './video-player.css'; - -sb-default: VideoPlayer; + -st-from: './video-player.css'; + -st-default: VideoPlayer; } .root{ - -sb-extends: VideoPlayer; + -st-extends: VideoPlayer; } .play-button { /* override VideoPlayer play-button */ color: gold; diff --git a/_docs/references/tag-selectors.md b/_docs/references/tag-selectors.md index e4c3ccf09..854b7faeb 100644 --- a/_docs/references/tag-selectors.md +++ b/_docs/references/tag-selectors.md @@ -58,8 +58,8 @@ CSS API: ```css :import{ - -sb-from: "./toggle-button.css"; - -sb-default: ToggleButton; + -st-from: "./toggle-button.css"; + -st-default: ToggleButton; } ToggleButton {background:green;} .side-bar:hover ToggleButton {background:red;} diff --git a/_docs/references/variables.md b/_docs/references/variables.md index 860fc13d7..d98977994 100644 --- a/_docs/references/variables.md +++ b/_docs/references/variables.md @@ -36,8 +36,8 @@ CSS API: ```css /* example2.css */ :import { - -sb-from: "./example1.css"; /* stylesheet a previous example */ - -sb-named: color1, color2; /* import color1 and color2 variables */ + -st-from: "./example1.css"; /* stylesheet a previous example */ + -st-named: color1, color2; /* import color1 and color2 variables */ } .root { border: 10px solid value(color1); @@ -71,8 +71,8 @@ CSS API: ```css /* example3.css */ :import { - -sb-from: "./example1.css"; /* stylesheet a previous example */ - -sb-named: color1, color2; + -st-from: "./example1.css"; /* stylesheet a previous example */ + -st-named: color1, color2; } :vars{ border1: 10px solid value(color1); /* use color1 in complex value */ @@ -101,8 +101,8 @@ CSS API: ```css /* example4.css */ :import { - -sb-from: "./example1.css"; /* stylesheet a previous example */ - -sb-named: color1, color2; + -st-from: "./example1.css"; /* stylesheet a previous example */ + -st-named: color1, color2; } :override { color1: yellow; /* modify color1 to yellow */ diff --git a/_docs/references/variants.md b/_docs/references/variants.md index 1c278b63c..113a96cee 100644 --- a/_docs/references/variants.md +++ b/_docs/references/variants.md @@ -13,12 +13,12 @@ CSS API : ```css /* theme.css */ :import { - -sb-from: "./button.css"; - -sb-default: Button; + -st-from: "./button.css"; + -st-default: Button; } .SaleBtn { - -sb-extends: Button; - -sb-variant: true; + -st-extends: Button; + -st-variant: true; color: red; } .SaleBtn:hover { @@ -26,7 +26,7 @@ CSS API : } ``` -`-sb-variant: true;` tells the Stylable pre-processor that if the variant SaleBtn isn't used anywhere in the project it can ignore it during the build stage, resulting in a smaller end-CSS without redundant rules. +`-st-variant: true;` tells the Stylable pre-processor that if the variant SaleBtn isn't used anywhere in the project it can ignore it during the build stage, resulting in a smaller end-CSS without redundant rules. ## Define inline variants @@ -43,7 +43,7 @@ For example, consider the following button, and its variant, BigButton } .BigButton { - -sb-variant: true; + -st-variant: true; height:5em; } ``` @@ -57,12 +57,12 @@ CSS API: ```css /* page.css */ :import { - -sb-from: "./theme.css"; - -sb-names: SaleBtn; + -st-from: "./theme.css"; + -st-names: SaleBtn; } .sale-button { - -sb-mixin: SaleBtn; + -st-mixin: SaleBtn; } ``` @@ -79,18 +79,18 @@ CSS OUTPUT: ## Use variants with extends -When using variant with `-sb-extends` the class also inherits the variant type. +When using variant with `-st-extends` the class also inherits the variant type. CSS API: ```css /* page.css */ :import { - -sb-from: "./theme.css"; - -sb-names: SaleBtn; + -st-from: "./theme.css"; + -st-names: SaleBtn; } .sale-button { - -sb-extends: SaleBtn; + -st-extends: SaleBtn; } .sale-button::icon { diff --git a/_docs/usefulInfo/cheatsheet.md b/_docs/usefulInfo/cheatsheet.md index 02a05a3bb..9218d9a07 100644 --- a/_docs/usefulInfo/cheatsheet.md +++ b/_docs/usefulInfo/cheatsheet.md @@ -10,14 +10,14 @@ ## Stylable - * **directive rule**: `-sb-*` rules that hint Stylable - * **[-sb-from](./imports.md)**: import location - * **[-sb-default](./imports.md)**: import default export - * **[-sb-named](./imports.md)**: import named exports - * **[-sb-extends](./extend-stylesheet.md)**: simple selector base class - * **[-sb-states](./pseudo-classes.md)**: define custom pseudo-classes - * **[-sb-mixin](./mixin-syntax.md)**: apply mixins to CSS ruleset - * **[-sb-variant](./variants.md)**: apply pre-made look and feel + * **directive rule**: `-st-*` rules that hint Stylable + * **[-st-from](./imports.md)**: import location + * **[-st-default](./imports.md)**: import default export + * **[-st-named](./imports.md)**: import named exports + * **[-st-extends](./extend-stylesheet.md)**: simple selector base class + * **[-st-states](./pseudo-classes.md)**: define custom pseudo-classes + * **[-st-mixin](./mixin-syntax.md)**: apply mixins to CSS ruleset + * **[-st-variant](./variants.md)**: apply pre-made look and feel * **selectors** * **[Pseudo-elements](./pseudo-elements.md)**: `::X` target internal part * **[Pseudo-classes](./pseudo-classes.md)**: `:X` target state diff --git a/experiments/component/component.source.css b/experiments/component/component.source.css index 68552d915..76c4f3396 100644 --- a/experiments/component/component.source.css +++ b/experiments/component/component.source.css @@ -1,6 +1,6 @@ :import("party") { - -sb-defualt: Party; - -sb-named: Hot, gaga; + -st-defualt: Party; + -st-named: Hot, gaga; } :vars { @@ -16,7 +16,7 @@ } .Label { - -sb-type: Party; - -sb-apply: Hot; + -st-type: Party; + -st-apply: Hot; background: firebrick; } diff --git a/src/stylable-value-parsers.ts b/src/stylable-value-parsers.ts index d51dfe2d7..2cc4c7e3c 100644 --- a/src/stylable-value-parsers.ts +++ b/src/stylable-value-parsers.ts @@ -1,7 +1,7 @@ export interface TypedClass { - "-sb-root"?: boolean; - "-sb-states"?: string[]; - "-sb-type"?: string; + "-st-root"?: boolean; + "-st-states"?: string[]; + "-st-type"?: string; } export interface MixinValue { @@ -10,29 +10,29 @@ export interface MixinValue { } export const valueMapping = { - from: '-sb-from' as "-sb-from", - named: '-sb-named' as "-sb-named", - default: '-sb-default' as "-sb-default", - root: '-sb-root' as "-sb-root", - states: '-sb-states' as "-sb-states", - type: '-sb-type' as "-sb-type", - mixin: '-sb-mixin' as "-sb-mixin" + from: '-st-from' as "-st-from", + named: '-st-named' as "-st-named", + default: '-st-default' as "-st-default", + root: '-st-root' as "-st-root", + states: '-st-states' as "-st-states", + type: '-st-type' as "-st-type", + mixin: '-st-mixin' as "-st-mixin" }; -export const STYLABLE_VALUE_MATCHER = /^-sb-/; +export const STYLABLE_VALUE_MATCHER = /^-st-/; export const STYLABLE_NAMED_MATCHER = new RegExp(`^${valueMapping.named}-(.+)`); export const SBTypesParsers = { - "-sb-root"(value: string) { + "-st-root"(value: string) { return value === 'false' ? false : true }, - "-sb-states"(value: string) { + "-st-states"(value: string) { return value ? value.split(',').map((state) => state.trim()) : []; }, - "-sb-type"(value: string) { + "-st-type"(value: string) { return value ? value.trim() : ""; }, - "-sb-mixin"(value: string) { + "-st-mixin"(value: string) { const parts = value.match(/\s*[A-Za-z$_][$_\w]*\(.*?\)\)?|\s*([A-Za-z$_][$_\w]*\s*)/g); if (!parts || parts.join('').length !== value.replace(/\s*/, '').length) { diff --git a/tests/generator.generate.spec.ts b/tests/generator.generate.spec.ts index 64f1c7f71..6e7dbdffc 100644 --- a/tests/generator.generate.spec.ts +++ b/tests/generator.generate.spec.ts @@ -78,10 +78,10 @@ describe('static Generator.generate', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: ContainerA; + -st-default: ContainerA; } :import("./relative/path/to/sheetB.stylable.css"){ - -sb-default: ContainerB; + -st-default: ContainerB; } .container { color: white; @@ -106,14 +106,14 @@ describe('static Generator.generate', function () { const sheetA = Stylesheet.fromCSS(` .containerA { - -sb-root: true; + -st-root: true; } `, "TheNameSpace"); const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){} .containerB { - -sb-root: true; + -st-root: true; } `, "TheGreatNameSpace"); @@ -139,10 +139,10 @@ describe('static Generator.generate', function () { const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: Container; + -st-default: Container; } .containerB { - -sb-type: Container; + -st-type: Container; } `, "TheGreatNameSpace"); @@ -167,10 +167,10 @@ describe('static Generator.generate', function () { const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: Container; + -st-default: Container; } container { - -sb-type: Container; + -st-type: Container; } `, "TheGreatNameSpace"); @@ -197,10 +197,10 @@ describe('static Generator.generate', function () { const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: Container; + -st-default: Container; } container { - -sb-type: Container; + -st-type: Container; } container::inner { @@ -235,10 +235,10 @@ describe('static Generator.generate', function () { const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: Container; + -st-default: Container; } .containerB { - -sb-type: Container; + -st-type: Container; } .containerB::icon { } `, "TheGreatNameSpace"); @@ -269,18 +269,18 @@ describe('static Generator.generate', function () { const Button = Stylesheet.fromCSS(` :import("./Text.stylable.css"){ - -sb-default: Text; + -st-default: Text; } .button { } - .text { -sb-type: Text; } + .text { -st-type: Text; } `, "Button"); const App = Stylesheet.fromCSS(` :import("./Button.stylable.css"){ - -sb-default: Button; + -st-default: Button; } .app { - -sb-type: Button; + -st-type: Button; } .app::text::first-letter { } `, "App"); @@ -313,18 +313,18 @@ describe('static Generator.generate', function () { const Button = Stylesheet.fromCSS(` :import("./Text.stylable.css"){ - -sb-default: Text; + -st-default: Text; } .button { } - .text { -sb-type: Text; } + .text { -st-type: Text; } `, "Button"); const App = Stylesheet.fromCSS(` :import("./Button.stylable.css"){ - -sb-default: Button; + -st-default: Button; } .app { - -sb-type: Button; + -st-type: Button; } .app::text::first-letter, .gallery { } `, "App"); @@ -353,7 +353,7 @@ describe('static Generator.generate', function () { const sheet = Stylesheet.fromCSS(` .my-class { - -sb-states: my-state; + -st-states: my-state; } .my-class:my-state {} `, "Style"); @@ -375,16 +375,16 @@ describe('static Generator.generate', function () { it('custom states from imported type', function () { const sheetA = Stylesheet.fromCSS(` .root { - -sb-states: my-state; + -st-states: my-state; } `, "StyleA"); const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: SheetA; + -st-default: SheetA; } .my-class { - -sb-type: SheetA; + -st-type: SheetA; } .my-class:my-state {} `, "StyleB"); @@ -410,17 +410,17 @@ describe('static Generator.generate', function () { it('custom states lookup order', function () { const sheetA = Stylesheet.fromCSS(` .root { - -sb-states: my-state; + -st-states: my-state; } `, "StyleA"); const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: SheetA; + -st-default: SheetA; } .my-class { - -sb-states: my-state; - -sb-type: SheetA; + -st-states: my-state; + -st-type: SheetA; } .my-class:my-state {} `, "StyleB"); @@ -447,16 +447,16 @@ describe('static Generator.generate', function () { it('custom states form imported type on inner pseudo-class', function () { const sheetA = Stylesheet.fromCSS(` .container { - -sb-states: my-state; + -st-states: my-state; } `, "StyleA"); const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: SheetA; + -st-default: SheetA; } .my-class { - -sb-type: SheetA; + -st-type: SheetA; } .my-class::container:my-state {} `, "StyleB"); @@ -522,7 +522,7 @@ describe('static Generator.generate', function () { const sheetB = Stylesheet.fromCSS(` :import("./relative/path/to/sheetA.stylable.css"){ - -sb-default: SheetA; + -st-default: SheetA; } .container { color: black; diff --git a/tests/generator.mixins.spec.ts b/tests/generator.mixins.spec.ts index 9629f132c..20b2f93e8 100644 --- a/tests/generator.mixins.spec.ts +++ b/tests/generator.mixins.spec.ts @@ -15,10 +15,10 @@ describe('static Generator mixins', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/mixin.js") { - -sb-default: MyMixin; + -st-default: MyMixin; } .container { - -sb-mixin: MyMixin(red); + -st-mixin: MyMixin(red); } `, "StyleA"); @@ -36,7 +36,7 @@ describe('static Generator mixins', function () { expect(stack[0]).to.eql({ selector: '.container', rules: { - "-sb-mixin": "MyMixin(red)", + "-st-mixin": "MyMixin(red)", color: "red" } }); @@ -56,10 +56,10 @@ describe('static Generator mixins', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/mixin.js") { - -sb-default: MyMixin; + -st-default: MyMixin; } .container { - -sb-mixin: MyMixin(red); + -st-mixin: MyMixin(red); } `, "StyleA"); @@ -78,7 +78,7 @@ describe('static Generator mixins', function () { { selector: '.container', rules: { - '-sb-mixin': "MyMixin(red)" + '-st-mixin': "MyMixin(red)" } }, { @@ -104,10 +104,10 @@ describe('static Generator mixins', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/mixin.js") { - -sb-default: MyMixin; + -st-default: MyMixin; } .container { - -sb-mixin: MyMixin(red); + -st-mixin: MyMixin(red); } `, "StyleA"); @@ -154,10 +154,10 @@ describe('static Generator mixins', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/mixin.js") { - -sb-default: MyMixin; + -st-default: MyMixin; } .container { - -sb-mixin: MyMixin(red, 10px solid black); + -st-mixin: MyMixin(red, 10px solid black); } `, "StyleA"); @@ -175,7 +175,7 @@ describe('static Generator mixins', function () { expect(stack).to.eql([ { selector: ".container", - rules: { "-sb-mixin": "MyMixin(red, 10px solid black)" } + rules: { "-st-mixin": "MyMixin(red, 10px solid black)" } }, { selector: ".container > *", diff --git a/tests/generator.spec.ts b/tests/generator.spec.ts index b99a6ec41..b8df71213 100644 --- a/tests/generator.spec.ts +++ b/tests/generator.spec.ts @@ -156,7 +156,7 @@ describe('Generator', function () { const stylesheet = new Stylesheet({ ":import": { - "-sb-from": "./relative/path/to/sheetA.stylable.css" + "-st-from": "./relative/path/to/sheetA.stylable.css" }, ".container": {} }); diff --git a/tests/generator.value.spec.ts b/tests/generator.value.spec.ts index b7095f120..e13ba962c 100644 --- a/tests/generator.value.spec.ts +++ b/tests/generator.value.spec.ts @@ -123,7 +123,7 @@ describe('Generator variables interpolation', function () { }); const sheet = Stylesheet.fromCSS(` :import('./path') { - -sb-named: param1, param2; + -st-named: param1, param2; } :vars { param: value(param1); @@ -167,19 +167,19 @@ describe('Generator variables interpolation', function () { const sheet = Stylesheet.fromCSS(` :import("./relative/path/to/mixin.js") { - -sb-default: MyMixin; + -st-default: MyMixin; } :import("./relative/path/to/mixin.js") { - -sb-default: OtherMixin; + -st-default: OtherMixin; } :import("./relative/path/to/mixin.js") { - -sb-default: NoParamsMixin; + -st-default: NoParamsMixin; } :vars { param: red; } .container { - -sb-mixin: MyMixin(value(param)) NoParamsMixin OtherMixin(blue); + -st-mixin: MyMixin(value(param)) NoParamsMixin OtherMixin(blue); } `, "''"); @@ -200,7 +200,7 @@ describe('Generator variables interpolation', function () { expect(stack[0]).to.eql({ selector: '.container', rules: { - "-sb-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", + "-st-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", color: "red", } }, '.container red'); @@ -208,7 +208,7 @@ describe('Generator variables interpolation', function () { expect(stack[1]).to.eql({ selector: '.container', rules: { - "-sb-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", + "-st-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", borderColor: "orange", } }, '.container orange'); @@ -216,7 +216,7 @@ describe('Generator variables interpolation', function () { expect(stack[2]).to.eql({ selector: '.container', rules: { - "-sb-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", + "-st-mixin": "MyMixin(value(param)) NoParamsMixin OtherMixin(blue)", backgroundColor: "blue", } }, '.container blue'); diff --git a/tests/parser.spec.ts b/tests/parser.spec.ts index 08dfda884..c7b8487d0 100644 --- a/tests/parser.spec.ts +++ b/tests/parser.spec.ts @@ -358,14 +358,14 @@ function objectifyTests(objectify: (css: string) => any) { const actual = objectify(` .container { - -sb-something: true; + -st-something: true; background-color: red; } `); const expected = { ".container": { - "-sb-something": "true", + "-st-something": "true", backgroundColor: "red" } } diff --git a/tests/resolver.spec.ts b/tests/resolver.spec.ts index 7a4d4846c..2bcf407da 100644 --- a/tests/resolver.spec.ts +++ b/tests/resolver.spec.ts @@ -13,10 +13,10 @@ describe('Resolver', function () { var sheetB = Stylesheet.fromCSS(` :import("./path/to/thing"){ - -sb-default: Name; + -st-default: Name; } .class { - -sb-type: Name; + -st-type: Name; } `); @@ -38,7 +38,7 @@ describe('Resolver', function () { const resolvedModule = { resolved: 'name1' }; const sheet = new Stylesheet({ ":import('./path')": { - "-sb-default": "name1" + "-st-default": "name1" } }, "namespace"); @@ -68,10 +68,10 @@ describe('Resolver', function () { var sheet = new Stylesheet({ ":import('./path/1')": { - "-sb-named": "name1" + "-st-named": "name1" }, ":import('./path/2')": { - "-sb-named": "name2" + "-st-named": "name2" } }, "namespace"); @@ -94,7 +94,7 @@ describe('Resolver', function () { var sheet = new Stylesheet({ ":import('./path')": { - "-sb-named": "param1, param2", + "-st-named": "param1, param2", }, ":vars": { "param3": "green", @@ -119,7 +119,7 @@ describe('Resolver', function () { var sheet = new Stylesheet({ ":import('./path')": { - "-sb-named": "param1, param2", + "-st-named": "param1, param2", }, ":vars": { "param": "orange", @@ -139,10 +139,10 @@ describe('Resolver', function () { var sheet = new Stylesheet({ ":import('./path/1')": { - "-sb-named": "name1" + "-st-named": "name1" }, ":import('./path/2')": { - "-sb-named": "name1" + "-st-named": "name1" } }, "namespace"); diff --git a/tests/stylesheet.spec.ts b/tests/stylesheet.spec.ts index bca04880d..47018c95c 100644 --- a/tests/stylesheet.spec.ts +++ b/tests/stylesheet.spec.ts @@ -82,16 +82,16 @@ describe('Stylesheet', function () { describe('process', function () { - it('throw when -sb-root used in complex selector', function () { + it('throw when -st-root used in complex selector', function () { expect(function () { Stylesheet.fromCSS(` .container[attr] { - -sb-root: true; + -st-root: true; color: red; } `); - }).throw('-sb-root on complex selector: .container[attr]'); + }).throw('-st-root on complex selector: .container[attr]'); }); @@ -99,53 +99,53 @@ describe('Stylesheet', function () { const sheet = Stylesheet.fromCSS(``); expect(sheet.classes).to.eql({root: 'root'}); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true } + root: { "-st-root": true } }); }); - it('with typed class -sb-root true', function () { + it('with typed class -st-root true', function () { const sheet = Stylesheet.fromCSS(` .container { - -sb-root: true; + -st-root: true; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-root": true + "-st-root": true } }); }); - it('with typed class -sb-root ANY_VALUE that is not "false"', function () { + it('with typed class -st-root ANY_VALUE that is not "false"', function () { const sheet = Stylesheet.fromCSS(` .container { - -sb-root: ANY_VALUE; + -st-root: ANY_VALUE; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-root": true + "-st-root": true } }) }); - it('with typed class -sb-root is false', function () { + it('with typed class -st-root is false', function () { const sheet = Stylesheet.fromCSS(` .container { - -sb-root: false; + -st-root: false; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-root": false + "-st-root": false } }) }); @@ -154,9 +154,9 @@ describe('Stylesheet', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/thing"){ - -sb-default: Name; - -sb-named: Button as Btn, Icon; - -sb-named-ExportName: MyName; + -st-default: Name; + -st-named: Button as Btn, Icon; + -st-named-ExportName: MyName; } `); @@ -173,7 +173,7 @@ describe('Stylesheet', function () { var sheet = Stylesheet.fromCSS(` :import { - -sb-from: "./path/to/thing"; + -st-from: "./path/to/thing"; } `); @@ -181,65 +181,65 @@ describe('Stylesheet', function () { }); - it('with -sb-states', function () { + it('with -st-states', function () { const sheet = Stylesheet.fromCSS(` .container { - -sb-states: stateA, stateB; + -st-states: stateA, stateB; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-states": ["stateA", "stateB"] + "-st-states": ["stateA", "stateB"] } }) }); - it('with empty -sb-states ', function () { + it('with empty -st-states ', function () { const sheet = Stylesheet.fromCSS(` .container { - -sb-states: ; + -st-states: ; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-states": [] + "-st-states": [] } }) }) - it('with -sb-type', function () { + it('with -st-type', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/thing"){ - -sb-default: Thing; + -st-default: Thing; } .container { - -sb-type: Thing; + -st-type: Thing; } `); expect(sheet.typedClasses).to.eql({ - root: { "-sb-root": true }, + root: { "-st-root": true }, container: { - "-sb-type": "Thing" + "-st-type": "Thing" } }) }) - it('with -sb-mixin', function () { + it('with -st-mixin', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/mixin"){ - -sb-named: MyMixin1; + -st-named: MyMixin1; } .container { - -sb-mixin: MyMixin1; + -st-mixin: MyMixin1; } `); @@ -250,14 +250,14 @@ describe('Stylesheet', function () { }) }) - it('with -sb-mixin with params', function () { + it('with -st-mixin with params', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/mixin"){ - -sb-named: MyMixin1; + -st-named: MyMixin1; } .container { - -sb-mixin: MyMixin1(100px, 50); + -st-mixin: MyMixin1(100px, 50); } `); @@ -268,14 +268,14 @@ describe('Stylesheet', function () { }) }); - it('with -sb-mixin with multiple mixins', function () { + it('with -st-mixin with multiple mixins', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/mixin"){ - -sb-named: MyMixin1, MyMixin2; + -st-named: MyMixin1, MyMixin2; } .container { - -sb-mixin: MyMixin1(100px, 50) MyMixin2 MyMixin3(); + -st-mixin: MyMixin1(100px, 50) MyMixin2 MyMixin3(); } `); @@ -288,15 +288,15 @@ describe('Stylesheet', function () { }) }) - it('with -sb-mixin no params multiple defs', function () { + it('with -st-mixin no params multiple defs', function () { const sheet = Stylesheet.fromCSS(` :import("./path/to/mixin"){ - -sb-named: MyMixin1, MyMixin2; + -st-named: MyMixin1, MyMixin2; } .container { - -sb-mixin: MyMixin1; - -sb-mixin: MyMixin2; + -st-mixin: MyMixin1; + -st-mixin: MyMixin2; } `); @@ -507,12 +507,12 @@ describe('Stylesheet', function () { it('not break types on broken selector', function(){ var sheet = Stylesheet.fromCSS(` - .root{-sb-states: a, b;} + .root{-st-states: a, b;} .root: `); expect(sheet.typedClasses[sheet.root]).to.eql({ - "-sb-states": ["a", "b"] + "-st-states": ["a", "b"] }); }); })