1mpacto-sass 0.0.1 → 0.0.3

package/_preflight.scss

@@ -0,0 +1,453 @@
+@use "sass:map";
+@use "sass:list";
+
+@mixin preflight($font-family-map: (), $border-color: #e5e7eb) {
+    // RESOLVE FONTS
+    $sans-font: map.get($font-family-map, 'sans');
+
+    @if not $sans-font {
+        $sans-font: (ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    }
+
+    $mono-font: map.get($font-family-map, 'mono');
+
+    @if not $mono-font {
+        $mono-font: (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    }
+
+    // ==========================================
+    // BROWSER PREFLIGHT (Opinionated Reset)
+    // Based on Modern Normalize & Opinionated Resets
+    // ==========================================
+
+    /*
+    1. Prevent padding and border from affecting element width.
+    2. Allow adding a border to an element by just adding a border-width.
+    */
+
+    *,
+    ::before,
+    ::after {
+        box-sizing: border-box;
+        /* 1 */
+        border-width: 0;
+        /* 2 */
+        border-style: solid;
+        /* 2 */
+        border-color: #{$border-color};
+        /* 2 */
+    }
+
+    ::before,
+    ::after {
+        --tw-content: '';
+    }
+
+    /*
+    1. Use a consistent sensible line-height in all browsers.
+    2. Prevent adjustments of font size after orientation changes in iOS.
+    3. Use a more readable tab size.
+    4. Use the user's configured `sans` font-family by default.
+    5. Use the user's configured `sans` font-feature-settings by default.
+    6. Use the user's configured `sans` font-variation-settings by default.
+    7. Disable tap highlights on iOS
+    */
+
+    html,
+    :host {
+        line-height: 1.5;
+        /* 1 */
+        -webkit-text-size-adjust: 100%;
+        /* 2 */
+        -moz-tab-size: 4;
+        /* 3 */
+        tab-size: 4;
+        /* 3 */
+        font-family: $sans-font;
+        /* 4 */
+        font-feature-settings: normal;
+        /* 5 */
+        font-variation-settings: normal;
+        /* 6 */
+        -webkit-tap-highlight-color: transparent;
+        /* 7 */
+    }
+
+    /*
+    1. Remove the margin in all browsers.
+    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+    */
+
+    body {
+        margin: 0;
+        /* 1 */
+        line-height: inherit;
+        /* 2 */
+    }
+
+    /*
+    1. Add the correct height in Firefox.
+    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+    3. Ensure horizontal rules are visible by default.
+    */
+
+    hr {
+        height: 0;
+        /* 1 */
+        color: inherit;
+        /* 2 */
+        border-top-width: 1px;
+        /* 3 */
+    }
+
+    /*
+    Add the correct text decoration in Chrome, Edge, and Safari.
+    */
+
+    abbr:where([title]) {
+        text-decoration: underline dotted;
+    }
+
+    /*
+    Remove the default font size and weight for headings.
+    */
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
+    /*
+    Reset links to optimize for opt-in styling instead of opt-out.
+    */
+
+    a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    /*
+    Add the correct font weight in Edge and Safari.
+    */
+
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    /*
+    1. Use the user's configured `mono` font-family by default.
+    2. Use the user's configured `mono` font-feature-settings by default.
+    3. Use the user's configured `mono` font-variation-settings by default.
+    4. Correct the odd `em` font sizing in all browsers.
+    */
+
+    code,
+    kbd,
+    samp,
+    pre {
+        font-family: $mono-font;
+        /* 1 */
+        font-feature-settings: normal;
+        /* 2 */
+        font-variation-settings: normal;
+        /* 3 */
+        font-size: 1em;
+        /* 4 */
+    }
+
+    /*
+    Add the correct font size in all browsers.
+    */
+
+    small {
+        font-size: 80%;
+    }
+
+    /*
+    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    */
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    /*
+    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+    3. Remove gaps between table borders by default.
+    */
+
+    table {
+        text-indent: 0;
+        /* 1 */
+        border-color: inherit;
+        /* 2 */
+        border-collapse: collapse;
+        /* 3 */
+    }
+
+    /*
+    1. Change the font styles in all browsers.
+    2. Remove the margin in Firefox and Safari.
+    3. Remove default padding in all browsers.
+    */
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        font-family: inherit;
+        /* 1 */
+        font-feature-settings: inherit;
+        /* 1 */
+        font-variation-settings: inherit;
+        /* 1 */
+        font-size: 100%;
+        /* 1 */
+        font-weight: inherit;
+        /* 1 */
+        line-height: inherit;
+        /* 1 */
+        color: inherit;
+        /* 1 */
+        margin: 0;
+        /* 2 */
+        padding: 0;
+        /* 3 */
+    }
+
+    /*
+    Remove the inheritance of text transform in Edge and Firefox.
+    */
+
+    button,
+    select {
+        text-transform: none;
+    }
+
+    /*
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Remove default button styles.
+    */
+
+    button,
+    input:where([type='button']),
+    input:where([type='reset']),
+    input:where([type='submit']) {
+        -webkit-appearance: button;
+        /* 1 */
+        background-color: transparent;
+        /* 2 */
+        background-image: none;
+        /* 2 */
+    }
+
+    /*
+    Use the modern Firefox focus style for all focusable elements.
+    */
+
+    :-moz-focusring {
+        outline: auto;
+    }
+
+    /*
+    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+    */
+
+    :-moz-ui-invalid {
+        box-shadow: none;
+    }
+
+    /*
+    Add the correct vertical alignment in Chrome and Firefox.
+    */
+
+    progress {
+        vertical-align: baseline;
+    }
+
+    /*
+    Correct the cursor style of increment and decrement buttons in Safari.
+    */
+
+    ::-webkit-inner-spin-button,
+    ::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    /*
+    1. Correct the odd appearance in Chrome and Safari.
+    2. Correct the outline style in Safari.
+    */
+
+    [type='search'] {
+        -webkit-appearance: textfield;
+        /* 1 */
+        outline-offset: -2px;
+        /* 2 */
+    }
+
+    /*
+    Remove the inner padding in Chrome and Safari on macOS.
+    */
+
+    ::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /*
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Change font properties to `inherit` in Safari.
+    */
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        /* 1 */
+        font: inherit;
+        /* 2 */
+    }
+
+    /*
+    Add the correct display in Chrome and Safari.
+    */
+
+    summary {
+        display: list-item;
+    }
+
+    /*
+    Removes the default spacing and border for appropriate elements.
+    */
+
+    blockquote,
+    dl,
+    dd,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    hr,
+    figure,
+    p,
+    pre {
+        margin: 0;
+    }
+
+    fieldset {
+        margin: 0;
+        padding: 0;
+    }
+
+    legend {
+        padding: 0;
+    }
+
+    ol,
+    ul,
+    menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    /*
+    Reset default styling for dialogs.
+    */
+    dialog {
+        padding: 0;
+    }
+
+    /*
+    Prevent resizing textareas horizontally by default.
+    */
+
+    textarea {
+        resize: vertical;
+    }
+
+    /*
+    1. Reset the default placeholder opacity in Firefox.
+    2. Set the default placeholder color to the user's configured gray 400 color.
+    */
+
+    input::placeholder,
+    textarea::placeholder {
+        opacity: 1;
+        /* 1 */
+        color: #9ca3af;
+        /* 2 */
+    }
+
+    /*
+    Set the default cursor for buttons.
+    */
+
+    button,
+    [role="button"] {
+        cursor: pointer;
+    }
+
+    /*
+    Make sure disabled buttons don't get the pointer cursor.
+    */
+    :disabled {
+        cursor: default;
+    }
+
+    /*
+    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+    This can trigger a poorly considered lint error in some tools but is included
+    by design.
+    */
+
+    img,
+    svg,
+    video,
+    canvas,
+    audio,
+    iframe,
+    embed,
+    object {
+        display: block;
+        /* 1 */
+        vertical-align: middle;
+        /* 2 */
+    }
+
+    /*
+    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+    */
+
+    img,
+    video {
+        max-width: 100%;
+        height: auto;
+    }
+
+    /* Make elements with the HTML hidden attribute stay hidden by default */
+    [hidden] {
+        display: none;
+    }
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "1mpacto-sass",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "sass generator for css utility first",
   "type": "module",
   "exports": {
-    "./_config.sass": "./_config.scss",
-    "./_engine.sass": "./_engine.scss"
+    "./_config.scss": "./_config.scss",
+    "./_engine.scss": "./_engine.scss",
+    "./_preflight.scss": "./_preflight.scss"
   },
   "scripts": {
     "test": "node tests/run_tests.cjs",

package/readme.md

@@ -407,6 +407,26 @@ Contoh (dengan `$class-prefix: '1ru-'`):
 
 ---
 
+## Fitur Preflight (Browser Reset)
+
+Generator ini menyediakan fitur "Preflight" yang mengadopsi reset CSS opinionated (mirip dengan modern framework) untuk memastikan tampilan elemen HTML konsisten di semua browser.
+
+**Cara Penggunaan:**
+Import modul `preflight` dan panggil mixin-nya di bagian paling atas file SCSS Anda, sebelum melakukan generate utility lain.
+
+```scss
+@use "preflight";
+@use "config";
+
+// Panggil mixin preflight dengan memasukkan map font family dari config
+@include preflight.preflight(
+  $font-family-map: config.$font-family-map,
+  $border-color: #e5e7eb // Opsional: set warna border default (default: #e5e7eb)
+);
+```
+
+---
+
 ## Integrasi di SCSS
 
 Berikut adalah contoh lengkap cara mengintegrasikan generator ini, menggabungkan konfigurasi default dengan konfigurasi project Anda, dan mengatur prefix custom.
@@ -417,6 +437,7 @@ Contoh di entry point SCSS Anda (misal `src/styles/utilities.scss`):
 @use "sass:map";
 @use "config"as config;
 @use "engine"as engine;
+@use "preflight"as preflight; // <--- Import Preflight
 
 // ==========================================================================
 // 1. DEFINISI CONFIGURATION CUSTOM PROJECT
@@ -520,6 +541,9 @@ $final-ring-width: map.merge(config.$ring-width-map, $project-ring-width-map);
 // 3. GENERATE CSS
 // ==========================================================================
 
+// 1. Activate Preflight (Optional but recommended)
+@include preflight.preflight($font-family-map: $final-font-family);
+
 $whitelistclassname : ('w-1/2', 'p-128', 'h-hero');
 // Whitelist Base
 $whitelistresponsive : ();

package/tests/integration.test.scss

@@ -1,38 +1,32 @@
-@use '../config' as config;
-@use '../engine' as engine;
+@use '../config'as config;
+@use '../engine'as engine;
+@use '../preflight'as preflight; // <--- Import Preflight
 @use 'sass:map';
 
 // ==========================================
 // 1. MOCK CONFIGURATION
 // ==========================================
-$test-colors: (
-    'primary': #007bff,
+$test-colors: ('primary': #007bff,
     'red': #ff0000,
     'black': #000000,
     'white': #ffffff,
-    'slate-500': #64748b
-);
+    'slate-500': #64748b);
 
-$test-breakpoints: (
-    'sm': 640px,
+$test-breakpoints: ('sm': 640px,
     'md': 768px,
-    '2xl': 1536px
-);
+    '2xl': 1536px);
 
 // ==========================================
 // 2. GENERATE CONFIGURATION
 // ==========================================
-$utilities: config.dynamicUtilities(
-    $colors: $test-colors,
-    $breakpoints: $test-breakpoints
-);
+$utilities: config.dynamicUtilities($colors: $test-colors,
+    $breakpoints: $test-breakpoints);
 
 // ==========================================
 // 3. DEFINE WHITELIST (FULL COVERAGE)
 // ==========================================
 
-$test-cases-base: (
-    // --- STATIC UTILITIES ---
+$test-cases-base: ( // --- STATIC UTILITIES ---
     'static', 'fixed', 'absolute', 'relative', 'sticky', // Position
     'block', 'inline-block', 'inline', 'flex', 'grid', 'hidden', // Display
     'flex-row', 'flex-col', // Flex Direction
@@ -157,18 +151,19 @@ $test-cases-base: (
 );
 
 // ==========================================
-// 4. EXECUTE GENERATOR
+// 4. ACTIVATE PREFLIGHT
 // ==========================================
-@include engine.generatorStyle(
-    $static-map: config.$static-utilities-map,
+@include preflight.preflight(config.$font-family-map);
+
+// ==========================================
+// 5. EXECUTE GENERATOR
+// ==========================================
+@include engine.generatorStyle($static-map: config.$static-utilities-map,
     $dynamic-map: $utilities,
     $config-breakpoints: $test-breakpoints,
     $whitelist-base: $test-cases-base,
-    $whitelist-responsive: (
-        'sm': $test-cases-base,
-        '2xl': $test-cases-base
-    ),
+    $whitelist-responsive: ('sm': $test-cases-base, '2xl': $test-cases-base),
     $whitelist-hover: $test-cases-base,
     $whitelist-focus: $test-cases-base,
     $var-prefix: 'is'
-);
+);