mirror of https://github.com/Wilfred/difftastic/
Merge branch 'master' into feature/salesforce_apex_support
Rodolphe Blancho
GitHub
commit
e18b5d0712
@ -1,4 +1,4 @@
|
||||
[toolchain]
|
||||
channel = "1.59"
|
||||
channel = "1.63"
|
||||
components = ["rustfmt"]
|
||||
profile = "minimal"
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
before
|
||||
x
|
||||
after
|
||||
@ -0,0 +1,4 @@
|
||||
before
|
||||
foo x
|
||||
y
|
||||
after
|
||||
@ -0,0 +1,2 @@
|
||||
foo
|
||||
bar
|
||||
@ -0,0 +1,3 @@
|
||||
foo
|
||||
|
||||
bar
|
||||
@ -0,0 +1,3 @@
|
||||
class Foo {
|
||||
val str: String
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
class Foo {
|
||||
val str: String?
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
@mixin buttons($basicBorder:1px, $gradient1:#333, $gradient2:#d8dee7){
|
||||
button{
|
||||
border:$basicBorder dotted #acbed3;
|
||||
//brings in Compass' background-image mixin: http://compass-style.org/reference/compass/css3/images/
|
||||
@include background-image(linear-gradient($gradient1, $gradient2));
|
||||
padding:3px 14px;
|
||||
font-size:1rem;
|
||||
color:#3b557d;
|
||||
//brings in Compass' border-radius mixin: http://compass-style.org/reference/compass/css3/border_radius/
|
||||
@include border-radius($border-radius, $border-radius);
|
||||
cursor:pointer;
|
||||
|
||||
//& attribute adds
|
||||
|
||||
&.primary {
|
||||
border:2px dotted #3b557d;
|
||||
padding:5px 15px;
|
||||
//requires a $border-radius variable
|
||||
@include border-radius($border-radius + 2, $border-radius + 2);
|
||||
}
|
||||
&.disabled {
|
||||
opacity: .6;
|
||||
}
|
||||
&:hover {
|
||||
@include background-image(linear-gradient($gradient2, $gradient1));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
@mixin buttons($basicBorder:1px, $gradient1:#fff, $gradient2:#d8dee7){
|
||||
button{
|
||||
border:$basicBorder solid #acbed3;
|
||||
//brings in Compass' background-image mixin: http://compass-style.org/reference/compass/css3/images/
|
||||
@include background-image(linear-gradient($gradient1, $gradient2));
|
||||
padding:3px 14px;
|
||||
font-size:12px;
|
||||
color:#3b557d;
|
||||
//brings in Compass' border-radius mixin: http://compass-style.org/reference/compass/css3/border_radius/
|
||||
@include border-radius($border-radius, $border-radius);
|
||||
cursor:pointer;
|
||||
|
||||
//& attribute adds
|
||||
|
||||
&.primary {
|
||||
border:2px solid #3b557d;
|
||||
padding:5px 15px;
|
||||
//requires a $border-radius variable
|
||||
@include border-radius($border-radius + 2, $border-radius + 2);
|
||||
}
|
||||
&.disabled {
|
||||
opacity: .8;
|
||||
}
|
||||
&:hover {
|
||||
@include background-image(linear-gradient($gradient2, $gradient1));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
foo: |
|
||||
bar
|
||||
@ -0,0 +1,2 @@
|
||||
foo: |
|
||||
${{ BAR }}
|
||||
@ -1,7 +1,7 @@
|
||||
pub mod changes;
|
||||
pub mod dijkstra;
|
||||
pub(crate) mod changes;
|
||||
pub(crate) mod dijkstra;
|
||||
mod graph;
|
||||
pub mod myers_diff;
|
||||
pub mod sliders;
|
||||
pub(crate) mod myers_diff;
|
||||
pub(crate) mod sliders;
|
||||
mod stack;
|
||||
pub mod unchanged;
|
||||
pub(crate) mod unchanged;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub mod context;
|
||||
pub mod hunks;
|
||||
pub mod inline;
|
||||
pub mod json;
|
||||
pub mod side_by_side;
|
||||
pub mod style;
|
||||
pub(crate) mod context;
|
||||
pub(crate) mod hunks;
|
||||
pub(crate) mod inline;
|
||||
pub(crate) mod json;
|
||||
pub(crate) mod side_by_side;
|
||||
pub(crate) mod style;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/// Successfully ran a diff, found no syntactic changes in text files
|
||||
/// or byte changes in binary files.
|
||||
pub const EXIT_SUCCESS: i32 = 0;
|
||||
pub(crate) const EXIT_SUCCESS: i32 = 0;
|
||||
|
||||
/// Successfully ran a diff, found syntactic changes in text files or
|
||||
/// byte changes in binary files.
|
||||
pub const EXIT_FOUND_CHANGES: i32 = 1;
|
||||
pub(crate) const EXIT_FOUND_CHANGES: i32 = 1;
|
||||
|
||||
/// Invalid arguments given to difftastic. This could be usage errors
|
||||
/// (e.g. invalid numbers of arguments) or invalid paths (e.g. files
|
||||
/// we don't have permission to read).
|
||||
pub const EXIT_BAD_ARGUMENTS: i32 = 2;
|
||||
pub(crate) const EXIT_BAD_ARGUMENTS: i32 = 2;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
pub mod guess_language;
|
||||
pub mod syntax;
|
||||
pub mod tree_sitter_parser;
|
||||
pub(crate) mod guess_language;
|
||||
pub(crate) mod syntax;
|
||||
pub(crate) mod tree_sitter_parser;
|
||||
|
||||
@ -0,0 +1,151 @@
|
||||
/// Split `s` into a vec of things that look like words and individual
|
||||
/// non-word characters.
|
||||
///
|
||||
/// "foo..bar23" -> vec!["foo", ".", ".", "bar23"]
|
||||
///
|
||||
/// See also `split_words_and_numbers`. Both these functions are hot,
|
||||
/// so they are separate implementations rather than passing a bool to
|
||||
/// customise number handling.
|
||||
pub(crate) fn split_words(s: &str) -> Vec<&str> {
|
||||
let mut words = vec![];
|
||||
let mut word_start: Option<usize> = None;
|
||||
for (idx, c) in s.char_indices() {
|
||||
match word_start {
|
||||
Some(start) => {
|
||||
if c.is_alphanumeric() || c == '-' || c == '_' {
|
||||
// Just carry on in this word.
|
||||
} else {
|
||||
// Push the previous word, then this non-word character.
|
||||
words.push(&s[start..idx]);
|
||||
words.push(&s[idx..idx + c.len_utf8()]);
|
||||
word_start = None;
|
||||
}
|
||||
}
|
||||
None => {
|
||||
if c.is_alphanumeric() || c == '-' || c == '_' {
|
||||
word_start = Some(idx);
|
||||
} else {
|
||||
words.push(&s[idx..idx + c.len_utf8()]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if let Some(start) = word_start {
|
||||
words.push(&s[start..]);
|
||||
}
|
||||
words
|
||||
}
|
||||
|
||||
/// Split `s` into a vec of things that look like words and individual
|
||||
/// non-word characters.
|
||||
///
|
||||
/// "foo..bar23" -> vec!["foo", ".", ".", "bar23"]
|
||||
pub(crate) fn split_words_and_numbers(s: &str) -> Vec<&str> {
|
||||
let mut words = vec![];
|
||||
let mut word_start: Option<(usize, char)> = None;
|
||||
for (idx, c) in s.char_indices() {
|
||||
match word_start {
|
||||
Some((start, start_c)) => {
|
||||
if c.is_alphanumeric() || c == '_' {
|
||||
// Word character, add to the current word if it's
|
||||
// not a number.
|
||||
if c.is_ascii_digit() == start_c.is_ascii_digit() {
|
||||
// Just carry on in this word.
|
||||
} else {
|
||||
// Finish previous word, start a new one.
|
||||
words.push(&s[start..idx]);
|
||||
word_start = Some((idx, c));
|
||||
}
|
||||
} else {
|
||||
// Push the previous word, then this non-word character.
|
||||
words.push(&s[start..idx]);
|
||||
words.push(&s[idx..idx + c.len_utf8()]);
|
||||
word_start = None;
|
||||
}
|
||||
}
|
||||
None => {
|
||||
if c.is_alphanumeric() || c == '-' || c == '_' {
|
||||
word_start = Some((idx, c));
|
||||
} else {
|
||||
words.push(&s[idx..idx + c.len_utf8()]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if let Some((start, _)) = word_start {
|
||||
words.push(&s[start..]);
|
||||
}
|
||||
words
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use pretty_assertions::assert_eq;
|
||||
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn test_split_words() {
|
||||
let s = "example.com";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["example", ".", "com"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_punctuation() {
|
||||
let s = "example..";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["example", ".", "."])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_numbers() {
|
||||
let s = "foo123bar";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["foo123bar"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_treats_newline_separately() {
|
||||
let s = "example.\ncom";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["example", ".", "\n", "com"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_single_unicode() {
|
||||
let s = "a ö b";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["a", " ", "ö", " ", "b"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_single_unicode_not_alphabetic() {
|
||||
let s = "a 💝 b";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["a", " ", "💝", " ", "b"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_unicode() {
|
||||
let s = "a xöy b";
|
||||
let res = split_words(s);
|
||||
assert_eq!(res, vec!["a", " ", "xöy", " ", "b"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_and_numbers() {
|
||||
let s = "a123b";
|
||||
let res = split_words_and_numbers(s);
|
||||
assert_eq!(res, vec!["a", "123", "b"])
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_split_words_and_numbers_spaces() {
|
||||
let s = "foo bar";
|
||||
let res = split_words_and_numbers(s);
|
||||
assert_eq!(res, vec!["foo", " ", "bar"])
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
../tree-sitter-scss/queries/highlights.scm
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
tree-sitter-scss/src
|
||||
@ -0,0 +1,2 @@
|
||||
/src/** linguist-vendored
|
||||
/examples/* linguist-vendored
|
||||
@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
build
|
||||
*.log
|
||||
package-lock.json
|
||||
@ -0,0 +1,26 @@
|
||||
[package]
|
||||
name = "tree-sitter-scss"
|
||||
description = "scss grammar for the tree-sitter parsing library"
|
||||
version = "0.0.1"
|
||||
keywords = ["incremental", "parsing", "scss"]
|
||||
categories = ["parsing", "text-editors"]
|
||||
repository = "https://github.com/tree-sitter/tree-sitter-javascript"
|
||||
edition = "2018"
|
||||
license = "MIT"
|
||||
|
||||
build = "bindings/rust/build.rs"
|
||||
include = [
|
||||
"bindings/rust/*",
|
||||
"grammar.js",
|
||||
"queries/*",
|
||||
"src/*",
|
||||
]
|
||||
|
||||
[lib]
|
||||
path = "bindings/rust/lib.rs"
|
||||
|
||||
[dependencies]
|
||||
tree-sitter = "0.20"
|
||||
|
||||
[build-dependencies]
|
||||
cc = "1.0"
|
||||
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2020 Serenade Labs, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -0,0 +1,5 @@
|
||||
# tree-sitter-scss
|
||||
|
||||
SCSS grammar for [tree-sitter](https://github.com/tree-sitter/tree-sitter).
|
||||
|
||||
Based on [tree-sitter-css](https://github.com/tree-sitter/tree-sitter-css).
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"targets": [
|
||||
{
|
||||
"target_name": "tree_sitter_scss_binding",
|
||||
"include_dirs": [
|
||||
"<!(node -e \"require('nan')\")",
|
||||
"src"
|
||||
],
|
||||
"sources": [
|
||||
"src/parser.c",
|
||||
"src/scanner.c",
|
||||
"bindings/node/binding.cc"
|
||||
],
|
||||
"cflags_c": [
|
||||
"-std=c99",
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
#include "tree_sitter/parser.h"
|
||||
#include <node.h>
|
||||
#include "nan.h"
|
||||
|
||||
using namespace v8;
|
||||
|
||||
extern "C" TSLanguage * tree_sitter_scss();
|
||||
|
||||
namespace {
|
||||
|
||||
NAN_METHOD(New) {}
|
||||
|
||||
void Init(Local<Object> exports, Local<Object> module) {
|
||||
Local<FunctionTemplate> tpl = Nan::New<FunctionTemplate>(New);
|
||||
tpl->SetClassName(Nan::New("Language").ToLocalChecked());
|
||||
tpl->InstanceTemplate()->SetInternalFieldCount(1);
|
||||
|
||||
Local<Function> constructor = Nan::GetFunction(tpl).ToLocalChecked();
|
||||
Local<Object> instance = constructor->NewInstance(Nan::GetCurrentContext()).ToLocalChecked();
|
||||
Nan::SetInternalFieldPointer(instance, 0, tree_sitter_scss());
|
||||
|
||||
Nan::Set(instance, Nan::New("name").ToLocalChecked(), Nan::New("scss").ToLocalChecked());
|
||||
Nan::Set(module, Nan::New("exports").ToLocalChecked(), instance);
|
||||
}
|
||||
|
||||
NODE_MODULE(tree_sitter_scss_binding, Init)
|
||||
|
||||
} // namespace
|
||||
@ -0,0 +1,19 @@
|
||||
try {
|
||||
module.exports = require("../../build/Release/tree_sitter_scss_binding");
|
||||
} catch (error1) {
|
||||
if (error1.code !== 'MODULE_NOT_FOUND') {
|
||||
throw error1;
|
||||
}
|
||||
try {
|
||||
module.exports = require("../../build/Debug/tree_sitter_scss_binding");
|
||||
} catch (error2) {
|
||||
if (error2.code !== 'MODULE_NOT_FOUND') {
|
||||
throw error2;
|
||||
}
|
||||
throw error1
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
module.exports.nodeTypeInfo = require("../../src/node-types.json");
|
||||
} catch (_) {}
|
||||
@ -0,0 +1,16 @@
|
||||
fn main() {
|
||||
let src_dir = std::path::Path::new("src");
|
||||
let mut c_config = cc::Build::new();
|
||||
c_config.include(&src_dir);
|
||||
c_config
|
||||
.flag_if_supported("-Wno-unused-parameter")
|
||||
.flag_if_supported("-Wno-unused-but-set-variable")
|
||||
.flag_if_supported("-Wno-trigraphs");
|
||||
let parser_path = src_dir.join("parser.c");
|
||||
let scanner_path = src_dir.join("scanner.c");
|
||||
c_config.file(&parser_path);
|
||||
c_config.file(&scanner_path);
|
||||
println!("cargo:rerun-if-changed={}", scanner_path.to_str().unwrap());
|
||||
println!("cargo:rerun-if-changed={}", parser_path.to_str().unwrap());
|
||||
c_config.compile("parser");
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
//! This crate provides scss language support for the [tree-sitter][] parsing library.
|
||||
//!
|
||||
//! Typically, you will use the [language][language func] function to add this language to a
|
||||
//! tree-sitter [Parser][], and then use the parser to parse some code:
|
||||
//!
|
||||
//! ```
|
||||
//! let code = "";
|
||||
//! let mut parser = tree_sitter::Parser::new();
|
||||
//! parser.set_language(tree_sitter_scss::language()).expect("Error loading scss grammar");
|
||||
//! let tree = parser.parse(code, None).unwrap();
|
||||
//! ```
|
||||
//!
|
||||
//! [Language]: https://docs.rs/tree-sitter/*/tree_sitter/struct.Language.html
|
||||
//! [language func]: fn.language.html
|
||||
//! [Parser]: https://docs.rs/tree-sitter/*/tree_sitter/struct.Parser.html
|
||||
//! [tree-sitter]: https://tree-sitter.github.io/
|
||||
|
||||
use tree_sitter::Language;
|
||||
|
||||
extern "C" {
|
||||
fn tree_sitter_scss() -> Language;
|
||||
}
|
||||
|
||||
/// Get the tree-sitter [Language][] for this grammar.
|
||||
///
|
||||
/// [Language]: https://docs.rs/tree-sitter/*/tree_sitter/struct.Language.html
|
||||
pub fn language() -> Language {
|
||||
unsafe { tree_sitter_scss() }
|
||||
}
|
||||
|
||||
/// The content of the [`node-types.json`][] file for this grammar.
|
||||
///
|
||||
/// [`node-types.json`]: https://tree-sitter.github.io/tree-sitter/using-parsers#static-node-types
|
||||
pub const NODE_TYPES: &'static str = include_str!("../../src/node-types.json");
|
||||
|
||||
// Uncomment these to include any queries that this grammar contains
|
||||
|
||||
// pub const HIGHLIGHTS_QUERY: &'static str = include_str!("../../queries/highlights.scm");
|
||||
// pub const INJECTIONS_QUERY: &'static str = include_str!("../../queries/injections.scm");
|
||||
// pub const LOCALS_QUERY: &'static str = include_str!("../../queries/locals.scm");
|
||||
// pub const TAGS_QUERY: &'static str = include_str!("../../queries/tags.scm");
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
#[test]
|
||||
fn test_can_load_grammar() {
|
||||
let mut parser = tree_sitter::Parser::new();
|
||||
parser
|
||||
.set_language(super::language())
|
||||
.expect("Error loading scss language");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,379 @@
|
||||
==========================
|
||||
Function calls
|
||||
==========================
|
||||
|
||||
a {
|
||||
color: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression (function_name) (arguments
|
||||
(integer_value)
|
||||
(integer_value)
|
||||
(integer_value)
|
||||
(float_value)))))))
|
||||
|
||||
=============================================
|
||||
Calls where each argument has multiple values
|
||||
=============================================
|
||||
|
||||
div {
|
||||
background: repeating-linear-gradient(red, orange 50px);
|
||||
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set (selectors (tag_name)) (block
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression (function_name) (arguments
|
||||
(plain_value)
|
||||
(plain_value)
|
||||
(integer_value (unit)))))
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression (function_name) (arguments
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))))))))
|
||||
|
||||
============================
|
||||
Color literals
|
||||
============================
|
||||
|
||||
a {
|
||||
b: #fafd04;
|
||||
c: #fafd0401;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (color_value))
|
||||
(declaration (property_name) (color_value)))))
|
||||
|
||||
============================
|
||||
Numbers
|
||||
============================
|
||||
|
||||
a {
|
||||
b: 0.5%;
|
||||
c: 5em;
|
||||
margin: 10E3px;
|
||||
margin: -456.8px;
|
||||
margin: -5px;
|
||||
margin: -0.0px;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set (selectors (tag_name)) (block
|
||||
(declaration (property_name) (float_value (unit)))
|
||||
(declaration (property_name) (integer_value (unit)))
|
||||
(declaration (property_name) (float_value (unit)))
|
||||
(declaration (property_name) (float_value (unit)))
|
||||
(declaration (property_name) (integer_value (unit)))
|
||||
(declaration (property_name) (float_value (unit))))))
|
||||
|
||||
============================
|
||||
Binary arithmetic operators
|
||||
============================
|
||||
|
||||
a {
|
||||
width: calc(100% - 80px);
|
||||
aspect-ratio: 1/2;
|
||||
font-size: calc(10px + (56 - 10) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression (function_name) (arguments (binary_expression (integer_value (unit)) (integer_value (unit))))))
|
||||
(declaration
|
||||
(property_name)
|
||||
(binary_expression (integer_value) (integer_value)))
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression
|
||||
(function_name)
|
||||
(arguments
|
||||
(binary_expression
|
||||
(binary_expression
|
||||
(integer_value (unit))
|
||||
(parenthesized_value (binary_expression (integer_value) (integer_value))))
|
||||
(parenthesized_value
|
||||
(binary_expression
|
||||
(parenthesized_value (binary_expression (integer_value (unit)) (integer_value (unit))))
|
||||
(parenthesized_value (binary_expression (integer_value) (integer_value))))))))))))
|
||||
|
||||
============================
|
||||
Strings
|
||||
============================
|
||||
|
||||
a {
|
||||
b: '';
|
||||
c: '\'hi\'';
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (string_value))
|
||||
(declaration (property_name) (string_value)))))
|
||||
|
||||
============================
|
||||
URLs
|
||||
============================
|
||||
|
||||
a {
|
||||
b: http://something-else?foo=bar;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (plain_value)))))
|
||||
|
||||
============================
|
||||
Important declarations
|
||||
============================
|
||||
|
||||
a {
|
||||
b: c !important;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (plain_value) (important)))))
|
||||
|
||||
============================
|
||||
Declarations without trailing semicolons
|
||||
============================
|
||||
|
||||
a {
|
||||
b: c;
|
||||
d: e
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (plain_value))
|
||||
(declaration (property_name) (plain_value)))))
|
||||
|
||||
=======================================
|
||||
Comments right after numbers
|
||||
=======================================
|
||||
|
||||
a {
|
||||
shape-outside: circle(20em/*=*/at 50% 50%);
|
||||
shape-outside: inset(1em, 1em, 1em, 1em);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (call_expression (function_name) (arguments
|
||||
(integer_value (unit))
|
||||
(comment)
|
||||
(plain_value)
|
||||
(integer_value (unit))
|
||||
(integer_value (unit)))))
|
||||
(declaration (property_name) (call_expression (function_name) (arguments
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))
|
||||
(integer_value (unit))))))))
|
||||
|
||||
=================================
|
||||
Declarations at the top level
|
||||
=================================
|
||||
|
||||
--a-variable: -5px;
|
||||
a-property: calc(5px + var(--a-variable));
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(declaration (property_name) (integer_value (unit)))
|
||||
(declaration (property_name) (call_expression (function_name) (arguments (binary_expression (integer_value (unit)) (call_expression (function_name) (arguments (plain_value))))))))
|
||||
|
||||
=================================
|
||||
Variables
|
||||
=================================
|
||||
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
|
||||
a {
|
||||
$primary-color: red;
|
||||
|
||||
color: $primary-color;
|
||||
font: 100% $font-stack;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(declaration (variable_name) (plain_value) (plain_value))
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (variable_name) (plain_value))
|
||||
(declaration (property_name) (variable_value))
|
||||
(declaration (property_name) (integer_value (unit)) (variable_value)))))
|
||||
|
||||
=================================
|
||||
Mixins with no arguments
|
||||
=================================
|
||||
|
||||
@mixin red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement (name)
|
||||
(block
|
||||
(declaration (property_name) (plain_value)))))
|
||||
|
||||
=================================
|
||||
Mixins with arguments
|
||||
=================================
|
||||
|
||||
@mixin replace-text($image, $color: red) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters
|
||||
(parameter (variable_name))
|
||||
(parameter (variable_name) (default_value (plain_value))))
|
||||
(block (declaration (property_name) (plain_value)))))
|
||||
|
||||
=================================
|
||||
Mixins with interpolations and content
|
||||
=================================
|
||||
|
||||
@mixin media($queryString) {
|
||||
@media #{$queryString} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters (parameter (variable_name)))
|
||||
(block (media_statement (keyword_query) (block (at_rule (at_keyword)))))))
|
||||
|
||||
=================================
|
||||
Mixins with at-root
|
||||
=================================
|
||||
|
||||
@mixin unify-parent($child) {
|
||||
@at-root #{selector.unify(&, $child)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters (parameter (variable_name)))
|
||||
(block
|
||||
(at_root_statement (plain_value) (block (at_rule (at_keyword)))))))
|
||||
|
||||
=================================
|
||||
Placeholders
|
||||
=================================
|
||||
|
||||
%bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(placeholder
|
||||
(name)
|
||||
(block
|
||||
(declaration (property_name) (integer_value (unit))))))
|
||||
|
||||
=============================================
|
||||
Spaces after colons in property declarations
|
||||
=============================================
|
||||
|
||||
div {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors
|
||||
(tag_name))
|
||||
(block
|
||||
(declaration
|
||||
(property_name)
|
||||
(integer_value))
|
||||
(declaration
|
||||
(property_name)
|
||||
(integer_value)))))
|
||||
@ -0,0 +1,23 @@
|
||||
=========================
|
||||
Universal selectors
|
||||
=========================
|
||||
|
||||
@import './styles/reset.scss';
|
||||
@import './styles/main.scss';
|
||||
|
||||
#app {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.MoreChancesModal {
|
||||
&_Title {
|
||||
@extend .t--heading-tertiary;
|
||||
}
|
||||
&_Spacer {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet (import_statement (string_value)) (import_statement (string_value)) (rule_set (selectors (id_selector (id_name))) (block (declaration (property_name) (plain_value)))) (rule_set (selectors (class_selector (class_name))) (block (rule_set (selectors (class_selector (nesting_selector) (class_name))) (block (extend_statement (class_selector (class_name))))) (rule_set (selectors (class_selector (nesting_selector) (class_name))) (block (declaration (property_name) (plain_value)))))))
|
||||
@ -0,0 +1,224 @@
|
||||
=========================
|
||||
Universal selectors
|
||||
=========================
|
||||
|
||||
* {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set (selectors (universal_selector)) (block)))
|
||||
|
||||
=========================
|
||||
Type selectors
|
||||
=========================
|
||||
|
||||
div, span {}
|
||||
h1, h2, h3, h4 {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set (selectors (tag_name) (tag_name)) (block))
|
||||
(rule_set (selectors (tag_name) (tag_name) (tag_name) (tag_name)) (block)))
|
||||
|
||||
=========================
|
||||
Class selectors
|
||||
=========================
|
||||
|
||||
.class-a {}
|
||||
div.class-b, .class-c.class-d {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors
|
||||
(class_selector (tag_name) (class_name))
|
||||
(class_selector (class_selector (class_name)) (class_name)))
|
||||
(block)))
|
||||
|
||||
=========================
|
||||
Id selectors
|
||||
=========================
|
||||
|
||||
#some-id, a#another-id {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (id_selector (id_name)) (id_selector (tag_name) (id_name)))
|
||||
(block)))
|
||||
|
||||
=========================
|
||||
Attribute selectors
|
||||
=========================
|
||||
|
||||
[a] {}
|
||||
[b=c] {}
|
||||
[d~=e] {}
|
||||
a[b] {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set (selectors (attribute_selector (attribute_name))) (block))
|
||||
(rule_set (selectors (attribute_selector (attribute_name) (plain_value))) (block))
|
||||
(rule_set (selectors (attribute_selector (attribute_name) (plain_value))) (block))
|
||||
(rule_set (selectors (attribute_selector (tag_name) (attribute_name))) (block)))
|
||||
|
||||
=========================
|
||||
Pseudo-class selectors
|
||||
=========================
|
||||
|
||||
a:hover {}
|
||||
:nth-child(2) {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (pseudo_class_selector (tag_name) (class_name)))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors (pseudo_class_selector (class_name) (arguments (integer_value))))
|
||||
(block)))
|
||||
|
||||
=========================
|
||||
Pseudo-element selectors
|
||||
=========================
|
||||
|
||||
a::first-line {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (pseudo_element_selector (tag_name) (tag_name)))
|
||||
(block)))
|
||||
|
||||
=========================
|
||||
Child selectors
|
||||
=========================
|
||||
|
||||
a > b {}
|
||||
c > d > e {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (child_selector (tag_name) (tag_name)))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors (child_selector
|
||||
(child_selector (tag_name) (tag_name))
|
||||
(tag_name)))
|
||||
(block)))
|
||||
|
||||
=========================
|
||||
Descendant selectors
|
||||
=========================
|
||||
|
||||
a b {}
|
||||
c d e {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (descendant_selector (tag_name) (tag_name)))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors (descendant_selector
|
||||
(descendant_selector (tag_name) (tag_name))
|
||||
(tag_name)))
|
||||
(block)))
|
||||
|
||||
===========================
|
||||
Nesting selectors
|
||||
===========================
|
||||
|
||||
a {
|
||||
&.b {}
|
||||
& c {}
|
||||
& > d {}
|
||||
&e {}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(rule_set (selectors (class_selector (nesting_selector) (class_name))) (block))
|
||||
(rule_set (selectors (descendant_selector (nesting_selector) (tag_name))) (block))
|
||||
(rule_set (selectors (child_selector (nesting_selector) (tag_name))) (block))
|
||||
(rule_set (selectors (class_selector (nesting_selector) (class_name))) (block)))))
|
||||
|
||||
===========================
|
||||
Sibling selectors
|
||||
===========================
|
||||
|
||||
a.b ~ c.d {}
|
||||
.e.f + .g.h {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (sibling_selector
|
||||
(class_selector (tag_name) (class_name))
|
||||
(class_selector (tag_name) (class_name))))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors (adjacent_sibling_selector
|
||||
(class_selector (class_selector (class_name)) (class_name))
|
||||
(class_selector (class_selector (class_name)) (class_name))))
|
||||
(block)))
|
||||
|
||||
===========================
|
||||
The :not selector
|
||||
===========================
|
||||
|
||||
a:not(:hover) {}
|
||||
.b:not(c > .d) {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (pseudo_class_selector
|
||||
(tag_name)
|
||||
(class_name)
|
||||
(arguments (pseudo_class_selector (class_name)))))
|
||||
(block))
|
||||
(rule_set
|
||||
(selectors (pseudo_class_selector
|
||||
(class_selector (class_name))
|
||||
(class_name)
|
||||
(arguments (child_selector (tag_name) (class_selector (class_name))))))
|
||||
(block)))
|
||||
|
||||
===========================
|
||||
Parent selectors
|
||||
===========================
|
||||
|
||||
html {
|
||||
.foo & {}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(rule_set
|
||||
(selectors (descendant_selector (class_selector (class_name)) (nesting_selector)))
|
||||
(block)))))
|
||||
@ -0,0 +1,526 @@
|
||||
==============================
|
||||
Import statements
|
||||
==============================
|
||||
|
||||
@import url("fineprint.css") print;
|
||||
@import url("bluish.css") speech;
|
||||
@import 'custom.css';
|
||||
@import url("chrome://communicator/skin/");
|
||||
@import "common.css" screen;
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(import_statement (call_expression (function_name) (arguments (string_value))) (keyword_query))
|
||||
(import_statement (call_expression (function_name) (arguments (string_value))) (keyword_query))
|
||||
(import_statement (string_value))
|
||||
(import_statement (call_expression (function_name) (arguments (string_value))))
|
||||
(import_statement (string_value) (keyword_query)))
|
||||
|
||||
==============================
|
||||
Namespace statements
|
||||
==============================
|
||||
|
||||
/* Default namespace */
|
||||
@namespace url(XML-namespace-URL);
|
||||
@namespace "XML-namespace-URL";
|
||||
@namespace url(http://www.w3.org/1999/xhtml);
|
||||
@namespace svg url(http://www.w3.org/2000/svg);
|
||||
|
||||
/* Prefixed namespace */
|
||||
@namespace prefix url(XML-namespace-URL);
|
||||
@namespace prefix "XML-namespace-URL";
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(comment)
|
||||
(namespace_statement (call_expression (function_name) (arguments (plain_value))))
|
||||
(namespace_statement (string_value))
|
||||
(namespace_statement (call_expression (function_name) (arguments (plain_value))))
|
||||
(namespace_statement (namespace_name) (call_expression (function_name) (arguments (plain_value))))
|
||||
(comment)
|
||||
(namespace_statement (namespace_name) (call_expression (function_name) (arguments (plain_value))))
|
||||
(namespace_statement (namespace_name) (string_value)))
|
||||
|
||||
==============================
|
||||
Keyframes statements
|
||||
==============================
|
||||
|
||||
@keyframes important1 {
|
||||
from { margin-top: 50px; }
|
||||
50% { margin-top: 150px !important; } /* ignored */
|
||||
to { margin-top: 100px; }
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(keyframes_statement (keyframes_name) (keyframe_block_list
|
||||
(keyframe_block (from) (block (declaration (property_name) (integer_value (unit)))))
|
||||
(keyframe_block (integer_value (unit)) (block (declaration (property_name) (integer_value (unit)) (important))))
|
||||
(comment)
|
||||
(keyframe_block (to) (block (declaration (property_name) (integer_value (unit))))))))
|
||||
|
||||
==============================
|
||||
Media statements
|
||||
==============================
|
||||
|
||||
@media screen and (min-width: 30em) and (orientation: landscape) {}
|
||||
@media (min-height: 680px), screen and (orientation: portrait) {}
|
||||
@media not all and (monochrome) {}
|
||||
@media only screen {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(media_statement
|
||||
(binary_query
|
||||
(binary_query
|
||||
(keyword_query)
|
||||
(feature_query (feature_name) (integer_value (unit))))
|
||||
(feature_query (feature_name) (plain_value)))
|
||||
(block))
|
||||
(media_statement
|
||||
(feature_query (feature_name) (integer_value (unit)))
|
||||
(binary_query (keyword_query) (feature_query (feature_name) (plain_value)))
|
||||
(block))
|
||||
(media_statement
|
||||
(binary_query (unary_query (keyword_query)) (parenthesized_query (keyword_query)))
|
||||
(block))
|
||||
(media_statement (unary_query (keyword_query)) (block)))
|
||||
|
||||
==============================
|
||||
Supports statements
|
||||
==============================
|
||||
|
||||
@supports (animation-name: test) {
|
||||
div { animation-name: test; }
|
||||
}
|
||||
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
|
||||
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
|
||||
@supports not selector(:matches(a, b)) {}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(supports_statement
|
||||
(feature_query (feature_name) (plain_value))
|
||||
(block
|
||||
(rule_set (selectors (tag_name)) (block
|
||||
(declaration (property_name) (plain_value))))))
|
||||
(supports_statement
|
||||
(binary_query
|
||||
(feature_query (feature_name) (plain_value))
|
||||
(feature_query (feature_name) (plain_value)))
|
||||
(block))
|
||||
(supports_statement
|
||||
(unary_query (parenthesized_query (binary_query
|
||||
(feature_query (feature_name) (plain_value))
|
||||
(feature_query (feature_name) (plain_value)))))
|
||||
(block))
|
||||
(supports_statement
|
||||
(unary_query (selector_query (pseudo_class_selector
|
||||
(class_name)
|
||||
(arguments (tag_name) (tag_name)))))
|
||||
(block)))
|
||||
|
||||
==============================
|
||||
Charset statements
|
||||
==============================
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(charset_statement (string_value)))
|
||||
|
||||
==============================
|
||||
Other at-statements
|
||||
==============================
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("/a") format("woff2"), url("/b/c") format("woff");
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(at_rule
|
||||
(at_keyword)
|
||||
(block
|
||||
(declaration (property_name) (string_value))
|
||||
(declaration (property_name)
|
||||
(call_expression (function_name) (arguments (string_value)))
|
||||
(call_expression (function_name) (arguments (string_value)))
|
||||
(call_expression (function_name) (arguments (string_value)))
|
||||
(call_expression (function_name) (arguments (string_value)))))))
|
||||
|
||||
==============================
|
||||
Single-line comments
|
||||
==============================
|
||||
|
||||
// https://awardwinningfjords.com/2010/04/09/example-scss-sassy-css-file.html
|
||||
|
||||
html {
|
||||
background: url(https://google.com);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(single_line_comment)
|
||||
(rule_set
|
||||
(selectors (tag_name))
|
||||
(block
|
||||
(declaration (property_name) (call_expression (function_name) (arguments (plain_value)))))))
|
||||
|
||||
==============================
|
||||
Use statements
|
||||
==============================
|
||||
|
||||
@use 'custom.css';
|
||||
|
||||
.inverse {
|
||||
background-color: base.$primary-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(use_statement (string_value))
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block
|
||||
(declaration (property_name) (variable_value))
|
||||
(declaration (property_name) (plain_value)))))
|
||||
|
||||
==============================
|
||||
Forward statements
|
||||
==============================
|
||||
|
||||
@forward 'custom.css';
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(forward_statement (string_value)))
|
||||
|
||||
==============================
|
||||
Include statements
|
||||
==============================
|
||||
|
||||
.foo {
|
||||
@include bar;
|
||||
@include transform(50px, $float: left);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block
|
||||
(include_statement (identifier))
|
||||
(include_statement (identifier)
|
||||
(arguments
|
||||
(argument (argument_value (integer_value (unit))))
|
||||
(argument (argument_name) (argument_value (plain_value))))))))
|
||||
|
||||
==============================
|
||||
Extend statements
|
||||
==============================
|
||||
|
||||
.foo {
|
||||
@extend red;
|
||||
.bar {
|
||||
@extend blue;
|
||||
@extend .green;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block
|
||||
(extend_statement (plain_value))
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block (extend_statement (plain_value))
|
||||
(extend_statement (class_selector (class_name))))))))
|
||||
|
||||
==============================
|
||||
Apply statements
|
||||
==============================
|
||||
|
||||
@apply fill-red-50 border-black col-span-1;
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(apply_statement (plain_value) (plain_value) (plain_value)))
|
||||
|
||||
=================================
|
||||
Operators
|
||||
=================================
|
||||
|
||||
article[role="main"] {
|
||||
width: 600px / 960px * 100%;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (attribute_selector (tag_name) (attribute_name) (string_value)))
|
||||
(block
|
||||
(declaration (property_name)
|
||||
(binary_expression
|
||||
(binary_expression (integer_value (unit)) (integer_value (unit))) (integer_value (unit)))))))
|
||||
|
||||
=================================
|
||||
Interpolation
|
||||
=================================
|
||||
|
||||
.icon-#{$name} {
|
||||
position: absolute;
|
||||
#{$top-or-bottom}: 0;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block
|
||||
(declaration (property_name) (plain_value))
|
||||
(declaration (property_name) (integer_value)))))
|
||||
|
||||
=================================
|
||||
If statements
|
||||
=================================
|
||||
|
||||
@mixin avatar($size, $circle: false) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
@if $circle {
|
||||
border-radius: $size / 2;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters
|
||||
(parameter (variable_name))
|
||||
(parameter (variable_name) (default_value (plain_value))))
|
||||
(block
|
||||
(declaration (property_name) (variable_value))
|
||||
(declaration (property_name) (variable_value))
|
||||
(if_statement
|
||||
(if_clause
|
||||
(condition (variable_value))
|
||||
(block
|
||||
(declaration (property_name) (binary_expression (variable_value) (integer_value)))))))))
|
||||
|
||||
=================================
|
||||
Else statements
|
||||
=================================
|
||||
|
||||
@mixin theme-colors($light-theme: true) {
|
||||
@if $light-theme {
|
||||
color: $light-text;
|
||||
} @else {
|
||||
color: $dark-text;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters
|
||||
(parameter (variable_name) (default_value (plain_value))))
|
||||
(block
|
||||
(if_statement
|
||||
(if_clause
|
||||
(condition (variable_value))
|
||||
(block (declaration (property_name) (variable_value))))
|
||||
(else_clause
|
||||
(block (declaration (property_name) (variable_value))))))))
|
||||
|
||||
=================================
|
||||
Else if statements
|
||||
=================================
|
||||
|
||||
@mixin triangle($direction) {
|
||||
@if $direction == up {
|
||||
border-bottom-color: $color;
|
||||
} @else if $direction == right {
|
||||
border-left-color: $color;
|
||||
} @else if $direction == down {
|
||||
border-top-color: $color;
|
||||
} @else {
|
||||
border-right-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(parameters
|
||||
(parameter (variable_name)))
|
||||
(block
|
||||
(if_statement
|
||||
(if_clause
|
||||
(condition (binary_expression (variable_value) (plain_value)))
|
||||
(block (declaration (property_name) (variable_value))))
|
||||
(else_if_clause
|
||||
(condition (binary_expression (variable_value) (plain_value)))
|
||||
(block (declaration (property_name) (variable_value))))
|
||||
(else_if_clause
|
||||
(condition (binary_expression (variable_value) (plain_value)))
|
||||
(block (declaration (property_name) (variable_value))))
|
||||
(else_clause
|
||||
(block (declaration (property_name) (variable_value))))))))
|
||||
|
||||
=================================
|
||||
Each statements
|
||||
=================================
|
||||
|
||||
@each $size in $sizes {
|
||||
.icon-#{$size} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(each_statement
|
||||
(value)
|
||||
(variable_value)
|
||||
(block
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block (declaration (property_name) (variable_value)))))))
|
||||
|
||||
=================================
|
||||
For statements
|
||||
=================================
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
background-color: lighten($base-color, $i * 5%);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(for_statement
|
||||
(variable)
|
||||
(from (integer_value))
|
||||
(through (integer_value))
|
||||
(block
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression
|
||||
(function_name)
|
||||
(arguments (variable_value)
|
||||
(binary_expression (variable_value) (integer_value (unit)))))))))
|
||||
|
||||
=================================
|
||||
While statements
|
||||
=================================
|
||||
|
||||
@while $i < 3 {
|
||||
background-color: lighten($base-color, $i * 5%);
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(while_statement
|
||||
(binary_expression (variable_value) (integer_value))
|
||||
(block
|
||||
(declaration
|
||||
(property_name)
|
||||
(call_expression
|
||||
(function_name)
|
||||
(arguments (variable_value) (binary_expression (variable_value) (integer_value (unit))))))
|
||||
(declaration (variable_name) (binary_expression (variable_value) (integer_value))))))
|
||||
|
||||
=================================
|
||||
Functions
|
||||
=================================
|
||||
|
||||
@function pow($base, $exponent) {
|
||||
$result: 1;
|
||||
@for $_ from 1 through $exponent {
|
||||
$result: $result * $base;
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: left;
|
||||
margin-left: pow(4, 3) * 1px;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(function_statement
|
||||
(name)
|
||||
(parameters
|
||||
(parameter (variable_name))
|
||||
(parameter (variable_name)))
|
||||
(block
|
||||
(declaration (variable_name) (integer_value))
|
||||
(for_statement
|
||||
(variable)
|
||||
(from (integer_value))
|
||||
(through (variable_value))
|
||||
(block
|
||||
(declaration (variable_name) (binary_expression (variable_value) (variable_value)))))
|
||||
(return_statement (variable_value))))
|
||||
(rule_set
|
||||
(selectors (class_selector (class_name)))
|
||||
(block
|
||||
(declaration (property_name) (plain_value))
|
||||
(declaration
|
||||
(property_name)
|
||||
(binary_expression
|
||||
(call_expression (function_name) (arguments (integer_value) (integer_value)))
|
||||
(integer_value (unit)))))))
|
||||
|
||||
=================================
|
||||
Logging statements
|
||||
=================================
|
||||
|
||||
@mixin foo {
|
||||
@debug "debug";
|
||||
@warn "warn";
|
||||
@error "error";
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(mixin_statement
|
||||
(name)
|
||||
(block
|
||||
(debug_statement (string_value))
|
||||
(warn_statement (string_value))
|
||||
(error_statement (string_value)))))
|
||||
@ -0,0 +1,15 @@
|
||||
============================
|
||||
Rule sets
|
||||
============================
|
||||
|
||||
#some-id {
|
||||
some-property: 5px;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
(stylesheet
|
||||
(rule_set
|
||||
(selectors (id_selector (id_name)))
|
||||
(block
|
||||
(declaration (property_name) (integer_value (unit))))))
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,283 @@
|
||||
// from https://awardwinningfjords.com/2010/04/09/example-scss-sassy-css-file.html
|
||||
|
||||
@import "compass";
|
||||
@import "blueprint";
|
||||
@import "blueprint/fancy_type";
|
||||
|
||||
$blueprint-grid-columns: 5;
|
||||
$blueprint-grid-width: 150px;
|
||||
$blueprint-grid-margin: 20px;
|
||||
|
||||
$blueprint-font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
$blueprint-fixed-font-family:'andale mono', 'lucida console', monospace;
|
||||
$blueprint-font-size: 12px;
|
||||
|
||||
$text-color: #555555;
|
||||
$light-text-color: #a0a0a0;
|
||||
$quote-text-color: #f27a00;
|
||||
$disclosure-text-color: #ed7c06;
|
||||
|
||||
$thick-border: 8px solid black;
|
||||
$dotted-border: 1px dotted #999999;
|
||||
|
||||
$header-background-color: #f07c05;
|
||||
$paging-background-color: black;
|
||||
$unfocused-background-color: #f1f0ec;
|
||||
$quote-background-color: #f1f0ec;
|
||||
|
||||
$story-title-color: #f07c05;
|
||||
|
||||
@include global-reset;
|
||||
@include blueprint-typography;
|
||||
|
||||
body {
|
||||
background: $unfocused-background-color image_url("white-bg.jpg") repeat-y 50% 0;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.content_wrapper {
|
||||
@include container;
|
||||
width: 910px;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 72px;
|
||||
background: $header-background-color;
|
||||
@include clearfix;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
@include float-left;
|
||||
a {
|
||||
@include replace-text("logo.jpg");
|
||||
width: 116px;
|
||||
height: 72px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include horizontal-list;
|
||||
padding: 0 0 0 25px;
|
||||
li {
|
||||
@include incr(18px);
|
||||
padding: 0 20px 0 0;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: #febf0f;
|
||||
text-decoration: none;
|
||||
width: 100px;
|
||||
height: 72px;
|
||||
display: block;
|
||||
}
|
||||
&#header-threads a {
|
||||
@include replace-text("header-threads-text.jpg");
|
||||
}
|
||||
&#header-timeline a {
|
||||
@include replace-text("header-timeline-text.jpg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#paging {
|
||||
background: $paging-background-color;
|
||||
height: 33px;
|
||||
padding: 15px 0 0 0;
|
||||
|
||||
h6 {
|
||||
@include float-left;
|
||||
color: #908f8b;
|
||||
padding-right: 20px;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: #f07b07;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include horizontal-list;
|
||||
li {
|
||||
padding: 3px 4px;
|
||||
a {
|
||||
color: #4c4c4c;
|
||||
@include replace-text("thread-paging-inactive-bullet.jpg");
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
}
|
||||
&.active a {
|
||||
color: #f17d06;
|
||||
background-image: image_@import "compass";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
#previous {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
#next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
#thread {
|
||||
@include container;
|
||||
width: 910px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
@include transition-property(left);
|
||||
@include transition-duration(0.5s);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
|
||||
@for $i from 0 through 30 {
|
||||
&.position#{$i} {
|
||||
left: ($i * -910px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.js {
|
||||
#content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#thread {
|
||||
padding: 0;
|
||||
width: 5000px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.story {
|
||||
@include float-left;
|
||||
width: 810px;
|
||||
padding: 0 50px;
|
||||
|
||||
h4.date {
|
||||
@include float-right;
|
||||
@include span(1);
|
||||
background: $unfocused-background-color;
|
||||
padding: 10px 20px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 40px 0 20px 0;
|
||||
border-bottom: $thick-border;
|
||||
color: $story-title-color;
|
||||
@include incr(30px);
|
||||
}
|
||||
|
||||
.artifacts {
|
||||
@include column(3);
|
||||
|
||||
.row {
|
||||
@include clearfix;
|
||||
border-bottom: $dotted-border;
|
||||
margin-bottom: $blueprint-grid-margin;
|
||||
}
|
||||
|
||||
.artifact {
|
||||
color: $light-text-color;
|
||||
img {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #0a83e0;
|
||||
}
|
||||
}
|
||||
|
||||
.threecol { @include column(3); }
|
||||
.twocol { @include column(2); }
|
||||
.onecol { @include column(1); }
|
||||
.last { @include last; }
|
||||
}
|
||||
|
||||
.information {
|
||||
@include column(1.6, true);
|
||||
border-bottom: $dotted-border;
|
||||
margin-left: 40px;
|
||||
|
||||
h2 {
|
||||
@include incr(20px, $blueprint-font-size, 35px);
|
||||
}
|
||||
|
||||
.textblock p {
|
||||
@include incr(13px, $blueprint-font-size, 26px);
|
||||
}
|
||||
|
||||
.quote {
|
||||
color: $quote-text-color;
|
||||
blockquote {
|
||||
@include incr(18px, $blueprint-font-size, 30px);
|
||||
color: $quote-text-color;
|
||||
margin: 0;
|
||||
padding: 12px 18px;
|
||||
background: $quote-background-color;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
cite {
|
||||
display: block;
|
||||
padding: 0.5em 18px 1.5em 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.disclosure {
|
||||
border-top: $dotted-border;
|
||||
h5 {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
color: $disclosure-text-color;
|
||||
}
|
||||
p {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
@include container;
|
||||
background: white;
|
||||
width: 810px;
|
||||
padding: $blueprint-grid-margin 0;
|
||||
|
||||
.inner {
|
||||
border-top: $thick-border;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include float-right;
|
||||
@include incr(10px);
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
ul {
|
||||
@include horizontal-list;
|
||||
|
||||
li {
|
||||
padding: 0 30px 0 0;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ef7a06;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
// from https://scotch.io/tutorials/getting-started-with-sass
|
||||
|
||||
// ----
|
||||
// Sass (v3.4.4)
|
||||
// Compass (v1.0.1)
|
||||
// ----
|
||||
|
||||
@mixin renderGridStyles($settings) {
|
||||
.container {
|
||||
padding-right: map-get($settings, "margin");
|
||||
padding-left: map-get($settings, "margin");
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: map-get($settings, "maxWidth");
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: map-get($settings, "margin") * -1;
|
||||
margin-left: map-get($settings, "margin") * -1;
|
||||
}
|
||||
|
||||
$breakpoints: map-get($settings, "breakpoints");
|
||||
|
||||
@each $key, $breakpoint in $breakpoints {
|
||||
@include media($breakpoint) {
|
||||
@include renderGrid($key, $settings);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin renderGrid($key, $settings) {
|
||||
$i: 1;
|
||||
|
||||
@while $i <= map-get($settings, "columns") {
|
||||
.col-#{$key}-#{$i} {
|
||||
float: left;
|
||||
width: 100% * $i / map-get($settings, "columns");
|
||||
}
|
||||
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media($queryString) {
|
||||
@media #{$queryString} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include renderGridStyles($settings);
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
color: white;
|
||||
background: #9b59b6;
|
||||
margin: 20px;
|
||||
}
|
||||
@ -0,0 +1,398 @@
|
||||
module.exports = grammar({
|
||||
name: "scss",
|
||||
|
||||
extras: ($) => [/\s/, $.comment, $.single_line_comment],
|
||||
|
||||
externals: ($) => [$._descendant_operator],
|
||||
|
||||
conflicts: ($) => [[$._selector, $.declaration]],
|
||||
|
||||
inline: ($) => [$._top_level_item, $._block_item],
|
||||
|
||||
rules: {
|
||||
stylesheet: ($) => repeat($._top_level_item),
|
||||
|
||||
_top_level_item: ($) =>
|
||||
choice(
|
||||
$.declaration,
|
||||
$.rule_set,
|
||||
$.import_statement,
|
||||
$.media_statement,
|
||||
$.charset_statement,
|
||||
$.namespace_statement,
|
||||
$.keyframes_statement,
|
||||
$.supports_statement,
|
||||
$.use_statement,
|
||||
$.forward_statement,
|
||||
$.apply_statement,
|
||||
$.mixin_statement,
|
||||
$.include_statement,
|
||||
$.if_statement,
|
||||
$.each_statement,
|
||||
$.for_statement,
|
||||
$.while_statement,
|
||||
$.function_statement,
|
||||
$.error_statement,
|
||||
$.warn_statement,
|
||||
$.debug_statement,
|
||||
$.at_rule,
|
||||
$.placeholder
|
||||
),
|
||||
|
||||
// Statements
|
||||
|
||||
import_statement: ($) => seq("@import", $._value, sep(",", $._query), ";"),
|
||||
|
||||
media_statement: ($) => seq("@media", sep1(",", $._query), $.block),
|
||||
|
||||
charset_statement: ($) => seq("@charset", $._value, ";"),
|
||||
|
||||
namespace_statement: ($) =>
|
||||
seq(
|
||||
"@namespace",
|
||||
optional(alias($.identifier, $.namespace_name)),
|
||||
choice($.string_value, $.call_expression),
|
||||
";"
|
||||
),
|
||||
|
||||
keyframes_statement: ($) =>
|
||||
seq(
|
||||
choice("@keyframes", alias(/@[-a-z]+keyframes/, $.at_keyword)),
|
||||
alias($.identifier, $.keyframes_name),
|
||||
$.keyframe_block_list
|
||||
),
|
||||
|
||||
keyframe_block_list: ($) => seq("{", repeat($.keyframe_block), "}"),
|
||||
|
||||
keyframe_block: ($) => seq(choice($.from, $.to, $.integer_value), $.block),
|
||||
|
||||
from: ($) => "from",
|
||||
to: ($) => "to",
|
||||
|
||||
supports_statement: ($) => seq("@supports", $._query, $.block),
|
||||
|
||||
at_rule: ($) => seq($.at_keyword, sep(",", $._query), choice(";", $.block)),
|
||||
|
||||
use_statement: ($) => seq("@use", $._value, ";"),
|
||||
|
||||
forward_statement: ($) => seq("@forward", $._value, ";"),
|
||||
|
||||
apply_statement: ($) => seq("@apply", repeat($._value), ";"),
|
||||
|
||||
parameters: ($) => seq("(", sep1(",", $.parameter), ")"),
|
||||
|
||||
parameter: ($) =>
|
||||
seq(
|
||||
alias($.variable_identifier, $.variable_name),
|
||||
optional(seq(":", alias($._value, $.default_value)))
|
||||
),
|
||||
|
||||
mixin_statement: ($) =>
|
||||
seq("@mixin", alias($.identifier, $.name), optional($.parameters), $.block),
|
||||
|
||||
include_statement: ($) =>
|
||||
seq(
|
||||
"@include",
|
||||
$.identifier,
|
||||
optional(alias($.include_arguments, $.arguments)),
|
||||
choice($.block, ";")
|
||||
),
|
||||
|
||||
include_arguments: ($) =>
|
||||
seq(
|
||||
token.immediate("("),
|
||||
sep1(",", alias($.include_argument, $.argument)),
|
||||
token.immediate(")")
|
||||
),
|
||||
|
||||
include_argument: ($) =>
|
||||
seq(
|
||||
optional(seq(alias($.variable_identifier, $.argument_name), ":")),
|
||||
alias($._value, $.argument_value)
|
||||
),
|
||||
|
||||
placeholder: ($) => seq("%", alias($.identifier, $.name), $.block),
|
||||
|
||||
extend_statement: ($) => seq("@extend", choice($._value, $.class_selector), ";"),
|
||||
|
||||
if_statement: ($) => seq($.if_clause, repeat($.else_if_clause), optional($.else_clause)),
|
||||
|
||||
if_clause: ($) => seq("@if", alias($._value, $.condition), $.block),
|
||||
|
||||
else_if_clause: ($) => seq("@else", "if", alias($._value, $.condition), $.block),
|
||||
|
||||
else_clause: ($) => seq("@else", $.block),
|
||||
|
||||
each_statement: ($) =>
|
||||
seq(
|
||||
"@each",
|
||||
optional(seq(alias($.variable_identifier, $.key), ",")),
|
||||
alias($.variable_identifier, $.value),
|
||||
"in",
|
||||
$._value,
|
||||
$.block
|
||||
),
|
||||
|
||||
for_statement: ($) =>
|
||||
seq(
|
||||
"@for",
|
||||
alias($.variable_identifier, $.variable),
|
||||
"from",
|
||||
alias($._value, $.from),
|
||||
"through",
|
||||
alias($._value, $.through),
|
||||
$.block
|
||||
),
|
||||
|
||||
while_statement: ($) => seq("@while", $._value, $.block),
|
||||
|
||||
function_statement: ($) =>
|
||||
seq("@function", alias($.identifier, $.name), optional($.parameters), $.block),
|
||||
|
||||
return_statement: ($) => seq("@return", $._value, ";"),
|
||||
|
||||
at_root_statement: ($) => seq("@at-root", $._value, $.block),
|
||||
|
||||
error_statement: ($) => seq("@error", $._value, ";"),
|
||||
|
||||
warn_statement: ($) => seq("@warn", $._value, ";"),
|
||||
|
||||
debug_statement: ($) => seq("@debug", $._value, ";"),
|
||||
|
||||
// Rule sets
|
||||
|
||||
rule_set: ($) => seq($.selectors, $.block),
|
||||
|
||||
selectors: ($) => sep1(",", $._selector),
|
||||
|
||||
block: ($) =>
|
||||
seq("{", repeat($._block_item), optional(alias($.last_declaration, $.declaration)), "}"),
|
||||
|
||||
_block_item: ($) =>
|
||||
choice(
|
||||
$.declaration,
|
||||
$.rule_set,
|
||||
$.import_statement,
|
||||
$.media_statement,
|
||||
$.charset_statement,
|
||||
$.namespace_statement,
|
||||
$.keyframes_statement,
|
||||
$.supports_statement,
|
||||
$.mixin_statement,
|
||||
$.include_statement,
|
||||
$.extend_statement,
|
||||
$.if_statement,
|
||||
$.each_statement,
|
||||
$.for_statement,
|
||||
$.while_statement,
|
||||
$.function_statement,
|
||||
$.return_statement,
|
||||
$.at_root_statement,
|
||||
$.error_statement,
|
||||
$.warn_statement,
|
||||
$.debug_statement,
|
||||
$.at_rule
|
||||
),
|
||||
|
||||
// Selectors
|
||||
|
||||
_selector: ($) =>
|
||||
choice(
|
||||
$.universal_selector,
|
||||
alias($.identifier, $.tag_name),
|
||||
$.class_selector,
|
||||
$.nesting_selector,
|
||||
$.pseudo_class_selector,
|
||||
$.pseudo_element_selector,
|
||||
$.id_selector,
|
||||
$.attribute_selector,
|
||||
$.string_value,
|
||||
$.child_selector,
|
||||
$.descendant_selector,
|
||||
$.sibling_selector,
|
||||
$.adjacent_sibling_selector
|
||||
),
|
||||
|
||||
nesting_selector: ($) => "&",
|
||||
|
||||
universal_selector: ($) => "*",
|
||||
|
||||
class_selector: ($) =>
|
||||
prec(1, seq(optional($._selector), choice(".", $.nesting_selector), alias($.identifier, $.class_name))),
|
||||
|
||||
pseudo_class_selector: ($) =>
|
||||
seq(
|
||||
optional($._selector),
|
||||
":",
|
||||
alias($.identifier, $.class_name),
|
||||
optional(alias($.pseudo_class_arguments, $.arguments))
|
||||
),
|
||||
|
||||
pseudo_element_selector: ($) =>
|
||||
seq(optional($._selector), "::", alias($.identifier, $.tag_name)),
|
||||
|
||||
id_selector: ($) => seq(optional($._selector), "#", alias($.identifier, $.id_name)),
|
||||
|
||||
attribute_selector: ($) =>
|
||||
seq(
|
||||
optional($._selector),
|
||||
"[",
|
||||
alias($.identifier, $.attribute_name),
|
||||
optional(seq(choice("=", "~=", "^=", "|=", "*=", "$="), $._value)),
|
||||
"]"
|
||||
),
|
||||
|
||||
child_selector: ($) => prec.left(seq($._selector, ">", $._selector)),
|
||||
|
||||
descendant_selector: ($) => prec.left(seq($._selector, $._descendant_operator, $._selector)),
|
||||
|
||||
sibling_selector: ($) => prec.left(seq($._selector, "~", $._selector)),
|
||||
|
||||
adjacent_sibling_selector: ($) => prec.left(seq($._selector, "+", $._selector)),
|
||||
|
||||
pseudo_class_arguments: ($) =>
|
||||
seq(token.immediate("("), sep(",", choice($._selector, repeat1($._value))), ")"),
|
||||
|
||||
// Declarations
|
||||
|
||||
declaration: ($) =>
|
||||
seq(
|
||||
choice(alias($.variable_identifier, $.variable_name), alias($.identifier, $.property_name)),
|
||||
":",
|
||||
$._value,
|
||||
repeat(seq(optional(","), $._value)),
|
||||
optional($.important),
|
||||
";"
|
||||
),
|
||||
|
||||
last_declaration: ($) =>
|
||||
prec(
|
||||
1,
|
||||
seq(
|
||||
alias($.identifier, $.property_name),
|
||||
":",
|
||||
$._value,
|
||||
repeat(seq(optional(","), $._value)),
|
||||
optional($.important)
|
||||
)
|
||||
),
|
||||
|
||||
important: ($) => "!important",
|
||||
|
||||
// Media queries
|
||||
|
||||
_query: ($) =>
|
||||
choice(
|
||||
alias($.identifier, $.keyword_query),
|
||||
$.feature_query,
|
||||
$.binary_query,
|
||||
$.unary_query,
|
||||
$.selector_query,
|
||||
$.parenthesized_query
|
||||
),
|
||||
|
||||
feature_query: ($) =>
|
||||
seq("(", alias($.identifier, $.feature_name), ":", repeat1($._value), ")"),
|
||||
|
||||
parenthesized_query: ($) => seq("(", $._query, ")"),
|
||||
|
||||
binary_query: ($) => prec.left(seq($._query, choice("and", "or"), $._query)),
|
||||
|
||||
unary_query: ($) => prec(1, seq(choice("not", "only"), $._query)),
|
||||
|
||||
selector_query: ($) => seq("selector", "(", $._selector, ")"),
|
||||
|
||||
// Property Values
|
||||
|
||||
_value: ($) =>
|
||||
prec(
|
||||
-1,
|
||||
choice(
|
||||
alias($.identifier, $.plain_value),
|
||||
alias($.variable_identifier, $.variable_value),
|
||||
$.plain_value,
|
||||
$.color_value,
|
||||
$.integer_value,
|
||||
$.float_value,
|
||||
$.string_value,
|
||||
$.binary_expression,
|
||||
$.parenthesized_value,
|
||||
$.call_expression
|
||||
)
|
||||
),
|
||||
|
||||
parenthesized_value: ($) => seq("(", $._value, ")"),
|
||||
|
||||
color_value: ($) => seq("#", token.immediate(/[0-9a-fA-F]{3,8}/)),
|
||||
|
||||
string_value: ($) =>
|
||||
token(choice(seq("'", /([^'\n]|\\(.|\n))*/, "'"), seq('"', /([^"\n]|\\(.|\n))*/, '"'))),
|
||||
|
||||
integer_value: ($) => seq(token(seq(optional(choice("+", "-")), /\d+/)), optional($.unit)),
|
||||
|
||||
float_value: ($) =>
|
||||
seq(
|
||||
token(
|
||||
seq(
|
||||
optional(choice("+", "-")),
|
||||
/\d*/,
|
||||
choice(
|
||||
seq(".", /\d+/),
|
||||
seq(/[eE]/, optional("-"), /\d+/),
|
||||
seq(".", /\d+/, /[eE]/, optional("-"), /\d+/)
|
||||
)
|
||||
)
|
||||
),
|
||||
optional($.unit)
|
||||
),
|
||||
|
||||
unit: ($) => token.immediate(/[a-zA-Z%]+/),
|
||||
|
||||
call_expression: ($) => seq(alias($.identifier, $.function_name), $.arguments),
|
||||
|
||||
binary_expression: ($) =>
|
||||
prec.left(
|
||||
seq($._value, choice("+", "-", "*", "/", "==", "<", ">", "!=", "<=", ">="), $._value)
|
||||
),
|
||||
|
||||
arguments: ($) => seq(token.immediate("("), sep(choice(",", ";"), repeat1($._value)), ")"),
|
||||
|
||||
identifier: ($) =>
|
||||
/((#\{[a-zA-Z0-9-_,&\$\.\(\) ]*\})|(--|-?[a-zA-Z_]))([a-zA-Z0-9-_]|(#\{[a-zA-Z0-9-_,&\$\.\(\) ]*\}))*/,
|
||||
|
||||
variable_identifier: ($) => /([a-zA-Z_]+\.)?\$[a-zA-Z-_][a-zA-Z0-9-_]*/,
|
||||
|
||||
at_keyword: ($) => /@[a-zA-Z-_]+/,
|
||||
|
||||
comment: ($) => token(seq("/*", /[^*]*\*+([^/*][^*]*\*+)*/, "/")),
|
||||
|
||||
single_line_comment: ($) => token(seq("//", /.*/)),
|
||||
|
||||
plain_value: ($) =>
|
||||
token(
|
||||
seq(
|
||||
repeat(
|
||||
choice(
|
||||
/[-_]/,
|
||||
/\/[^\*\s,;!{}()\[\]]/ // Slash not followed by a '*' (which would be a comment)
|
||||
)
|
||||
),
|
||||
/[a-zA-Z]/,
|
||||
repeat(
|
||||
choice(
|
||||
/[^/\s,;!{}()\[\]]/, // Not a slash, not a delimiter character
|
||||
/\/[^\*\s,;!{}()\[\]]/ // Slash not followed by a '*' (which would be a comment)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
function sep(separator, rule) {
|
||||
return optional(sep1(separator, rule));
|
||||
}
|
||||
|
||||
function sep1(separator, rule) {
|
||||
return seq(rule, repeat(seq(separator, rule)));
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
try {
|
||||
module.exports = require("./build/Release/tree_sitter_scss_binding");
|
||||
} catch (error) {
|
||||
try {
|
||||
module.exports = require("./build/Debug/tree_sitter_scss_binding");
|
||||
} catch (_) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
module.exports.nodeTypeInfo = require("./src/node-types.json");
|
||||
} catch (_) {}
|
||||
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "tree-sitter-scss",
|
||||
"version": "0.0.1",
|
||||
"description": "SCSS grammar for tree-sitter",
|
||||
"main": "bindings/node",
|
||||
"keywords": [
|
||||
"parser",
|
||||
"lexer"
|
||||
],
|
||||
"author": "Serenade Labs, Inc.",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nan": "^2.11.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tree-sitter-cli": "^0.19.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tree-sitter generate && node-gyp build",
|
||||
"build-test": "tree-sitter generate && node-gyp build && tree-sitter test",
|
||||
"test": "tree-sitter test && tree-sitter parse examples/*.scss --quiet --time",
|
||||
"test-windows": "tree-sitter test"
|
||||
},
|
||||
"tree-sitter": [
|
||||
{
|
||||
"scope": "source.scss",
|
||||
"file-types": [
|
||||
"scss"
|
||||
],
|
||||
"injection-regex": "^scss$"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
(comment) @comment
|
||||
|
||||
(tag_name) @tag
|
||||
(nesting_selector) @tag
|
||||
(universal_selector) @tag
|
||||
|
||||
"~" @operator
|
||||
">" @operator
|
||||
"+" @operator
|
||||
"-" @operator
|
||||
"*" @operator
|
||||
"/" @operator
|
||||
"=" @operator
|
||||
"^=" @operator
|
||||
"|=" @operator
|
||||
"~=" @operator
|
||||
"$=" @operator
|
||||
"*=" @operator
|
||||
|
||||
"and" @operator
|
||||
"or" @operator
|
||||
"not" @operator
|
||||
"only" @operator
|
||||
|
||||
(attribute_selector (plain_value) @string)
|
||||
(pseudo_element_selector (tag_name) @attribute)
|
||||
(pseudo_class_selector (class_name) @attribute)
|
||||
|
||||
(class_name) @property
|
||||
(id_name) @property
|
||||
(namespace_name) @property
|
||||
(property_name) @property
|
||||
(feature_name) @property
|
||||
|
||||
(attribute_name) @attribute
|
||||
|
||||
(function_name) @function
|
||||
|
||||
((property_name) @variable
|
||||
(match? @variable "^--"))
|
||||
((plain_value) @variable
|
||||
(match? @variable "^--"))
|
||||
|
||||
"@media" @keyword
|
||||
"@import" @keyword
|
||||
"@charset" @keyword
|
||||
"@namespace" @keyword
|
||||
"@supports" @keyword
|
||||
"@keyframes" @keyword
|
||||
(at_keyword) @keyword
|
||||
(to) @keyword
|
||||
(from) @keyword
|
||||
(important) @keyword
|
||||
|
||||
(string_value) @string
|
||||
(color_value) @string.special
|
||||
|
||||
(integer_value) @number
|
||||
(float_value) @number
|
||||
(unit) @type
|
||||
|
||||
"#" @punctuation.delimiter
|
||||
"," @punctuation.delimiter
|
||||
@ -0,0 +1,28 @@
|
||||
#include "tree_sitter/parser.h"
|
||||
#include <node.h>
|
||||
#include "nan.h"
|
||||
|
||||
using namespace v8;
|
||||
|
||||
extern "C" TSLanguage * tree_sitter_scss();
|
||||
|
||||
namespace {
|
||||
|
||||
NAN_METHOD(New) {}
|
||||
|
||||
void Init(Local<Object> exports, Local<Object> module) {
|
||||
Local<FunctionTemplate> tpl = Nan::New<FunctionTemplate>(New);
|
||||
tpl->SetClassName(Nan::New("Language").ToLocalChecked());
|
||||
tpl->InstanceTemplate()->SetInternalFieldCount(1);
|
||||
|
||||
Local<Function> constructor = Nan::GetFunction(tpl).ToLocalChecked();
|
||||
Local<Object> instance = constructor->NewInstance(Nan::GetCurrentContext()).ToLocalChecked();
|
||||
Nan::SetInternalFieldPointer(instance, 0, tree_sitter_scss());
|
||||
|
||||
Nan::Set(instance, Nan::New("name").ToLocalChecked(), Nan::New("scss").ToLocalChecked());
|
||||
Nan::Set(module, Nan::New("exports").ToLocalChecked(), instance);
|
||||
}
|
||||
|
||||
NODE_MODULE(tree_sitter_scss_binding, Init)
|
||||
|
||||
} // namespace
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue