Skip to content

Commit 3b84edf

Browse files
Turbo87Turbo87
committed
Migrate from ember-css-modules to ember-scoped-css
The former isn't particularly well maintained anymore and blocks all sorts of other migration.
1 parent 9cc2009 commit 3b84edf

File tree

169 files changed

+1620
-1159
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

169 files changed

+1620
-1159
lines changed

‎app/app.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
@import "./css/shared/a11y.css";
2+
@import "./css/shared/buttons.css";
3+
@import "./css/shared/forms.css";
4+
@import "./css/shared/sort-by.css";
5+
@import "./css/shared/typography.css";
6+
7+
/*
8+
* The `normalize.css` file does not use CSS layers, so we need to vendor it
9+
* with a layer to ensure it is applied before our global styles.
10+
*/
11+
@import "./css/normalize.css";
12+
13+
@layer global {
14+
:root, [data-theme="classic"] {
15+
--violet800: hsl(252, 44%, 24%);
16+
--grey900: hsl(200, 15%, 19%);
17+
--grey700: hsl(200, 11%, 43%);
18+
--grey600: hsl(200, 13%, 60%);
19+
--grey200: hsl(200, 17%, 96%);
20+
--green800: hsl(115, 31%, 31%);
21+
--green900: hsl(115, 31%, 21%);
22+
23+
--orange-50: #fff7ed;
24+
--orange-100: #ffedd5;
25+
--orange-200: #fed7aa;
26+
--orange-300: #fdba74;
27+
--orange-400: #fb923c;
28+
--orange-500: #f97316;
29+
--orange-600: #ea580c;
30+
--orange-700: #c2410c;
31+
--orange-800: #9a3412;
32+
--orange-900: #7c2d12;
33+
34+
--yellow100: hsl(44, 100%, 90%);
35+
--yellow500: hsl(44, 100%, 60%);
36+
--yellow700: hsl(44, 67%, 50%);
37+
--yellow800: hsl(44, 67%, 20%);
38+
39+
--header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
40+
41+
--transition-x-slow: 1000ms;
42+
--transition-slow: 500ms;
43+
--transition-medium: 250ms;
44+
--transition-fast: 150ms;
45+
--transition-x-fast: 50ms;
46+
--transition-instant: 0ms;
47+
48+
--font-heading: "Fira Sans", sans-serif;
49+
--font-body: var(--font-heading);
50+
--font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
51+
"Courier New", monospace;
52+
53+
--main-color: light-dark(#383838, #f9f7ec);
54+
--main-color-light: light-dark(#858585, #a6a6a6);
55+
--main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
56+
--main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
57+
--main-bg-dark: light-dark(#edebdd, #141413);
58+
--gray-border: light-dark(#d5d3cb, #666561);
59+
--link-color: rgb(0, 172, 91);
60+
--link-hover-color: #007940;
61+
62+
--placeholder-bg: hsl(212, 7%, 57%);
63+
--placeholder-bg2: hsl(213, 16%, 75%);
64+
65+
/* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
66+
67+
--space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
68+
--space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
69+
--space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
70+
--space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
71+
--space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
72+
--space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
73+
--space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
74+
--space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
75+
--space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
76+
--space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
77+
78+
/* One-up pairs */
79+
--space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
80+
--space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
81+
--space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
82+
--space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
83+
--space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
84+
--space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
85+
--space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
86+
--space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
87+
--space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
88+
89+
/* Custom pairs */
90+
--space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
91+
92+
color-scheme: light dark;
93+
}
94+
95+
[data-color-scheme="light"] {
96+
color-scheme: light;
97+
}
98+
99+
[data-color-scheme="dark"] {
100+
color-scheme: dark;
101+
}
102+
103+
* {
104+
box-sizing: border-box;
105+
}
106+
107+
html, body {
108+
margin: 0;
109+
scroll-behavior: smooth;
110+
}
111+
112+
body {
113+
background-color: var(--header-bg-color);
114+
font-family: var(--font-body);
115+
font-size: 16px;
116+
display: flex;
117+
flex-direction: column;
118+
min-height: 100vh;
119+
}
120+
121+
h1, h2, h3, h4 {
122+
font-family: var(--font-heading);
123+
}
124+
125+
h1 {
126+
@media only screen and (max-width: 400px) {
127+
font-size: 1.5em;
128+
}
129+
}
130+
131+
a, .link, .text--link {
132+
color: var(--link-color);
133+
text-decoration: none;
134+
cursor: pointer;
135+
136+
&:hover {
137+
color: var(--link-hover-color);
138+
}
139+
}
140+
141+
/* Using `:not(...)` here for specificity reasons */
142+
a:not([href]) {
143+
color: unset;
144+
cursor: initial;
145+
}
146+
147+
pre.terminal {
148+
background: var(--main-color);
149+
color: white;
150+
padding: var(--space-s);
151+
font-family: var(--font-monospace);
152+
}
153+
154+
abbr[title] {
155+
text-decoration: none;
156+
border-bottom: 1px dotted;
157+
}
158+
159+
noscript {
160+
display: grid;
161+
justify-items: center;
162+
padding: var(--space-m);
163+
color: white;
164+
}
165+
166+
/* see https://github.com/twbs/bootstrap/pull/30269 */
167+
::-webkit-datetime-edit,
168+
::-webkit-datetime-edit-fields-wrapper,
169+
::-webkit-datetime-edit-text,
170+
::-webkit-datetime-edit-minute,
171+
::-webkit-datetime-edit-hour-field,
172+
::-webkit-datetime-edit-day-field,
173+
::-webkit-datetime-edit-month-field,
174+
::-webkit-datetime-edit-year-field {
175+
padding: 0;
176+
}
177+
178+
::-webkit-calendar-picker-indicator {
179+
font-size: 0.9em
180+
}
181+
182+
.c-notification__icon {
183+
display: flex;
184+
justify-content: center;
185+
align-items: center;
186+
}
187+
188+
.c-notification__content {
189+
line-height: 1.5;
190+
}
191+
192+
.width-limit {
193+
width: 960px;
194+
@media only screen and (max-width: 960px) {
195+
width: 100%;
196+
}
197+
}
198+
}

‎app/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Resolver from 'ember-resolver';
66
import config from './config/environment';
77
import * as Sentry from './sentry';
88

9+
import './app.css';
10+
911
// eslint-disable-next-line unicorn/prefer-add-event-listener
1012
window.onerror = undefined;
1113
Sentry.init();

‎app/components/color-scheme-menu.module.css renamed to ‎app/components/color-scheme-menu.css

File renamed without changes.

‎app/components/color-scheme-menu.hbs

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
2-
<dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
3-
{{svg-jar this.icon local-class="icon"}}
1+
<Dropdown data-test-dark-mode-menu ...attributes class="dropdown" as |dd|>
2+
<dd.Trigger @hideArrow={{true}} class="trigger" data-test-dark-mode-toggle>
3+
{{svg-jar this.icon class=(scoped-class "icon")}}
44
<span class="sr-only">Change color scheme</span>
55
</dd.Trigger>
66

7-
<dd.Menu local-class="menu" as |menu|>
7+
<dd.Menu class="menu" as |menu|>
88
{{#each this.colorSchemes as |colorScheme|}}
99
<menu.Item>
1010
<button
11-
local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
12-
class="button-reset"
11+
class="menu-button button-reset {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
1312
type="button"
1413
{{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
1514
>
16-
{{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
15+
{{svg-jar colorScheme.svg class=(scoped-class "icon")}} {{colorScheme.mode}}
1716
</button>
1817
</menu.Item>
1918
{{/each}}

‎app/components/crate-downloads-list.module.css renamed to ‎app/components/crate-downloads-list.css

File renamed without changes.

‎app/components/crate-downloads-list.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<ul local-class="list">
1+
<ul class="list">
22
{{#each @crates as |crate|}}
33
<li>
4-
<LinkTo @route="crate" @model={{crate.id}} local-class="link">
4+
<LinkTo @route="crate" @model={{crate.id}} class="link">
55
{{ crate.name }} ({{ crate.max_version }})
6-
{{svg-jar "download-arrow" local-class="download-icon"}}
6+
{{svg-jar "download-arrow" class=(scoped-class "download-icon")}}
77
{{ format-num crate.downloads }}
88
</LinkTo>
99
</li>

‎app/components/crate-header.module.css renamed to ‎app/components/crate-header.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
white-space: nowrap;
2626
cursor: default;
2727

28-
svg {
28+
:global(svg) {
2929
width: 1em;
3030
height: 1em;
3131
flex-shrink: 0;

‎app/components/crate-header.hbs

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<PageHeader local-class="header" data-test-heading>
2-
<h1 local-class="heading">
1+
<PageHeader class="header" data-test-heading>
2+
<h1 class="heading">
33
<span data-test-crate-name>{{@crate.name}}</span>
44
{{#if @version}}
55
<small data-test-crate-version>v{{@version.num}}</small>
66

77
{{#if @version.yanked}}
8-
<span local-class="yanked-badge" data-test-yanked>
8+
<span class="yanked-badge" data-test-yanked>
99
{{svg-jar "trash"}}
1010
Yanked
1111

@@ -19,29 +19,29 @@
1919
</h1>
2020

2121
{{#if @crate.description}}
22-
<div local-class="description">
22+
<div class="description">
2323
{{@crate.description}}
2424
</div>
2525
{{/if}}
2626

2727
{{#if this.keywords}}
28-
<ul local-class="keywords">
28+
<ul class="keywords">
2929
{{#each this.keywords as |keyword|}}
3030
<li>
3131
<LinkTo @route="keyword" @model={{keyword.id}} data-test-keyword={{keyword.id}}>
32-
<span local-class="hash">#</span>{{keyword.id}}
32+
<span class="hash">#</span>{{keyword.id}}
3333
</LinkTo>
3434
</li>
3535
{{/each}}
3636
</ul>
3737
{{/if}}
3838

3939
{{#if this.session.currentUser}}
40-
<FollowButton @crate={{@crate}} local-class="follow-button"/>
40+
<FollowButton @crate={{@crate}} class="follow-button"/>
4141
{{/if}}
4242
</PageHeader>
4343

44-
<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
44+
<NavTabs aria-label="{{@crate.name}} crate subpages" class="nav" as |nav|>
4545
<nav.Tab
4646
@link={{if
4747
@versionNum

‎app/components/crate-list.module.css renamed to ‎app/components/crate-list.css

File renamed without changes.

‎app/components/crate-list.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div ...attributes>
22
{{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
3-
<ol local-class="list">
3+
<ol class="list">
44
{{#each @crates as |crate index|}}
55
<li>
66
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />

0 commit comments

Comments
 (0)