Parse error on SCSS in style tag: (plugin-rollup-elder) ParseError: Identifier is expected

[alecStewart1]

Hello!

So on running npm run build I get an this error:

src/layouts/*.svelte, src/routes/**/*.svelte, src/components/**/*.svelte → ___ELDER___/compiled...
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[!] (plugin rollup-plugin-elder) ParseError: Identifier is expected
src/components/Footer.svelte
23: @media screen and (min-width: 769px) {
24:   footer.footer {
25:     .columns {
        ^
26:       .column:first-child {
27:         .level {
ParseError: Identifier is expected
    at error (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:100:3)
    at Object.read_style [as read] (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/read/style.ts:24:11)
    at tag (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/state/tag.ts:205:27)
    at new Parser$1 (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:52:12)
    at parse (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:216:17)
    at Object.compile (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/compile/index.ts:91:14)
    at Object.transform (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/@elderjs+elderjs@1.3.4_intersection-observer@0.11.0/node_modules/@elderjs/elderjs/build/rollup/rollupPlugin.js:264:47)
    at ModuleLoader.addModuleSource (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/rollup@2.45.2/node_modules/rollup/dist/shared/rollup.js:18403:30)
    at ModuleLoader.fetchModule (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/rollup@2.45.2/node_modules/rollup/dist/shared/rollup.js:18459:9)

And this is what I have in that .svelte file in the style tag:

footer.footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
}
@media screen and (min-width: 769px) {
  footer.footer {
    .columns {
      .column:first-child {
        .level {
          .level-item {
            font-size: 0.55rem;
          }
        }
      }
      .column:last-child {
        p.title {
          font-size: 0.5rem;
        }
        p.subtitle {
          font-size: 0.4rem;
        }
        .level {
          .level-item {
            font-size: 0.3rem;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  footer.footer {
    .columns {
      .column:first-child {
        .level {
          .level-item {
            font-size: 0.45rem;
          }
        }
      }
      .column:last-child {
        p.title {
          font-size: 0.4rem;
        }
        p.subtitle {
          font-size: 0.3rem;
        }
        .level {
          .level-item {
            font-size: 0.2rem;
          }
        }
      }
    }
  }
}

And here's what's in my rollup.config.js:

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
      preprocess: sveltePreprocess({
        defaults: {
          //script: "typescript",
          style: "scss",
        },
        postcss: {
          plugins: [
            require('postcss-preset-env')({
              stage: 2,
              features: {
                customProperties: false,
                'nesting-rules': true,
              },
            }),
            require('postcss-import'),
            require('postcss-url'),
            require('postcss-mixins'),
            require('postcss-nested'),
            require('autoprefixer'),
            require('postcss-purgecss')({
              css: ['./assets/styles.css'],
              paths: ['./src/components/*.svelte', './src/layouts/*.svelte', './src/routes/*.svelte'],
              styleExtensions: ['.css'],
              whitelist: ['body', 'html', 'pre'],
              whitelistPatternsChildren: [/children/],
              keyframes: false,
              fontFace: true,
              rejected: true,
              extractors: [
                {
                  extractor: (content) => content.match(/[A-z0-9-:\\/]+/g) || [],
                  extensions: ['html', 'svelte', 'js'],
                },
              ],
            }),
            require('cssnano')({ preset: 'advanced' }),
          ],
        },
      }),
      emitCss: true,
};

Maybe I've done something wrong.

[nickreese]

Are you missing <style lang="scss">? I don't think this is an Elder.js issue.

[alecStewart1]

I shouldn't need it with

preprocess: sveltePreprocess({
        defaults: {
          //script: "typescript",
          style: "scss",
        },

but I'll try.

[alecStewart1]

No change. Same error:

(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[!] (plugin rollup-plugin-elder) ParseError: Identifier is expected
src/components/Footer.svelte
23: @media screen and (min-width: 769px) {
24:   footer.footer {
25:     .columns {
        ^
26:       .column:first-child {
27:         .level {
ParseError: Identifier is expected
    at error (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:100:3)
    at Object.read_style [as read] (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/read/style.ts:24:11)
    at tag (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/state/tag.ts:205:27)
    at new Parser$1 (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:52:12)
    at parse (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/parse/index.ts:216:17)
    at Object.compile (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/src/compiler/compile/index.ts:91:14)
    at Object.transform (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/@elderjs+elderjs@1.3.4_intersection-observer@0.11.0/node_modules/@elderjs/elderjs/build/rollup/rollupPlugin.js:264:47)
    at ModuleLoader.addModuleSource (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/rollup@2.45.2/node_modules/rollup/dist/shared/rollup.js:18403:30)
    at ModuleLoader.fetchModule (/home/my_user/Projects/Web/alec-stewart.com/node_modules/.pnpm/rollup@2.45.2/node_modules/rollup/dist/shared/rollup.js:18459:9)

 ERROR  Command failed with exit code 1.
 ERROR  Command failed with exit code 1.

[alecStewart1]

I think the question is a matter of how and where does the Elder build process use the svelte-preprocees plugin?

Because it seems like it never actually calls it, if I'm getting this error.

It's also a question of where do I set the defaults for each section in a Svelte file? Is it in svelte.config.js or in rollup.config.js, or both?

[alecStewart1]

Hmmm, interesting. If I have the rollup.config.js have this way:

require('dotenv').config();
import svelte from 'rollup-plugin-svelte';
const sveltePreprocess = require('svelte-preprocess');
import minifyHTML from 'rollup-plugin-minify-html-literals';

const { getRollupConfig } = require('@elderjs/elderjs');
const svelteConfig = require('./svelte.config');
module.exports = [
  ...getRollupConfig({
    svelteConfig,
    plugins: [
      svelte({
        preprocess: [
          sveltePreprocess({
            defaults: {
              //script: "typescript",
              style: 'scss',
            },
            postcss: {
              plugins: [
                require('postcss-preset-env')({
                  stage: 2,
                  features: {
                    customProperties: false,
                    'nesting-rules': true,
                  },
                }),
                require('postcss-import'),
                require('postcss-url'),
                require('postcss-mixins'),
                require('postcss-nested'),
                require('autoprefixer'),
                require('postcss-purgecss')({
                  css: ['./assets/styles.css'],
                  paths: [
                    './src/components/*.svelte',
                    './src/layouts/*.svelte',
                    './src/routes/*.svelte',
                  ],
                  styleExtensions: ['.css'],
                  whitelist: ['body', 'html', 'pre'],
                  whitelistPatternsChildren: [/children/],
                  keyframes: false,
                  fontFace: true,
                  rejected: true,
                  extractors: [
                    {
                      extractor: (content) => content.match(/[A-z0-9-:\\/]+/g) || [],
                      extensions: ['html', 'svelte', 'js'],
                    },
                  ],
                }),
                require('cssnano')({ preset: 'advanced' }),
              ],
            },
          }),
        ],
      }),
      minifyHTML(),
    ],
  }),
];

I get the same error. If I have svelte.config.js like this:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      //script: "typescript",
      style: 'scss',
    },
    postcss: {
      plugins: [
        require('postcss-preset-env')({
          stage: 2,
          features: {
            customProperties: false,
            'nesting-rules': true,
          },
        }),
        require('postcss-import'),
        require('postcss-url'),
        require('postcss-mixins'),
        require('postcss-nested'),
        require('autoprefixer'),
        require('postcss-purgecss')({
          css: ['./assets/styles.css'],
          paths: [
            './src/components/*.svelte',
            './src/layouts/*.svelte',
            './src/routes/*.svelte',
          ],
          styleExtensions: ['.css'],
          whitelist: ['body', 'html', 'pre'],
          whitelistPatternsChildren: [/children/],
          keyframes: false,
          fontFace: true,
          rejected: true,
          extractors: [
            {
              extractor: (content) => content.match(/[A-z0-9-:\\/]+/g) || [],
              extensions: ['html', 'svelte', 'js'],
            },
          ],
        }),
        require('cssnano')({ preset: 'advanced' }),
      ],
    },
  }),
  emitCss: true,
};

It produces the same error as well. If both have the preprocess bit in them, it's also the same error. Like I said earlier, it's coming from rollup-plugin-elder. Is anyone else having this issue?

[nickreese]

Here is where the preprocessor is run: https://github.com/Elderjs/elderjs/blob/28ae96f3ae19f49932c3fcc0cf4b54e93083b7ac/src/rollup/rollupPlugin.ts#L165

This is a project specific issue due to your SCSS not being compiled. Unfortunately the rollup ecosystem is huge and I don’t recognize the ins and outs of your config enough to help.