Use single file for extends (#3216)

* Use single file for extends

* Update changelog

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## 0.9.2
 
+### Breaking change
+
+To fix duplicate imports, all Sass placeholders have moved from the `utilities/mixins` file to its own `utilities/extends` file.
+
+The Sass placeholders are:
+
+* `%control`
+* `%unselectable`
+* `%arrow`
+* `%block`
+* `%delete`
+* `%loader`
+* `%overlay`
+
+If you were importing them directly from `utilities/mixins`, you'll need to import `utilities/extends` instead.  
+If you were importing `utilities/_all` or even `bulma.sass` directly, no change is required.
+
 ### New features
 
 * Fix #1583 New `is-ghost` button that behaves / looks like a regular link
@@ -13,6 +30,8 @@
 * Fix #3089 Sub columns of a variable columns have weird gap
 * Fix #2937 Add `width: unset` for narrow columns
 * #3208 Fix #3163 Do not override is-rounded with button-small
+* #3216 Removed duplicate `mixins` imports, created a single `extends` file
+* #3216 Removed all references to the `.sass` file extension have been removed, since they're unnecessary when there's no ambiguity between a `.sass` file or a `.scss` file
 
 ### Improvements
 

sass/base/_all.sass

@@ -1,6 +1,6 @@
 /* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
+@import "minireset"
-@import "generic.sass"
+@import "generic"
-@import "animations.sass"
+@import "animations"

sass/components/_all.sass

@@ -1,15 +1,15 @@
 /* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
+@import "breadcrumb"
-@import "card.sass"
+@import "card"
-@import "dropdown.sass"
+@import "dropdown"
-@import "level.sass"
+@import "level"
-@import "media.sass"
+@import "media"
-@import "menu.sass"
+@import "menu"
-@import "message.sass"
+@import "message"
-@import "modal.sass"
+@import "modal"
-@import "navbar.sass"
+@import "navbar"
-@import "pagination.sass"
+@import "pagination"
-@import "panel.sass"
+@import "panel"
-@import "tabs.sass"
+@import "tabs"

sass/elements/_all.sass

@@ -1,16 +1,16 @@
 /* Bulma Elements */
 @charset "utf-8"
 
-@import "box.sass"
+@import "box"
-@import "button.sass"
+@import "button"
-@import "container.sass"
+@import "container"
-@import "content.sass"
+@import "content"
-@import "icon.sass"
+@import "icon"
-@import "image.sass"
+@import "image"
-@import "notification.sass"
+@import "notification"
-@import "progress.sass"
+@import "progress"
-@import "table.sass"
+@import "table"
-@import "tag.sass"
+@import "tag"
-@import "title.sass"
+@import "title"
 
-@import "other.sass"
+@import "other"

sass/form/_all.sass

@@ -1,9 +1,9 @@
 /* Bulma Form */
 @charset "utf-8"
 
-@import "shared.sass"
+@import "shared"
-@import "input-textarea.sass"
+@import "input-textarea"
-@import "checkbox-radio.sass"
+@import "checkbox-radio"
-@import "select.sass"
+@import "select"
-@import "file.sass"
+@import "file"
-@import "tools.sass"
+@import "tools"

sass/form/checkbox-radio.sass

@@ -1,5 +1,3 @@
-@import "shared"
-
 %checkbox-radio
   cursor: pointer
   display: inline-block

sass/form/file.sass

@@ -1,5 +1,3 @@
-@import "shared"
-
 $file-border-color: $border !default
 $file-radius: $radius !default
 

sass/form/input-textarea.sass

@@ -1,5 +1,3 @@
-@import "shared"
-
 $textarea-padding: $control-padding-horizontal !default
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default

sass/form/select.sass

@@ -1,5 +1,3 @@
-@import "shared"
-
 $select-colors: $form-colors !default
 
 .select

sass/form/tools.sass

@@ -1,5 +1,3 @@
-@import "shared"
-
 $label-color: $text-strong !default
 $label-weight: $weight-bold !default
 

sass/grid/_all.sass

@@ -1,5 +1,5 @@
 /* Bulma Grid */
 @charset "utf-8"
 
-@import "columns.sass"
+@import "columns"
-@import "tiles.sass"
+@import "tiles"

sass/helpers/_all.sass

@@ -1,12 +1,12 @@
 /* Bulma Helpers */
 @charset "utf-8"
 
-@import "color.sass"
+@import "color"
-@import "flexbox.sass"
+@import "flexbox"
-@import "float.sass"
+@import "float"
-@import "other.sass"
+@import "other"
-@import "overflow.sass"
+@import "overflow"
-@import "position.sass"
+@import "position"
-@import "spacing.sass"
+@import "spacing"
-@import "typography.sass"
+@import "typography"
-@import "visibility.sass"
+@import "visibility"

sass/layout/_all.sass

@@ -1,6 +1,6 @@
 /* Bulma Layout */
 @charset "utf-8"
 
-@import "hero.sass"
+@import "hero"
-@import "section.sass"
+@import "section"
-@import "footer.sass"
+@import "footer"

sass/utilities/_all.sass

@@ -1,8 +1,9 @@
 /* Bulma Utilities */
 @charset "utf-8"
 
-@import "initial-variables.sass"
+@import "initial-variables"
-@import "functions.sass"
+@import "functions"
-@import "derived-variables.sass"
+@import "derived-variables"
-@import "mixins.sass"
+@import "mixins"
-@import "controls.sass"
+@import "controls"
+@import "extends"

sass/utilities/controls.sass

@@ -1,4 +1,4 @@
-@import "derived-variables.sass"
+@import "derived-variables"
 
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
@@ -39,9 +39,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   fieldset[disabled] &
     cursor: not-allowed
 
-%control
-  +control
-
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small

sass/utilities/derived-variables.sass

@@ -1,5 +1,5 @@
-@import "initial-variables.sass"
+@import "initial-variables"
-@import "functions.sass"
+@import "functions"
 
 $primary: $turquoise !default
 

sass/utilities/extends.sass

@@ -0,0 +1,22 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay

sass/utilities/mixins.sass

@@ -161,9 +161,6 @@
   -ms-user-select: none
   user-select: none
 
-%unselectable
-  +unselectable
-
 =arrow($color: transparent)
   border: 3px solid $color
   border-radius: 2px
@@ -180,18 +177,12 @@
   transform-origin: center
   width: 0.625em
 
-%arrow
-  +arrow
-
 =block($spacing: $block-spacing)
   &:not(:last-child)
     margin-bottom: $spacing
 
-%block
-  +block
-
 =delete
-  @extend %unselectable
+  +unselectable
   -moz-appearance: none
   -webkit-appearance: none
   background-color: bulmaRgba($scheme-invert, 0.2)
@@ -256,9 +247,6 @@
     min-width: 32px
     width: 32px
 
-%delete
-  +delete
-
 =loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $grey-lighter
@@ -271,9 +259,6 @@
   position: relative
   width: 1em
 
-%loader
-  +loader
-
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -281,5 +266,3 @@
   right: $offset
   top: $offset
 
-%overlay
-  +overlay

test/utils.js

@@ -1,63 +1,64 @@
 module.exports = Object.freeze({
   SOURCES: [
-    `base/animations.sass`,
+    `base/animations`,
-    `base/generic.sass`,
+    `base/generic`,
-    `base/minireset.sass`,
+    `base/minireset`,
 
-    `components/breadcrumb.sass`,
+    `components/breadcrumb`,
-    `components/card.sass`,
+    `components/card`,
-    `components/dropdown.sass`,
+    `components/dropdown`,
-    `components/level.sass`,
+    `components/level`,
-    `components/media.sass`,
+    `components/media`,
-    `components/menu.sass`,
+    `components/menu`,
-    `components/message.sass`,
+    `components/message`,
-    `components/modal.sass`,
+    `components/modal`,
-    `components/navbar.sass`,
+    `components/navbar`,
-    `components/pagination.sass`,
+    `components/pagination`,
-    `components/panel.sass`,
+    `components/panel`,
-    `components/tabs.sass`,
+    `components/tabs`,
 
-    `elements/box.sass`,
+    `elements/box`,
-    `elements/button.sass`,
+    `elements/button`,
-    `elements/container.sass`,
+    `elements/container`,
-    `elements/content.sass`,
+    `elements/content`,
-    `elements/icon.sass`,
+    `elements/icon`,
-    `elements/image.sass`,
+    `elements/image`,
-    `elements/notification.sass`,
+    `elements/notification`,
-    `elements/other.sass`,
+    `elements/other`,
-    `elements/progress.sass`,
+    `elements/progress`,
-    `elements/table.sass`,
+    `elements/table`,
-    `elements/tag.sass`,
+    `elements/tag`,
-    `elements/title.sass`,
+    `elements/title`,
 
-    `form/checkbox-radio.sass`,
+    `form/checkbox-radio`,
-    `form/file.sass`,
+    `form/file`,
-    `form/input-textarea.sass`,
+    `form/input-textarea`,
-    `form/select.sass`,
+    `form/select`,
-    `form/tools.sass`,
+    `form/tools`,
 
-    `grid/columns.sass`,
+    `grid/columns`,
-    `grid/tiles.sass`,
+    `grid/tiles`,
 
-    `helpers/color.sass`,
+    `helpers/color`,
-    `helpers/flexbox.sass`,
+    `helpers/flexbox`,
-    `helpers/float.sass`,
+    `helpers/float`,
-    `helpers/other.sass`,
+    `helpers/other`,
-    `helpers/overflow.sass`,
+    `helpers/overflow`,
-    `helpers/position.sass`,
+    `helpers/position`,
-    `helpers/spacing.sass`,
+    `helpers/spacing`,
-    `helpers/typography.sass`,
+    `helpers/typography`,
-    `helpers/visibility.sass`,
+    `helpers/visibility`,
 
-    `layout/footer.sass`,
+    `layout/footer`,
-    `layout/hero.sass`,
+    `layout/hero`,
-    `layout/section.sass`,
+    `layout/section`,
 
-    `utilities/controls.sass`,
+    `utilities/controls`,
-    `utilities/derived-variables.sass`,
+    `utilities/derived-variables`,
-    `utilities/functions.sass`,
+    `utilities/extends`,
-    `utilities/initial-variables.sass`,
+    `utilities/functions`,
-    `utilities/mixins.sass`,
+    `utilities/initial-variables`,
+    `utilities/mixins`,
   ],
   buildCSS: (fn, name, options) => {
     try {