diff --git a/ember-power-calendar/ember-power-calendar-for-css-generate.scss b/ember-power-calendar/ember-power-calendar-for-css-generate.scss
new file mode 100644
index 00000000..009345a4
--- /dev/null
+++ b/ember-power-calendar/ember-power-calendar-for-css-generate.scss
@@ -0,0 +1,9 @@
+:root {
+  --ember-power-calendar-cell-size: 35px;
+}
+
+@import './ember-power-calendar.scss';
+
+.ember-power-calendar {
+  @include ember-power-calendar($cell-size: 'var(--ember-power-calendar-cell-size)');
+}
\ No newline at end of file
diff --git a/ember-power-calendar/rollup.config.mjs b/ember-power-calendar/rollup.config.mjs
index 4b9c7296..7154df07 100644
--- a/ember-power-calendar/rollup.config.mjs
+++ b/ember-power-calendar/rollup.config.mjs
@@ -10,7 +10,7 @@ const addon = new Addon({
 export default [
   // Compile scss file for js import
   {
-    input: './_index.scss',
+    input: './ember-power-calendar-for-css-generate.scss',
     output: {
       file: './vendor/ember-power-calendar.js',
       assetFileNames: '[name][extname]',