From 7701c9c3541f82eead6a8b78888cdb9dc9ba170b Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sat, 23 Jan 2016 23:52:15 +1100 Subject: [PATCH 01/28] merge docs and examples as they seem to all just be docs --- {examples => docs}/pseudo-class-selectors.md | 0 {examples => docs}/theming.md | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {examples => docs}/pseudo-class-selectors.md (100%) rename {examples => docs}/theming.md (100%) diff --git a/examples/pseudo-class-selectors.md b/docs/pseudo-class-selectors.md similarity index 100% rename from examples/pseudo-class-selectors.md rename to docs/pseudo-class-selectors.md diff --git a/examples/theming.md b/docs/theming.md similarity index 100% rename from examples/theming.md rename to docs/theming.md From f6e25dc99a490f1fe2a08cb7cfdac61c0c721285 Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sat, 23 Jan 2016 23:55:36 +1100 Subject: [PATCH 02/28] added composition to docs --- docs/composition.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 docs/composition.md diff --git a/docs/composition.md b/docs/composition.md new file mode 100644 index 0000000..95b8679 --- /dev/null +++ b/docs/composition.md @@ -0,0 +1,15 @@ +## Composition + +It's possible to compose selectors. + +``` css +.className { + color: green; + background: red; +} + +.otherClassName { + composes: className; + color: yellow; +} +``` \ No newline at end of file From 9d92e103e487381bdf97dde2d108417081ee8fbd Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sun, 24 Jan 2016 00:00:24 +1100 Subject: [PATCH 03/28] moved examples from getting started to have an easily accessible list of examples and boilerplate projects --- docs/examples.md | 14 ++++++++++++++ docs/get-started.md | 14 -------------- 2 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 docs/examples.md diff --git a/docs/examples.md b/docs/examples.md new file mode 100644 index 0000000..ab8e13c --- /dev/null +++ b/docs/examples.md @@ -0,0 +1,14 @@ +## Examples + +As we find examples in the wild, we'll add them here (or edit this and add a PR). + +## Boilerplates + +- [ultimate hot reloading example](https://github.com/glenjamin/ultimate-hot-reloading-example) by Glen Mailer +- [neob](https://github.com/juliocesar/neob) by Julio Ody +- [ng-modular](https://github.com/nkbt/ng-modular) by Nik Butenko +- [angular-cssmodules-example-app](https://github.com/jonathaningram/angular-cssmodules-example-app) by Jonathan Ingram + +## Example projects + +* [cssmodul.es](https://github.com/StevenIseki/cssmodul.es) - search for css modules on npm diff --git a/docs/get-started.md b/docs/get-started.md index c8da915..d55b1de 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -27,17 +27,3 @@ The [css-modules-require-hook](https://github.com/css-modules/css-modules-requir ### React If you're using React, CSS Modules is a great fit. The [react-css-modules](https://github.com/gajus/react-css-modules) adds a `CSSModules` higher-order component or `@CSSModules` annotation for better integrating CSS Modules & React. - -## Example projects - -As we find examples in the wild, we'll add them here (or edit this and add a PR). - -* [cssmodul.es](https://github.com/StevenIseki/cssmodul.es) - search for css modules on npm - -### Webpack Boilerplates - -- [ultimate hot reloading example](https://github.com/glenjamin/ultimate-hot-reloading-example) by Glen Mailer -- [neob](https://github.com/juliocesar/neob) by Julio Ody -- [ng-modular](https://github.com/nkbt/ng-modular) by Nik Butenko -- [angular-cssmodules-example-app](https://github.com/jonathaningram/angular-cssmodules-example-app) by Jonathan Ingram - From be1879400441e043d49876e190cf31e7dc0f2b0e Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sun, 24 Jan 2016 00:03:57 +1100 Subject: [PATCH 04/28] added deku-css-modules to language integrations --- docs/get-started.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/get-started.md b/docs/get-started.md index d55b1de..511477e 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -26,4 +26,8 @@ The [css-modules-require-hook](https://github.com/css-modules/css-modules-requir ### React -If you're using React, CSS Modules is a great fit. The [react-css-modules](https://github.com/gajus/react-css-modules) adds a `CSSModules` higher-order component or `@CSSModules` annotation for better integrating CSS Modules & React. +If you're using React, CSS Modules is a great fit. [react-css-modules](https://github.com/gajus/react-css-modules) adds a `CSSModules` higher-order component or `@CSSModules` annotation for better integrating CSS Modules & React. + +### Deku + +If you're using Deku, CSS Modules is an awesome fit. [deku-css-modules](https://github.com/StevenIseki/deku-css-modules) allows for easy integration of CSS Modules & Deku. From bfac9d6ed5045961e5ecf943af0939d42f7b0000 Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sun, 24 Jan 2016 00:10:51 +1100 Subject: [PATCH 05/28] update angular and react usage --- ...angular.md => css-modules-with-angular.md} | 2 +- docs/css-modules-with-react.md | 43 +++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) rename docs/{using-css-modules-with-angular.md => css-modules-with-angular.md} (95%) create mode 100644 docs/css-modules-with-react.md diff --git a/docs/using-css-modules-with-angular.md b/docs/css-modules-with-angular.md similarity index 95% rename from docs/using-css-modules-with-angular.md rename to docs/css-modules-with-angular.md index 2e947b6..c3a8d2c 100644 --- a/docs/using-css-modules-with-angular.md +++ b/docs/css-modules-with-angular.md @@ -1,6 +1,6 @@ -# Using CSS Modules with Angular +# CSS Modules with Angular ```css .bacon { /* ... */ } diff --git a/docs/css-modules-with-react.md b/docs/css-modules-with-react.md new file mode 100644 index 0000000..2f32c72 --- /dev/null +++ b/docs/css-modules-with-react.md @@ -0,0 +1,43 @@ + + +# CSS Modules with React + +**Demo.js** + +```jsx +import React from 'react' +import CSSModules from 'react-css-modules' +/* import your css modules styles for the component */ +import styles from './Demo.css' + +function Demo( props) { + + const { route } = props + + return ( +
+ +
+ ) +} + +export default CSSModules(Demo, styles, {allowMultiple: true} ) +``` + +**index.js** + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import Demo from './components/Demo' + +function App(props) { + return ( +
+ +
+ ) +} + +ReactDOM.render(React.createElement(App), document.getElementById('root')) +``` From 918f57720beb0fcc0f66e93cf24fb33704367120 Mon Sep 17 00:00:00 2001 From: Steven Iseki Martin Date: Sun, 24 Jan 2016 00:38:12 +1100 Subject: [PATCH 06/28] added docs for importing css modules and using values also know as variables --- docs/import-multiple-css-modules.md | 46 ++++++++++++++++++++++ docs/values-variables.md | 61 +++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 docs/import-multiple-css-modules.md create mode 100644 docs/values-variables.md diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md new file mode 100644 index 0000000..020234f --- /dev/null +++ b/docs/import-multiple-css-modules.md @@ -0,0 +1,46 @@ +###Import multiple css modules into a component + +You can import multiple css modules into a component or function using `Object.assign` +For example if you import a button css modules to your Demo component, add this to the components default styles. + +```js +let styles = {} +import demo from './Demo.css' +import fancyButton from 'css-fancy-button' +Object.assign(styles, fancyButton, demo) +``` + +You can even import css modules installed from npm. e.g. [pure-css](https://github.com/StevenIseki/pure-css) + +```sh +npm install pure-css --save-dev +``` + +Then in your component... start using pure css styles. + +```js +import { buttons, grids } from 'pure-css' +``` + +A full example of a demo component with 2 css modules imported. + +```jsx +import React from 'react' +let styles = {} +import demo from './Demo.css' +import fancyButton from 'css-fancy-button' +Object.assign(styles, fancyButton, demo) + +function Demo( props) { + + const { route } = props; + + return ( +
+ +
+ ); +} + +export default Demo +``` \ No newline at end of file diff --git a/docs/values-variables.md b/docs/values-variables.md new file mode 100644 index 0000000..1f5447a --- /dev/null +++ b/docs/values-variables.md @@ -0,0 +1,61 @@ +### exporting values variables + +You can export values with css modules similar to using variables in less or sass. + +Just ensure you are using postcss and the [postcss-modules-values](https://github.com/css-modules/postcss-modules-values) plugin + +Now you set up your values/variables + +**colors.css** + +```css +@value blue: #0c77f8; +@value red: #ff0000; +@value green: #aaf200; +``` + +then import them into your components css module + +**demo.css** + +```css +/* import your colors... */ +@value colors: "./colors.css"; +@value blue, red, green from colors; + +.button { + color: blue; + display: inline-block; +} +``` + +## example webpack.config for postcss-modules-values + +```js +var path = require('path'); +var webpack = require('webpack'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var values = require('postcss-modules-values'); + +module.exports = { + entry: ['./src/index'], + output: { + filename: 'bundle.js', + path: path.join(__dirname, 'public'), + publicPath: '/public/' + }, + module: { + loaders: [ + { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, + { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') } + ] + }, + postcss: [ + values + ], + plugins: [ + new ExtractTextPlugin('style.css', { allChunks: true }) + ] + +}; +``` From 346b0987253f67b2da07ecdf8a3a3b71b99ff2e3 Mon Sep 17 00:00:00 2001 From: Ivan Gromov Date: Mon, 15 Feb 2016 14:23:49 +0500 Subject: [PATCH 07/28] Updated angular docs with more actual examples In current angular 1.5 ng-class won't work with ``{{expression}}`` --- docs/using-css-modules-with-angular.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/using-css-modules-with-angular.md b/docs/using-css-modules-with-angular.md index 2e947b6..d5f0979 100644 --- a/docs/using-css-modules-with-angular.md +++ b/docs/using-css-modules-with-angular.md @@ -18,8 +18,9 @@ angular.module('myApp').controller('MyController', ($scope) => { ```html
-
-

