[SHOWSTOPPER] sass aborts on error because of '\9'?

[marble]

SASS aborts with "Error: expected newline." for me in line 246
https://github.com/snide/wyrm/blob/master/sass/wyrm_core/_form.sass#L245

What does the "\9" mean in line 245? If I remove those two letters the error is gone.

➜  t3SphinxThemeRtd git:(feature/cleanup-frontend-stack) ✗ sass --version
1.17.2 compiled with dart2js 2.1.1

Only for me?

[josefglatz]

Could you plz add details about your environment?

[marble]

How to reproduce the problem

Versions:

➜  ~ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.2 LTS
Release:	18.04
Codename:	bionic
➜  ~ uname -o
GNU/Linux
➜  ~ uname -m
x86_64
➜  ~ uname -r
4.15.0-46-generic
➜  ~ grunt --version
grunt-cli v1.3.2
grunt v1.0.3
➜  ~ node --version
v11.9.0
➜  ~ npm --version
6.9.0
➜  ~ nvm --version
0.34.0
➜  ~ ruby --version
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
➜  ~ sass --version
1.17.2 compiled with dart2js 2.1.1
➜  ~ yarn --version
1.15.2

Getting the project:

git clone git@github.com:TYPO3-Documentation/t3SphinxThemeRtd.git
cd t3SphinxThemeRtd 
git checkout --track origin/feature/cleanup-frontend-stack

➜  t3SphinxThemeRtd git:(feature/cleanup-frontend-stack) yarn
yarn install v1.15.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
Done in 0.96s.

Running sass via grunt:

➜  t3SphinxThemeRtd git:(feature/cleanup-frontend-stack) grunt
>> Local Npm module "grunt-cli" not found. Is it installed?
Running "clean:build" (clean) task
Running "clean:fonts" (clean) task
Cleaning t3SphinxThemeRtd/static/fonts...OK
Running "copy:fonts" (copy) task
Copied 45 files

Running "sass:build" (sass) task
Deprecation Warning on line 81, column 5 of node_modules/bourbon/dist/css3/_flex-box.scss: 
@elseif is deprecated and will not be supported in future Sass versions.
Use "@else if" instead.
   ╷
81 │     @elseif $value == "inline-flex" {
   │     ^^^^^^^
   ╵

Deprecation Warning on line 127, column 5 of node_modules/bourbon/dist/css3/_flex-box.scss: 

((many lines removed))

Deprecation Warning on line 311, column 5 of node_modules/bourbon/dist/css3/_flex-box.scss: 
@elseif is deprecated and will not be supported in future Sass versions.
Use "@else if" instead.
    ╷
311 │     @elseif $value == "space-around" {
    │     ^^^^^^^
    ╵

Error: expected newline.
    ╷
246 │     border-color: $input-focus-color
    │                 ^
    ╵
  node_modules/wyrm/sass/wyrm_core/_form.sass 246:17  root stylesheet
  sass/theme-no-fonts.sass 44:9                       root stylesheet
Error: expected newline.
    ╷
246 │     border-color: $input-focus-color
    │                 ^
    ╵
  node_modules/wyrm/sass/wyrm_core/_form.sass 246:17  root stylesheet
  sass/theme.sass 44:9                                root stylesheet
Warning: Exited with error code 65 Use --force to continue.

Aborted due to warnings.

[marble]

Findings and solution

1. I have found a workaround and reported the error:
   snide/wyrm#14

2. This is the command to run the css compilation with Sass:

cd t3SphinxThemeRtd
sass \
   -I node_modules/bourbon/dist \
   -I node_modules/neat/app/assets/stylesheets \
   -I node_modules/font-awesome/scss \
   -I node_modules/wyrm/sass \
   sass/theme.sass

3. The build fails with Sass version 1.17.2 which you get from npm install sass.
4. The build succeeds with Sass version 3.7.3 which you get from sudo gem install sass.
5. !!! The build succeeds with Docker image codycraven/sassc which you can treat as a Sass executable:

docker run --rm -v $(pwd):/data codycraven/sassc \
   -I node_modules/bourbon/dist \
   -I node_modules/neat/app/assets/stylesheets \
   -I node_modules/font-awesome/scss \
   -I node_modules/wyrm/sass \
   sass/theme.sass

[josefglatz]

But that should not be the way of buidling the sass :/

[DanielSiepmann]

That should already be fixed with our pull request: https://github.com/TYPO3-Documentation/t3SphinxThemeRtd/pull/107/files#diff-88b99bb28683bd5b7e3a204826ead112

Just follow the readme instructions, which still uses ruby sass implementation, so your point 4. which succeeds as you mentioned.

We didn't change that yet.

[sypets]

How do you guys build? Isn't that something that could be done in a Docker container too for a consistent environment? Means more work now, but will save time later because people can contribute more easily by building in Docker (once they have Docker up and running).