feat: modern with raw css modules (#1347)

* feat: test

* refactor: default.css -> vars/index.css

* Create sour-numbers-bow.md

* fix: delete default.css

Author: reme3d2y

.changeset/sour-numbers-bow.md

@@ -1,4 +1,4 @@
-@import '../../../packages/themes/src/default.css';
+@import '../../../packages/vars/src/index.css';
 
 .tabsTypes {
     margin-top: var(--gap-24);

.storybook/blocks/args-tabs/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../packages/themes/src/default.css';
+@import '../../../packages/vars/src/index.css';
 
 .tabs {
     margin-top: var(--gap-32);

.storybook/blocks/tabs/index.module.css

@@ -4,7 +4,7 @@ import alfaTheme from './theme';
 import { STORY_RENDERED, STORY_MISSING, STORY_ERRORED } from '@storybook/core-events';
 import { renderLabel } from './render-label';
 
-import '../packages/themes/src/default.css';
+import '../packages/vars/src/index.css';
 import { setManagerMetricsConnection } from './addons/utils';
 
 if (process.env.NODE_ENV !== 'development') {

.storybook/manager.js

@@ -1,4 +1,4 @@
-@import '../../../../../packages/themes/src/default.css';
+@import '../../../../../packages/vars/src/index.css';
 
 .plate {
     padding: var(--gap-16) var(--gap-20);

.storybook/pages/intro/components/plate/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../packages/themes/src/default.css';
+@import '../../../packages/vars/src/index.css';
 
 .page {
     margin-top: -44px;

.storybook/pages/intro/index.module.css

@@ -76,9 +76,6 @@ const processRootTheme = (cssFile) => {
 };
 
 (async () => {
-    // Удаляем файл с дефолтной темой, его публиковать не нужно
-    shell.rm('dist/default.css');
-
     // Переходим в папку с мисинами и парсим темы
     shell.cd('dist/mixins');
 

bin/build-themes.js

@@ -9,7 +9,7 @@ const distPath = '../packages/vars/dist';
 
 fs.mkdirSync(path.resolve(__dirname, distPath), { recursive: true });
 
-const BUILDS = ['es5', 'cssm', 'esm', 'modern'];
+const BUILDS = ['es5', 'cssm', 'moderncssm', 'esm', 'modern'];
 
 function ensureDirectoryExist(filePath) {
     const dirname = path.dirname(filePath);
@@ -30,7 +30,7 @@ function createExporter(buildName) {
         const contents = Object.keys(variables).reduce(function (buffer, key) {
             return (
                 buffer +
-                (['es5', 'cssm'].includes(buildName) ? 'module.exports.' : 'export const ') +
+                (['es5', 'cssm', 'moderncssm'].includes(buildName) ? 'module.exports.' : 'export const ') +
                 key +
                 ' = ' +
                 JSON.stringify(variables[key]).replace(/(^|{|,)"(.+?)":/g, '$1$2:') +

bin/export-css-custom-properties-as-js-vars.js

@@ -1,4 +1,4 @@
-@import '../../../themes/src/default.css';
+@import '../../../vars/src/index.css';
 
 .accordion-container {
     @media screen and (min-width: 1024px) {

docs/code-review.stories.mdx

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 .accordion {
     width: 100%;

packages/accordion/src/docs/demo.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     /* primary */

packages/accordion/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 .component {
     position: relative;

packages/action-button/src/default.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     /* primary */

packages/action-button/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     /* primary */

packages/action-button/src/inverted.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 .component.component {
     min-height: 48px;

packages/action-button/src/static.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);

packages/alert/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 /*
 * Задача:

packages/amount-input/src/default.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --amount-input-inverted-minor-part-and-currency-color: var(

packages/amount-input/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --amount-major-part-font-weight: bold;

packages/amount-input/src/inverted.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 .component {
     display: inline-flex;

packages/amount/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 @import './vars.css';
 
 .backdrop {

packages/attach/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --backdrop-visible-background: var(--color-light-overlay-default);

packages/backdrop/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);

packages/backdrop/src/vars.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 /* purgecss ignore */
 .component {

packages/badge/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --window-inner-scrollY: 10px; /* fallback value to prevent ci error */

packages/bank-card/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .footer {

packages/base-modal/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .headerWrapper {

packages/bottom-sheet/src/components/footer/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 @import './vars.css';
 
 .modal {

packages/bottom-sheet/src/components/header/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);

packages/bottom-sheet/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .component {

packages/bottom-sheet/src/vars.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 
 :root {
     /* misc */

packages/button/src/components/base-button/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../../../calendar/src/vars.css';
 
 :root {

packages/button/src/vars.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../../../calendar/src/vars.css';
 
 .component {

packages/calendar-input/src/components/calendar-input/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../themes/src/default.css';
+@import '../../../vars/src/index.css';
 @import '../../../calendar/src/vars.css';
 
 .component {

packages/calendar-range/src/components/divider/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/src/default.css';
+@import '../../vars/src/index.css';
 @import '../../calendar/src/vars.css';
 
 .component {

packages/calendar-range/src/views/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 
 .appear,
 .enter {

packages/calendar-with-skeleton/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 @import '../../../../modal/src/vars.css';
 

packages/calendar/src/components/calendar-mobile/backdrop-transitions.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 
 .appear,
 .enter {

packages/calendar/src/components/calendar-mobile/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .daysTable {

packages/calendar/src/components/calendar-mobile/transitions.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .header {

packages/calendar/src/components/days-table/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .component {

packages/calendar/src/components/header/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 :global(.cc-calendar) {

packages/calendar/src/components/month-year-header/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 .component {

packages/calendar/src/components/months-table/index.module.css

@@ -1,4 +1,4 @@
-@import '../../../../themes/src/default.css';
+@import '../../../../vars/src/index.css';
 @import '../../vars.css';
 
 :global(.cc-calendar) {