fix(core-styles): explicit var import for patterns

This should be done to all core-styles stylesheets.

But that will have an uncertain effect on CMS.

So for now, just make this work for core-components.

.postcssrc.yml

@@ -5,6 +5,9 @@ plugins:
 
     # https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md
     features:
+      custom-properties:
+        # https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#options
+        preserve: false
       custom-media-queries: true
       media-query-ranges: true
       custom-selectors: true

libs/core-styles/src/lib/_imports/components/bootstrap.form.css

@@ -8,6 +8,8 @@ Override Bootstrap styles. See:
 
 Styleguide Components.Bootstrap.Form
 */
+@import url('../settings/border.css');
+
 .form-control {
   border: var(--global-border--normal);
   border-radius: 0;

libs/core-styles/src/lib/_imports/components/c-button.css

@@ -14,6 +14,8 @@ Markup: c-button.html
 
 Styleguide Components.Button
 */
+@import url('../settings/color.css');
+@import url('../settings/border.css');
 @import url("../tools/x-truncate.css");