Fylgja uses an opinionated Stylelint config to enforce its CSS rules across all of its projects.
This config promotes consistency and readability in Fylgja's CSS code, and helps to prevent errors and make the code easier to maintain.
npm install @fylgja/stylelint-config --save-devSet your Stylelint config to:
{
"extends": "@fylgja/stylelint-config"
}For advanced customization, you can extend the configuration by including a "rules" key in your settings.
This empowers you to either modify existing rules or introduce new ones.
For instance, if you wish to disable the selector-class-pattern rule, incorporate the following code into your configuration:
{
"extends": "@fylgja/stylelint-config",
"rules": {
"selector-class-pattern": null
}
}Our configuration is intelligently tailored based on the file type, ensuring the appropriate rules are applied automatically.
If your file is written in SCSS, the SCSS rules will be seamlessly integrated alongside our default rules.
The Fylgja stylelint-config extends support for SCSS by incorporating stylelint scss and its standard rules.
While some rules are customized to align with our style guide, the majority remains the same.
Adds full compatibility with TailwindCSS,
enabling you to freely utilize theme() and at-rules directly from TailwindCSS.
Adds full compatibility with inline styles in Svelte, ensuring seamless integration.
Adds full compatibility with inline styles in Vue, ensuring seamless integration.
The configuration effortlessly handles inline styles within HTML-based languages.
No additional rules are necessary, and we've even incorporated support for camelCase custom properties without the need for extra directives when working with Astro.
To gain deeper insights into the behavior of each rule and its associated settings, refer to the following resources: