Add scss feature flag option (#1236)

* Add scss feature flag option

* Add docs on how to run task

* fix formatting

* add note about @import

Author: lukasoppermann

contributor-docs/feature-flag-testing.md

@@ -51,7 +51,26 @@ npm i @primer/primitives-my-feature-flag@npm:@primer/[email protected]
 
 **NOTE:** This package needs to be checked into git. On dotcom all packages are added in git.
 
-### Create a new bundle (optional)
+### Load your file
+
+#### Option 1: SCSS feature flag
+
+[Read more about scss feature flags](https://github.com/github/github/blob/10168573894287782ddabd7d8b9bfd47850a1b31/ui/packages/feature-flags/client-feature-flags.ts#L223-L233).
+
+You can't use `@import` inside a feature flag as `@import` has to be top level.
+
+> Note: these flags are all automatically preloaded
+
+```scss
+ * CSS feature flags can be used in any scss/css file like this:
+ *
+ * [data-css-features~="my_feature_flag" i] {
+ *  // styles behind flag
+ * }
+ *
+```
+
+#### Option 2: Create a new bundle
 
 If you want to load some new tokens you can add a new bundle and load it for users who have the feature flags enabled.
 
@@ -71,6 +90,11 @@ You now need to load your css bundle if the feature flag is active by placing th
 
 Now you need to generate the `SERVICEOWNERS` and `CODEOWNERS` by running `bin/generate-service-files.rb` in the console or by running it as a task in vs code.
 
+> Note: to run a task in vscoode, open the command palette with `cmd + shift +p` or add a `>` in to the search palette and type `run task`.
+> Select `Tasks: Run Task` and hit `return`
+> Select `bin/generate-service-files.rb` fromn the list and hit `return`
+> Select `Default` and hit return
+
 It should add a line like this to the `SERVICEOWNERS`:
 
 ```