+
+

pancakes (2-way binding)

+

bacon

From 11508ec435514896d8998ccc8482c5a21effa070 Mon Sep 17 00:00:00 2001 From: Alexander Madyankin Date: Sat, 20 Feb 2016 22:48:59 +0300 Subject: [PATCH 08/28] Added link to implementation for the server side --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index b58bd29..6b3b537 100644 --- a/README.md +++ b/README.md @@ -124,3 +124,7 @@ Webpack's [css-loader](https://github.com/webpack/css-loader) in module mode rep Extending adds the source class name(s) to the exports. Extending from other modules first imports the other module and then adds the class name(s) to the exports. + +### Server-side and static websites + +[PostCSS-Modules](https://github.com/outpunk/postcss-modules) allows to use CSS Modules for static builds and the server side with Ruby, PHP or any other language or framework. From 14d99a710d1e124861e7284309da55c46b95df85 Mon Sep 17 00:00:00 2001 From: Alexander Madyankin Date: Sun, 21 Feb 2016 21:56:46 +0300 Subject: [PATCH 09/28] Add link to postcss-modules demo --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6b3b537..403e313 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,7 @@ i. e. with less.js ## Examples * [css-modules/webpack-demo](https://github.com/css-modules/webpack-demo) +* [outpunk/postcss-modules-example](https://github.com/outpunk/postcss-modules-example) * [Theming](examples/theming.md) From 1b1e38474adc9821c5f1ce18f93213525146924b Mon Sep 17 00:00:00 2001 From: nilar Date: Tue, 12 Apr 2016 11:58:04 +0200 Subject: [PATCH 10/28] Add angular 1.5 component exemple --- docs/css-modules-with-angular.md | 37 ++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/css-modules-with-angular.md b/docs/css-modules-with-angular.md index 70e7705..dac880a 100644 --- a/docs/css-modules-with-angular.md +++ b/docs/css-modules-with-angular.md @@ -29,6 +29,43 @@ angular.module('myApp').controller('MyController', ($scope) => { --- +## CSS Modules with angular 1.5 component + +[Demo](http://nlarche.github.io/css-modules-angular-1/) + +```css +.content { /* ... */ } +.bacon { /* ... */ } +.pancakes { /* ... */ } +``` + +```js +import angular from 'angular' +import styles from './index.css' + +var template = ` +
+
pancakes
+
bacon
+
`; + +angular + .module('app', []) + .component('myComponent', { + template: template, + controller: Controller + }); + + +function Controller() { + var vm = this; + + vm.$onInit = function() { + vm.styles = styles; + } +} +``` + **This needs expansion/revision by someone who really knows angular. Maybe that's you!** - [ ] Controller vs Directive examples/rationale From 006b3ba78111238d5afe44914b58bdd446185c2a Mon Sep 17 00:00:00 2001 From: Gianluca Casati Date: Tue, 19 Apr 2016 11:22:23 +0200 Subject: [PATCH 11/28] fixed theming link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 403e313..4a9edc4 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ i. e. with less.js * [css-modules/webpack-demo](https://github.com/css-modules/webpack-demo) * [outpunk/postcss-modules-example](https://github.com/outpunk/postcss-modules-example) -* [Theming](examples/theming.md) +* [Theming](docs/theming.md) ## History From 3094a9a4506cbefa6001ca3e000381d506246c9d Mon Sep 17 00:00:00 2001 From: Guilherme Caminha Date: Tue, 26 Apr 2016 01:54:06 -0300 Subject: [PATCH 12/28] Fixed typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 403e313..09711c4 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ For local class names camelCase naming is recommended, but not enforced. ## Exceptions -`:global` switches to global scope for the current selector resp. identifier. `:global(.xxx)` resp. `@keyframes :global(xxx)` declares the stuff in brackets in the global scope. +`:global` switches to global scope for the current selector resp. identifier. `:global(.xxx)` resp. `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. Similar `:local` and `:local(...)` for local scope. From fa4491b1c73bfaf24d1c1831b310688676e2e88d Mon Sep 17 00:00:00 2001 From: Josh Johnston Date: Tue, 31 May 2016 15:56:08 +1000 Subject: [PATCH 13/28] Examples in the readme Added some new example repos, using browserify and combining CSS Modules with additional postcss plugins. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4a9edc4..027b6b7 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,8 @@ i. e. with less.js * [css-modules/webpack-demo](https://github.com/css-modules/webpack-demo) * [outpunk/postcss-modules-example](https://github.com/outpunk/postcss-modules-example) * [Theming](docs/theming.md) - +* [css-modules/browserify-demo](https://github.com/css-modules/browserify-demo) +* [x-team/starting-css-modules](https://github.com/x-team/starting-css-modules) ## History From 459d9a9f7d408bfb78a64134747ccc338a259db7 Mon Sep 17 00:00:00 2001 From: Konstantin Epishev Date: Sun, 26 Mar 2017 19:24:02 +0300 Subject: [PATCH 14/28] Doc title fix --- docs/import-multiple-css-modules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md index 020234f..53e07ab 100644 --- a/docs/import-multiple-css-modules.md +++ b/docs/import-multiple-css-modules.md @@ -1,4 +1,4 @@ -###Import multiple css modules into a component +### Import multiple css modules into a component You can import multiple css modules into a component or function using `Object.assign` For example if you import a button css modules to your Demo component, add this to the components default styles. @@ -43,4 +43,4 @@ function Demo( props) { } export default Demo -``` \ No newline at end of file +``` From e61983e946899359099b80a590477008f75ba305 Mon Sep 17 00:00:00 2001 From: Joseph Rex Date: Sat, 1 Apr 2017 03:07:27 -0500 Subject: [PATCH 15/28] Explain why camelCase convention is recommended --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ac87d31..81a61fd 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ element.innerHTML = '
'; For local class names camelCase naming is recommended, but not enforced. +> This is recommended because the common alternative, kebab-casing may cause unexpected behavior when trying to access style.class-name as a dot notation. You may encounter errors then resolve to using a bracket notation (style['class-name']) but a camelCase prevents this from occuring. + ## Exceptions `:global` switches to global scope for the current selector resp. identifier. `:global(.xxx)` resp. `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. From 711166544a14f9c720c3ef0c85da98c1b6e876d9 Mon Sep 17 00:00:00 2001 From: Joseph Rex Date: Sun, 2 Apr 2017 15:47:20 -0500 Subject: [PATCH 16/28] Reword explanation for camelCase preference --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 81a61fd..dd046cc 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ element.innerHTML = '
'; For local class names camelCase naming is recommended, but not enforced. -> This is recommended because the common alternative, kebab-casing may cause unexpected behavior when trying to access style.class-name as a dot notation. You may encounter errors then resolve to using a bracket notation (style['class-name']) but a camelCase prevents this from occuring. +> This is recommended because the common alternative, kebab-casing may cause unexpected behavior when trying to access style.class-name as a dot notation. You can still work around kebab-case with bracket notation (eg. `style['class-name']`) but `style.className` is cleaner. ## Exceptions From 6e6c5a5fe537c6b44d26f54c48a630828cb56d70 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sat, 20 May 2017 17:16:18 +0300 Subject: [PATCH 17/28] Update angular.js example --- docs/css-modules-with-angular.js.md | 64 +++++++++++++++++++++++++ docs/css-modules-with-angular.md | 73 ----------------------------- 2 files changed, 64 insertions(+), 73 deletions(-) create mode 100644 docs/css-modules-with-angular.js.md delete mode 100644 docs/css-modules-with-angular.md diff --git a/docs/css-modules-with-angular.js.md b/docs/css-modules-with-angular.js.md new file mode 100644 index 0000000..6313729 --- /dev/null +++ b/docs/css-modules-with-angular.js.md @@ -0,0 +1,64 @@ + + +# CSS Modules with Angular.js + +```css +.bacon { /* ... */ } +.pancakes { /* ... */ } +``` + +```js +import styles from "./component.css" + +class MyController { + constructor($scope) { + $scope.styles = styles; + } +} + +angular.module('myApp').controller('MyController', ['$scope', MyController]) +``` + +```html +
+
+
+

