Move all *-css.js files to new client-src/css dir. (#2999)

* Move all -css.js files to new client-src/css dir.

* Fix gulp for js, and resume clean task without 'static/css'

client-src/elements/chromedash-activity-log.js

@@ -3,7 +3,7 @@ import {autolink, renderAbsoluteDate, renderRelativeDate,
 } from './utils.js';
 import '@polymer/iron-icon';
 
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashAmendment extends LitElement {

client-src/elements/chromedash-activity-page.js

@@ -4,7 +4,7 @@ import './chromedash-activity-log';
 import {showToastMessage,
 } from './utils.js';
 
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashActivityPage extends LitElement {

client-src/elements/chromedash-add-stage-dialog.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {CREATEABLE_STAGES, FORMS_BY_STAGE_TYPE} from './form-definition.js';
 
 

client-src/elements/chromedash-admin-blink-component-listing.js

@@ -1,7 +1,7 @@
 import {html, css, LitElement} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {VARS} from '../sass/_vars-css.js';
-import {LAYOUT_CSS} from '../sass/_layout-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {VARS} from '../css/_vars-css.js';
+import {LAYOUT_CSS} from '../css/_layout-css.js';
 
 export class ChromedashAdminBlinkComponentListing extends LitElement {
   static get styles() {
@@ -242,11 +242,10 @@ export class ChromedashAdminBlinkComponentListing extends LitElement {
           <button @click="${this._removeUser}" class="remove_owner_button"
                   data-component-name="${this.name}">Remove</button>
         </div>
-      </div>    
+      </div>
     `;
   }
 }
 
 customElements.define(
   'chromedash-admin-blink-component-listing', ChromedashAdminBlinkComponentListing);
-

client-src/elements/chromedash-admin-blink-page.js

@@ -1,8 +1,8 @@
 import {LitElement, css, html} from 'lit';
 import {showToastMessage} from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {VARS} from '../sass/_vars-css.js';
-import {LAYOUT_CSS} from '../sass/_layout-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {VARS} from '../css/_vars-css.js';
+import {LAYOUT_CSS} from '../css/_layout-css.js';
 import './chromedash-admin-blink-component-listing';
 
 export class ChromedashAdminBlinkPage extends LitElement {
@@ -11,7 +11,7 @@ export class ChromedashAdminBlinkPage extends LitElement {
       SHARED_STYLES,
       VARS,
       LAYOUT_CSS,
-      css`      
+      css`
       body {
           scroll-behavior: smooth;
       }
@@ -208,4 +208,3 @@ export class ChromedashAdminBlinkPage extends LitElement {
 }
 
 customElements.define('chromedash-admin-blink-page', ChromedashAdminBlinkPage);
-

client-src/elements/chromedash-all-features-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html} from 'lit';
 import {showToastMessage} from './utils.js';
 import './chromedash-feature-table';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashAllFeaturesPage extends LitElement {

client-src/elements/chromedash-app.js

@@ -2,7 +2,7 @@ import {LitElement, css, html, nothing} from 'lit';
 import {ref, createRef} from 'lit/directives/ref.js';
 import {showToastMessage, parseRawQuery, updateURLParams} from './utils';
 import page from 'page';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashApp extends LitElement {
   gateColumnRef = createRef();

client-src/elements/chromedash-banner.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 class ChromedashBanner extends LitElement {

client-src/elements/chromedash-callout.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashCallout extends LitElement {
   static get properties() {

client-src/elements/chromedash-color-status.js

@@ -1,6 +1,6 @@
 import {LitElement, css, html} from 'lit';
 
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 const CYAN = 120;
 const DEFAULT_MAX = 7;

client-src/elements/chromedash-enterprise-release-notes-page.js

@@ -1,5 +1,5 @@
 import {html, LitElement, css} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {
   ENTERPRISE_FEATURE_CATEGORIES,
   PLATFORMS_DISPLAYNAME,
@@ -66,7 +66,7 @@ export class ChromedashEnterpriseReleaseNotesPage extends LitElement {
       th {
         background-color: var(--table-header-background);
       }
-    
+
       table, th, td {
         border: var(--table-divider);
       }
@@ -74,7 +74,7 @@ export class ChromedashEnterpriseReleaseNotesPage extends LitElement {
       table th, .bold {
         font-weight: bold;
       }
-  
+
       table th, table td {
         padding: 16px 32px;
         vertical-align: top;
@@ -100,11 +100,11 @@ export class ChromedashEnterpriseReleaseNotesPage extends LitElement {
         font-style: italic;
         font-weight: bold;
       }
-  
+
       td:not(:first-child), th:not(:first-child) {
         text-align: center;
       }
-      
+
       .screenshots {
         display: flex;
       }

client-src/elements/chromedash-feature-detail.js

@@ -26,7 +26,7 @@ import './chromedash-activity-log';
 import './chromedash-callout';
 import './chromedash-gate-chip';
 import {autolink, findProcessStage, flattenSections} from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 export const DETAILS_STYLES = [css`
       sl-details {

client-src/elements/chromedash-feature-filter.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {
   FEATURE_CATEGORIES,
   FEATURE_TYPES,

client-src/elements/chromedash-feature-page.js

@@ -4,7 +4,7 @@ import './chromedash-gantt';
 import {autolink, renderHTMLIf, showToastMessage,
   renderAbsoluteDate, renderRelativeDate,
 } from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {DETAILS_STYLES} from './chromedash-feature-detail';
 
 const INACTIVE_STATES = [

client-src/elements/chromedash-feature-row.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {
   GATE_TEAM_ORDER,
   STAGE_SHORT_NAMES,

client-src/elements/chromedash-feature-table.js

@@ -2,7 +2,7 @@ import {LitElement, css, html, nothing} from 'lit';
 import {showToastMessage, clamp} from './utils.js';
 import './chromedash-feature-filter';
 import './chromedash-feature-row';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 class ChromedashFeatureTable extends LitElement {

client-src/elements/chromedash-feature.js

@@ -4,8 +4,8 @@ import {autolink} from './utils.js';
 import '@polymer/iron-icon';
 import './chromedash-color-status';
 
-import {FEATURE_CSS} from '../sass/elements/chromedash-feature-css.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {FEATURE_CSS} from '../css/elements/chromedash-feature-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 const MAX_STANDARDS_VAL = 5;
 const MAX_VENDOR_VIEW = 7;

client-src/elements/chromedash-featurelist.js

@@ -1,7 +1,7 @@
 import {LitElement, html} from 'lit';
 // eslint-disable-next-line no-unused-vars
 import './chromedash-feature';
-import {FEATURELIST_CSS} from '../sass/elements/chromedash-featurelist-css.js';
+import {FEATURELIST_CSS} from '../css/elements/chromedash-featurelist-css.js';
 
 const MAX_FEATURES_SHOWN = 500;
 

client-src/elements/chromedash-footer.js

@@ -1,5 +1,5 @@
 import {LitElement, html, css} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashFooter extends LitElement {
@@ -40,7 +40,7 @@ export class ChromedashFooter extends LitElement {
           #footer-spacer {
             display: block;
           }
-        } 
+        }
     `];
   }
 

client-src/elements/chromedash-gantt.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 import {
   STAGE_TYPES_DEV_TRIAL,
   STAGE_TYPES_ORIGIN_TRIAL,

client-src/elements/chromedash-gate-chip.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 const GATE_STATE_TO_NAME = {

client-src/elements/chromedash-gate-column.js

@@ -10,7 +10,7 @@ import {autolink, showToastMessage, findProcessStage,
 } from './utils.js';
 import {GATE_QUESTIONNAIRES} from './form-definition.js';
 
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export const PREPARING = 0;

client-src/elements/chromedash-guide-edit-page.js

@@ -2,8 +2,8 @@ import {LitElement, css, html} from 'lit';
 import './chromedash-guide-metadata';
 import './chromedash-process-overview';
 import {showToastMessage} from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashGuideEditPage extends LitElement {

client-src/elements/chromedash-guide-editall-page.js

@@ -15,8 +15,8 @@ import {
   FORMS_BY_STAGE_TYPE,
   FLAT_TRIAL_EXTENSION_FIELDS,
 } from './form-definition';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 import {STAGE_SHORT_NAMES, STAGE_SPECIFIC_FIELDS} from './form-field-enums.js';
 import {openAddStageDialog} from './chromedash-add-stage-dialog';
 

client-src/elements/chromedash-guide-metadata-page.js

@@ -8,8 +8,8 @@ import {
   FLAT_ENTERPRISE_METADATA_FIELDS,
   formatFeatureForEdit} from './form-definition';
 import {ALL_FIELDS} from './form-field-specs';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashGuideMetadataPage extends LitElement {

client-src/elements/chromedash-guide-metadata.js

@@ -8,8 +8,8 @@ import {
   formatFeatureForEdit,
   FLAT_ENTERPRISE_METADATA_FIELDS,
   FLAT_METADATA_FIELDS} from './form-definition';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashGuideMetadata extends LitElement {
@@ -142,7 +142,7 @@ export class ChromedashGuideMetadata extends LitElement {
                 `}
               </td>
             </tr>
-            
+
             <tr>
               <th>Categories</th>
               <td>${this.feature.enterprise_feature_categories.map(id =>

client-src/elements/chromedash-guide-new-page.js

@@ -6,8 +6,8 @@ import {
   NEW_FEATURE_FORM_FIELDS,
   ENTERPRISE_NEW_FEATURE_FORM_FIELDS,
 } from './form-definition';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 import {setupScrollToHash} from './utils';
 
 

client-src/elements/chromedash-guide-stage-page.js

@@ -13,8 +13,8 @@ import {
   FORMS_BY_STAGE_TYPE} from './form-definition';
 import {IMPLEMENTATION_STATUS, STAGE_SPECIFIC_FIELDS} from './form-field-enums';
 import {ALL_FIELDS} from './form-field-specs';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashGuideStagePage extends LitElement {

client-src/elements/chromedash-guide-verify-accuracy-page.js

@@ -9,8 +9,8 @@ import {formatFeatureForEdit,
   VERIFY_ACCURACY_METADATA_FIELDS,
   VERIFY_ACCURACY_TRIAL_EXTENSION_FIELDS} from './form-definition';
 import {STAGE_SHORT_NAMES, STAGE_SPECIFIC_FIELDS} from './form-field-enums.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashGuideVerifyAccuracyPage extends LitElement {

client-src/elements/chromedash-header.js

@@ -1,6 +1,6 @@
 import {LitElement, html, css, nothing} from 'lit';
 import {showToastMessage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashHeader extends LitElement {

client-src/elements/chromedash-legend.js

@@ -1,6 +1,6 @@
 import {LitElement, css, html, nothing} from 'lit';
 import './chromedash-color-status';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashLegend extends LitElement {
   static get properties() {
@@ -79,7 +79,7 @@ class ChromedashLegend extends LitElement {
     }
     return html`
       <sl-dialog class="legend" style="--width:fit-content">
-        <h3>About the data</h3> 
+        <h3>About the data</h3>
         <section class="content-wrapper">
           <p class="description">What you're looking at is a mostly
           comprehensive list of web platform features that have landed in

client-src/elements/chromedash-metadata.js

@@ -1,6 +1,6 @@
 import {LitElement, css, html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashMetadata extends LitElement {
   static get properties() {

client-src/elements/chromedash-myfeatures-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html, nothing} from 'lit';
 import './chromedash-feature-table';
 import {showToastMessage} from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashMyFeaturesPage extends LitElement {

client-src/elements/chromedash-preflight-dialog.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html, nothing} from 'lit';
 import './chromedash-callout';
 import {findFirstFeatureStage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 let preflightDialogEl;

client-src/elements/chromedash-process-overview.js

@@ -5,7 +5,7 @@ import {
   somePendingPrereqs,
 } from './chromedash-preflight-dialog';
 import {findProcessStage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 export class ChromedashProcessOverview extends LitElement {
   static get properties() {

client-src/elements/chromedash-roadmap-milestone-card.js

@@ -1,7 +1,7 @@
 import {LitElement, html, nothing} from 'lit';
 import {ref, createRef} from 'lit/directives/ref.js';
 import {ROADMAP_MILESTONE_CARD_CSS} from
-  '../sass/elements/chromedash-roadmap-milestone-card-css.js';
+  '../css/elements/chromedash-roadmap-milestone-card-css.js';
 
 const REMOVED_STATUS = ['Removed'];
 const DEPRECATED_STATUS = ['Deprecated', 'No longer pursuing'];

client-src/elements/chromedash-roadmap-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html} from 'lit';
 import {ref, createRef} from 'lit/directives/ref.js';
 import './chromedash-roadmap';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashRoadmapPage extends LitElement {

client-src/elements/chromedash-roadmap.js

@@ -1,7 +1,7 @@
 import {LitElement, html, css} from 'lit';
 import {showToastMessage} from './utils.js';
 import '@polymer/iron-icon';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 const TEMPLATE_CONTENT = {
   stable_minus_one: {

client-src/elements/chromedash-settings-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html, nothing} from 'lit';
 import {showToastMessage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-import {FORM_STYLES} from '../sass/forms-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {FORM_STYLES} from '../css/forms-css.js';
 
 
 export class ChromedashSettingsPage extends LitElement {

client-src/elements/chromedash-stack-rank-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html} from 'lit';
 import './chromedash-stack-rank';
 import {showToastMessage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashStackRankPage extends LitElement {

client-src/elements/chromedash-stack-rank.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html, nothing} from 'lit';
 import '@polymer/iron-icon';
 import './chromedash-x-meter';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 class ChromedashStackRank extends LitElement {

client-src/elements/chromedash-timeline-page.js

@@ -1,7 +1,7 @@
 import {LitElement, css, html} from 'lit';
 import './chromedash-timeline';
 import {showToastMessage} from './utils';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 export class ChromedashTimelinePage extends LitElement {

client-src/elements/chromedash-timeline.js

@@ -1,6 +1,6 @@
 import {LitElement, css, html} from 'lit';
 import {showToastMessage} from './utils.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 
 class ChromedashTimeline extends LitElement {

client-src/elements/chromedash-toast.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 const DEFAULT_DURATION = 7000;
 

client-src/elements/chromedash-userlist.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashUserlist extends LitElement {
   static get properties() {

client-src/elements/chromedash-x-meter.js

@@ -1,5 +1,5 @@
 import {LitElement, css, html} from 'lit';
-import {SHARED_STYLES} from '../sass/shared-css.js';
+import {SHARED_STYLES} from '../css/shared-css.js';
 
 class ChromedashXMeter extends LitElement {
   static get properties() {

developer-documentation.md

@@ -38,7 +38,7 @@ All the pages are rendered in a combination of Jinja2 template (`/templates`) an
    - We pass backend variables to js like this: `const variableInJs = {{variable_in_template|safe}}`.
 1. All Lit components are in `/client-src/elements`.
 1. All JavaScript files are in `/client-src/js-src/` and processed by gulp, then output to `/static/js/` and get included in templates.
-2. All `*-css.js` files used in client-side components are in `/client-src/sass/`.  The remaining css files still being included in templates are in `/static/css/`.
+2. All `*-css.js` files used in client-side components are in `/client-src/css/`.  The remaining css files still being included in templates are in `/static/css/`.
 
 ### Adding an icon
 

gulpfile.babel.js

@@ -157,7 +157,8 @@ gulp.task('js', () => {
 // Clean generated files
 gulp.task('clean', () => {
   return deleteAsync([
-    'static/css/',
+    // Disabled as part of removing sass/scss.
+    // 'static/css/',
     'static/dist',
     'static/js/',
   ], {dot: true});
@@ -166,8 +167,8 @@ gulp.task('clean', () => {
 
 // Build production files, the default task
 gulp.task('default', gulp.series(
+  'clean',
   // Incrementally removing sass/scss.
-  // 'clean',
   // 'styles',
   'css',
   'js',
@@ -184,11 +185,13 @@ gulp.task('watch', gulp.series(
     gulp.watch([
       'client-src/js-src/**/*.js',
       'client-src/elements/*.js',
+      'client-src/elements/css/**/*.js',
       'client-src/contexts/*.js',
     ], gulp.series(['lint', 'js']));
     gulp.watch([
       'client-src/components.js',
       'client-src/elements/*.js',
+      'client-src/elements/css/**/*.js',
       'client-src/contexts/*.js',
     ], gulp.series(['rollup']));
   },