Update components documentation with new files

Author: domoscargin

docs/contributing/coding-standards/components.md

@@ -11,8 +11,8 @@ Generally, folder and file names should be singular, for example ‘accordion’
 When creating your component, you should create the following files in the component’s folder:
 
 - `README.md` - Summary documentation with links to the installation instructions and component documentation on <https://design-system.service.gov.uk/>
-- `_[component-name].scss` - An SCSS file to generate the styles for this component only. It delegates the CSS generation to the \_index.scss file.
-- `_index.scss` - The actual styles for the component that you can import in 2 ways - [on their own using `[component-name].scss`](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#import-specific-parts-of-the-css) or [alongside other components in `components/_index.scss`](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#import-specific-parts-of-the-css)
+- `_index.scss` - The main Sass entry point for the component. Generates the styles by including the mixin from the `_mixin.scss` file. You can include it [on its own](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#import-specific-parts-of-the-css), or [alongside other components in `components/_index.scss`](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#import-specific-parts-of-the-css)
+- `_mixin.scss` - The actual styles for the component, contained within a mixin. The mixin is included by the `_index.scss` file. This file should not be included directly.
 - `[component-name].yaml` - Lists the component's Nunjucks macro options and includes examples using these options. Both the options and examples are used to generate component documentation in the review app. The examples are also used to test component behaviour, and to generate [fixtures for testing alternative implementations of the design system](https://frontend.design-system.service.gov.uk/testing-your-html/).
 - `macro.njk` - The main entry point for rendering the component. It provides a `govuk[ComponentName](params)` macro, delegating render to the `template.njk` file
 - `template.njk` - The template used for rendering the component using any `params` provided to the macro
@@ -24,6 +24,11 @@ If your component uses JavaScript, you must also create the following files in t
 - `[component-name].unit.test.mjs` - Unit tests to verify any component-specific lower-level logic.
 - `[component-name].test.js` - Functional tests to verify the behaviour of the whole component
 
+In version 7 of GOV.UK Frontend, we will remove support for `@import` in Sass. Before then, you must include the following files to continue supporting `@import`:
+
+- `_[component-name].import.scss` - An import-only SCSS file to generate the styles for just this component. It delegates the CSS generation to the \_index.import.scss file, and emits a warning that this usage is deprecated.
+- `_index.import.scss` - An import-only SCSS file which generates the styles by including the mixin from the `_mixin.scss` file.
+
 ## Building your components
 
 To help you build and initialise your own JavaScript components, GOV.UK Frontend provides some of its internal features for you to reuse. Follow our guidance on [building JavaScript components](https://frontend.design-system.service.gov.uk/building-your-own-javascript-components/#building-your-own-javascript-components) to use these features.