Skip to content

Latest commit

 

History

History
107 lines (72 loc) · 5.71 KB

Styles.md

File metadata and controls

107 lines (72 loc) · 5.71 KB
Raw

Pipeline for SCSS files

This project contains the following pipeline steps for SCSS files:

  • Lint (with Stylelint)
  • Prettify (with Prettier)
  • Compile to CSS
  • Autoprefix
  • Minify incl. source map generation
  • Clean output folder
  • Watch for changes and re-run pipeline

Looking for something similar for .NET? Check out our .NET Analyzers project.

Configuration

The styles pipeline needs a source and a target path. The default configuration looks like this:

"nodejsExtensions": {
  "styles": {
    "source": "Assets/Styles",
    "target": "wwwroot/css"
  }
}

In case you want to stick to the defaults, the styles node can be omitted completely; otherwise, you need to specify both, source and a target paths.

To see the different configurations of default and custom paths in action, please check out our dedicated Samples and NuGet Samples projects.

Generated files

During processing of the SCSS files underneath the source path, any existing folder structure will be mirrored in the target path.

Given the following asset:

  • Assets/Styles/app/main.scss

The following files will be generated:

  • wwwroot/css/app/main.css
  • wwwroot/css/app/main.min.css
  • wwwroot/css/app/main.css.map

Available scripts

To use the npm scripts defined in this project, please follow the setup instructions in the root Readme.

Now, you can add any or all of the following entries to the scripts property in your project's package.json to call only the desired pipeline steps:

"scripts": {
  "build:styles":   "npm explore nodejs-extensions -- pnpm build:styles",
  "compile:styles": "npm explore nodejs-extensions -- pnpm compile:styles",
  "lint:styles":    "npm explore nodejs-extensions -- pnpm lint:styles",
  "clean:styles":   "npm explore nodejs-extensions -- pnpm clean:styles",
  "watch:styles":   "npm explore nodejs-extensions -- pnpm watch:styles"
}

The build:styles script is a wrapper to execute the lint:styles and compile:styles scripts in parallel.

Stylelint and Prettier rules

The rules are found in 4 files:

  • .stylelintrc.lombiq-base.js: These rules are Lombiq overrides for stylelint-config-standard-scss. You can find the file here.
  • .stylelintrc.js: In this file you can override the above Lombiq rules, or define your own Stylelint configuration altogether.
  • .prettierrc.lombiq-base.js: These rules are the Lombiq defaults for styling SCSS files. You can find the file here.
  • .prettierrc.js: In this file you can override the above Lombiq rules, or define your own Prettier configuration altogether.

The .stylelintrc.js and prettierrc.js files will automatically be created in your project during the first build. Please open it and adjust the path to .stylelintrc.lombiq-base.js and .prettierrc.lombiq-base.js according to your solution's directory structure.

Initiate Prettier auto-fix

You can initiate an auto-fix for your SCSS files by running build:styles in the project's root directory. This will fix all Prettier violations that can be fixed automatically.

Using a solution-wide configuration

ℹ This option only works when using Node.js Extensions from a submodule, not from the NuGet package.

In order to use a global .stylelintrc.js and prettierrc.js files for your whole solution, you can instruct Node.js Extensions to create those files in the location specified by the MSBuild property <NodeJsExtensionsGlobalStylelintConfigurationDirectory> and <NodeJsExtensionsGlobalPrettierStyleConfigurationDirectory>. The easiest is to add these in a Directory.Build.props file in your solution's root directory as follows:

<NodeJsExtensionsGlobalStylelintConfigurationDirectory>$(MSBuildThisFileDirectory)</NodeJsExtensionsGlobalStylelintConfigurationDirectory>
<NodeJsExtensionsGlobalPrettierStyleConfigurationDirectory>$(MSBuildThisFileDirectory)</NodeJsExtensionsGlobalPrettierStyleConfigurationDirectory>

Details on rules can be found in the Stylelint documentation and in the Prettier documentation. If you want to find out what the currently applied configuration is for Stylelint, coming from all the various extended configuration files, then run npx stylelint --print-config . > rules.json at the given location.

Integration with Visual Studio (Code)

Unfortunately, there's currently no Visual Studio editor support to see linter violations from Stylelint in real-time. You can, however, write SCSS in Visual Studio Code and use the official Stylelint extension there. Just install and configure it to validate SCSS files under its "Stylelint: Validate" option, or use the below snippet in VS Code's settings.json:

"stylelint.validate": [
  "css",
  "less",
  "postcss",
  "scss"
],

The MSBuild or npm script output will show you all of the Stylelint rule violations in a detailed manner.

If a certain rule's violation is incorrect in a given location, or you want to suppress it locally, you can ignore the affected code. Just always comment such ignores to clarify why they were necessary.