Built-in sass does not recognize native html tags

[billcastillo]

Bug report

Inside hello-world.module.scss, trying to style a native html tag such as article, nav, main, etc. will throw an error.
sass modules doesn't recognize these properties

article {
  font-size: 18px;
}

error - ./components/hello-world.module.scss:7:1
Syntax error: Selector "article" is not pure (pure selectors must contain at least one local class or id)

To Reproduce

1. Fork next-sass from next-plugin examples
2. Add a native html tag like article, etc.
3. Add styles to hello-world.module.scss for that article

article {
  font-size: 24px;
  color: blue;
}

4. See error
5. Add className like <article className="post">
6. Style using that class name

.post {
  font-size: 32px;
  color: yellow;
}

7. No style rendered

Additional context

Work around is to use next-sass plugin

[jamesmosier]

You must define a class when using SASS modules, using html element selectors will not work.

Also next-sass isn't recommended for integrating SASS into your Next applications anymore. Instead you should use the built-in SASS support: https://nextjs.org/docs/basic-features/built-in-css-support#sass-support