pancakes (2-way binding)

+

bacon

+ +
+
+
+``` + +--- + +## CSS Modules with angular.js 1.5 component + +```css +.content { /* ... */ } +.bacon { /* ... */ } +.pancakes { /* ... */ } +``` + +```js +import angular from 'angular' +import styles from './index.css' + +const template = ` +
+
pancakes
+
bacon
+
+`; + +angular + .module('app', []) + .component('myComponent', { + template + }); +``` + +**This needs expansion/revision by someone who really knows angular. Maybe that's you!** + +- [ ] Angular 2.0 syntax diff --git a/docs/css-modules-with-angular.md b/docs/css-modules-with-angular.md deleted file mode 100644 index dac880a..0000000 --- a/docs/css-modules-with-angular.md +++ /dev/null @@ -1,73 +0,0 @@ - - -# CSS Modules with Angular - -```css -.bacon { /* ... */ } -.pancakes { /* ... */ } -``` - -```js -import styles from "./component.css" - -angular.module('myApp').controller('MyController', ($scope) => { - $scope.styles = styles -}) -``` - -```html -
-
-
-

pancakes (2-way binding)

-

bacon

- -
-
-
-``` - ---- - -## CSS Modules with angular 1.5 component - -[Demo](http://nlarche.github.io/css-modules-angular-1/) - -```css -.content { /* ... */ } -.bacon { /* ... */ } -.pancakes { /* ... */ } -``` - -```js -import angular from 'angular' -import styles from './index.css' - -var template = ` -
-
pancakes
-
bacon
-
`; - -angular - .module('app', []) - .component('myComponent', { - template: template, - controller: Controller - }); - - -function Controller() { - var vm = this; - - vm.$onInit = function() { - vm.styles = styles; - } -} -``` - -**This needs expansion/revision by someone who really knows angular. Maybe that's you!** - -- [ ] Controller vs Directive examples/rationale -- [ ] Angular 2.0 syntax -- [ ] Is that even how people are doing Angular 1 these days? It's been so long. From 23a05dec374df63997419fe6fe46567fd413520a Mon Sep 17 00:00:00 2001 From: lamartire Date: Wed, 14 Jun 2017 18:30:22 +0300 Subject: [PATCH 18/28] Formating docs in one style --- docs/composition.md | 4 +++- docs/examples.md | 6 ++++-- docs/import-multiple-css-modules.md | 4 +++- docs/pseudo-class-selectors.md | 7 +++++-- docs/theming.md | 4 +++- docs/values-variables.md | 10 ++++++---- 6 files changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/composition.md b/docs/composition.md index 95b8679..7f4d75e 100644 --- a/docs/composition.md +++ b/docs/composition.md @@ -1,4 +1,6 @@ -## Composition + + +# Composition It's possible to compose selectors. diff --git a/docs/examples.md b/docs/examples.md index ab8e13c..7cb0400 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -1,11 +1,13 @@ -## Examples + + +# Examples As we find examples in the wild, we'll add them here (or edit this and add a PR). ## Boilerplates - [ultimate hot reloading example](https://github.com/glenjamin/ultimate-hot-reloading-example) by Glen Mailer -- [neob](https://github.com/juliocesar/neob) by Julio Ody +- [neob](https://github.com/juliocesar/neob) by Julio Ody - [ng-modular](https://github.com/nkbt/ng-modular) by Nik Butenko - [angular-cssmodules-example-app](https://github.com/jonathaningram/angular-cssmodules-example-app) by Jonathan Ingram diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md index 020234f..c7c6f2c 100644 --- a/docs/import-multiple-css-modules.md +++ b/docs/import-multiple-css-modules.md @@ -1,4 +1,6 @@ -###Import multiple css modules into a component + + +# Import multiple css modules into a component You can import multiple css modules into a component or function using `Object.assign` For example if you import a button css modules to your Demo component, add this to the components default styles. diff --git a/docs/pseudo-class-selectors.md b/docs/pseudo-class-selectors.md index b2be85a..6824fc5 100644 --- a/docs/pseudo-class-selectors.md +++ b/docs/pseudo-class-selectors.md @@ -1,5 +1,8 @@ -### Pseudo class selectors -Because css modules works by adding classes to your elements you can easily add pseudo class selectors. + + +# Pseudo class selectors + +Because css modules works by adding classes to your elements you can easily add pseudo class selectors. ```css /* component/text.css */ diff --git a/docs/theming.md b/docs/theming.md index 7d74d08..f43c057 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -1,4 +1,6 @@ -### Theming + + +# Theming Instead of importing a style in the component, the component can take a style as property. This way different themes can be used. The user can even define custom themes. diff --git a/docs/values-variables.md b/docs/values-variables.md index 1f5447a..4a61cfd 100644 --- a/docs/values-variables.md +++ b/docs/values-variables.md @@ -1,4 +1,6 @@ -### exporting values variables + + +# Exporting values variables You can export values with css modules similar to using variables in less or sass. @@ -29,7 +31,7 @@ then import them into your components css module } ``` -## example webpack.config for postcss-modules-values +## Example webpack.config for postcss-modules-values ```js var path = require('path'); @@ -50,8 +52,8 @@ module.exports = { { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') } ] }, - postcss: [ - values + postcss: [ + values ], plugins: [ new ExtractTextPlugin('style.css', { allChunks: true }) From da45a2631e67d9d6c23857c10e24620f170a4881 Mon Sep 17 00:00:00 2001 From: Oliver Joseph Ash Date: Fri, 16 Jun 2017 10:13:46 +0100 Subject: [PATCH 19/28] Small grammar improvements to docs Trying to make sense of this section of the docs. I still don't think I understand it, but hopefully this improves it a little bit for the next person. @geelen @markdalgleish Do you have any thoughts on how we could make this section clearer? --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ac87d31..62c9486 100644 --- a/README.md +++ b/README.md @@ -28,11 +28,11 @@ For local class names camelCase naming is recommended, but not enforced. ## Exceptions -`:global` switches to global scope for the current selector resp. identifier. `:global(.xxx)` resp. `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. +`:global` switches to global scope for the current selector respective identifier. `:global(.xxx)` respective `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. -Similar `:local` and `:local(...)` for local scope. +Similarly, `:local` and `:local(...)` for local scope. -If the selector is switched into global mode, global mode is also activated for the rules. (this allows to make `animation: abc;` local) +If the selector is switched into global mode, global mode is also activated for the rules. (This allows us to make `animation: abc;` local.) Example: `.localA :global .global-b .global-c :local(.localD.localE) .global-d` From 9922d6ec376261022fbdc461f3ca06e9623c82b3 Mon Sep 17 00:00:00 2001 From: Juan Carlos Medina Date: Fri, 27 Oct 2017 11:41:14 -0700 Subject: [PATCH 20/28] Documentation on `from global` (#270) Composing from global class names --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 389a632..f76ba01 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ It's possible to compose multiple classes with `composes: classNameA classNameB; ## Dependencies +### Composing from other files + It's possible to compose class names from other **CSS Modules**. ``` css @@ -74,6 +76,15 @@ Note that composing should not form a circular dependency. Elsewise it's *undefi Best if classes do a single thing and dependencies are hierarchic. +### Composing from global class names + +It's possible to compose from **global** class names. + +```css +.otherClassName { + composes: globalClassName from global; +} +``` ## Usage with preprocessors From a7c1f15c88dcfc44a9979550e62e1a4427e6bc3a Mon Sep 17 00:00:00 2001 From: wu0792 Date: Fri, 29 Dec 2023 04:13:56 +0800 Subject: [PATCH 21/28] docs: Fix typo (#372) --- docs/local-scope.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/local-scope.md b/docs/local-scope.md index 83b60b1..bec00e9 100644 --- a/docs/local-scope.md +++ b/docs/local-scope.md @@ -10,7 +10,7 @@ The first and most fundamental feature of CSS Modules is that class selectors, b .pullquote {} ``` -the classes `backdrop`, `field` & `pullquote` are *local to that file*. That means they don't pollute the global namespace, so you're free to use any name you like. You compile them by importing or requiring them in your JS file. These examples will be using React syntax, but of course it's not tied to React in any particular way. +the classes `backdrop`, `prompt` & `pullquote` are *local to that file*. That means they don't pollute the global namespace, so you're free to use any name you like. You compile them by importing or requiring them in your JS file. These examples will be using React syntax, but of course it's not tied to React in any particular way. ```js import styles from "./style.css" From c8490507959cb6d8b3989531dc96bf6334c19f91 Mon Sep 17 00:00:00 2001 From: Krishna Kakade Date: Fri, 29 Dec 2023 01:44:40 +0530 Subject: [PATCH 22/28] docs: Update README (#366) --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f76ba01..f552e5d 100644 --- a/README.md +++ b/README.md @@ -107,6 +107,8 @@ i. e. with less.js * No more conflicts. * Explicit dependencies. * No global scope. +* Using CSS Modules generates random CSS classes when displayed in the browser. +* You can use the same CSS class in multiple CSS files ## Examples From 455adf535756ff597a0e3972e92c10d6b5beab3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmad=20Awais=20=E2=9A=A1=EF=B8=8F?= Date: Thu, 28 Dec 2023 12:15:03 -0800 Subject: [PATCH 23/28] docs: fix typo (#354) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f552e5d..75c42f0 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # CSS Modules -A **CSS Module** is a CSS file in which all class names and animation names are scoped locally by default. All URLs (`url(...)`) and `@imports` are in module request format (`./xxx` and `../xxx` means relative, `xxx` and `xxx/yyy` means in modules folder, i. e. in `node_modules`). +A **CSS Module** is a CSS file in which all class names and animation names are scoped locally by default. All URLs (`url(...)`) and `@imports` are in module request format (`./xxx` and `../xxx` means relative, `xxx` and `xxx/yyy` means in modules folder, i.e. in `node_modules`). CSS Modules compile to a low-level interchange format called ICSS or [Interoperable CSS](https://github.com/css-modules/icss), but are written like normal CSS files: From 34f0364dd3127915a7b98d65848cae154bc7ac78 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 28 Dec 2023 15:13:43 -0600 Subject: [PATCH 24/28] Update documentation. (#402) --- README.md | 146 ++++------------------------ docs/composition.md | 96 +++++++++++++++++- docs/css-modules-with-angular.js.md | 64 ------------ docs/css-modules-with-react.md | 43 -------- docs/examples.md | 16 --- docs/get-started.md | 64 +++++++++--- docs/history.md | 14 +++ docs/import-multiple-css-modules.md | 41 ++++---- docs/local-scope.md | 29 +++--- docs/naming.md | 7 ++ docs/pseudo-class-selectors.md | 21 ++-- docs/theming.md | 56 ++++++----- docs/values-variables.md | 21 ++-- 13 files changed, 267 insertions(+), 351 deletions(-) delete mode 100644 docs/css-modules-with-angular.js.md delete mode 100644 docs/css-modules-with-react.md delete mode 100644 docs/examples.md create mode 100644 docs/history.md create mode 100644 docs/naming.md diff --git a/README.md b/README.md index 75c42f0..fb21812 100644 --- a/README.md +++ b/README.md @@ -2,146 +2,38 @@ # CSS Modules -A **CSS Module** is a CSS file in which all class names and animation names are scoped locally by default. All URLs (`url(...)`) and `@imports` are in module request format (`./xxx` and `../xxx` means relative, `xxx` and `xxx/yyy` means in modules folder, i.e. in `node_modules`). +A **CSS Module** is a CSS file where all class names and animation names are scoped locally by default. All URLs (`url(...)`) and `@imports` are in module request format (`./xxx` and `../xxx` means relative, `xxx` and `xxx/yyy` means in modules folder, i.e. in `node_modules`). -CSS Modules compile to a low-level interchange format called ICSS or [Interoperable CSS](https://github.com/css-modules/icss), but are written like normal CSS files: +CSS Modules compile to a low-level interchange format called ICSS (or [Interoperable CSS](https://github.com/css-modules/icss)) but are written like normal CSS files: -``` css +```css /* style.css */ .className { color: green; } ``` -When importing the **CSS Module** from a JS Module, it exports an object with all mappings from local names to global names. +When importing a **CSS Module** from a JavaScript Module, it exports an object with all mappings from local names to global names. -``` js -import styles from "./style.css"; -// import { className } from "./style.css"; +```js +import styles from './style.css'; element.innerHTML = '
'; ``` -## Naming - -For local class names camelCase naming is recommended, but not enforced. - -> This is recommended because the common alternative, kebab-casing may cause unexpected behavior when trying to access style.class-name as a dot notation. You can still work around kebab-case with bracket notation (eg. `style['class-name']`) but `style.className` is cleaner. - -## Exceptions - -`:global` switches to global scope for the current selector respective identifier. `:global(.xxx)` respective `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. - -Similarly, `:local` and `:local(...)` for local scope. - -If the selector is switched into global mode, global mode is also activated for the rules. (This allows us to make `animation: abc;` local.) - -Example: `.localA :global .global-b .global-c :local(.localD.localE) .global-d` - -## Composition - -It's possible to compose selectors. - -``` css -.className { - color: green; - background: red; -} - -.otherClassName { - composes: className; - color: yellow; -} -``` - -There can be multiple `composes` rules, but `composes` rules must be before other rules. Extending works only for local-scoped selectors and only if the selector is a single class name. When a class name composes another class name, the **CSS Module** exports both class names for the local class. This can add up to multiple class names. - -It's possible to compose multiple classes with `composes: classNameA classNameB;`. - -## Dependencies - -### Composing from other files - -It's possible to compose class names from other **CSS Modules**. - -``` css -.otherClassName { - composes: className from "./style.css"; -} -``` - -Note that when composing multiple classes from different files the order of appliance is *undefined*. Make sure to not define different values for the same property in multiple class names from different files when they are composed in a single class. - -Note that composing should not form a circular dependency. Elsewise it's *undefined* whether properties of a rule override properties of a composed rule. The module system may emit an error. - -Best if classes do a single thing and dependencies are hierarchic. - -### Composing from global class names - -It's possible to compose from **global** class names. - -```css -.otherClassName { - composes: globalClassName from global; -} -``` - -## Usage with preprocessors - -Preprocessors can make it easy to define a block global or local. - -i. e. with less.js - -``` less -:global { - .global-class-name { - color: green; - } -} -``` - -## Why? - -**modular** and **reusable** CSS! - -* No more conflicts. -* Explicit dependencies. -* No global scope. -* Using CSS Modules generates random CSS classes when displayed in the browser. -* You can use the same CSS class in multiple CSS files - -## Examples - -* [css-modules/webpack-demo](https://github.com/css-modules/webpack-demo) -* [outpunk/postcss-modules-example](https://github.com/outpunk/postcss-modules-example) -* [Theming](docs/theming.md) -* [css-modules/browserify-demo](https://github.com/css-modules/browserify-demo) -* [x-team/starting-css-modules](https://github.com/x-team/starting-css-modules) - -## History - -* 04/2015: `placeholders` feature in css-loader (webpack) allows local scoped selectors (later renamed to `local scope`) by @sokra -* 05/2015: `postcss-local-scope` enables `local scope` by default (see [blog post](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284)) by @markdalgleish -* 05/2015: `extends` feature in css-loader allow to compose local or imported class names by @sokra -* 05/2015: First CSS Modules spec document and github organization with @sokra, @markdalgleish and @geelen -* 06/2015: `extends` renamed to `composes` -* 06/2015: PostCSS transformations to transform CSS Modules into an intermediate format (ICSS) -* 06/2015: Spec for ICSS as common implementation format for multiple module systems by @geelen -* 06/2015: Implementation for jspm by @geelen and @guybedford -* 06/2015: Implementation for browserify by @joshwnj, @joshgillies and @markdalgleish -* 06/2015: webpack's css-loader implementation updated to latest spec by @sokra - - -## Implementations - -### webpack - -Webpack's [css-loader](https://github.com/webpack/css-loader) in module mode replaces every local-scoped identifier with a global unique name (hashed from module name and local identifier by default) and exports the used identifier. - -Extending adds the source class name(s) to the exports. +## Table of Contents -Extending from other modules first imports the other module and then adds the class name(s) to the exports. +- [Get Started & Examples](/docs/get-started.md) +- [Naming](/docs/naming.md) +- [Composition](/docs/composition.md) +- [Local Scope](/docs/local-scope.md) +- [History](/docs/history.md) +- [Pseudo Class Selectors](/docs/pseudo-class-selectors.md) +- [Theming](/docs/theming.md) -### Server-side and static websites +## Why CSS Modules? -[PostCSS-Modules](https://github.com/outpunk/postcss-modules) allows to use CSS Modules for static builds and the server side with Ruby, PHP or any other language or framework. +- **Local Scope Prevents Clashes:** CSS Modules use local scope to avoid style conflicts across different project parts, allowing component-scoped styling. +- **Clear Style Dependencies:** Importing styles into their respective components clarifies which styles impact which areas, enhancing code readability and maintenance. +- **Solves Global Scope Problems:** CSS Modules prevent the common issue of styles in one file affecting the entire project by localizing styles to specific components. +- **Boosts Reusability and Modularity:** CSS Modules allow the same class names in different modules, promoting modular, reusable styling. diff --git a/docs/composition.md b/docs/composition.md index 7f4d75e..4d73266 100644 --- a/docs/composition.md +++ b/docs/composition.md @@ -2,9 +2,9 @@ # Composition -It's possible to compose selectors. +You can compose selectors together with `composes`: -``` css +```css .className { color: green; background: red; @@ -14,4 +14,94 @@ It's possible to compose selectors. composes: className; color: yellow; } -``` \ No newline at end of file +``` + +There can be multiple `composes` rules, but `composes` rules must be before other rules. Extending works only for local-scoped selectors and only if the selector is a single class name. When a class name composes another class name, the **CSS Module** exports both class names for the local class. This can add up to multiple class names. + +It's also possible to compose multiple classes with `composes: classNameA classNameB;`. + +### Pseudo classes + +Classes which have pseudo selectors attached will be brought along when used in +a `composes` statement. + +In the example below, `otherClassName` will also be given the `:hover` pseudo +class defined on `className`. + +```css +.className { + color: green; +} + +.className:hover { + color: red; +} + +.otherClassName { + composes: className; + background: black; +} +``` + +`otherClassName` above is the same as defining: + +```css +.otherClassName { + color: green; + background: black; +} + +.otherClassName:hover { + color: red; +} +``` + +## Dependencies + +### Composing from other files + +It's possible to compose class names from other **CSS Modules**. + +```css +.otherClassName { + composes: className from './style.css'; +} +``` + +When composing multiple classes from different files, the order of appliance is _undefined_. Do not define different values for the same property in multiple class names from different files when they are composed in a single class. + +Composing should not form a circular dependency. Otherwise, it's _undefined_ whether properties of a rule override properties of a composed rule. The module system may emit an error. + +We recommend that classes do a single thing and dependencies are hierarchic. + +### Composing from global class names + +It's possible to compose from **global** class names. + +```css +.otherClassName { + composes: globalClassName from global; +} +``` + +## Exceptions + +`:global` switches to global scope for the current selector respective identifier. `:global(.xxx)` respective `@keyframes :global(xxx)` declares the stuff in parenthesis in the global scope. + +Similarly, `:local` and `:local(...)` for local scope. + +```css +:global(.some-selector) { + /* ... */ +} +``` + +If the selector is switched into global mode, global mode is also activated for the rules. (This allows us to make `animation: abc;` local.) + +Example: `` + +```css +.localA :global .global-b .global-c :local(.localD.localE) .global-d { + /* ... */ +} +``` diff --git a/docs/css-modules-with-angular.js.md b/docs/css-modules-with-angular.js.md deleted file mode 100644 index 6313729..0000000 --- a/docs/css-modules-with-angular.js.md +++ /dev/null @@ -1,64 +0,0 @@ - - -# CSS Modules with Angular.js - -```css -.bacon { /* ... */ } -.pancakes { /* ... */ } -``` - -```js -import styles from "./component.css" - -class MyController { - constructor($scope) { - $scope.styles = styles; - } -} - -angular.module('myApp').controller('MyController', ['$scope', MyController]) -``` - -```html -
-
-
-

