Switch from `<style lang="less">` to `style.less { }` for inline component styles

[patrick-steele-idem]

We no longer want to hijack the standard HTML <style> tag to avoid confusion and future problems. Instead, we will use the following:

style {
    .foo {
        background-color: 'red';
    }
}
<div>Hello World</div>

Or, with a specific CSS preprocessor language:

style.less {
    .foo {
        background-color: 'red';
    }
}
<div>Hello World</div>

[codebrainz]

Should the example/test have <div class="foo">...?

I'm trying to use a style { } block with plain CSS (or SCSS) but if I switch from <style> to style {} in a single .marko file, the styles stop working. Should they be equivalent?

[DylanPiercey]

@codebrainz the <style> tag is just passed through as a regular html element.

The style {} block is actually extracted from the component so that it can be placed in a stylesheet. This requires a bundler to build the Marko files and stylesheets for the browser (eg Webpack or Lasso).

https://markojs.com/docs/styles/

[codebrainz]

@DylanPiercey thanks for the quick response. I'm using Webpack to bundle up the site, is it just the marko-loader that extracts the style {} blocks or do I need an additional loader to do it?

[DylanPiercey]

@codebrainz Marko basically just hands off the content of the style block as a .css file to webpack (unless you are using style.less {} which gets passed through as the extension on the style block).

To work properly you’ll need to include the style-loader or similar setup to properly handle the css content.

[codebrainz]

I have sass-loader, postcss-loader, css-loader, and MiniCssExtractPlugin.loader in my webpack.config.js. Anyway, it's probably something stupid on my end if it's working for everyone else. Thanks for the help, and sorry to spam this closed issue.

[DylanPiercey]

@codebrainz if you want you can throw up your webpack config in the Marko Gitter and I can take a look 🙂.