CodePen Embed - inStyle Crash Test Dummy

Live

This Pen is owned by Salsita Software on CodePen.

External CSS

https://raw.githubusercontent.com/salsita/inStyle/codepen-debug/src/instyle.sass

External JavaScript

https://rawgit.com/salsita/inStyle/codepen-debug/src/inStyleDebugger.js

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cp/internal/boomboom","store_url":"https://codepen.io/cp/internal/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":false,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":\"14\",\"font_type\":\"monaco\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":\"2\",\"theme\":\"twilight\",\"id\":\"zqbpzY\",\"auto_save\":true},\"hashid\":\"zqbpzY\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://raw.githubusercontent.com/salsita/inStyle/codepen-debug/src/instyle.sass\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"/*\\n  inStyle (v1.6.1)\\n  github.com/salsita/inStyle\\n  2016 | MIT\\n  ============================== */\\n\\n// Configuration\\n$__inTagAppend: '<' !default\\n$__inTagInsert: '^' !default\\n$__inTagReplace: '@' !default\\n\\n// String helpers\\n@function __trimString($string)\\n  $index: str-index($string, ' ')\\n  @if $index == 1\\n    @return __trimString(str-slice($string, $index + 1, -1))\\n  @else if $index == str-length($string)\\n    @return __trimString(str-slice($string, 1, $index - 1))\\n  @return $string\\n\\n@function __stringToList($string, $delimiter: ',', $separator: comma)\\n  $list: ()\\n  $sum: str-length($string)\\n  @for $i from 1 through $sum\\n    $str: str-index($string, $delimiter)\\n    @if str-length($string) >= 1 and $str == null\\n      $list: append($list, unquote(__trimString($string)), $separator)\\n      $string: ''\\n    @if type-of($str) == number\\n      $each: str-slice($string, 0, ($str - 1))\\n      $list: append($list, unquote(__trimString($each)), $separator)\\n      $string: str-slice($string, ($str + 1), $sum)\\n  @return $list\\n\\n// List helpers\\n@function __insertInList($list, $index, $value)\\n  $result: null\\n  @if $index > length($list)\\n    @warn \\\"List index is #{$index} but list is only #{length($list)} items long for __insertInList().\\\"\\n  @else\\n    $result: ()\\n    @for $i from 1 through length($list)\\n      @if $i == $index\\n        $result: append($result, $value)\\n      $result: append($result, nth($list, $i))\\n  @return $result\\n\\n@function __removeFromList($list, $value, $recursive: false)\\n  $result: ()\\n  @for $i from 1 through length($list)\\n    @if type-of(nth($list, $i)) == list and $recursive\\n      $result: append($result, remove(nth($list, $i), $value, $recursive))\\n    @else if nth($list, $i) != $value\\n      $result: append($result, nth($list, $i))\\n  @return $result\\n\\n@function __reverseList($list, $recursive: false)\\n  $result: ()\\n  @for $i from length($list)*-1 through -1\\n    @if type-of(nth($list, abs($i))) == list and $recursive\\n      $result: append($result, __reverseList(nth($list, abs($i)), $recursive))\\n    @else\\n      $result: append($result, nth($list, abs($i)))\\n  @return $result\\n\\n@function __listToString($list, $glue: '', $is-nested: false)\\n  $result: null\\n  @for $i from 1 through length($list)\\n    $e: nth($list, $i)\\n    @if type-of($e) == list\\n      $result: unquote(\\\"#{$result}#{to-string($e, $glue, true)}\\\")\\n    @else\\n      $result: if($i != length($list) or $is-nested, unquote(\\\"#{$result}#{$e}#{$glue}\\\"), unquote(\\\"#{$result}#{$e}\\\"))\\n  @return $result\\n\\n@function __removeDuplicatesFromList($list, $recursive: false, $separator: comma)\\n  $result: ()\\n  @each $item in $list\\n    @if not index($result, $item)\\n      @if length($item) > 1 and $recursive\\n        $result: append($result, __removeDuplicatesFromList($item, $recursive), $separator)\\n      @else\\n        $result: append($result, $item, $separator)\\n  @return $result\\n\\n// Custom helpers\\n@function __tagIndex($string, $tag)\\n  $index: 0\\n  @if str-index($string, $tag) == 1\\n    $index: 1\\n    $sum: str-length($string)\\n    @for $i from 2 through $sum\\n      @if str-slice($string, $i, $i) == $tag\\n        $index: $index + 1\\n      @else\\n        @return $index\\n  @return $index\\n\\n@function __getDepthMap($selector, $current)\\n  $depthMap: ()\\n  @each $parent in $current\\n    // Save maximum length of matched compound to compare relevancy\\n    $parentIndex: index($current, $parent)\\n    $depthMap: append($depthMap, 0, comma)\\n    @each $compound in $selector\\n      // Check only for specific compound\\n      @if max(__tagIndex($compound, $__inTagInsert), __tagIndex($compound, $__inTagAppend), __tagIndex($compound, $__inTagReplace)) == 0\\n        $simple: simple-selectors($compound)\\n        // Test all matches starting with full compound and reducing for each step\\n        @for $i from 1 through length($simple)\\n          @if $i > 1\\n            $simple: __removeFromList($simple, nth($simple, length($simple)))\\n          @if index($parent, __listToString($simple)) and length($simple) > nth($depthMap, $parentIndex)\\n            // Relevancy scoring\\n            $depthIndex: index(__reverseList($parent), __listToString($simple)) + (length($simple) / 1000)\\n            $depthMap: set-nth($depthMap, $parentIndex, $depthIndex)\\n  @return $depthMap\\n\\n// In mixin\\n=in($selectors)\\n  $final: ()\\n  $current: &\\n  $selectors: __stringToList($selectors)\\n  $startIndex: 1 // Start indexing above current element\\n  $checkDupes: false\\n\\n  @each $selector in $selectors\\n    // Trim all extra empty spaces\\n    $selector: __removeFromList(__stringToList($selector, ' ', space), '')\\n    // Render only best matching parents in multiselectors\\n    $depthMap: if(length($current) == 1, 0, __getDepthMap($selector, $current))\\n    @for $n from 1 through length($current)\\n      @if nth($depthMap, $n) == max($depthMap...)\\n        $parent: nth($current, $n)\\n        $newParent: __reverseList($parent)\\n        $insertQueue: () // Save insertions to process later\\n\\n        // Process modifications RTL\\n        @each $compound in __reverseList($selector)\\n          $appendIndex: __tagIndex($compound, $__inTagAppend)\\n          $insertIndex: __tagIndex($compound, $__inTagInsert)\\n          $replaceIndex: __tagIndex($compound, $__inTagReplace)\\n          $changeIndex: max($appendIndex, $insertIndex, $replaceIndex) + $startIndex\\n\\n          // OUT_OF_BOUNDS check\\n          @if $changeIndex > length($parent)\\n            @error 'OUT_OF_BOUNDS: \\\\'#{$compound}\\\\' modification outside of \\\\'#{$parent} {}\\\\' (#{$changeIndex} vs #{length($parent)}).'\\n\\n          @if $insertIndex > 0\\n            // Add to insertion queue\\n            $insertQueue: append($insertQueue, $compound)\\n\\n          @else if $replaceIndex > 0\\n            // Replace\\n            $validatedCompound: __listToString(simple-selectors(str-slice($compound, $replaceIndex + 1)))\\n            $newParent: set-nth($newParent, $startIndex + $replaceIndex, $validatedCompound)\\n            $checkDupes: true\\n\\n          @else if $appendIndex > 0\\n            // Append with tag\\n            $validatedCompound: nth($newParent, $startIndex + $appendIndex) + __listToString(simple-selectors(str-slice($compound, $appendIndex + 1)))\\n            $newParent: set-nth($newParent, $startIndex + $appendIndex, $validatedCompound)\\n\\n          @else\\n            // Append with selector\\n            $simple: simple-selectors($compound)\\n            $state: ()\\n            $matched: false\\n            // Loop compound variants\\n            @for $i from 1 through length($simple)\\n              @if $i > 1\\n                $state: join(nth($simple, length($simple)), $state)\\n                $simple: __removeFromList($simple, nth($simple, length($simple)))\\n              $trySimple: __listToString($simple)\\n              $tryState: if($i > 1, __listToString($state), '')\\n              // Match base to reversed parent list\\n              @for $n from ($startIndex + 1) through length($newParent)\\n                @if $n <= length($newParent) and $trySimple == nth($newParent, $n)\\n                  // Append to matched parent selector\\n                  $matched: true\\n                  $newParent: set-nth($newParent, $n, unquote($trySimple + $tryState))\\n            @if not $matched\\n              @error 'OUT_OF_BOUNDS: \\\\'#{nth($simple, 1)}\\\\' not found in \\\\'#{$parent}\\\\'.'\\n\\n        // Process insertion queue\\n        @if length($insertQueue) > 0\\n          $insertIndexes: ()\\n          @each $insert in $insertQueue\\n            $insertIndex: __tagIndex($insert, $__inTagInsert)\\n            $validatedCompound: __listToString(simple-selectors(str-slice($insert, $insertIndex + 1)))\\n            // Find how many previous inserts were lower than current\\n            $addIndex: 0\\n            @each $index in $insertIndexes\\n              @if $insertIndex >= $index\\n                $addIndex: $addIndex + 1\\n            $insertIndexes: append($insertIndexes, $insertIndex)\\n            // Insert in selector\\n            $newIndex: $startIndex + $insertIndex + $addIndex\\n            $newParent: __insertInList($newParent, $newIndex, $validatedCompound)\\n\\n        // Save modified selectors\\n        $final: append($final, __reverseList($newParent), comma)\\n\\n  // Remove possible duplicates from multiselector replacement\\n  $final: if(length($final) > 1 and $checkDupes, __removeDuplicatesFromList($final), $final)\\n  // Render final selectors\\n  @at-root #{$final}\\n    codepen: debug\\n    @content\\n\"},{\"url\":\"https://rawgit.com/salsita/inStyle/codepen-debug/src/inStyleDebugger.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"sass\",\"instyle\"],\"id\":8140705,\"user_id\":579289,\"html\":\"\",\"css\":\"div\\n  display: flex\\n\\n  span\\n    color: red\\n    \\n    +in('@.foo ^.bar')\\n      color: green\\n    \\n      +in('.foo.baz')\\n        color: pink\\n    \\n  section\\n    display: run-in\\n      \\n    +in('<.nice')\\n      color: gold\",\"parent\":0,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"sass\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-05-11T13:45:31.000Z\",\"updated_at\":\"2016-06-07T16:36:53.000Z\",\"session_hash\":\"f193618edda14a7d217a622817367699\",\"title\":\"inStyle Crash Test Dummy\",\"description\":\"Test the inStyle SASS library!\",\"slug_hash\":\"zqbpzY\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":2409931390,\"screenshot_uuid\":\"34193bfb-3dd6-4e2e-b69d-b4f9a22ff17f\",\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":true,\"js_module\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTYzODM5MTA4NX0.7EBHggm_HTsmZacrywuigf6nh0qvjlZSRGfQxxZklr8","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-bd078fc5fc5c8e8854d6bf533bdef7579101b328c322e4d1bf23eecfd2231eae.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}