pancakes (2-way binding)

-

bacon

- -
-
-
-``` - ---- - -## CSS Modules with angular.js 1.5 component - -```css -.content { /* ... */ } -.bacon { /* ... */ } -.pancakes { /* ... */ } -``` - -```js -import angular from 'angular' -import styles from './index.css' - -const template = ` -
-
pancakes
-
bacon
-
-`; - -angular - .module('app', []) - .component('myComponent', { - template - }); -``` - -**This needs expansion/revision by someone who really knows angular. Maybe that's you!** - -- [ ] Angular 2.0 syntax diff --git a/docs/css-modules-with-react.md b/docs/css-modules-with-react.md deleted file mode 100644 index 2f32c72..0000000 --- a/docs/css-modules-with-react.md +++ /dev/null @@ -1,43 +0,0 @@ - - -# CSS Modules with React - -**Demo.js** - -```jsx -import React from 'react' -import CSSModules from 'react-css-modules' -/* import your css modules styles for the component */ -import styles from './Demo.css' - -function Demo( props) { - - const { route } = props - - return ( -
- -
- ) -} - -export default CSSModules(Demo, styles, {allowMultiple: true} ) -``` - -**index.js** - -```jsx -import React from 'react' -import ReactDOM from 'react-dom' -import Demo from './components/Demo' - -function App(props) { - return ( -
- -
- ) -} - -ReactDOM.render(React.createElement(App), document.getElementById('root')) -``` diff --git a/docs/examples.md b/docs/examples.md deleted file mode 100644 index 7cb0400..0000000 --- a/docs/examples.md +++ /dev/null @@ -1,16 +0,0 @@ - - -# Examples - -As we find examples in the wild, we'll add them here (or edit this and add a PR). - -## Boilerplates - -- [ultimate hot reloading example](https://github.com/glenjamin/ultimate-hot-reloading-example) by Glen Mailer -- [neob](https://github.com/juliocesar/neob) by Julio Ody -- [ng-modular](https://github.com/nkbt/ng-modular) by Nik Butenko -- [angular-cssmodules-example-app](https://github.com/jonathaningram/angular-cssmodules-example-app) by Jonathan Ingram - -## Example projects - -* [cssmodul.es](https://github.com/StevenIseki/cssmodul.es) - search for css modules on npm diff --git a/docs/get-started.md b/docs/get-started.md index 511477e..1018cd0 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -4,30 +4,66 @@ CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS. -There are currently 4 ways to integrate CSS Modules into your project. You should look to each of these projects for more detailed setup instructions. +## Tools + +### Bun + +Bun supports CSS Modules. [Learn more](https://bun.sh/docs/bundler). + +### Lightning CSS + +Lightning CSS supports almost all features of CSS Modules. [Learn more](https://lightningcss.dev/css-modules.html). + +### Parcel + +Parcel supports CSS Modules. [Learn more](https://parceljs.org/languages/css/#css-modules). + +### PostCSS + +PostCSS supports CSS Modules through the plugin `postcss-modules`. [Learn more](https://www.npmjs.com/package/postcss-modules). + +### Rspack + +Rspack supports CSS Modules. [Learn more](https://www.rspack.dev/guide/language-support#css-modules). ### Webpack -The [css-loader](https://github.com/webpack/css-loader) has CSS Modules built-in. Simply activate it by using the `?modules` flag. We maintain an example project using this at [css-modules/webpack-demo](https://github.com/css-modules/webpack-demo). +The [css-loader](https://github.com/webpack/css-loader) has CSS Modules built-in. Simply activate it by using the `?modules` flag. We maintain an example project using this at [css-modules/webpack-demo](https://css-modules.github.io/webpack-demo/). + +### Vite + +Vite supports CSS Modules through Lightning CSS. [Learn more](https://vitejs.dev/guide/features#css-modules). + +## Frameworks + +### Angular + +Angular supports CSS Modules through `postcss-modules` and `posthtml-css-modules`. [Learn more](https://angularindepth.com/posts/1294/angular-css-modules). + +### Astro + +Astro supports CSS Modules. [Learn more](https://docs.astro.build/en/guides/styling/). + +### Create React App + +Create React App supports CSS Modules. [Learn more](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/). -### Browserify +### Next.js -The plugin [css-modulesify](https://github.com/css-modules/css-modulesify) gives your Browserify build the ability to `require` a CSS file and compile it as a CSS Module. For an example project using this setup, check out [css-modules/browserify-demo](https://github.com/css-modules/browserify-demo). +Next.js supports CSS Modules for both webpack and Turbopack (`next dev --turbo`). [Learn more](https://nextjs.org/docs/app/building-your-application/styling/css-modules). -### JSPM +### Nuxt -The experimental JSPM loader [jspm-loader-css-modules](https://github.com/geelen/jspm-loader-css-modules) adds CSS Modules support to SystemJS & JSPM. There's a simple project using this at [css-modules/jspm-demo](https://github.com/css-modules/jspm-demo). - -### NodeJS +Solid supports CSS Modules. [Learn more](https://nuxt.com/docs/getting-started/styling#css-modules). -The [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook) works similarly to the Browserify plugin, but patches NodeJS's `require` to interpret CSS files as CSS Modules. This gives complete flexibility in how the output is handled, ideal for server-side rendering. +### Remix -## Language integrations +Remix supports CSS Modules. [Learn more](https://remix.run/docs/en/main/styling/css-modules). -### React +### Solid -If you're using React, CSS Modules is a great fit. [react-css-modules](https://github.com/gajus/react-css-modules) adds a `CSSModules` higher-order component or `@CSSModules` annotation for better integrating CSS Modules & React. +Solid supports CSS Modules. [Learn more](https://docs.solidjs.com/guides/how-to-guides/styling-in-solid/css-modules). -### Deku +### Svelte -If you're using Deku, CSS Modules is an awesome fit. [deku-css-modules](https://github.com/StevenIseki/deku-css-modules) allows for easy integration of CSS Modules & Deku. +Svelte supports CSS Modules through the preprocessor `svelte-preprocess-cssmodules`. [Learn more](https://github.com/micantoine/svelte-preprocess-cssmodules). diff --git a/docs/history.md b/docs/history.md new file mode 100644 index 0000000..e92710a --- /dev/null +++ b/docs/history.md @@ -0,0 +1,14 @@ + + +# History + +- 04/2015: `placeholders` feature in css-loader (webpack) allows local scoped selectors (later renamed to `local scope`) by @sokra +- 05/2015: `postcss-local-scope` enables `local scope` by default (see [blog post](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284)) by @markdalgleish +- 05/2015: `extends` feature in css-loader allow to compose local or imported class names by @sokra +- 05/2015: First CSS Modules spec document and github organization with @sokra, @markdalgleish and @geelen +- 06/2015: `extends` renamed to `composes` +- 06/2015: PostCSS transformations to transform CSS Modules into an intermediate format (ICSS) +- 06/2015: Spec for ICSS as common implementation format for multiple module systems by @geelen +- 06/2015: Implementation for jspm by @geelen and @guybedford +- 06/2015: Implementation for browserify by @joshwnj, @joshgillies and @markdalgleish +- 06/2015: webpack's css-loader implementation updated to latest spec by @sokra diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md index 3ce46a3..0eccfd7 100644 --- a/docs/import-multiple-css-modules.md +++ b/docs/import-multiple-css-modules.md @@ -6,10 +6,10 @@ You can import multiple css modules into a component or function using `Object.a For example if you import a button css modules to your Demo component, add this to the components default styles. ```js -let styles = {} -import demo from './Demo.css' -import fancyButton from 'css-fancy-button' -Object.assign(styles, fancyButton, demo) +let styles = {}; +import demo from './Demo.css'; +import fancyButton from 'css-fancy-button'; +Object.assign(styles, fancyButton, demo); ``` You can even import css modules installed from npm. e.g. [pure-css](https://github.com/StevenIseki/pure-css) @@ -21,28 +21,27 @@ npm install pure-css --save-dev Then in your component... start using pure css styles. ```js -import { buttons, grids } from 'pure-css' +import { buttons, grids } from 'pure-css'; ``` A full example of a demo component with 2 css modules imported. ```jsx -import React from 'react' -let styles = {} -import demo from './Demo.css' -import fancyButton from 'css-fancy-button' -Object.assign(styles, fancyButton, demo) - -function Demo( props) { - - const { route } = props; - - return ( -
- -
- ); +import React from 'react'; +let styles = {}; +import demo from './Demo.css'; +import fancyButton from 'css-fancy-button'; +Object.assign(styles, fancyButton, demo); + +function Demo(props) { + const { route } = props; + + return ( +
+ +
+ ); } -export default Demo +export default Demo; ``` diff --git a/docs/local-scope.md b/docs/local-scope.md index bec00e9..8734ce7 100644 --- a/docs/local-scope.md +++ b/docs/local-scope.md @@ -2,27 +2,30 @@ # CSS Modules — Local Scope -The first and most fundamental feature of CSS Modules is that class selectors, by default, are **local**. So, if you write: +CSS Modules have class selectors scoped locally by default. For example, the following classes `backdrop`, `prompt` & `pullquote` are _local to that file_. ```css -.backdrop {} -.prompt {} -.pullquote {} +.backdrop { +} +.prompt { +} +.pullquote { +} ``` -the classes `backdrop`, `prompt` & `pullquote` are *local to that file*. That means they don't pollute the global namespace, so you're free to use any name you like. You compile them by importing or requiring them in your JS file. These examples will be using React syntax, but of course it's not tied to React in any particular way. +They do not pollute the global namespace, so you're free to use any name you like. You compile them by importing or requiring them in your JavaScript file. ```js -import styles from "./style.css" +import styles from './style.css'; -const Component = props => { +export function Component(props) { return (
-
-
-
-
-
- ) +
+
+
+ ); } ``` + +> **Note:** These examples use React syntax, but of course it's not tied to React in any particular way. diff --git a/docs/naming.md b/docs/naming.md new file mode 100644 index 0000000..3db523f --- /dev/null +++ b/docs/naming.md @@ -0,0 +1,7 @@ + + +# Naming + +We recommend camelCase for local class names. + +While not enforced, camelCase is preferred as kebab-case may cause unexpected behavior when trying to access `style.class-name` with dot notation. You can still work around kebab-case with bracket notation (e.g. `style['class-name']`) but `style.className` is preferred. diff --git a/docs/pseudo-class-selectors.md b/docs/pseudo-class-selectors.md index 6824fc5..ef94cef 100644 --- a/docs/pseudo-class-selectors.md +++ b/docs/pseudo-class-selectors.md @@ -2,7 +2,7 @@ # Pseudo class selectors -Because css modules works by adding classes to your elements you can easily add pseudo class selectors. +CSS Modules also support adding pseudo class selectors: ```css /* component/text.css */ @@ -10,23 +10,18 @@ Because css modules works by adding classes to your elements you can easily add color: #777; font-weight: 24px; } + .text:hover { color: #f60; } ``` -``` js + +```js /* component/text.js */ import styles from './text.css'; +import React from 'react'; -import React, { Component } from 'react'; - -export default class Text extends Component { - - render() { - return ( -

