Skip to content

Commit

Permalink
feat(force-new-context): add config option to force a new context for…
Browse files Browse the repository at this point in the history 
… styles
  • Loading branch information
@eoneill
eoneill committed Oct 14, 2016
1 parent 4ffec41 commit 7bd7048
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 116 deletions.
4 changes: 3 additions & 1 deletion sass/lib/config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ $-restyle--default-config: (
log: (
// enable ui messages by default
ui: true
)
),
// allow overrides to happen inline
force-new-context: false
);
$-restyle--config: $-restyle--default-config !default;
$restyle-config: null !default;
Expand Down
250 changes: 135 additions & 115 deletions sass/lib/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,148 +138,168 @@
@return unquote("%restyle-#{-restyle--checksum-js($data)}");
}

/// given a map of styles, outputs the styles into CSS
/// (core) given a map of styles, outputs the styles into CSS
/// @param {Map} $styles - the styles to process
/// @param {Boolean} $extend - whether or not to extend (depends on config `smart-content-enabled` being `true`)
@mixin -restyle--styles($styles, $extend: true) {
@include -restyle--log-time(styles, "took {time} to output styles") {
@if $styles {
@include -restyle--smart-content($styles, $extend: $extend) {
@each $property, $value in $styles {
@if ($value != null) {
@if $value == $-restyle--undefined {
$value: ();
}
/// @param {Boolean} $inline - whether or not to extend
@mixin -restyle--styles-core($styles, $extend) {
@include -restyle--smart-content($styles, $extend: $extend) {
@each $property, $value in $styles {
@if ($value != null) {
@if $value == $-restyle--undefined {
$value: ();
}

$property: -restyle--normalize-property($property);
$property: -restyle--normalize-property($property);

// if it's a multivalue object...
@if -restyle--is-multivalue($value) {
@include -restyle--with-multiple-values($value) {
@include -restyle--styles((
#{$property}: $restyle-current-value
), $extend: $extend)
}
}
// if it's a multivalue object...
@if -restyle--is-multivalue($value) {
@include -restyle--with-multiple-values($value) {
@include -restyle--styles((
#{$property}: $restyle-current-value
), $extend: $extend)
}
}

@else {
// for mixins, we need to do some custom work
// check to see if we have a custom output styler (pre)
@if -restyle--has-custom-styler($property, $value, pre) {
@include restyle-custom-styler($property, $value, $method: pre);
}
@else {
// for mixins, we need to do some custom work
// check to see if we have a custom output styler (pre)
@if -restyle--has-custom-styler($property, $value, pre) {
@include restyle-custom-styler($property, $value, $method: pre);
}

$directive: -restyle--get-directive($property);
$directive: -restyle--get-directive($property);

@if ($directive == states) {
@each $state-name, $state in $value {
#{-restyle--get-state-selector($state-name)} {
@include -restyle--styles($state);
}
}
}
@else if ($directive == function-call) {
@each $function, $args in $value {
@if (type-of($function) == string) {
$args: -restyle--cast-to-args($args);
@include -restyle--styles(call($function, $args...));
}
}
}
@else if ($directive == debug or $directive == warn or $directive == deprecated) {
/* [restyle:ui:#{$directive}] #{$value} */
$tmp: -restyle--log($value, "ui:#{$directive}", $severity: if($directive == debug, log, warn));
}
@else if ($directive == debug-once or $directive == warn-once or $directive == deprecated-once) {
// if we haven't logged it yet...
@if (index($-restyle--log-msg-history, $value) == null) {
/* [restyle:ui:#{$directive}] #{$value} */
$tmp: -restyle--log($value, "ui:#{$directive}", $severity: if($directive == debug-once, log, warn));
// if it was logged...
@if ($tmp != null) {
// keep track of it so we don't log it again
$-restyle--log-msg-history: append($-restyle--log-msg-history, $value) !global;
}
}
@if ($directive == states) {
@each $state-name, $state in $value {
#{-restyle--get-state-selector($state-name)} {
@include -restyle--styles($state);
}
@else if ($directive == error) {
/* [restyle:ui:error] #{$value} */
@error "[restyle:ui:error] #{$value}";
}
@else if (-restyle--is-selector($property)) {
#{$property} {
@include -restyle--styles($value);
}
}
}
@else if ($directive == function-call) {
@each $function, $args in $value {
@if (type-of($function) == string) {
$args: -restyle--cast-to-args($args);
@include -restyle--styles(call($function, $args...));
}
@else if (-restyle--should-skip-mixin($value)) {
#{$property}: -restyle--list-remove($value, nomixin);
}
}
@else if ($directive == debug or $directive == warn or $directive == deprecated) {
/* [restyle:ui:#{$directive}] #{$value} */
$tmp: -restyle--log($value, "ui:#{$directive}", $severity: if($directive == debug, log, warn));
}
@else if ($directive == debug-once or $directive == warn-once or $directive == deprecated-once) {
// if we haven't logged it yet...
@if (index($-restyle--log-msg-history, $value) == null) {
/* [restyle:ui:#{$directive}] #{$value} */
$tmp: -restyle--log($value, "ui:#{$directive}", $severity: if($directive == debug-once, log, warn));
// if it was logged...
@if ($tmp != null) {
// keep track of it so we don't log it again
$-restyle--log-msg-history: append($-restyle--log-msg-history, $value) !global;
}
}
}
@else if ($directive == error) {
/* [restyle:ui:error] #{$value} */
@error "[restyle:ui:error] #{$value}";
}
@else if (-restyle--is-selector($property)) {
#{$property} {
@include -restyle--styles($value);
}
}
@else if (-restyle--should-skip-mixin($value)) {
#{$property}: -restyle--list-remove($value, nomixin);
}

// for mixins, we need to do some custom work
// check to see if we have a custom output styler (pre)
@else if -restyle--has-custom-styler($property, $value, pre) {
@include restyle-custom-styler($property, $value, $method: pre);
}
// for mixins, we need to do some custom work
// check to see if we have a custom output styler (pre)
@else if -restyle--has-custom-styler($property, $value, pre) {
@include restyle-custom-styler($property, $value, $method: pre);
}

// special case for @at-root
@else if ($property == '@at-root') {
@at-root {
@include -restyle--styles($value);
}
}
// special case for @at-root
@else if ($property == '@at-root') {
@at-root {
@include -restyle--styles($value);
}
}

// special case for @extend
@else if($property == '@extend') {
@if (type-of($value) == list) {
@each $v in $value {
@extend #{$v} !optional;
}
}
@else {
@extend #{$value} !optional;
}
// special case for @extend
@else if($property == '@extend') {
@if (type-of($value) == list) {
@each $v in $value {
@extend #{$v} !optional;
}
}
@else {
@extend #{$value} !optional;
}
}

// special case for @media
@else if($property == '@media') {
@each $query, $styles in $value {
@media #{$query} {
@include -restyle--styles($styles);
}
}
// special case for @media
@else if($property == '@media') {
@each $query, $styles in $value {
@media #{$query} {
@include -restyle--styles($styles);
}
}
}

// check to see if we have a custom output styler (post)
@else if -restyle--has-custom-styler($property, $value, post) {
@include restyle-custom-styler($property, $value, $method: post);
}
// check to see if we have a custom output styler (post)
@else if -restyle--has-custom-styler($property, $value, post) {
@include restyle-custom-styler($property, $value, $method: post);
}

// TODO - some day :)
//@else if mixin-exists($property) {
// /* TODO - invoke mixin */
//}
// TODO - some day :)
//@else if mixin-exists($property) {
// /* TODO - invoke mixin */
//}

@else {
// this is a temporary hack until node-sass correctly supported quoted strings
#{$property}: if($property == content, quote($value), $value);
}
}
@else {
// this is a temporary hack until node-sass correctly supported quoted strings
#{$property}: if($property == content, quote($value), $value);
}
}
}
}
}

// any original block content passed in...
// if we're using smart content...
@if -restyle--config(smart-content-enabled) and $extend {
// intentionally break out of the context
// any original block content passed in...
// if we're using smart content...
@if -restyle--config(smart-content-enabled) and $extend {
// intentionally break out of the context
& {
@content;
}
}
// otherwise...
@else {
// just put it here
@content;
}
}

/// given a map of styles, outputs the styles into CSS
/// @param {Map} $styles - the styles to process
/// @param {Boolean} $extend - whether or not to extend (depends on config `smart-content-enabled` being `true`)
@mixin -restyle--styles($styles, $extend: true, $inline: false) {
@include -restyle--log-time(styles, "took {time} to output styles") {
@if $styles {
@if (-restyle--config(force-new-context)) {
// create a new context
& {
@content;
@include -restyle--styles-core($styles, $extend: $extend) {
@content;
}
}
}
// otherwise...
@else {
// just put it here
@content;
@include -restyle--styles-core($styles, $extend: $extend) {
@content;
}
}
}
};
Expand Down
12 changes: 12 additions & 0 deletions test/fixtures/force-new-context.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.default {
test: true;
test: false; }

.force-new-context--true {
test: false; }
.force-new-context--true {
test: true; }

.force-new-context--false {
test: true;
test: false; }
24 changes: 24 additions & 0 deletions test/fixtures/force-new-context.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import "restyle";


@include restyle-define(test, (
test: true
));

@mixin test() {
@include restyle(test);
test: false;
}

.default {
@include test();
}
.force-new-context {
@each $value in (true false) {
#{&}--#{$value} {
@include restyle-with-config(force-new-context, $value) {
@include test();
}
}
}
}

0 comments on commit 7bd7048

Please sign in to comment.