mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 20:14:53 +01:00
Merge branch 'port-documentation' into port-documentation-var-interp-atrules
This commit is contained in:
Sana Javed
commit
e38506216e
@ -4,12 +4,17 @@
|
||||
.yarn/
|
||||
.yarnrc
|
||||
.yarnrc.yml
|
||||
/.language/
|
||||
/_site/
|
||||
/data/
|
||||
/old_source/
|
||||
/source/_data/versionCache.json
|
||||
/source/assets/dist/
|
||||
/source/assets/js/vendor/**
|
||||
/source/assets/sass/vendor/
|
||||
/source/blog/*.md
|
||||
/source/documentation/js-api
|
||||
coverage/
|
||||
node_modules/
|
||||
source/assets/dist/
|
||||
source/assets/js/vendor/**
|
||||
!source/assets/js/vendor/index.js
|
||||
source/assets/sass/vendor/
|
||||
|
||||
!/source/assets/js/vendor/index.js
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -16,10 +16,11 @@ Thumbs.db
|
||||
/.yardoc
|
||||
/vendor/bundle/
|
||||
/source/documentation/js-api
|
||||
/.language/
|
||||
|
||||
# Eleventy
|
||||
/_site/
|
||||
source/assets/dist/
|
||||
/source/assets/dist/
|
||||
|
||||
# NPM/Yarn
|
||||
node_modules/
|
||||
|
||||
@ -4,14 +4,17 @@
|
||||
.yarn/
|
||||
.yarnrc
|
||||
.yarnrc.yml
|
||||
/.language/
|
||||
/_site/
|
||||
/data/
|
||||
/old_source/
|
||||
/source/_data/versionCache.json
|
||||
/source/assets/dist/
|
||||
/source/assets/js/vendor/**
|
||||
/source/assets/sass/vendor/
|
||||
/source/blog/*.md
|
||||
/source/documentation/js-api
|
||||
coverage/
|
||||
node_modules/
|
||||
source/assets/dist/
|
||||
source/assets/js/vendor/**
|
||||
!source/assets/js/vendor/index.js
|
||||
source/assets/sass/vendor/
|
||||
|
||||
!/source/assets/js/vendor/index.ts
|
||||
|
||||
@ -4,12 +4,17 @@
|
||||
.yarn/
|
||||
.yarnrc
|
||||
.yarnrc.yml
|
||||
/.language/
|
||||
/_site/
|
||||
/data/
|
||||
/old_source/
|
||||
/source/_data/versionCache.json
|
||||
/source/assets/dist/
|
||||
/source/assets/js/vendor/**
|
||||
/source/assets/sass/vendor/
|
||||
/source/blog/*.md
|
||||
/source/documentation/js-api
|
||||
coverage/
|
||||
node_modules/
|
||||
source/assets/dist/
|
||||
source/assets/js/vendor/**
|
||||
!source/assets/js/vendor/index.js
|
||||
source/assets/sass/vendor/
|
||||
|
||||
!/source/assets/js/vendor/index.ts
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"build-dev:scripts": "rollup -c",
|
||||
"build-prod:scripts": "BABEL_ENV=production rollup -c",
|
||||
"watch:scripts": "npm run build-dev:scripts -- -w",
|
||||
"build:typedoc": "./tool/typedoc-build.sh",
|
||||
"build:11ty": "NODE_OPTIONS='-r ts-node/register' eleventy",
|
||||
"watch:11ty": "yarn build:11ty --serve --incremental",
|
||||
"tsc": "tsc",
|
||||
@ -84,7 +85,6 @@
|
||||
"stylelint-config-standard-scss": "^9.0.0",
|
||||
"truncate-html": "^1.0.4",
|
||||
"ts-node": "^10.9.1",
|
||||
"typedoc": "^0.24.7",
|
||||
"typescript": "^5.0.4",
|
||||
"typogr": "^0.6.8"
|
||||
},
|
||||
|
||||
@ -14,17 +14,26 @@
|
||||
<dd>{{ libsass | implStatus }}</dd>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if node != null -%}
|
||||
<div>
|
||||
<dt>Node Sass</dt>
|
||||
<dd>{{ node | implStatus }}</dd>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if ruby != null -%}
|
||||
<div>
|
||||
<dt>Ruby Sass</dt>
|
||||
<dd>{{ ruby | implStatus }}</dd>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if details -%}
|
||||
<div>{% # The no-op href here ensures that this toggle is focusable in browsers. %}<a href="javascript:;">▶</a></div>
|
||||
{%- if details | strip -%}
|
||||
{%- # The no-op href here ensures that this toggle is focusable in browsers. -%}
|
||||
<div><a href="javascript:;">▶</a></div>
|
||||
{%- endif -%}
|
||||
</dl>
|
||||
|
||||
{% if details %}
|
||||
<div class="sl-c-callout sl-c-callout--impl-status">{{ details | markdown }}</div>
|
||||
{% endif %}
|
||||
{%- if details | strip -%}
|
||||
<div class="sl-c-callout sl-c-callout--impl-status">
|
||||
{{ details | markdown }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="sl-c-callout sl-c-callout--warning">
|
||||
<h3>⚠️ Heads up!</h3>
|
||||
{{ contents }}
|
||||
{% if useMarkdown %}{{ contents | markdown }}{% else %}{{ contents }}{% endif %}
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
@use '../syntax-accessible';
|
||||
|
||||
// Colors updated to match the standard Sass styling.
|
||||
.typedoc pre { @extend .token; }
|
||||
.typedoc pre { @extend [class*="language-"] }
|
||||
|
||||
.hl-0 { @extend .keyword; }
|
||||
.hl-1 { @extend .punctuation; }
|
||||
.hl-2 { @extend .variable; }
|
||||
.hl-3 { @extend .function; }
|
||||
.hl-4 { @extend .keyword; }
|
||||
.hl-5 { @extend .string; }
|
||||
.hl-6 { @extend .keyword; }
|
||||
.hl-7 { @extend .comment; }
|
||||
.hl-8 { @extend .variable; }
|
||||
.hl-9 { @extend .comment; }
|
||||
.hl-10 { @extend .variable; }
|
||||
.hl-0 { @extend .token, .keyword; }
|
||||
.hl-1 { @extend .token, .punctuation; }
|
||||
.hl-2 { @extend .token, .variable; }
|
||||
.hl-3 { @extend .token, .function; }
|
||||
.hl-4 { @extend .token, .keyword; }
|
||||
.hl-5 { @extend .token, .string; }
|
||||
.hl-6 { @extend .token, .keyword; }
|
||||
.hl-7 { @extend .token, .comment; }
|
||||
.hl-8 { @extend .token, .variable; }
|
||||
.hl-9 { @extend .token, .comment; }
|
||||
.hl-10 { @extend .token, .variable; }
|
||||
|
||||
@ -5,20 +5,20 @@ navigation: |
|
||||
<h2>Contents</h2>
|
||||
|
||||
- [Syntax](/documentation/syntax){.section}
|
||||
- [Overview](/documentation/syntax)
|
||||
- [Overview](/documentation/syntax) {.overview}
|
||||
- [Parsing a Stylesheet](/documentation/syntax/parsing)
|
||||
- [Structure of a Stylesheet](/documentation/syntax/structure)
|
||||
- [Comments](/documentation/syntax/comments)
|
||||
- [Special Functions](/documentation/syntax/special-functions)
|
||||
- [Style Rules](/documentation/style-rules){.section}
|
||||
- [Overview](/documentation/style-rules)
|
||||
- [Overview](/documentation/style-rules) {.overview}
|
||||
- [Property Declarations](/documentation/style-rules/declarations)
|
||||
- [Parent Selector](/documentation/style-rules/parent-selector)
|
||||
- [Placeholder Selectors](/documentation/style-rules/placeholder-selectors)
|
||||
- [Variables](/documentation/variables)
|
||||
- [Interpolation](/documentation/interpolation)
|
||||
- [At-Rules](/documentation/at-rules){.section}
|
||||
- [Overview](/documentation/at-rules)
|
||||
- [Overview](/documentation/at-rules) {.overview}
|
||||
- [<code>@use</code>](/documentation/at-rules/use)
|
||||
- [<code>@forward</code>](/documentation/at-rules/forward)
|
||||
- [<code>@import</code>](/documentation/at-rules/import)
|
||||
@ -30,14 +30,14 @@ navigation: |
|
||||
- [<code>@debug</code>](/documentation/at-rules/debug)
|
||||
- [<code>@at-root</code>](/documentation/at-rules/at-root)
|
||||
- [Flow Control](/documentation/at-rules/control)
|
||||
- [Overview](/documentation/at-rules/control)
|
||||
- [Overview](/documentation/at-rules/control) {.overview}
|
||||
- [<code>@if</code> and <code>@else</code>](/documentation/at-rules/control/if)
|
||||
- [<code>@each</code>](/documentation/at-rules/control/each)
|
||||
- [<code>@for</code>](/documentation/at-rules/control/for)
|
||||
- [<code>@while</code>](/documentation/at-rules/control/while)
|
||||
- [From CSS](/documentation/at-rules/css)
|
||||
- [Values](/documentation/values){.section}
|
||||
- [Overview](/documentation/values)
|
||||
- [Overview](/documentation/values) {.overview}
|
||||
- [Numbers](/documentation/values/numbers)
|
||||
- [Strings](/documentation/values/strings)
|
||||
- [Colors](/documentation/values/colors)
|
||||
@ -48,14 +48,14 @@ navigation: |
|
||||
- [Calculations](/documentation/values/calculations)
|
||||
- [Functions](/documentation/values/functions)
|
||||
- [Operators](/documentation/operators){.section}
|
||||
- [Overview](/documentation/operators)
|
||||
- [Overview](/documentation/operators) {.overview}
|
||||
- [Equality](/documentation/operators/equality)
|
||||
- [Relational](/documentation/operators/relational)
|
||||
- [Numeric](/documentation/operators/numeric)
|
||||
- [String](/documentation/operators/string)
|
||||
- [Boolean](/documentation/operators/boolean)
|
||||
- [Built-In Modules](/documentation/modules){.section}
|
||||
- [Overview](/documentation/modules)
|
||||
- [Overview](/documentation/modules) {.overview}
|
||||
- [<code>sass:color</code>](/documentation/modules/color)
|
||||
- [<code>sass:list</code>](/documentation/modules/list)
|
||||
- [<code>sass:map</code>](/documentation/modules/map)
|
||||
@ -64,7 +64,7 @@ navigation: |
|
||||
- [<code>sass:selector</code>](/documentation/modules/selector)
|
||||
- [<code>sass:string</code>](/documentation/modules/string)
|
||||
- [Breaking Changes](/documentation/breaking-changes){.section}
|
||||
- [Overview](/documentation/breaking-changes)
|
||||
- [Overview](/documentation/breaking-changes) {.overview}
|
||||
- [Strict Unary Operators](/documentation/breaking-changes/strict-unary)
|
||||
- [Random With Units](/documentation/breaking-changes/random-with-units)
|
||||
- [Invalid Combinators](/documentation/breaking-changes/bogus-combinators)
|
||||
@ -75,7 +75,7 @@ navigation: |
|
||||
- [Extending Compound Selectors](/documentation/breaking-changes/extend-compound)
|
||||
- [CSS Variable Syntax](/documentation/breaking-changes/css-vars)
|
||||
- [Command Line](/documentation/cli){.section}
|
||||
- [Overview](/documentation/cli)
|
||||
- [Overview](/documentation/cli) {.overview}
|
||||
- [Dart Sass](/documentation/cli/dart-sass)
|
||||
- [Ruby Sass](/documentation/cli/ruby-sass)
|
||||
- [Migrator](/documentation/cli/migrator)
|
||||
|
||||
@ -10,6 +10,7 @@ introduction: >
|
||||
makes it easy to share design within and across projects.
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
- If you're looking for an introduction to Sass, check out [the
|
||||
tutorial](/guide).
|
||||
|
||||
@ -40,18 +41,26 @@ may be some behavioral differences.
|
||||
|
||||
Anywhere behavior differs between versions or implementations, the documentation
|
||||
includes a compatibility indicator like this:
|
||||
{% endmarkdown %}
|
||||
|
||||
{% compatibility true, '3.6.0', false, 'Feature Name'%}{% endcompatibility %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility true, '3.6.0', null, false, 'Feature Name' %}{% endcompatibility %}
|
||||
|
||||
{% markdown %}
|
||||
Implementations with a "✓" fully support the feature in question, and
|
||||
implementations with a "✗" don't support it all. Implementations with a version
|
||||
number started supporting the feature in question at that version.
|
||||
Implementations can also be marked as "partial":
|
||||
{% endmarkdown %}
|
||||
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility true, 'partial', false%}Additional details go here.{% endcompatibility %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility true, 'partial', null, false %}
|
||||
Additional details go here.
|
||||
{% endcompatibility %}
|
||||
|
||||
{% markdown %}
|
||||
This indicates that the implementation only supports some aspects of the
|
||||
feature. These compatibility indicators (and many others) have a "▶" button,
|
||||
which can be clicked to show more details about exactly how the implementations
|
||||
differ and which versions support which aspects of the feature in question.
|
||||
{% endmarkdown %}
|
||||
@ -1,5 +1,5 @@
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `ruby` %}
|
||||
{% compatibility '1.23.0', false, false %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility '1.23.0', false, null, false %}
|
||||
Only Dart Sass currently supports `@use`. Users of other implementations must
|
||||
use the [`@import` rule][] instead.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
title: Property Declarations
|
||||
table_of_contents: true
|
||||
introduction: >
|
||||
In Sass as in CSS, property declarations define how elements that match a selector are styled. But Sass adds extra features to make them easier to write and to automate. First and foremost, a declaration's value can be any [SassScript expression](../../syntax/structure#expressions), which will be
|
||||
In Sass as in CSS, property declarations define how elements that match a selector are styled. But Sass adds extra features to make them easier to write and to automate. First and foremost, a declaration's value can be any [SassScript expression](/documentation/syntax/structure#expressions), which will be
|
||||
evaluated and included in the result.
|
||||
complementary_content: |
|
||||
<nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
|
||||
|
||||
### Page Sections{#page-sections}
|
||||
<h3 id="page-sections">Page Sections</h3>
|
||||
|
||||
- [Interpolation](#interpolation)
|
||||
- [Nesting](#nesting)
|
||||
@ -37,7 +37,7 @@ A property's name can include [interpolation][], which makes it possible to
|
||||
dynamically generate properties as needed. You can even interpolate the entire
|
||||
property name!
|
||||
|
||||
[interpolation]: ../../interpolation
|
||||
[interpolation]: /documentation/interpolation
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'interpolation' %}
|
||||
@ -123,8 +123,8 @@ Sometimes you only want a property declaration to show up some of the time. If a
|
||||
declaration's value is [`null`][] or an empty [unquoted string][], Sass won't
|
||||
compile that declaration to CSS at all.
|
||||
|
||||
[`null`]: ../../values/null
|
||||
[unquoted string]: ../../values/strings#unquoted
|
||||
[`null`]: /documentation/values/null
|
||||
[unquoted string]: /documentation/values/strings#unquoted
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'hidden-declarations' %}
|
||||
@ -146,15 +146,15 @@ $rounded-corners: false
|
||||
## Custom Properties
|
||||
{% endmarkdown %}
|
||||
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility true, '3.5.0', '3.5.0', 'SassScript Syntax' %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility true, '3.5.0', null, '3.5.0', 'SassScript Syntax' %}
|
||||
Older versions of LibSass and Ruby Sass parsed custom property declarations just like any other property declaration, allowing the full range of SassScript expressions as values. Even when using these versions, it's
|
||||
recommended that you use interpolation to inject SassScript values for
|
||||
forwards-compatibility.
|
||||
|
||||
See [the breaking change page][] for more details.
|
||||
|
||||
[the breaking change page]: ../../breaking-changes/css-vars
|
||||
[the breaking change page]: /documentation/breaking-changes/css-vars
|
||||
{% endcompatibility %}
|
||||
|
||||
{% markdown %}
|
||||
@ -171,7 +171,7 @@ property declarations. All tokens, including those that look like SassScript,
|
||||
are passed through to CSS as-is. The only exception is [interpolation][], which
|
||||
is the only way to inject dynamic values into a custom property.
|
||||
|
||||
[interpolation]: ../../interpolation
|
||||
[interpolation]: /documentation/interpolation
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'custom-properties' %}
|
||||
@ -210,15 +210,15 @@ $warn: #dfa612
|
||||
}
|
||||
{% endcodeExample %}
|
||||
|
||||
{% headsUp %}
|
||||
{% headsUp false %}
|
||||
{% markdown %}
|
||||
Unfortunately, [interpolation][] removes quotes from strings, which makes it
|
||||
difficult to use quoted strings as values for custom properties when they come
|
||||
from Sass variables. As a workaround, you can use the [`meta.inspect()`
|
||||
function][] to preserve the quotes.
|
||||
|
||||
[interpolation]: ../../interpolation
|
||||
[`meta.inspect()` function]: ../../modules/meta#inspect
|
||||
[interpolation]: /documentation/interpolation
|
||||
[`meta.inspect()` function]: /documentation/modules/meta#inspect
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'custom-properties-strings-meta' %}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
title: Style Rules
|
||||
table_of_contents: true
|
||||
introduction: >
|
||||
Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose which elements to style with a selector, and [declare properties](../style-rules/declarations) that affect how those elements look.
|
||||
Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose which elements to style with a selector, and [declare properties](/documentation/style-rules/declarations) that affect how those elements look.
|
||||
complementary_content: |
|
||||
<nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
|
||||
|
||||
### Page Sections{#page-sections}
|
||||
<h3 id="page-sections">Page Sections</h3>
|
||||
|
||||
- [Nesting](#nesting){.section .open}
|
||||
- [Overview](#nesting)
|
||||
@ -74,7 +74,10 @@ nav
|
||||
|
||||
|
||||
{% headsUp %}
|
||||
Nested rules are super helpful, but they can also make it hard to visualize how much CSS you're actually generating. The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it. Keep those selectors shallow!
|
||||
Nested rules are super helpful, but they can also make it hard to visualize how
|
||||
much CSS you're actually generating. The deeper you nest, the more bandwidth it
|
||||
takes to serve your CSS and the more work it takes the browser to render it.
|
||||
Keep those selectors shallow!
|
||||
{% endheadsUp %}
|
||||
|
||||
{% markdown %}
|
||||
@ -157,7 +160,7 @@ If you want to do more with your nested style rules than just combine them in
|
||||
order with the descendant combinator (that is, a plain space) separating them,
|
||||
Sass has your back. See the [parent selector documentation][] for more details.
|
||||
|
||||
[parent selector documentation]: ../style-rules/parent-selector
|
||||
[parent selector documentation]: /documentation/style-rules/parent-selector
|
||||
|
||||
## Interpolation
|
||||
|
||||
@ -166,9 +169,9 @@ variables and function calls into your selectors. This is particularly useful
|
||||
when you're writing [mixins][], since it allows you to create selectors from
|
||||
parameters your users pass in.
|
||||
|
||||
[interpolation]: ../interpolation
|
||||
[expressions]: ../syntax/structure#expressions
|
||||
[mixins]: ../at-rules/mixin
|
||||
[interpolation]: /documentation/interpolation
|
||||
[expressions]: /documentation/syntax/structure#expressions
|
||||
[mixins]: /documentation/at-rules/mixin
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'interpolation'%}
|
||||
@ -202,7 +205,7 @@ parameters your users pass in.
|
||||
{% markdown %}
|
||||
You can combine interpolation with the parent selector `&`, the [`@at-root` rule][], and [selector functions][] to wield some serious power when dynamically generating selectors. For more information, see the [parent selector documentation][].
|
||||
|
||||
[`@at-root` rule]: ../at-rules/at-root
|
||||
[selector functions]: ../modules/selector
|
||||
[parent selector documentation]: ../style-rules/parent-selector
|
||||
[`@at-root` rule]: /documentation/at-rules/at-root
|
||||
[selector functions]: /documentation/modules/selector
|
||||
[parent selector documentation]: /documentation/style-rules/parent-selector
|
||||
{% endmarkdown %}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Parent Selector
|
||||
introduction: >
|
||||
The parent selector, `&`, is a special selector invented by Sass that’s used
|
||||
in [nested selectors](../style-rules#nesting) to refer to the outer selector.
|
||||
in [nested selectors](/documentation/style-rules#nesting) to refer to the outer selector.
|
||||
It makes it possible to re-use the outer selector in more complex ways, like
|
||||
adding a
|
||||
[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
|
||||
@ -52,13 +52,14 @@ When a parent selector is used in an inner selector, it's replaced with the corr
|
||||
{% endcodeExample %}
|
||||
|
||||
{% headsUp %}
|
||||
{% markdown %}
|
||||
Because the parent selector could be replaced by a type selector like `h1`, it's only allowed at the beginning of compound selectors where a type selector would also be allowed. For example, `span&` is not allowed.
|
||||
Because the parent selector could be replaced by a type selector like `h1`, it's
|
||||
only allowed at the beginning of compound selectors where a type selector would
|
||||
also be allowed. For example, `span&` is not allowed.
|
||||
|
||||
We're looking into loosening this restriction, though. If you'd like to help make that happen, check out [this GitHub issue][].
|
||||
We're looking into loosening this restriction, though. If you'd like to help
|
||||
make that happen, check out [this GitHub issue][].
|
||||
|
||||
[this GitHub issue]: https://github.com/sass/sass/issues/1425
|
||||
{% endmarkdown %}
|
||||
[this GitHub issue]: https://github.com/sass/sass/issues/1425
|
||||
{% endheadsUp %}
|
||||
|
||||
{% markdown %}
|
||||
@ -120,7 +121,7 @@ parent selector to append additional text.
|
||||
The parent selector can also be used within SassScript. It's a special
|
||||
expression that returns the current parent selector in the same format used by [selector functions][]: a comma-separated list (the selector list) that contains space-separated lists (the complex selectors) that contain unquoted strings (the compound selectors).
|
||||
|
||||
[selector functions]: ../../modules/selector#selector-values
|
||||
[selector functions]: /documentation/modules/selector#selector-values
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'parent-selector-sassscript' %}
|
||||
@ -141,7 +142,7 @@ expression that returns the current parent selector in the same format used by [
|
||||
{% markdown %}
|
||||
If the `&` expression is used outside any style rules, it returns `null`. Since `null` is [falsey][], this means you can easily use it to determine whether a mixin is being called in a style rule or not.
|
||||
|
||||
[falsey]: ../../at-rules/control/if#truthiness-and-falsiness
|
||||
[falsey]: /documentation/at-rules/control/if#truthiness-and-falsiness
|
||||
{% endmarkdown %}
|
||||
|
||||
{% render 'code-snippets/example-if-parent-selector' %}
|
||||
@ -151,16 +152,18 @@ If the `&` expression is used outside any style rules, it returns `null`. Since
|
||||
|
||||
You can use `&` as a normal SassScript expression, which means you can pass it to functions or include it in interpolation—even in other selectors! Using it in combination with [selector functions][] and the [`@at-root` rule][] allows you to nest selectors in very powerful ways.
|
||||
|
||||
[selector functions]: ../../modules/selector#selector-values
|
||||
[`@at-root` rule]: ../../at-rules/at-root
|
||||
[selector functions]: /documentation/modules/selector#selector-values
|
||||
[`@at-root` rule]: /documentation/at-rules/at-root
|
||||
{% endmarkdown %}
|
||||
|
||||
{% render 'code-snippets/example-advanced-nesting' %}
|
||||
|
||||
{% headsUp %}
|
||||
{% markdown %}
|
||||
When Sass is nesting selectors, it doesn't know what interpolation was used to generate them. This means it will automatically add the outer selector to the inner selector *even if* you used `&` as a SassScript expression. That's why you need to explicitly use the [`@at-root` rule][] to tell Sass not to include the outer selector.
|
||||
When Sass is nesting selectors, it doesn't know what interpolation was used to
|
||||
generate them. This means it will automatically add the outer selector to the
|
||||
inner selector *even if* you used `&` as a SassScript expression. That's why you
|
||||
need to explicitly use the [`@at-root` rule][] to tell Sass not to include the
|
||||
outer selector.
|
||||
|
||||
[`@at-root` rule]: ../../at-rules/at-root
|
||||
{% endmarkdown %}
|
||||
[`@at-root` rule]: /documentation/at-rules/at-root
|
||||
{% endheadsUp %}
|
||||
|
||||
@ -12,7 +12,7 @@ introduction: >
|
||||
{% markdown %}
|
||||
What's the use of a selector that isn't emitted? It can still be [extended][]! Unlike class selectors, placeholders don't clutter up the CSS if they aren't extended and they don't mandate that users of a library use specific class names for their HTML.
|
||||
|
||||
[extended]: ../../at-rules/extend
|
||||
[extended]: /documentation/at-rules/extend
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'extended-selector' %}
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
---
|
||||
title: Comments
|
||||
introduction: >
|
||||
The way Sass comments work differs substantially between SCSS and the indented
|
||||
syntax. Both syntaxes support two types of comments: comments defined using
|
||||
`/* */` that are (usually) compiled to CSS, and comments defined using `//` that
|
||||
are not.
|
||||
The way Sass comments work differs substantially between SCSS and the indented syntax. Both syntaxes support two types of comments: comments defined using `/* */` that are (usually) compiled to CSS, and comments defined using `//` that are not.
|
||||
---
|
||||
{% markdown %}
|
||||
## In SCSS
|
||||
@ -25,9 +22,9 @@ By default, multi-line comments be stripped from the compiled CSS in [compressed
|
||||
mode][]. If a comment begins with `/*!`, though, it will always be included in
|
||||
the CSS output.
|
||||
|
||||
[statement]: ../structure#statements
|
||||
[interpolation]: ../../interpolation
|
||||
[compressed mode]: ../../cli/dart-sass#style
|
||||
[statement]: /documentation/syntax/structure#statements
|
||||
[interpolation]: /documentation/interpolation
|
||||
[compressed mode]: /documentation/cli/dart-sass#style
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'scss-comment', , true, 'scss'%}
|
||||
@ -45,7 +42,7 @@ p /* Multi-line comments can be written anywhere
|
||||
font: Helvetica, // So can single-line comments.
|
||||
sans-serif;
|
||||
}
|
||||
{% endcodeExample %}
|
||||
{% endcodeExample %}
|
||||
|
||||
{% markdown %}
|
||||
## In Sass
|
||||
@ -64,7 +61,8 @@ stripped in compressed mode.
|
||||
Comments can also be used within [expressions][] in the indented syntax. In this
|
||||
case, they have exactly the same syntax as they do in SCSS.
|
||||
|
||||
[expressions]: ../structure#expressions
|
||||
[interpolation]: /documentation/interpolation
|
||||
[expressions]: /documentation/syntax/structure#expressions
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'sass-comment', , true, 'sass'%}
|
||||
@ -92,10 +90,10 @@ read by the [SassDoc][] tool, which uses them to generate beautiful
|
||||
documentation. Check out [the Susy grid engine][susy]'s documentation to see it
|
||||
in action!
|
||||
|
||||
[mixins]: ../../at-rules/mixin
|
||||
[functions]: ../../at-rules/function
|
||||
[variables]: ../../variables
|
||||
[placeholder selectors]: ../../style-rules/placeholder-selectors
|
||||
[mixins]: /documentation/at-rules/mixin
|
||||
[functions]: /documentation/at-rules/function
|
||||
[variables]: /documentation/variables
|
||||
[placeholder selectors]: /documentation/style-rules/placeholder-selectors
|
||||
[SassDoc]: http://sassdoc.com
|
||||
[susy]: http://oddbird.net/susy/docs/index.html
|
||||
|
||||
|
||||
@ -5,13 +5,14 @@ introduction: >
|
||||
parsed directly, without first being converted to a token stream.
|
||||
---
|
||||
|
||||
## Input Encoding
|
||||
{{ '## Input Encoding' | markdown }}
|
||||
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility false, true, true %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility false, true, null, true %}
|
||||
Dart Sass currently _only_ supports the UTF-8 encoding. As such, it's safest to encode all Sass stylesheets as UTF-8.
|
||||
{% endcompatibility %}
|
||||
|
||||
{% markdown %}
|
||||
It's often the case that a document is initially available only as a sequence of
|
||||
bytes, which must be decoded into Unicode. Sass performs this decoding as
|
||||
follows:
|
||||
@ -46,3 +47,4 @@ Node Sass's and Dart Sass's JS API you can access the [`file`, `line`, and
|
||||
|
||||
[`SassException.span`]: https://pub.dartlang.org/documentation/sass/latest/sass/SassException/span.html
|
||||
[js error]: https://github.com/sass/node-sass#error-object
|
||||
{% endmarkdown %}
|
||||
@ -3,10 +3,10 @@ title: Special Functions
|
||||
introduction: >
|
||||
CSS defines many functions, and most of them work just fine with Sass’s normal
|
||||
function syntax. They’re parsed as function calls, resolved to [plain CSS
|
||||
functions](../../at-rules/function#plain-css-functions), and compiled as-is to
|
||||
functions](/documentation/at-rules/function#plain-css-functions), and compiled as-is to
|
||||
CSS. There are a few exceptions, though, which have special syntax that can’t
|
||||
just be parsed as a [SassScript expression](../structure#expressions). All
|
||||
special function calls return [unquoted strings](../../values/strings#unquoted).
|
||||
just be parsed as a [SassScript expression](/documentation/syntax/structure#expressions). All
|
||||
special function calls return [unquoted strings](/documentation/values/strings#unquoted).
|
||||
table_of_contents: true
|
||||
complementary_content: |
|
||||
<nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
|
||||
@ -18,6 +18,7 @@ complementary_content: |
|
||||
|
||||
</nav>
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
## `url()`
|
||||
|
||||
@ -33,11 +34,10 @@ although [interpolation][] may also be used to inject SassScript values. If it's
|
||||
not a valid unquoted URL—for example, if it contains [variables][] or [function
|
||||
calls][]—it's parsed as a normal [plain CSS function call][].
|
||||
|
||||
[interpolation]: ../../interpolation
|
||||
[variables]: ../../variables
|
||||
[function calls]: ../../at-rules/function
|
||||
[plain CSS function call]: ../../at-rules/function#plain-css-functions
|
||||
|
||||
[interpolation]: /documentation/interpolation
|
||||
[variables]: /documentation/variables
|
||||
[function calls]: /documentation/at-rules/function
|
||||
[plain CSS function call]: /documentation/at-rules/function#plain-css-functions
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'url' %}
|
||||
@ -95,32 +95,33 @@ $roboto-font-path: "../fonts/roboto"
|
||||
font-weight: 400
|
||||
{% endcodeExample %}
|
||||
|
||||
{% markdown %}
|
||||
## `element()`, `progid:...()`, and `expression()`
|
||||
{{ '## `element()`, `progid:...()`, and `expression()`' | markdown }}
|
||||
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility "<1.40.0", false, false, "calc()" %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility "<1.40.0", false, null, false, "calc()" %}
|
||||
LibSass, Ruby Sass, and versions of Dart Sass prior to 1.40.0 parse `calc()` as special syntactic function like `element()`.
|
||||
|
||||
Dart Sass versions 1.40.0 and later parse `calc()` as a [calculation].
|
||||
|
||||
[calculation]: ../../values/calculations
|
||||
[calculation]: /documentation/values/calculations
|
||||
{% endcompatibility %}
|
||||
|
||||
{% compatibility ">=1.31.0 <1.40.0", false, false, "clamp()" %}
|
||||
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
|
||||
{% compatibility ">=1.31.0 <1.40.0", false, null, false, "clamp()" %}
|
||||
LibSass, Ruby Sass, and versions of Dart Sass prior to 1.31.0 parse `clamp()`
|
||||
as a [plain CSS function] rather than supporting special syntax within it.
|
||||
|
||||
[plain CSS function]: ../../at-rules/function#plain-css-functions
|
||||
[plain CSS function]: /documentation/at-rules/function#plain-css-functions
|
||||
|
||||
Dart Sass versions between 1.31.0 and 1.40.0 parse `clamp()` as special
|
||||
syntactic function like `element()`.
|
||||
|
||||
Dart Sass versions 1.40.0 and later parse `clamp()` as a [calculation].
|
||||
|
||||
[calculation]: ../../values/calculations
|
||||
[calculation]: /documentation/values/calculations
|
||||
{% endcompatibility %}
|
||||
|
||||
{% markdown %}
|
||||
The [`element()`] function is defined in the CSS spec, and because its IDs couldbe parsed as colors, they need special parsing.
|
||||
|
||||
[`element()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/element
|
||||
@ -137,7 +138,7 @@ Sass allows _any text_ in these function calls, including nested parentheses.
|
||||
Nothing is interpreted as a SassScript expression, with the exception that
|
||||
[interpolation][] can be used to inject dynamic values.
|
||||
|
||||
[interpolation]: ../../interpolation
|
||||
[interpolation]: /documentation/interpolation
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ introduction: >
|
||||
complementary_content: |
|
||||
<nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
|
||||
|
||||
### Page Sections{#page-sections}
|
||||
<h3 id="page-sections">Page Sections</h3>
|
||||
|
||||
- [Statements](#statements){.section .open}
|
||||
- [Overview](#statements)
|
||||
@ -41,36 +41,36 @@ newlines.
|
||||
|
||||
These types of statements can be used anywhere in a Sass stylesheet:
|
||||
|
||||
- [Variable declarations](../../variables), like `$var: value`.
|
||||
- [Flow control at-rules](../../at-rules/control), like `@if` and `@each`.
|
||||
- The [`@error`](../../at-rules/error), [`@warn`](../../at-rules/warn), and
|
||||
[`@debug`](../../at-rules/debug) rules.
|
||||
- [Variable declarations](/documentation/variables), like `$var: value`.
|
||||
- [Flow control at-rules](/documentation/at-rules/control), like `@if` and `@each`.
|
||||
- The [`@error`](/documentation/at-rules/error), [`@warn`](/documentation/at-rules/warn), and
|
||||
[`@debug`](/documentation/at-rules/debug) rules.
|
||||
|
||||
### CSS Statements
|
||||
|
||||
These statements produce CSS. They can be used anywhere except within a
|
||||
`@function`:
|
||||
|
||||
- [Style rules](../../style-rules), like `h1 { /* ... */ }`.
|
||||
- [CSS at-rules](../../at-rules/css), like `@media` and `@font-face`.
|
||||
- [Mixin uses](../../at-rules/mixin) using `@include`.
|
||||
- The [`@at-root` rule](../../at-rules/at-root).
|
||||
- [Style rules](/documentation/style-rules), like `h1 { /* ... */ }`.
|
||||
- [CSS at-rules](/documentation/at-rules/css), like `@media` and `@font-face`.
|
||||
- [Mixin uses](/documentation/at-rules/mixin) using `@include`.
|
||||
- The [`@at-root` rule](/documentation/at-rules/at-root).
|
||||
|
||||
### Top-Level Statements
|
||||
|
||||
These statements can only be used at the top level of a stylesheet, or nested
|
||||
within a CSS statement at the top level:
|
||||
|
||||
- [Module loads](../../at-rules/use), using `@use`.
|
||||
- [Imports](../../at-rules/import), using `@import`.
|
||||
- [Mixin definitions](../../at-rules/mixin) using `@mixin`.
|
||||
- [Function definitions](../../at-rules/function) using `@function`.
|
||||
- [Module loads](/documentation/at-rules/use), using `@use`.
|
||||
- [Imports](/documentation/at-rules/import), using `@import`.
|
||||
- [Mixin definitions](/documentation/at-rules/mixin) using `@mixin`.
|
||||
- [Function definitions](/documentation/at-rules/function) using `@function`.
|
||||
|
||||
### Other Statements
|
||||
|
||||
- [Property declarations](../../style-rules/declarations) like `width: 100px` may
|
||||
- [Property declarations](/documentation/style-rules/declarations) like `width: 100px` may
|
||||
only be used within style rules and some CSS at-rules.
|
||||
- The [`@extend` rule](../../at-rules/extend) may only be used within style rules.
|
||||
- The [`@extend` rule](/documentation/at-rules/extend) may only be used within style rules.
|
||||
|
||||
## Expressions
|
||||
|
||||
@ -81,28 +81,28 @@ than plain CSS values. They're passed as arguments to [mixins][] and
|
||||
[functions][], used for control flow with the [`@if` rule][], and manipulated using
|
||||
[arithmetic][]. We call Sass's expression syntax _SassScript_.
|
||||
|
||||
[value]: ../../values
|
||||
[mixins]: ../../at-rules/mixin
|
||||
[functions]: ../../at-rules/function
|
||||
[`@if` rule]: ../../at-rules/control/if
|
||||
[arithmetic]: ../../operators/numeric
|
||||
[value]: /documentation/values
|
||||
[mixins]: /documentation/at-rules/mixin
|
||||
[functions]: /documentation/at-rules/function
|
||||
[`@if` rule]: /documentation/at-rules/control/if
|
||||
[arithmetic]: /documentation/operators/numeric
|
||||
|
||||
### Literals
|
||||
|
||||
The simplest expressions just represent static values:
|
||||
|
||||
- [Numbers](../../values/numbers), which may or may not have units, like `12` or
|
||||
- [Numbers](/documentation/values/numbers), which may or may not have units, like `12` or
|
||||
`100px`.
|
||||
- [Strings](../../values/strings), which may or may not have quotes, like
|
||||
- [Strings](/documentation/values/strings), which may or may not have quotes, like
|
||||
`"Helvetica Neue"` or `bold`.
|
||||
- [Colors](../../values/colors), which can be referred to by their hex
|
||||
- [Colors](/documentation/values/colors), which can be referred to by their hex
|
||||
representation or by name, like `#c6538c` or `blue`.
|
||||
- The [boolean](../../values/booleans) literals `true` or `false`.
|
||||
- The singleton [`null`](../../values/null).
|
||||
- [Lists of values](../../values/lists), which may be separated by spaces or commas
|
||||
- The [boolean](/documentation/values/booleans) literals `true` or `false`.
|
||||
- The singleton [`null`](/documentation/values/null).
|
||||
- [Lists of values](/documentation/values/lists), which may be separated by spaces or commas
|
||||
and which may be enclosed in square brackets or no brackets at all, like
|
||||
`1.5em 1em 0 2em`, `Helvetica, Arial, sans-serif`, or `[col1-start]`.
|
||||
- [Maps](../../values/maps) that associate values with keys, like
|
||||
- [Maps](/documentation/values/maps) that associate values with keys, like
|
||||
`("background": red, "foreground": pink)`.
|
||||
|
||||
### Operations
|
||||
@ -113,12 +113,12 @@ Sass defines syntax for a number of operations:
|
||||
|
||||
### Other Expressions
|
||||
|
||||
- [Variables](../../variables), like `$var`.
|
||||
- [Function calls](../../at-rules/function), like `nth($list, 1)` or
|
||||
- [Variables](/documentation/variables), like `$var`.
|
||||
- [Function calls](/documentation/at-rules/function), like `nth($list, 1)` or
|
||||
`var(--main-bg-color)`, which may call Sass core library functions or
|
||||
user-defined functions, or which may be compiled directly to CSS.
|
||||
- [Special functions](../special-functions), like `calc(1px + 100%)` or
|
||||
- [Special functions](/documentation/syntax/special-functions), like `calc(1px + 100%)` or
|
||||
`url(http://myapp.com/assets/logo.png)`, that have their own unique parsing
|
||||
rules.
|
||||
- [The parent selector](../../style-rules/parent-selector), `&`.
|
||||
- [The parent selector](/documentation/style-rules/parent-selector), `&`.
|
||||
- The value `!important`, which is parsed as an unquoted string.
|
||||
|
||||
@ -25,6 +25,7 @@ export const compatibility = async (
|
||||
details: string,
|
||||
dart: string | boolean | null = null,
|
||||
libsass: string | boolean | null = null,
|
||||
node: string | boolean | null = null,
|
||||
ruby: string | boolean | null = null,
|
||||
feature: string | null = null,
|
||||
) =>
|
||||
@ -32,6 +33,7 @@ export const compatibility = async (
|
||||
details,
|
||||
dart,
|
||||
libsass,
|
||||
node,
|
||||
ruby,
|
||||
feature,
|
||||
});
|
||||
|
||||
@ -18,12 +18,13 @@ export const funFact = async (contents: string) =>
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns HTML for a heads up warning related to the main
|
||||
* Returns HTML for a heads-up warning related to the main
|
||||
* documentation.
|
||||
*/
|
||||
export const headsUp = async (contents: string) =>
|
||||
export const headsUp = async (contents: string, useMarkdown = true) =>
|
||||
liquidEngine.renderFile('heads_up', {
|
||||
contents,
|
||||
useMarkdown,
|
||||
});
|
||||
|
||||
/**
|
||||
@ -61,7 +62,8 @@ export default function componentsPlugin(eleventyConfig: any) {
|
||||
// Ideally this could be used with named args, but that's not supported yet in
|
||||
// 11ty's implementation of LiquidJS:
|
||||
// https://github.com/11ty/eleventy/issues/2679
|
||||
// In the meantime, the args are: `dart`, `libsass`, `ruby`, `feature`
|
||||
// In the meantime, check the order in the function definition of
|
||||
// `compatibility` in `source/helpers/components/compatibility.ts`.
|
||||
eleventyConfig.addPairedLiquidShortcode('compatibility', compatibility);
|
||||
eleventyConfig.addPairedLiquidShortcode('funFact', funFact);
|
||||
eleventyConfig.addPairedLiquidShortcode('headsUp', headsUp);
|
||||
|
||||
34
tool/typedoc-build.sh
Executable file
34
tool/typedoc-build.sh
Executable file
@ -0,0 +1,34 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
# Exit on error or pipe failure
|
||||
set -eo pipefail
|
||||
|
||||
# Print each command and its arguments
|
||||
set -x
|
||||
|
||||
# Clone and fetch the sass/sass repo
|
||||
if [[ ! -d ".language" ]]; then
|
||||
git clone https://github.com/sass/sass .language
|
||||
fi
|
||||
cd .language
|
||||
git fetch
|
||||
if [[ "$LANGUAGE_REVISION" ]]; then
|
||||
git checkout "$LANGUAGE_REVISION"
|
||||
else
|
||||
git checkout origin/main
|
||||
fi
|
||||
cd ..
|
||||
|
||||
# Build the JS API docs
|
||||
cd .language
|
||||
npm install
|
||||
ln -sf ../.language/node_modules ../tool/node_modules
|
||||
npm run typedoc -- \
|
||||
--plugin ../tool/typedoc-theme.js --theme sass-site \
|
||||
--out ../source/documentation/js-api \
|
||||
--cleanOutputDir
|
||||
cd ..
|
||||
rm -r source/documentation/js-api/assets
|
||||
|
||||
# Turn off printing commands
|
||||
set +x
|
||||
@ -1,14 +1,24 @@
|
||||
const {
|
||||
DefaultTheme,
|
||||
DefaultThemeRenderContext,
|
||||
JSX,
|
||||
UrlMapping,
|
||||
} = require('typedoc');
|
||||
const { DefaultTheme, DefaultThemeRenderContext, JSX } = require('typedoc');
|
||||
|
||||
function bind(fn, first) {
|
||||
return (...r) => fn(first, ...r);
|
||||
}
|
||||
|
||||
/**
|
||||
* Take text `input` and convert it into a string of all arguments suitable for
|
||||
* the `{% compatibility %}` tag.
|
||||
*/
|
||||
function parseCompatibility(input) {
|
||||
const keyValueRegex = /(\w+):\s*([^,]+)/g;
|
||||
const defaults = { dart: null, libsass: null, node: null, ruby: null };
|
||||
const results = Object.fromEntries(
|
||||
[...input.matchAll(keyValueRegex)].map(([, key, value]) => [key, value]),
|
||||
);
|
||||
return Object.values({ ...defaults, ...results })
|
||||
.map(String)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
class SassSiteRenderContext extends DefaultThemeRenderContext {
|
||||
// We don't include Typedoc's JS, so the default means of displaying overloads
|
||||
// as multiple togglable definitions within a single member documentation
|
||||
@ -50,19 +60,19 @@ class SassSiteRenderContext extends DefaultThemeRenderContext {
|
||||
// Compatibility tags should have a single text block.
|
||||
const text = compat.content[0].text;
|
||||
|
||||
// The first line is arguments to impl_status, anything after that is the
|
||||
// contents of the block.
|
||||
// The first line is arguments to `{% compatibility %}` tag, anything
|
||||
// after that is the contents of the block.
|
||||
const lineBreak = text.indexOf('\n');
|
||||
const firstLine =
|
||||
lineBreak === -1 ? text : text.substring(0, lineBreak);
|
||||
const compatibilityArgs = parseCompatibility(
|
||||
lineBreak === -1 ? text : text.substring(0, lineBreak),
|
||||
);
|
||||
const rest =
|
||||
lineBreak === -1 ? null : text.substring(lineBreak + 1).trim();
|
||||
|
||||
return JSX.createElement(JSX.Raw, {
|
||||
html:
|
||||
`<% impl_status(${firstLine}) ${rest ? 'do' : ''} %>` +
|
||||
context.markdown(rest) +
|
||||
(rest ? '<% end %>' : ''),
|
||||
`{% compatibility ${compatibilityArgs} %}` +
|
||||
(rest ? context.markdown(rest) : '') +
|
||||
'{% endcompatibility %}',
|
||||
});
|
||||
}),
|
||||
);
|
||||
@ -79,11 +89,11 @@ class SassSiteRenderContext extends DefaultThemeRenderContext {
|
||||
.oldMarkdown(text)
|
||||
.replace(
|
||||
/<p><strong>Heads up!<\/strong>([^]*?)<\/p>/g,
|
||||
'<% heads_up do %>$1<% end %>',
|
||||
'{% headsUp %}$1{% endheadsUp %}',
|
||||
)
|
||||
.replace(
|
||||
/<p><strong>Fun fact!<\/strong>([^]*?)<\/p>/g,
|
||||
'<% fun_fact do %>$1<% end %>',
|
||||
'{% funFact %}$1{% endfunFact %}',
|
||||
),
|
||||
this,
|
||||
);
|
||||
@ -168,15 +178,6 @@ title: ${JSON.stringify(`${page.model.name} | JS API`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
getUrls(project) {
|
||||
return super
|
||||
.getUrls(project)
|
||||
.map(
|
||||
(mapping) =>
|
||||
new UrlMapping(`${mapping.url}.erb`, mapping.model, mapping.template),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: See if there's a graceful way to support "Heads up!" and Compatibility
|
||||
|
||||
82
yarn.lock
82
yarn.lock
@ -2226,13 +2226,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-sequence-parser@npm:^1.1.0":
|
||||
version: 1.1.0
|
||||
resolution: "ansi-sequence-parser@npm:1.1.0"
|
||||
checksum: 75f4d3a4c555655a698aec05b5763cbddcd16ccccdbfd178fb0aa471ab74fdf98e031b875ef26e64be6a95cf970c89238744b26de6e34af97f316d5186b1df53
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-styles@npm:^3.2.1":
|
||||
version: 3.2.1
|
||||
resolution: "ansi-styles@npm:3.2.1"
|
||||
@ -5089,13 +5082,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jsonc-parser@npm:^3.2.0":
|
||||
version: 3.2.0
|
||||
resolution: "jsonc-parser@npm:3.2.0"
|
||||
checksum: 946dd9a5f326b745aa326d48a7257e3f4a4b62c5e98ec8e49fa2bdd8d96cef7e6febf1399f5c7016114fd1f68a1c62c6138826d5d90bc650448e3cf0951c53c7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jstransformer@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "jstransformer@npm:1.0.0"
|
||||
@ -5357,13 +5343,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lunr@npm:^2.3.9":
|
||||
version: 2.3.9
|
||||
resolution: "lunr@npm:2.3.9"
|
||||
checksum: 176719e24fcce7d3cf1baccce9dd5633cd8bdc1f41ebe6a180112e5ee99d80373fe2454f5d4624d437e5a8319698ca6837b9950566e15d2cae5f2a543a3db4b8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"luxon@npm:^3.3.0":
|
||||
version: 3.3.0
|
||||
resolution: "luxon@npm:3.3.0"
|
||||
@ -5466,15 +5445,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"marked@npm:^4.3.0":
|
||||
version: 4.3.0
|
||||
resolution: "marked@npm:4.3.0"
|
||||
bin:
|
||||
marked: bin/marked.js
|
||||
checksum: 0db6817893952c3ec710eb9ceafb8468bf5ae38cb0f92b7b083baa13d70b19774674be04db5b817681fa7c5c6a088f61300815e4dd75a59696f4716ad69f6260
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mathml-tag-names@npm:^2.1.3":
|
||||
version: 2.1.3
|
||||
resolution: "mathml-tag-names@npm:2.1.3"
|
||||
@ -5607,15 +5577,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"minimatch@npm:^9.0.0":
|
||||
version: 9.0.1
|
||||
resolution: "minimatch@npm:9.0.1"
|
||||
dependencies:
|
||||
brace-expansion: ^2.0.1
|
||||
checksum: 97f5f5284bb57dc65b9415dec7f17a0f6531a33572193991c60ff18450dcfad5c2dad24ffeaf60b5261dccd63aae58cc3306e2209d57e7f88c51295a532d8ec3
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"minimist-options@npm:4.1.0":
|
||||
version: 4.1.0
|
||||
resolution: "minimist-options@npm:4.1.0"
|
||||
@ -6978,7 +6939,6 @@ __metadata:
|
||||
stylelint-config-standard-scss: ^9.0.0
|
||||
truncate-html: ^1.0.4
|
||||
ts-node: ^10.9.1
|
||||
typedoc: ^0.24.7
|
||||
typescript: ^5.0.4
|
||||
typogr: ^0.6.8
|
||||
languageName: unknown
|
||||
@ -7105,18 +7065,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"shiki@npm:^0.14.1":
|
||||
version: 0.14.2
|
||||
resolution: "shiki@npm:0.14.2"
|
||||
dependencies:
|
||||
ansi-sequence-parser: ^1.1.0
|
||||
jsonc-parser: ^3.2.0
|
||||
vscode-oniguruma: ^1.7.0
|
||||
vscode-textmate: ^8.0.0
|
||||
checksum: f2a14302b1803617e3ff1b751a5c87b4af4ad15214dc00e9215402e42940a84a0b956cf55d628f25dbf1296b18e277b8529571cd9359b971ac599a0ab11303e7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"side-channel@npm:^1.0.4":
|
||||
version: 1.0.4
|
||||
resolution: "side-channel@npm:1.0.4"
|
||||
@ -7828,22 +7776,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"typedoc@npm:^0.24.7":
|
||||
version: 0.24.7
|
||||
resolution: "typedoc@npm:0.24.7"
|
||||
dependencies:
|
||||
lunr: ^2.3.9
|
||||
marked: ^4.3.0
|
||||
minimatch: ^9.0.0
|
||||
shiki: ^0.14.1
|
||||
peerDependencies:
|
||||
typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x
|
||||
bin:
|
||||
typedoc: bin/typedoc
|
||||
checksum: 9ae433566cb02b96deb9eb2a9f5b23d1b199f5aeb61ca8c7e2653ff5d339fbfb4d526e024febab4f3278332978814aaa0885f1d5925ba21a441d93a611510ac3
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"typescript@npm:^5.0.4":
|
||||
version: 5.0.4
|
||||
resolution: "typescript@npm:5.0.4"
|
||||
@ -8030,20 +7962,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"vscode-oniguruma@npm:^1.7.0":
|
||||
version: 1.7.0
|
||||
resolution: "vscode-oniguruma@npm:1.7.0"
|
||||
checksum: 53519d91d90593e6fb080260892e87d447e9b200c4964d766772b5053f5699066539d92100f77f1302c91e8fc5d9c772fbe40fe4c90f3d411a96d5a9b1e63f42
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"vscode-textmate@npm:^8.0.0":
|
||||
version: 8.0.0
|
||||
resolution: "vscode-textmate@npm:8.0.0"
|
||||
checksum: 127780dfea89559d70b8326df6ec344cfd701312dd7f3f591a718693812b7852c30b6715e3cfc8b3200a4e2515b4c96f0843c0eacc0a3020969b5de262c2a4bb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"which-boxed-primitive@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "which-boxed-primitive@npm:1.0.2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user