Skip to content

Commit 9dd28d7

Browse files
joshblackkodiakhq[bot]
authored and
tay1orjones
committed
refactor(styles): reorder imports to avoid config conflict (#10963)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent d5ebf7b commit 9dd28d7

8 files changed

Lines changed: 105 additions & 74 deletions

File tree

‎packages/styles/__tests__/__snapshots__/styles-test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Snapshot Tests should match snapshots 1`] = `
3+
exports[`@carbon/styles should have stable public scss entrypoints 1`] = `
44
Array [
55
"scss/compat/theme",
66
"scss/compat/themes",

‎packages/styles/__tests__/styles-test.js‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -91,36 +91,51 @@ const filepaths = [
9191
'scss/components/treeview',
9292
'scss/components/ui-shell',
9393
];
94-
describe.each(filepaths)('%s', (filepath) => {
95-
it('should be importable', async () => {
96-
await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined();
94+
95+
describe('@carbon/styles', () => {
96+
describe.each(filepaths)('%s', (filepath) => {
97+
it('should be importable', async () => {
98+
await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined();
99+
});
97100
});
98-
});
99101

100-
describe('Snapshot Tests', () => {
101-
it('should match snapshots', async () => {
102+
it('should have stable public scss entrypoints', async () => {
102103
expect(filepaths).toMatchSnapshot();
103104
});
104-
});
105105

106-
describe('@carbon/styles/scss/config', () => {
107-
test('Config overrides', async () => {
108-
const { get } = await render(`
109-
@use 'sass:meta';
110-
@use '../scss/config' with (
111-
$prefix: 'custom-prefix',
112-
$css--font-face: false,
113-
);
106+
describe('scss/config', () => {
107+
test('config overrides', async () => {
108+
const { get } = await render(`
109+
@use 'sass:meta';
110+
@use '../scss/config' with (
111+
$prefix: 'custom-prefix',
112+
$css--font-face: false,
113+
);
114114
115-
$_: get('config', (
116-
prefix: config.$prefix,
117-
css--font-face: config.$css--font-face,
118-
));
119-
`);
115+
$_: get('config', (
116+
prefix: config.$prefix,
117+
css--font-face: config.$css--font-face,
118+
));
119+
`);
120+
121+
expect(get('config').value).toEqual({
122+
prefix: 'custom-prefix',
123+
['css--font-face']: false,
124+
});
125+
});
126+
});
120127

121-
expect(get('config').value).toEqual({
122-
prefix: 'custom-prefix',
123-
['css--font-face']: false,
128+
describe('import order', () => {
129+
it('should support bringing in stylesheets independently', async () => {
130+
await expect(
131+
render(`
132+
@use '../scss/reset';
133+
@use '../scss/grid';
134+
@use '../scss/breakpoint';
135+
@use '../scss/colors';
136+
@use '../scss/components';
137+
`)
138+
).resolves.not.toThrow();
124139
});
125140
});
126141
});

‎packages/styles/scss/_reset.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
//
77

88
@use 'config';
9-
@use 'type';
9+
@use 'type/reset' as type;
1010

1111
@mixin reset {
1212
/// http://meyerweb.com/eric/tools/css/reset/

packages/styles/scss/_type.scss renamed to packages/styles/scss/type/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8-
@use 'config';
8+
@use '../config';
99
@forward '@carbon/type' show
1010
// Mixins
1111
reset,

‎packages/styles/scss/type/_reset.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@forward '@carbon/type/scss/modules/reset';

‎packages/type/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@forward 'scss/modules/reset';
1414
@forward 'scss/modules/scale';
1515
@forward 'scss/modules/styles';
16+
@forward 'scss/modules/default-type';

‎packages/type/scss/modules/_default-type.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@use 'styles' as *;
9+
10+
/// Include default type styles
11+
/// @access public
12+
/// @group @carbon/type
13+
@mixin default-type {
14+
h1 {
15+
@include type-style('productive-heading-06');
16+
}
17+
18+
h2 {
19+
@include type-style('productive-heading-05');
20+
}
21+
22+
h3 {
23+
@include type-style('productive-heading-04');
24+
}
25+
26+
h4 {
27+
@include type-style('productive-heading-03');
28+
}
29+
30+
h5 {
31+
@include type-style('productive-heading-02');
32+
}
33+
34+
h6 {
35+
@include type-style('productive-heading-01');
36+
}
37+
38+
p {
39+
@include type-style('body-long-02');
40+
}
41+
42+
a {
43+
@if meta.global-variable-exists('carbon--theme') and
44+
map.has-key($carbon--theme, 'link-01')
45+
{
46+
color: map.get($carbon--theme, 'link-01');
47+
} @else {
48+
color: #0062fe;
49+
}
50+
}
51+
52+
em {
53+
font-style: italic;
54+
}
55+
}

‎packages/type/scss/modules/_reset.scss‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
@use 'sass:meta';
1010
@use '@carbon/layout';
1111
@use 'font-family' as *;
12-
@use 'styles' as *;
1312

1413
/// Include a type reset for a given body and mono font family
1514
/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
@@ -43,50 +42,3 @@
4342
@include font-weight('semibold');
4443
}
4544
}
46-
47-
/// Include default type styles
48-
/// @access public
49-
/// @group @carbon/type
50-
@mixin default-type {
51-
h1 {
52-
@include type-style('productive-heading-06');
53-
}
54-
55-
h2 {
56-
@include type-style('productive-heading-05');
57-
}
58-
59-
h3 {
60-
@include type-style('productive-heading-04');
61-
}
62-
63-
h4 {
64-
@include type-style('productive-heading-03');
65-
}
66-
67-
h5 {
68-
@include type-style('productive-heading-02');
69-
}
70-
71-
h6 {
72-
@include type-style('productive-heading-01');
73-
}
74-
75-
p {
76-
@include type-style('body-long-02');
77-
}
78-
79-
a {
80-
@if meta.global-variable-exists('carbon--theme') and
81-
map.has-key($carbon--theme, 'link-01')
82-
{
83-
color: map.get($carbon--theme, 'link-01');
84-
} @else {
85-
color: #0062fe;
86-
}
87-
}
88-
89-
em {
90-
font-style: italic;
91-
}
92-
}

0 commit comments

Comments
 (0)