Text with hover

- ); - } - -}; +export function Text() { + return

Text with hover

; +} ``` diff --git a/docs/theming.md b/docs/theming.md index f43c057..702f067 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -4,43 +4,45 @@ Instead of importing a style in the component, the component can take a style as property. This way different themes can be used. The user can even define custom themes. -``` css +```css /* component/theme-a.css */ -.outer { background: green; } -.inner { color: blue; } +.outer { + background: green; +} +.inner { + color: blue; +} ``` -``` css +```css /* component/theme-b.css */ -.outer { background: red; } -.inner { color: yellow; } +.outer { + background: red; +} +.inner { + color: yellow; +} ``` -``` js +```js /* component/index.js */ -export default class Component { - constructor(theme) { - this.theme = theme; - } - render() { - var theme = this.theme; - return '
' + - '
' + - '
'; - } +export function Component({ theme }) { + return ( +
+
+
+ ); } ``` -``` js -/* application */ -import themeA from "component/theme-a.css"; -import themeB from "component/theme-b.css"; -import customTheme from "./custom-theme.css"; +```js +import themeA from 'component/theme-a.css'; +import themeB from 'component/theme-b.css'; +import customTheme from './custom-theme.css'; -import Component from "component"; +import {Component} from 'component'; -// use the Component -new Component(themeA); -new Component(themeB); -new Component(customTheme); + + + ``` diff --git a/docs/values-variables.md b/docs/values-variables.md index 4a61cfd..df74dd4 100644 --- a/docs/values-variables.md +++ b/docs/values-variables.md @@ -44,20 +44,21 @@ module.exports = { output: { filename: 'bundle.js', path: path.join(__dirname, 'public'), - publicPath: '/public/' + publicPath: '/public/', }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, - { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') } - ] + { + test: /\.css$/, + loader: ExtractTextPlugin.extract( + 'style-loader', + 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader' + ), + }, + ], }, - postcss: [ - values - ], - plugins: [ - new ExtractTextPlugin('style.css', { allChunks: true }) - ] - + postcss: [values], + plugins: [new ExtractTextPlugin('style.css', { allChunks: true })], }; ``` From d02871d92ff90b17675671f5dabe9257e992c2b7 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 28 Dec 2023 15:17:32 -0600 Subject: [PATCH 25/28] More small docs cleanup. --- docs/import-multiple-css-modules.md | 15 ++++++--------- docs/naming.md | 2 +- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md index 0eccfd7..477e9b8 100644 --- a/docs/import-multiple-css-modules.md +++ b/docs/import-multiple-css-modules.md @@ -2,8 +2,9 @@ # Import multiple css modules into a component -You can import multiple css modules into a component or function using `Object.assign` -For example if you import a button css modules to your Demo component, add this to the components default styles. +You can import multiple CSS Modules into a component or function using `Object.assign`. + +For example, if you import a button CSS Module to your `Demo` component, add this to the components default styles. ```js let styles = {}; @@ -18,7 +19,7 @@ You can even import css modules installed from npm. e.g. [pure-css](https://gith npm install pure-css --save-dev ``` -Then in your component... start using pure css styles. +Then in your component, start using pure CSS styles. ```js import { buttons, grids } from 'pure-css'; @@ -33,15 +34,11 @@ import demo from './Demo.css'; import fancyButton from 'css-fancy-button'; Object.assign(styles, fancyButton, demo); -function Demo(props) { - const { route } = props; - +export default function Demo() { return (
- +
); } - -export default Demo; ``` diff --git a/docs/naming.md b/docs/naming.md index 3db523f..d9ccc22 100644 --- a/docs/naming.md +++ b/docs/naming.md @@ -4,4 +4,4 @@ We recommend camelCase for local class names. -While not enforced, camelCase is preferred as kebab-case may cause unexpected behavior when trying to access `style.class-name` with dot notation. You can still work around kebab-case with bracket notation (e.g. `style['class-name']`) but `style.className` is preferred. +While not enforced, camelCase is preferred as kebab-case may cause unexpected behavior when trying to access `styles.class-name` with dot notation. You can still work around kebab-case with bracket notation (e.g. `styles['class-name']`) but `styles.className` is preferred. From 68d456fec5ba47162e2e326ec6d7198afa443ea5 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 28 Dec 2023 15:19:09 -0600 Subject: [PATCH 26/28] Add Ember to list of frameworks. --- docs/get-started.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/get-started.md b/docs/get-started.md index 1018cd0..418d39d 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -48,6 +48,10 @@ Astro supports CSS Modules. [Learn more](https://docs.astro.build/en/guides/styl Create React App supports CSS Modules. [Learn more](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/). +### Ember + +Ember supports CSS Modules through `ember-css-modules`. [Learn more](https://github.com/salsify/ember-css-modules). + ### Next.js Next.js supports CSS Modules for both webpack and Turbopack (`next dev --turbo`). [Learn more](https://nextjs.org/docs/app/building-your-application/styling/css-modules). From 8d754656a1307daf7a6ca5abe6afb27fa930ab2c Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 28 Dec 2023 15:25:37 -0600 Subject: [PATCH 27/28] P0: Dark mode logo support in README. (#403) --- README.md | 6 +++++- docs/composition.md | 6 +++++- docs/get-started.md | 6 +++++- docs/history.md | 6 +++++- docs/import-multiple-css-modules.md | 6 +++++- docs/local-scope.md | 6 +++++- docs/naming.md | 6 +++++- docs/pseudo-class-selectors.md | 6 +++++- docs/theming.md | 6 +++++- docs/values-variables.md | 6 +++++- 10 files changed, 50 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index fb21812..ad23694 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # CSS Modules diff --git a/docs/composition.md b/docs/composition.md index 4d73266..f30e87e 100644 --- a/docs/composition.md +++ b/docs/composition.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Composition diff --git a/docs/get-started.md b/docs/get-started.md index 418d39d..c2e9822 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Setting up CSS Modules diff --git a/docs/history.md b/docs/history.md index e92710a..1ba1285 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # History diff --git a/docs/import-multiple-css-modules.md b/docs/import-multiple-css-modules.md index 477e9b8..de77da7 100644 --- a/docs/import-multiple-css-modules.md +++ b/docs/import-multiple-css-modules.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Import multiple css modules into a component diff --git a/docs/local-scope.md b/docs/local-scope.md index 8734ce7..2d6180b 100644 --- a/docs/local-scope.md +++ b/docs/local-scope.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # CSS Modules — Local Scope diff --git a/docs/naming.md b/docs/naming.md index d9ccc22..0730c38 100644 --- a/docs/naming.md +++ b/docs/naming.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Naming diff --git a/docs/pseudo-class-selectors.md b/docs/pseudo-class-selectors.md index ef94cef..8d17466 100644 --- a/docs/pseudo-class-selectors.md +++ b/docs/pseudo-class-selectors.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Pseudo class selectors diff --git a/docs/theming.md b/docs/theming.md index 702f067..63d574b 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Theming diff --git a/docs/values-variables.md b/docs/values-variables.md index df74dd4..17bf006 100644 --- a/docs/values-variables.md +++ b/docs/values-variables.md @@ -1,4 +1,8 @@ - + + + + CSS Modules Logo + # Exporting values variables From c7bf6c02472fdce4dd8e569abc10d2aeb234e1c2 Mon Sep 17 00:00:00 2001 From: Chukwuezugo Date: Sat, 23 Mar 2024 20:21:21 +0200 Subject: [PATCH 28/28] Update get-started.md (#409) Minor typo correction --- docs/get-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/get-started.md b/docs/get-started.md index c2e9822..7f48a35 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -62,7 +62,7 @@ Next.js supports CSS Modules for both webpack and Turbopack (`next dev --turbo`) ### Nuxt -Solid supports CSS Modules. [Learn more](https://nuxt.com/docs/getting-started/styling#css-modules). +Nuxt supports CSS Modules. [Learn more](https://nuxt.com/docs/getting-started/styling#css-modules). ### Remix